design

用途

该技能用于在开发过程中管理应用的设计系统，核心是维护一份 instructions/design-system.md 文件，作为所有 UX/UI 工作的唯一事实来源。它适用于需要建立设计系统、制定 UI 模式、改进视觉层级、优化交互或确保视觉一致性的场景。

三种工作模式

技能根据项目状态提供三种模式：

• CREATE（创建）：尚无设计系统，或需要从现有代码中提取。可从四种入口生成新的 instructions/design-system.md：

  • 从 URL（参考应用）：分析线上应用并提取颜色、排版、间距、组件模式，匹配到已知框架（如 shadcn、Material UI、Radix 等）。文档中列举的参考应用包括 linear.app、stripe.com/dashboard、notion.so、vercel.com。
  • 从代码（提取与审计）：粘贴现有源码（Tailwind 配置或 CSS 变量、Button/Input/Card 组件、主题或设计令牌文件、2-3 个代表性页面组件），提取并记录当前模式，识别不一致之处（如多种按钮高度、冲突颜色），并给出标准化建议。
  • 从截图：上传图片作为视觉参考，提取颜色、排版、间距、组件模式，匹配最接近的已知框架。
  • 从零开始：通过引导式决策创建，指定应用类型、期望风格（极简/俏皮/专业/技术）、品牌主色等，生成带合理默认值的文件。

• MODIFY（修改）：针对已有 instructions/design-system.md 的更新操作，包括：

  • 更新值：修改颜色、字体或间距，并同步更新关联值（如悬停状态）。
  • 添加模式：为尚未记录的组件类型（如定价表、数据表、模态框）新增模式，遵循现有设计系统值。
  • 审计与协调：将当前代码与设计系统对比，解决漂移问题；可选择列出偏差以供修复代码，或更新设计系统以反映代码实际行为。会识别不一致值、未记录模式、未使用规范。
  • 迁移框架：从一个组件库迁移到另一个（如从 Material UI 到 shadcn），保留现有颜色、排版和间距，更新组件规范。

• WORK WITHIN（在系统内工作）：在已有设计系统下构建，包括：

  • 构建功能：实现新 UI 时遵循 design-system.md 中记录的颜色、排版、间距和组件模式。
  • 审查合规性：检查 AI 生成的代码是否符合设计系统，标记与已记录模式的偏差。
  • 回答设计问题：基于 design-system.md 快速回答颜色、间距、按钮变体等决策。

文件结构

CREATE 模式生成的文件包含以下结构：参考（主参考、组件库、设计哲学）、颜色（品牌色、灰阶、语义色）、排版（字体、字号比例）、间距（基础单位、比例、组件内边距、区块间距、卡片间距）、组件（按钮各变体及状态、输入框、卡片）、模式（导航、表单、表格）、发现的不一致。用户若已有 instructions/design-system.md，其优先级高于任何生成的建议。

辅助内容

技能还包含组件选择指南（根据选项数量、操作类型选择单选、下拉、开关、警告对话框、Toast、Alert 横幅、对话框、标签页、徽章等）、视觉层级检查清单、优先级顺序（Tier 1：每个屏幕一个主要操作、视觉层级、一致间距、设计状态；Tier 2：移动端响应式、微交互、键盘导航）、逐屏指导（仪表盘、设置页、数据表格、表单）、常见 UI 错误与修正、以及成功标准。文档还提到 LAWSOFUX.md（解释某些模式为何有效）和 COMPONENTS.md（常见 SaaS 组件模式），但未提供其具体内容。

分工原则

用户决定每个屏幕的目标（如“此页面的目标是让用户创建项目”“需要一个带标签的设置页”“仪表盘应优先显示关键指标”“表单应在用户输入时验证”），AI 负责实现像素级细节（视觉层级、标签页布局、卡片布局、内联验证）。

限制

资料未提供该技能的具体收费、价格、平台支持情况或实际效果数据。