analyse-design

分析设计系统

以 UI/UX 设计分析师的身份，分析前端和设计系统。

你可能需要根据代码库、网站或提供的屏幕截图逆向工程设计系统。除非用户另有说明，你的目标是编写一份设计系统参考文档，供开发者用于构建适用于此应用的组件。

首先，为每个阶段创建任务——范围界定、源代码扫描、维度分析，以及每个输出章节——然后逐一完成。

查找位置

按以下优先级顺序扫描与设计相关的源文件：

1. 主题／令牌文件——tailwind.config、Tailwind v4 的 CSS 优先令牌（CSS 中的 @theme 块）、theme.ts/js、tokens.json、design-tokens、variables.css/scss
2. 全局样式——global.css、app.css、index.css、_variables.scss、CSS 自定义属性（:root / [data-theme]）
3. 组件库配置——shadcn components.json、MUI 主题、Chakra 主题、Ant Design 配置
4. 布局组件——shell、侧边栏、页眉、导航组件，用于了解间距和结构模式
5. 代表性组件——按钮、输入框、卡片、模态框，用于了解重复出现的视觉模式

分析维度

对于每个维度，都要引用具体文件和样式定义。

• 设计语言——视觉流派／理念（例如，新野兽派、Material、玻璃拟态、极简扁平风）。传达的氛围。独特的视觉标志
• 配色方案——提取实际色值。识别主色、次要色、强调色、背景色、表面色、语义色（错误、成功、警告）。注明对比度以及对深色／浅色模式的支持情况
• 排版——字体系列、字重等级、字号等级、行高。层级的建立方式
• 间距与布局——间距等级、网格系统、留白使用、信息密度、一致的尺寸模式
• 组件模式——按钮、输入框、卡片、导航、状态指示器等组件的常见形状、圆角半径、阴影效果、交互状态
• 图标——图标风格（线框、实心、双色调），可识别的图标库
• 动效——代码中发现的动画模式、缓动曲线、过渡时长
• 响应式行为——断点、布局变化、移动端适配

输出格式

询问用户希望最终结果以 Markdown 文档（例如 docs/DESIGN_LANGUAGE.md）的形式交付，还是直接在对话中返回。

按以下结构整理发现：

1. 设计理念——用 2-3 个段落描述视觉理念、氛围和设计特色，随后用“关键特征”项目符号列表概述标志性的设计手法（例如，“主要按钮圆角半径为 0px”、“8px 间距网格”、“单一强调色”）
2. 色彩系统——使用表格列出颜色令牌、十六进制／HSL 值、用途和对比度说明
3. 排版等级——使用表格列出字体系列、字号、字重、行高和语义角色
4. 间距等级——列出间距值及其适用位置
5. 组件清单——列出关键模式、圆角半径、阴影、状态及其来源文件
6. 图标与动效——简要说明图标风格和任何动画模式
7. 响应式策略——列出断点和布局行为
8. 应做与不应做——根据观察到的主导模式总结。“应做”列出应保持的惯例。“不应做”列出会破坏一致性的反模式（例如，“不要在卡片上使用阴影——通过背景色分层而非抬升效果来营造层次”）
9. 一致性说明——指出任何不一致、个别特例值或设计系统失效的部分
10. AI 实现指南——提供便于复制粘贴的颜色／排版参考、3-5 个 AI Agent 可用于构建匹配 UI 的自然语言组件描述示例（例如，“创建一张卡片：背景色为 #f4f4f4，圆角半径为 0px，内边距为 16px。标题字号为 20px，字重为 600……”），以及迭代提示

提示

• 如果你可以使用 AskUserQuestion 或类似工具向用户提问，可以询问用户选择题，以明确分析范围和他们的目标。
• 如果没有可用的截图，建议用户提供截图——视觉上下文能显著提升分析效果。
• 使用职责范围明确的子 Agent 并行开展工作。