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

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

What This Skill Produces

.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:

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:

请描述你的设计需求：

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:

---
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

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:

✅ 设计规范生成完成！.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