design

design 技能提供了一套结构化且协作性高的工作流程，旨在协助开发者创造独特且非通用的 UI 设计。此技能适合希望摆脱生成式 AI 常见的通用布局、紫色渐层与样板化设计的工程师与产品开发者。通过强调 Tailwind v4 标记与 utility-first 的实现方式，它能有效缩短视觉设计与生产环境代码之间的鸿沟。该技能支持多种模式：针对页面与产品界面的完整设计模式（包含研究、线框图与设计文档），以及针对重构、拆解组件与清理 UI 代码的优化模式。

• 完整的设计工作流程，包含视觉方向制定、线框图绘制与 Tailwind 实现规格书。

• 内置参考数据库，涵盖 Refactoring UI 原则、UX 法则（如 Fitts's Law, Hick's Law）、字体排版与界面层级规范。

• 优化模式用于在实现后组织、去重与标准化组件代码。

• 整合 ui-builder、figma-builder 与 designer 子代理工具，用于构建与审核 UI。

• 严格遵守 Tailwind v4 主题标记、间距与响应式设计模式。

• 采用协作式互动模型，禁止通过自动产生代理进行设计决策，确保用户在创意过程中拥有主导权。

• 在开始工作流程前，务必宣告所选的设计模式（完整模式或优化模式）。

• 在提议新视觉识别前，先检查 docs/brand-system.md 或 docs/design-context.md 是否已有现存的品牌准则。

• 遵守 Tailwind-first 约束：当 Tailwind 工具类足以满足需求时，切勿建议使用自定义 CSS 或框架无关的样式方案。

• 遵循指定的设计调研阶段，包含阅读 typography-opentype.md 与 ascii-ui-patterns.md 等核心参考文件。

• 在处理“设计 UI”、“建立布局”、“绘制线框图”、“清理代码”或“组件化”等任务时使用此技能。

• 禁止使用 EnterPlanMode 等禁用工具；请直接执行工作流程中规定的设计阶段。