# UI Designer

> Extrae design systems de imágenes de referencia y genera prompts listos para implementar. Workflow: imagen → tokens de diseño → PRD → componentes React. Usar cuando: "diseño de UI", "design system", "design tokens", "mockup", "UI kit", "reproducir este diseño", "quiero algo parecido a X", "Figma", "wireframe", "palette de colores", "tipografía del sistema", "me gusta este diseño".

- Skill: `apolo-81/ui-designer` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add apolo-81/ui-designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/apolo-81/ui-designer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Product & Planning
- Author: apolo-81 (https://skillmd.com/u/apolo-81)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/apolo-81/ui-designer

---


# UI Designer

Extract design systems from reference UI images and convert into implementation-ready prompts. Workflow: design system docs > PRD > implementation prompt > React components.

## Workflow

### Step 1: Gather Inputs

- **Reference images**: folder or individual screenshots
- **Project idea file**: product concept (or extract from conversation)
- **Existing PRD** (optional): skip Step 3 if provided

**1 image:** Extract tokens precisely, note inferred vs visible, ask 2-3 clarifying questions.
**Multiple images:** Cross-reference patterns, prioritize consistent values, flag inconsistencies.

### Step 2: Extract Design System

Use Task tool with `assets/design-system.md` template. Attach reference images.

**Extract exhaustively:**

| Category | What to extract |
|----------|----------------|
| Colors | Primary/secondary/accent, backgrounds (page/surface/elevated/overlay), text colors, borders, semantic (success/warning/error/info), dark mode |
| Typography | Families (heading/body/mono), type scale (px/rem), weights, line heights, letter spacing, named styles h1-h6/body/caption/label |
| Spacing | Base unit, full scale used, component padding, section margins |
| Borders & Shape | Radius values (none/sm/md/lg/full + px), border width/style, shadow system (name + CSS), focus ring |
| Components | Buttons (sizes/variants/states), cards, inputs, navigation, badges, icons (library/size) |
| Animation | Default transition duration/easing, hover style |

**Always use specific values** (hex, px, rem) — never "blue" or "medium".

Save to: `documents/designs/{image_dir_name}_design_system.md`

Ver `references/design-system-example.md` para ejemplo de output bien documentado.

### Step 3: Generate MVP PRD (if not provided)

Use Task tool with `assets/app-overview-generator.md`. Replace `{项目背景}` with project concept.

Interact with user to refine. Ask focused questions. Prioritize: core use case, primary action, must-have vs nice-to-have.

Save as variable for Step 4 (optionally to `documents/prd/`).

### Step 4: Compose Final UI Implementation Prompt

Combine design system + PRD using `assets/vibe-design-template.md`:
- `{项目设计指南}` > Design system from Step 2
- `{项目MVP PRD}` > PRD from Step 3

Include: exact hex values, Tailwind class equivalents, component states (default/hover/active/focus/disabled), specific patterns ("cards use shadow-sm with hover:shadow-md transition").

Save to: `documents/ux-design/{idea_file_name}_design_prompt_{timestamp}.md`

### Step 5: Verify React Environment

Check for existing React project. If none:
```bash
npx create-react-app my-app && cd my-app
npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p
npm install lucide-react
```

### Step 6: Implement UI

Use final prompt to create multiple variations (3 mobile, 2 web). Organize: `[solution-name]/pages/[page-name].jsx`. Aggregate in showcase page.

## Template Assets

| Asset | Purpose |
|-------|---------|
| `assets/design-system.md` | Template for extracting visual patterns (colors, typography, components, spacing, shadows, animations) |
| `assets/app-overview-generator.md` | Collaborative PRD generation (elevator pitch, problem, audience, features, UX) |
| `assets/vibe-design-template.md` | Final prompt combining design system + PRD for implementation |

## Key Rules

- Read ALL images before starting analysis
- Look for repeated values (repetition = design system)
- Capture both explicit styles and implicit principles (density, hierarchy)
- Distinguish UI chrome from content areas
- Dark mode is first-class, not afterthought
- Document hover and focus states
- Single image: use best-practice defaults for missing values, mark `[inferred]`
- Multiple images: primary screen = anchor, secondary = fill gaps
- Final prompt quality directly impacts implementation fidelity

---

## Referencias

- `references/design-system-example.md` — Example of well-documented design system output