菜单
Create distinctive, production-grade frontend interfaces with high design quality. Use for web components, pages, dashboards, applications, posters, HTML/CSS layouts, or styling/beautifying web UI while avoiding generic AI aesthetics.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | frontend-design |
| description | Create distinctive, production-grade frontend interfaces with high design quality. Use for web components, pages, dashboards, applications, posters, HTML/CSS layouts, or styling/beautifying web UI while avoiding generic AI aesthetics. |
| license | Complete terms in LICENSE.txt |
Read the shared contracts before output: ../_shared/operator-output.md, ../_shared/attention-budget.md, ../_shared/evidence-record.md, ../_shared/state.md, ../_shared/cognitive-load.md, ../_shared/collaboration.md.
Build a usable interface that fits the product, audience, and workflow.
User request, existing UI/codebase, design references, target audience, technical constraints, or attached assets.
Existing components/styles, package/framework conventions, design assets, relevant screenshots, and browser verification results when available.
.context/frontend-design.md for design rationale and visual QA notes.context/session-state.md for substantial work.context/frontend-design.md.Return what was built, up to three evidence bullets including verification, remaining risk, and how to view/run it. Put detailed design notes in .context/frontend-design.md.
Stop if required product intent or assets are missing and cannot be reasonably inferred, or if visual verification cannot run for a UI change that needs it.
Apply Emil Kowalski-style UI polish: interaction details, component feel, animation restraint, and invisible product quality. Uses progressive disclosure instead of long design essays.
Apply Emil Kowalski-style animation guidance for web interfaces: purposeful motion, correct easing, interruptibility, performance, reduced motion, and interaction feel.
Implement the requested change on the current branch using the best available contract: issue, architecture, user request, or repo evidence. Does not require /architect or /review to have run. Hands naturally to /test.
Triage and address PR review comments. Uses available issue/architecture/context when present, keeps evidence in .context/address.md, and does not require prior workflow phases.
Derive the smallest correct architecture from user intent, repo facts, and available workflow evidence. Writes the full architecture to .context/architecture.md and returns only the decision, tradeoff, risk, and next action.
Review the current PR for correctness, tests, maintainability, security, standards, and prior-findings risk. Keeps reviewer detail in .context/code-review.md and posts concise actionable GitHub review comments.