ui-designer

Generate and serve live HTML/CSS/JS UI designs from natural language prompts. Use when the user asks to design, create, build, or prototype a website, landing page, UI, dashboard, web page, or frontend mockup. Also triggers on requests to update, tweak, or iterate on a previously generated design. Replaces traditional UI design + frontend dev workflow.

16 stars

bydiegosouzapw

View on GitHub Installation ↓

Best use case

ui-designer is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Teams using ui-designer should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/ui-designer/SKILL.md --create-dirs "https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/main/skills/design/ui-designer/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/ui-designer/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How ui-designer Compares

Feature / Agent	ui-designer	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# UI Designer

Generate production-quality React pages from natural language, serve live, iterate until satisfied.

## Setup

Check TOOLS.md for `### UI Designer` config. If missing, run first-time setup:
1. Ask user which port (default: 5174)
2. Run: `bash scripts/setup.sh <port>`
3. Save config to TOOLS.md

## Project Structure

```
<serve_dir>/
├── project-a/
│   ├── project.json       (config: name, preferences, design system, pages)
│   ├── assets/             (images, converted to .webp)
│   ├── landing/index.html  (React page via CDN)
│   └── about/index.html
```

### React Page Template (CDN, no build step)
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    function App() { return <div>...</div>; }
    ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  </script>
</body>
</html>
```

## Workflow

**Critical: Message the user at EVERY action — not just milestones. If you're reading a file, say "Reading project config...". If you're writing HTML, say "Writing bounty page...". If you're taking a screenshot, say "Taking screenshot...". The user should never wonder what you're doing. Treat it like a live build log.**

### Step 1: Project Name
Ask: "What's the project name?"
- If `<serve_dir>/<project>/` exists: read `project.json`, show current setup and existing pages, ask if amending or adding
- If new: create directory + `project.json`
- **→ Message user: "Project created / loaded ✓"**

### Step 2: Preferences (new or amending)
Ask about design preferences (style, font, colors, brand assets).
Save to `project.json`.
- **→ Message user: "Preferences saved ✓"**

### Step 3: Page Slug
Ask: "What slug for this page?"
- Check if exists → ask to overwrite or new
- **→ Message user: "Slug confirmed: /<slug> ✓"**

### Step 4: Design Details & Design System
Ask about page content + design system (see Design Principles below).
Update `project.json` with design system details.
- **→ Message user: "Got it, generating now..."**

### Step 5: Generate
Generate the React page. Apply Design Principles strictly.
- **→ Message user: "HTML generated, running visual review..."**

### Step 6: Screenshot Review Loop
```bash
bash scripts/screenshot.sh "http://localhost:<port>/<project>/<slug>/" /tmp/<slug>-review.png 1400 900
```
Analyze with `image` tool. Fix issues. Re-screenshot. Also check mobile (width=390).
- **→ Message user: "Review done, sending preview..."**

**Do at least one desktop + one mobile review pass before sharing.**

### Step 7: Share and Iterate
Send live URL + screenshot to user.
Ask for feedback. Apply changes → re-screenshot → share. Repeat.
- **→ Keep user informed at every iteration step**

### Step 8: Media Assets
If user provides images:
1. Save to `<project>/assets/`
2. Convert to .webp: `bash scripts/convert-image.sh <input> <output.webp> [quality]`
3. Reference in HTML as `../assets/filename.webp`
- **→ Message user: "Image converted: 1.2MB → 340KB (72% smaller) ✓"**

### Step 9: Export
Zip the project folder and send:
```bash
cd <serve_dir> && zip -r /tmp/<project>.zip <project>/
```
Send zip via message tool with `filePath`. The CDN-based React pages work standalone — just open `index.html` or serve with any static server.

## Image Handling

Convert all user-provided images to `.webp` for performance:
```bash
bash scripts/convert-image.sh input.png output.webp 80
```
- Default quality: 80 (good balance of quality/size)
- For hero/banner images: quality 85
- For thumbnails/icons: quality 70
- Always report compression savings to user

For placeholder images during prototyping:
- Photos: `https://picsum.photos/seed/<name>/<width>/<height>`
- Solid placeholders: `https://placehold.co/<width>x<height>/<bg>/<text>`

## Design Principles

Apply these consistently to every generated page. These are non-negotiable quality standards.

### Layout & Spacing
- **Use consistent spacing scale** — stick to Tailwind's scale (4, 6, 8, 12, 16, 20, 24). Don't mix random values.
- **Max content width** — always constrain content (max-w-5xl or max-w-6xl). Never let text run full-width.
- **Vertical rhythm** — consistent gaps between sections (py-16 for sections, py-8 for subsections).
- **Padding on mobile** — minimum px-4 on all containers. Text must never touch screen edges.

### Typography
- **Clear hierarchy** — h1 largest, then h2, h3. Max 3-4 font sizes per page.
- **Line length** — max 65-75 characters per line for readability. Use max-w-prose or max-w-2xl on text blocks.
- **Font weight contrast** — bold for headings (font-bold/font-semibold), regular for body.
- **Text color hierarchy** — white for headings, gray-300 for body, gray-500 for muted/secondary.

