frontend-design

支持前端界面设计与实现，强调真实 UI 质量、视觉层级和截图验证。

基本信息

字段	内容
Skill	frontend-design
类型	internal-only
研发链路位置	Code
入口	internal_only
Source	skills/frontend-design/SKILL.md

描述

Build web interfaces with genuine design quality, not AI slop. Use for any frontend work - landing pages, web apps, dashboards, admin panels, components, interactive experiences. Activates for both greenfield builds and modifications to existing applications. Detects existing design systems and respects them. Covers composition, typography, color, motion, and copy. Verifies results via screenshots before declaring done.

何时使用

• 新建或修改页面、组件、dashboard、landing page 或 interactive UI。
• 现有界面需要视觉质量提升。
• 需要遵循现有 design system 并通过截图复查。

工作步骤

• 读取 plan、task pack、bug report 或明确实现目标。
• 建立小步任务列表，按现有代码模式做最小必要修改。
• 运行聚焦验证、测试、构建、浏览器或平台检查。
• 把 diff、验证结果和剩余风险交给 review 或 knowledge 阶段。

输出

• 实现 diff、测试结果、构建输出、浏览器截图或运行证据。
• 必要时输出 blocked 原因，而不是扩大 scope。

Agent 调度

• 小任务通常 inline；大任务可按文件边界使用 serial 或 parallel workers。
• 调试、优化、UI、平台专项可引入对应 specialist agents，但 orchestrator 负责最终集成。

边界

• 不创建无关 landing page。
• 不绕过现有设计系统或项目视觉规范。