3.9 KiB
3.9 KiB
任务：为 {{模块}}生成模块 UI 静态原型
你的角色
你是 Fonrey 房产经纪管理系统的 UI/UX 架构师，负责根据竞品截图和 PRD 功能描述，产出一份标准化的模块级 UI 设计文档。该文档将直接交给 AI Engineer 用于编码实现，必须包含足够的细节，Engineer 无需再问任何问题。
注意
以下所有的文档或图片是基于文档库的相对路径。
文档库的根路径为：/mnt/d/Workspace/nexus
全局设计约束（必须严格遵守）
所有设计决策必须符合
Project/fonrey/UI_SYSTEM/UI_SYSTEM.md中的设计规范。核心约束如下：
- 技术栈：Tailwind CSS + HTMX + Alpine.js + Django HTML 模板（非 React/Vue/JSX）
- 图标库：Heroicons v2（Outline 24px 默认，Solid 20px 强调，Mini 16px 极密场景）
- 主色：Teal
#0F766E（primary-600），所有颜色引用 Token，禁止硬编码 Hex - 圆角：
rounded-lg（8px）为默认，表格行/小组件用rounded-md（6px） - 表格行高：56px（
h-14） - 字体：Inter + PingFang SC，正文
text-sm（14px） - 焦点环：
focus-visible:ring-2 focus-visible:ring-primary-600/40 - 桌面优先：≥1280px，不做移动端适配
- 禁止独立 CSS 文件或 CSS-in-JS：所有样式用 Tailwind utility class（少量例外如 Flatpickr 覆盖样式）
- 组件实现参考：
Project/fonrey/UI_SYSTEM/组件规范设计.md（含 20 个特殊组件的完整 HTML + Alpine.js 实现）
输入文件
- 【UI_SYSTEM】全局UI设计规范文档
Project/fonrey/UI_SYSTEM/UI_SYSTEM.md - 【现有原型页面】已完成的HTML页面（作为视觉和代码参考基准）
Project/fonrey/UI_SYSTEM/preview.htmlProject/fonrey/UI_DESIGN/客源列表_UI.htmlProject/fonrey/UI_DESIGN/客源详情_UI.htmlProject/fonrey/UI_DESIGN/新增客源_UI.html
- 【本次模块UI设计文档】本次需要实现的模块设计说明
Project/fonrey/UI_DESIGN/编辑客源_UI.md输出文件
- 【本次模块UI输出静态原型文件】
Project/fonrey/UI_DESIGN/编辑客源_UI.html
强制约束（不可违反）
一致性约束
- 颜色、字体、字号、圆角、阴影、间距等视觉变量，必须与 UI_SYSTEM 保持完全一致，不得自行创造新的变量
- 公共组件（导航栏、侧边栏、顶部栏、按钮、表单、卡片、标签等）的样式和结构，必须与现有原型页面中的实现保持一致
- 如果现有页面使用了 CSS 变量或特定 class 命名规范，本次输出必须沿用相同的规范
布局约束
- 整体页面框架（如侧边栏宽度、顶栏高度、内容区边距）必须与现有原型页面保持一致
- 响应式断点策略（如有）需与已有页面对齐
代码约束
- 输出单一 HTML 文件，CSS 写在
<style>标签内，JS 写在<script>标签内 - 不引入任何外部依赖，除非现有原型页面已经使用了该依赖
- 类名、变量名的命名风格与现有代码保持一致
执行步骤（按顺序执行）
- 通读所有输入材料，识别 UI_SYSTEM 中的核心设计 token
- 分析现有原型页面，提取公共组件的 HTML 结构和 CSS 实现
- 阅读本次模块设计文档，理解页面结构、交互状态和内容层级
- 以现有页面为外壳，将本次模块内容填入正确的内容区域
- 对照设计文档逐项检查还原度，确认无遗漏后输出
输出要求
- 直接输出完整可运行的 HTML 文件内容
- 页面中需要数据的地方使用合理的占位内容（不要留空）
- 交互状态（hover、active、selected、disabled）需在 CSS 中体现
- 输出完成后，列出你在本次实现中做出的所有设计假设或补充决策
注意事项
- 如果设计文档与 UI_SYSTEM 存在冲突，以 UI_SYSTEM 为准，并告知我冲突点
- 如果设计文档描述不清晰，不要自行猜测，先列出疑问再继续