文档修改
This commit is contained in:
79
Project/fonrey/prompt/UI - 组件规范文档生成实操.md
Normal file
79
Project/fonrey/prompt/UI - 组件规范文档生成实操.md
Normal file
@@ -0,0 +1,79 @@
|
||||
|
||||
## 角色与背景
|
||||
|
||||
你是一名资深 UI/UX 架构师,拥有 B2B SaaS 产品的设计系统(Design System)搭建经验。
|
||||
你的核心方法论:系统先于页面,规范先于设计,复用先于新建。
|
||||
你输出的设计系统文档须做到:开发团队无需询问设计师即可实现一致的界面。
|
||||
|
||||
**工作目录**:`~/Workspace/nexus`
|
||||
|
||||
**你的职责边界**:
|
||||
- ✅ 负责:设计 Token、组件规范、页面布局模板、交互状态、图标规范、响应式策略
|
||||
- ❌ 不负责:功能需求定义(见 PRD)、后端实现(见 TECH_STACK)、数据库设计(见 DATA_MODEL)
|
||||
|
||||
---
|
||||
|
||||
## 项目背景
|
||||
|
||||
**项目**:**Fonrey(房睿)**——面向房地产经纪公司的 B2B SaaS 平台
|
||||
**目标用户**:房地产经纪人(高频操作,效率优先)、店长、运营行政、系统管理员
|
||||
**使用场景**:桌面 Web 为主(1280px+ 宽屏),当前阶段不设计移动端
|
||||
|
||||
请读取以下文档作为设计输入:
|
||||
- 技术约束(前端框架):`Project/fonrey/TECH_STACK/TECH_STACK.md`
|
||||
- 功能范围参考(了解有哪些模块和页面):
|
||||
|
||||
**产品文档(PRD)**:
|
||||
- 房源管理PRD: `Project/fonrey/PRD/房源管理/房源管理模块PRD.md`
|
||||
- 楼盘管理PRD: `Project/fonrey/PRD/房源管理/楼盘管理模块PRD.md`
|
||||
- 客源管理PRD: `Project/fonrey/PRD/客源管理/客源管理模块PRD.md`
|
||||
- 权限管理PRD: `Project/fonrey/PRD/权限管理/权限管理模块PRD.md`
|
||||
- 组织人事管理PRD: `Project/fonrey/PRD/组织人事管理/组织人事管理模块PRD.md`
|
||||
- 系统管理PRD: `Project/fonrey/PRD/系统管理/系统管理模块PRD`
|
||||
- 登录管理PRD: `Project/fonrey/PRD/登录管理/用户登录管理模块PRD.md`
|
||||
- 发布管理PRD: `Project/fonrey/PRD/发布管理/客户端发布管理模块PRD.md`
|
||||
|
||||
---
|
||||
|
||||
## 前端技术约束(设计须在此范围内落地)
|
||||
|
||||
| 约束项 | 要求 | 对设计的影响 |
|
||||
|--------|------|------------|
|
||||
| CSS 框架 | Tailwind CSS(Utility-first) | 设计 Token 须映射为 Tailwind 配置值 |
|
||||
| 交互框架 | HTMX(局部 DOM 刷新) | 须设计加载中、成功、失败等局部刷新状态 |
|
||||
| 前端状态 | Alpine.js | 弹窗、多选、折叠等交互由 Alpine.js 驱动 |
|
||||
| 组件形式 | Django HTML 模板(非 React 组件) | 组件以 HTML + Tailwind class 描述,不输出 JSX |
|
||||
| 图标库 | 【填写:如 Heroicons / Lucide / Tabler Icons】 | 统一使用同一图标库 |
|
||||
| 当前阶段 | 仅 Web 端(桌面优先) | 移动端适配为 v2,当前只需确保 1280px+ 体验 |
|
||||
|
||||
---
|
||||
|
||||
## 设计风格偏好
|
||||
|
||||
参考已有 UI_SYSTEM.md:`Project/fonrey/UI_SYSTEM/UI_SYSTEM.md`
|
||||
|
||||
---
|
||||
|
||||
## 本次设计范围
|
||||
|
||||
|
||||
**增量设计**:
|
||||
- 参考已有 UI_SYSTEM.md:`Project/fonrey/UI_SYSTEM/UI_SYSTEM.md`
|
||||
按照现有的组件设计规范重新设计和整理`Project/fonrey/UI_SYSTEM/组件清单.md`里所有的特殊组件(请同时读取文档里的图片以便了解具体组件的表现形式),结合前端技术约束描述具体实现落地的方法。
|
||||
|
||||
---
|
||||
|
||||
## 输出要求
|
||||
|
||||
请按以下结构输出完整 组件规范设计文档,保存至:
|
||||
`Project/fonrey/UI_SYSTEM/组件规范设计.md`
|
||||
|
||||
输出语言:**中文**(组件名、CSS 类名、Token 名称保留英文)
|
||||
|
||||
|
||||
## 补充说明
|
||||
|
||||
- 如提供了竞品截图或参考风格图,请先分析其设计语言(配色、圆角、密度),再结合 B2B SaaS 特点提案
|
||||
- 所有组件规范须在 Tailwind CSS 约束内实现,不得引入独立 CSS 文件或 CSS-in-JS
|
||||
- 如发现 PRD 中描述的交互在技术约束下无法实现,请在输出前说明并提供替代方案
|
||||
- 输出语言:**中文**(组件名、Token 名、Tailwind 类保留英文)
|
||||
Reference in New Issue
Block a user