# Idea2design

> Design idea or text description → complete .design/ directory (DESIGN.md, PAGES.md, COMPONENTS.md, CODE_PATTERNS.md, ICONS.md)

- Skill: `yugasun/idea2design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add yugasun/idea2design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yugasun/idea2design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: yugasun (https://skillmd.com/u/yugasun)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/yugasun/idea2design

---


# /idea2design

Generate a complete design specification from a text description — producing a `.design/` directory with structured markdown specs, ready for AI-driven UI generation. No Figma required.

Use this when you have a design concept, brand brief, or product description but no Figma file yet.

> **Have a Figma file?** Use `/figma2design <url>` instead — it also extracts screenshots, brand assets, and custom icons.

## Usage

```text
/idea2design                     # interactive: prompts for design requirements
/idea2design "SaaS dashboard…"   # inline: generate from a short brief
```

## What This Skill Produces

```text
.design/
├── DESIGN.md            # Design tokens (colors, typography, spacing, shapes)
├── CODE_PATTERNS.md     # Target tech stack + code conventions + layout patterns
├── COMPONENTS.md        # Component behavior specs (TypeScript props, state tables)
├── PAGES.md             # Page-level specs (ASCII layout diagrams, data flow)
└── ICONS.md             # Icon inventory (Lucide mappings, size conventions)
```

Each file answers a different question for the UI generator:

| File | Question it answers |
|---|---|
| DESIGN.md | What colors, fonts, spacing, and shapes? |
| CODE_PATTERNS.md | What tech stack? How to organize code? |
| COMPONENTS.md | What props does this component take? What states? |
| PAGES.md | What components go where? What data flows? |
| ICONS.md | What icon is that? Where to import it from? |

> Note: `screenshots/`, `brand/`, and `icons/` directories are not produced here — they require a Figma source. Use `/figma2design` for those.

## Prerequisites

- Claude Code (claude.ai/code)
- No external dependencies required
- No Figma MCP needed

## What You Must Do When Invoked

Follow these steps in order. Do not skip steps.

---

### Step 1 — Gather design input

If no inline brief was provided, prompt the user:

```text
请描述你的设计需求：

1. 产品/品牌描述：这个产品是什么？面向谁？
2. 设计风格：minimal / playful / enterprise / editorial / 其他？
3. 核心页面：列出主要页面及其用途（如：首页、列表页、详情页）
4. 颜色偏好：有品牌色吗？偏好冷色/暖色/中性？
5. 目标平台：Web / Mobile / Desktop？
6. 技术栈：React + Tailwind / Vue + Element / 其他？
```

Accept partial input — infer reasonable defaults for missing fields based on context. Document all assumptions in DESIGN.md.

---

### Step 2 — Generate design tokens

Create `.design/DESIGN.md` with a coherent, production-ready token system:

- **Color palette**: primary, secondary, neutral scale (50–900), accent, semantic (success/warning/error/info)
- **Typography scale**: font families (body + heading + mono), sizes (xs–3xl), weights, line heights
- **Spacing scale**: based on a 4px or 8px grid (space-1 through space-12)
- **Border radii**: xs, sm, md, lg, xl, full
- **Shadow palette**: sm, md, lg, xl
- **All tokens named semantically**: `bg-page`, `text-primary`, `radius-card`, `shadow-card-hover` — never positional (`gray-500`)

Use YAML frontmatter at the top of DESIGN.md:

```yaml
---
source: idea2design
generated: true
style: <inferred-style-keyword>
platform: <inferred-platform>
---
```

---

### Step 3 — Generate code patterns

Create `.design/CODE_PATTERNS.md` with:

- Target tech stack (inferred from input, default: React + TypeScript + Tailwind)
- File and component naming conventions
- Layout system: container widths, breakpoint values, grid columns
- Code examples for the 3 most common patterns in this design (e.g., card layout, form field, nav item)

---

### Step 4 — Generate component specs

Create `.design/COMPONENTS.md` with:

- All core components implied by the described pages (Button, Card, Input, Nav, Modal, Badge, Avatar, etc.)
- TypeScript prop interface for each component
- State table: default / hover / active / disabled / error / loading (where applicable)
- Interaction behaviors (what happens on click, focus, keyboard nav)

Order components from atomic (Button, Input) to composite (SearchBar, DataTable) — this matches the generation order in `/design2code`.

---

### Step 5 — Generate page specs

Create `.design/PAGES.md` with:

- ASCII layout diagram for each page (use box-drawing characters)
- Component composition per page (which components from COMPONENTS.md are used)
- Data flow: what data enters the page, what actions the user can take
- Page-level interactions: modals, drawers, inline editing, pagination

---

### Step 6 — Generate icon inventory

Create `.design/ICONS.md` with:

- Lucide icon mappings for all common UI actions described in the pages (search, send, settings, close, etc.)
- Size conventions: 16px inline, 20px default, 24px emphasis, 32px brand
- Category groupings: navigation, actions, status, content-type

---

### Step 7 — Verify and report

```bash
mkdir -p .design
echo "=== .design/ structure ==="
find .design -type f | sort | while read f; do
  size=$(du -h "$f" | cut -f1)
  echo "  ${f#.design/} ($size)"
done
```

Report to the user:

```text
✅ 设计规范生成完成！.design/ 目录:

  DESIGN.md        (N行) 设计系统 token + 视觉规范
  CODE_PATTERNS.md (N行) 技术栈 + 代码约定
  COMPONENTS.md    (N行) N个组件行为规格
  PAGES.md         (N行) N个页面完整规格
  ICONS.md         (N行) 图标清单

运行 /design2code 即可基于此规范生成 UI 代码。
如需补充品牌资源和截图，可用 /figma2design 从 Figma 文件提取。
```

---

## Handling Edge Cases

### Vague or minimal input

If the user provides only a product name or a single sentence:
- Ask one clarifying round: "请补充：目标用户是谁？主要功能是什么？风格偏好？"
- If still minimal, make opinionated defaults and document them explicitly in DESIGN.md under a "## Assumptions" section

### Existing codebase

If the user is working inside an existing project:
- Scan `package.json` to detect the tech stack before generating CODE_PATTERNS.md
- Match existing naming conventions (check `src/` structure)
- Note in DESIGN.md which tokens are new vs. should align with existing values

### Mobile-first design

If target platform is mobile:
- Use a 4px spacing grid (tighter than 8px web default)
- Prioritize touch-friendly component sizes (min 44×44 tap targets)
- Note in PAGES.md that layouts are single-column by default

---

## Tips for Best Results

1. **Be specific about pages** — "首页 + 列表页 + 详情页" produces better results than "a few screens"
2. **Name your style** — "linear.app style" or "Notion style" gives a strong anchor for token generation
3. **Mention real competitors** — the AI can reference common patterns from well-known products
4. **Iterate** — run `/idea2design` again with `--update` after reviewing the first output to refine specific files