菜单
Conduct design interviews, generate five distinct UI variations in a temporary design lab, collect feedback, and produce implementation plans. Use when the user wants to explore UI design options, redesign existing components, or create new UI with multiple approaches to compare.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use when the task asks for a visually strong landing page, website, app, prototype, demo, or game UI. This skill enforces restrained composition, image-led hierarchy, cohesive content structure, and tasteful motion while avoiding generic cards, weak branding, and UI clutter.
Automate browser interactions, test web pages and work with Playwright tests.
Advanced guidelines and best practices for writing tests using Vitest. Apply this skill when generating, reviewing, or refactoring test codes to prevent common pitfalls and ensure high performance.
Fixed 1536×864 touch viewport — grid, margins, 8px rhythm, touch targets, typography, components, vertical rhythm, and QA checklist for panel/kiosk/HMI. Use when designing or implementing UIs for this resolution with touch-first input.
Lists available Cursor agents (planner, architect, tdd-guide, code-reviewer, security-reviewer, build-error-resolver, e2e-runner, refactor-cleaner, doc-updater) and when to use each. Use when the user asks which agent to use, how to delegate work, or what agents are available.
Async parallelization patterns — Promise.all, waterfall prevention, dependency-based parallelism, RSC component composition, deferred await. Use when optimizing async operations, API routes, or data fetching.
| name | design-lab |
| description | Conduct design interviews, generate five distinct UI variations in a temporary design lab, collect feedback, and produce implementation plans. Use when the user wants to explore UI design options, redesign existing components, or create new UI with multiple approaches to compare. |
This skill implements a complete design exploration workflow: interview, generate variations, collect feedback, refine, preview, and finalize.
All temporary files MUST be deleted when the process ends, whether by:
Never leave .claude-design/ or __design_lab routes behind. If the user says "cancel", "abort", "stop", or "nevermind" at any point, confirm and then delete all temporary artifacts.
| Phase | Action |
|---|---|
| 0 | Preflight: detect package manager, framework, styling, Design Memory; infer visual style from project |
| 1 | Interview: scope, pain points, inspiration, brand, persona, constraints (use AskUserQuestion) |
| 2 | Generate Design Brief JSON → .claude-design/design-brief.json; show summary |
| 3 | Generate Design Lab: .claude-design/lab/ with 5 variants, FeedbackOverlay in route dir, data-variant on containers |
| 4 | Present URL to user (do not start dev server); output instructions and proceed to Phase 5 |
| 5 | Collect feedback: interactive overlay (preferred) or AskUserQuestion; parse Overall Direction and comments |
| 6 | If user likes parts of different variants: synthesize Variant F, replace lab, ask again |
| 7 | Final preview at /__design_preview; ask for confirmation |
| 8 | On confirm: cleanup temp files, write DESIGN_PLAN.md, create/update DESIGN_MEMORY.md |
Abort: If user cancels at any time, confirm then delete .claude-design/ and route files; do not generate plan.
For full details (preflight detection tables, interview question options, directory structure, FeedbackOverlay setup, variant guidelines, feedback parsing, finalize templates, error handling, configuration), see reference.md.
