菜单
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Run a high-stakes decision through a council of five persona-diverse advisors (Contrarian, First-Principles, Expansionist, Outsider, Executor) in parallel, then anonymized peer review, then a chairman synthesis of where they agree, clash, and what to do. Use for real tradeoffs ("council this", "pressure-test this", "should I X or Y"), not factual or low-stakes questions.
Composite review-and-fix for the current diff — run the correctness review (validate) and structural-quality review (simplify) in parallel, merge their findings, then apply all fixes in a single serial pass and re-verify. Supports --effort, --fix, --comment. For a full-repo survey use /audit.
Run all quality lenses (validate, simplify), aggregate findings into a design doc, then drive the full feature chain (PRD → TDD → PR) to fix them systematically.
Structural-quality review of changed code — score against the four-dimension rubric, gate at 10/10, and (in auto-fix mode or with --fix) apply reuse/simplification/efficiency/altitude cleanups. Includes a diff-economy lens; correctness is /validate, full-repo survey is /audit.
Validate the current diff for correctness bugs and test-integrity regressions (a test weakened to pass is a defect); supports --effort low|medium|high|max, --full to scan the whole repo, --fix to apply fixes, --comment to post as PR inline comments.
Generate or update a mermaid diagram with the `.mmd` text as source of truth — defaults to a lightweight zero-dependency Node live-preview server that watches the .mmd and hot-reloads a browser tab (pan/zoom), with a self-hosted mermaid.live editor via Docker, system-viewer SVG, VS Code live preview, or a public mermaid.live publish URL as alternatives. Use for architecture, flowchart, sequence, ER, state, or class diagrams; "diagram this", "draw the architecture", "make a mermaid diagram", "render this mermaid", or "/diagram". Never converts to a lossy shape format.
| name | frontend-design |
| description | Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics. |
| license | Apache-2.0 |
| metadata | {"author":"Anthropic","version":"1.0"} |
Read and follow the complete skill instructions in skills/frontend-design.md.
