生成新组件、页面布局、从设计稿转代码、从零创建页面时使用。所有场景都需要先建立设计约束块，否则 AI 会引入不符合项目风格的颜色和间距。
什么时候用
- 实现一个新 UI 组件
- 从设计稿还原页面代码
- 从零开始设计一个新页面（没有设计稿）
- 检查现有代码是否符合设计规范
准备什么：设计约束块
每次 UI 生成任务都需要先准备这个块，从 02-design/ui-style-guide.md 里提取对应内容填入：
【设计约束】
调性：[从 ui-style-guide.md 复制品牌调性描述]
主色：[色值]
背景色 / 面板色 / 边框色：[色值]
文字色（主 / 次 / 禁用）：[色值]
字体：[字体栈]，正文 [size] / 标题 [size]
间距基准：[4px 或 8px]
圆角：[按场景列出，如：按钮 0px，卡片 8px]
阴影：[如：不使用，用边框代替]
图标库：[库名]
【禁止项】
[列出项目明确不允许的样式]
【参考组件】
[可选：粘贴一段现有组件代码，让 AI 推断整体风格]
场景一：生成新组件
准备什么：设计约束块 + 组件名 + 需要支持的状态 + Props 列表
[附上设计约束块]
生成一个 [组件名] 组件。
要求：
- 支持状态：[从 默认 / 悬停 / 激活 / 聚焦 / 禁用 / 加载中 中选择]
- Props：[列出参数，如：label、disabled、onClick]
- 不引入约束之外的颜色或间距值
场景二：生成页面布局
准备什么：设计约束块 + 页面包含的模块列表 + 交互说明
[附上设计约束块]
生成 [页面名称] 的布局。
页面包含：[模块列表，如：顶部导航、左侧菜单、内容区、底部操作栏]
交互说明：[如：菜单可折叠，内容区宽度自适应]
只需结构和样式，不实现业务逻辑。
场景三：设计稿转代码
直接扔截图给 AI 效果不稳定。正确做法是先从设计稿提取结构描述，再交给 AI 执行。
第一步：从设计稿提取结构描述
对着设计稿，逐项记录：
布局：几个区域，宽高比例，Flex 还是 Grid，主轴方向
组件：页面中出现的所有组件及其变体
间距：各区域的内外边距（估算到基准单位的倍数）
对齐：各元素的对齐方式
视觉细节：颜色、圆角、阴影的特殊处理
交互：hover 样式、折叠、弹窗等暗示的交互行为
第二步：生成代码
[附上设计约束块]
以下是设计稿的结构描述，请按此生成代码：
布局：[填写]
组件：[填写]
间距与对齐：[填写]
视觉细节：[填写]
交互：[填写]
描述中有模糊的地方，先列出你的理解和假设，再给出代码。
第三步：核对输出
- 布局比例是否接近（不需要像素级精确）
- 颜色是否来自约束，没有引入新色值
- 组件状态是否完整（不只是默认态）
场景四：从零创建页面
没有设计稿时，分四个阶段推进。不要一步要求完整页面——跳过阶段一直接生成，返工概率很高。
阶段一：信息架构（只谈内容，不谈样式）
我需要设计一个 [页面名称]，用途是 [一句话描述]。
目标用户：[用户类型]
核心操作：[用户在这个页面要完成什么]
需要展示的信息：[列出数据、状态、操作入口]
请列出这个页面的信息层级和主要区域划分，不涉及任何样式。
阶段二：布局方案（文字描述，不写代码）
基于以上信息架构，给出 2-3 种布局方案。每种方案说明：
- 整体结构（几栏、导航位置、内容区划分）
- 适合的使用场景
- 与项目现有页面的一致性
用文字或 ASCII 示意图，不需要代码。
阶段三：生成代码
[附上设计约束块]
基于选定的布局方案，生成完整页面代码。
- 使用真实的占位内容，不写 Lorem ipsum，用符合场景的示例数据
- 所有组件状态完整（默认 / 空态 / 加载态）
- 响应式断点：[如 768px / 1280px]
阶段四：逐区域迭代
整体方向对了，现在细化 [具体区域]：
- 当前问题：[描述哪里不对]
- 期望效果：[具体说明，不要只说"更好看"]
- 约束：不改变其他区域
场景五：风格一致性检查
准备什么：设计约束块 + 待检查的代码
检查以下代码是否符合设计约束，列出不一致的地方并给出修改建议：
[设计约束块]
[待检查的代码]
常见失败模式
- 跳过设计约束块：AI 会引入项目之外的颜色和间距。每次 UI 任务都要先给约束块
- 从零创建跳过阶段一：直接要求生成完整页面，信息架构没确认，容易大范围返工
- 设计稿直接扔截图：OCR 识别不稳定，颜色和间距会出错。先提取结构描述再给 AI
版本历史
- v1.0：初始版本
- v1.1：补充场景结构，将设计约束块统一提取为前置步骤