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:
| 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/, andicons/directories are not produced here — they require a Figma source. Use/figma2designfor 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: "Please add: Who are the target users? What are the main features? What are the style preferences?"
- 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.jsonto 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
- Be specific about pages — "Home page + list page + detail page" produces better results than "a few screens"
- Name your style — "linear.app style" or "Notion style" gives a strong anchor for token generation
- Mention real competitors — the AI can reference common patterns from well-known products
- Iterate — run
/idea2designagain with--updateafter reviewing the first output to refine specific files