### Color & Contrast
- **WCAG AA minimum** — text must have 4.5:1 contrast against background.
- **Limit palette** — max 1 primary color + 1 accent + neutrals. Don't rainbow.
- **Consistent accent usage** — primary color for CTAs, links, active states only. Don't overuse.
- **Dark backgrounds** — use layered darkness (bg-900 → bg-800 → bg-700) for depth, not flat black.

### Responsive Design
- **Mobile-first** — design for 390px first, enhance for larger screens.
- **Breakpoints** — use sm: (640px), md: (768px), lg: (1024px). Test all three.
- **Touch targets** — buttons/links min 44x44px on mobile.
- **Stack on mobile** — grids collapse to single column. Never horizontal scroll for content.
- **Navigation** — hamburger menu on mobile with slide-down panel. Always include.

### Components & Interactions
- **Icons** — always use SVG, never emoji (emoji break in headless browsers and render inconsistently).
- **Buttons** — clear hover states (color shift + slight scale or shadow). Consistent border-radius.
- **Cards** — subtle border (border-white/5 or border-dark-600), slight bg difference from page bg.
- **Transitions** — add `transition` class to all interactive elements. Duration 150-200ms.
- **Focus states** — all interactive elements must have visible focus rings for accessibility.

### Images & Performance
- **All images in .webp** — convert user images with scripts/convert-image.sh.
- **Lazy loading** — add `loading="lazy"` to images below the fold.
- **Aspect ratios** — use `aspect-video` or `aspect-square` classes to prevent layout shift.
- **Alt text** — every image needs descriptive alt text.

### Code Quality
- **Semantic HTML** — use header, main, section, footer, nav. Not div soup.
- **No Lorem ipsum** — always use contextually relevant placeholder text.
- **React components** — break UI into logical components (Navbar, Hero, Features, etc.).
- **State management** — use useState for interactive elements (tabs, modals, dropdowns).

### Common Mistakes to Avoid
- ❌ Text touching screen edges on mobile
- ❌ Emoji for icons (use SVG)
- ❌ Flat black backgrounds (use layered darks)
- ❌ No hover states on clickable elements
- ❌ Inconsistent border-radius across elements
- ❌ Giant font sizes that overflow on mobile
- ❌ Missing meta viewport tag
- ❌ Forgetting hamburger menu on mobile

Related Skills

ui-ux-designer

from diegosouzapw/awesome-omni-skill

Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools.

resonance-designer

from diegosouzapw/awesome-omni-skill

The Creative Director. Uses the "Visual Engine" and "Topological Betrayal" to generate elite, non-generic design systems.

faion-ui-designer

from diegosouzapw/awesome-omni-skill

UI design: wireframes, prototypes, design systems, visual design.

curriculum-designer

from diegosouzapw/awesome-omni-skill

Helps teachers and instructional designers create a structured curriculum or teaching plan from a list of topics or a specification document. Use when the user wants to design course materials, lesson plans, or a syllabus.

ascii-ui-designer

from diegosouzapw/awesome-omni-skill

Create high-quality ASCII art UI/UX previews for web development with a two-phase approach. Phase 1: Design & Preview - visualize interfaces, explore layouts, refine ideas in ASCII format without code. Phase 2: Implementation - when ready, get HTML/CSS/React code and design tokens. Use for exploring ideas, getting stakeholder feedback, and iterating on design before development.

archetype-designer

from diegosouzapw/awesome-omni-skill

Design and manage TraitorSim agent archetypes with OCEAN personality traits, stat biases, and gameplay profiles. Use when creating new archetypes, modifying personality traits, defining character types, or when asked about archetype design, OCEAN traits, Big Five personality, or character templates.

apple-hig-designer

from diegosouzapw/awesome-omni-skill

Design iOS apps following Apple's Human Interface Guidelines. Generate native components, validate designs, and ensure accessibility compliance for iPhone, iPad, and Apple Watch.

animation-designer

from diegosouzapw/awesome-omni-skill

Expert in web animations, transitions, and motion design using Framer Motion and CSS

algorithm-designer

from diegosouzapw/awesome-omni-skill

Design and document statistical algorithms with pseudocode and complexity analysis

ai-npc-dialogue-designer

from diegosouzapw/awesome-omni-skill

Design AI-powered immersive NPC systems for escape room games using proven actor techniques from Korean immersive escape rooms (Danpyeonsun, Ledasquare). Implements adaptive dialogue, emotional simulation, player profiling, and trust dynamics using Gemini/GPT-4. Creates character profiles with lying probabilities, improvisational responses, and cost-optimized streaming. Use for murder mystery NPCs, suspect interrogation, or dynamic character interactions.

agent-ui-designer

from diegosouzapw/awesome-omni-skill

Expert visual designer specializing in creating intuitive, beautiful, and accessible user interfaces. Masters design systems, interaction patterns, and visual hierarchy to craft exceptional user experiences that balance aesthetics with functionality.

data-designer

from diegosouzapw/awesome-omni-skill

Generate high-quality synthetic datasets using statistical samplers and Claude's native LLM capabilities. Use when users ask to create synthetic data, generate datasets, create fake/mock data, generate test data, training data, or any data generation task. Supports CSV, JSON, JSONL, Parquet output. Adapted from NVIDIA NeMo DataDesigner (Apache 2.0).