> For the complete documentation index, see [llms.txt](https://zhouhao4221.gitbook.io/haiqing-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zhouhao4221.gitbook.io/haiqing-docs/04-prompt/design/ai-design-prompt.md). # UI 设计生成 生成新组件、页面布局、从设计稿转代码、从零创建页面时使用。所有场景都需要先建立设计约束块，否则 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：补充场景结构，将设计约束块统一提取为前置步骤 --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://zhouhao4221.gitbook.io/haiqing-docs/04-prompt/design/ai-design-prompt.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.