105 lines
5.3 KiB
Markdown
105 lines
5.3 KiB
Markdown
---
|
|
name: 生成 Stitch 设计描述文档
|
|
overview: 根据 zt-closet-backend（智能衣橱微信小程序后端）的真实能力，在已存在的空文件 /root/zt-closet-backend/Stitch.md 中撰写一份面向 Google Stitch 的完整描述：单一连续、可直接一次性粘贴的提示词，覆盖约 12 个微信小程序页面，视觉风格为现代简约。
|
|
design:
|
|
architecture:
|
|
component: tdesign
|
|
styleKeywords:
|
|
- 现代简约
|
|
- 浅色卡片
|
|
- 充足留白
|
|
- 细分割线
|
|
- 单一强调色
|
|
- 微信小程序规范
|
|
fontSystem:
|
|
fontFamily: PingFang SC
|
|
heading:
|
|
size: 20px
|
|
weight: 600
|
|
subheading:
|
|
size: 15px
|
|
weight: 500
|
|
body:
|
|
size: 13px
|
|
weight: 400
|
|
colorSystem:
|
|
primary:
|
|
- "#5B5BD6"
|
|
- "#8B87FF"
|
|
- "#F1F0FF"
|
|
background:
|
|
- "#F5F6F8"
|
|
- "#FFFFFF"
|
|
text:
|
|
- "#1A1A1C"
|
|
- "#6B7280"
|
|
- "#9CA3AF"
|
|
functional:
|
|
- "#16A34A"
|
|
- "#F59E0B"
|
|
- "#EF4444"
|
|
- "#3B82F6"
|
|
todos:
|
|
- id: extract-ui-fields
|
|
content: 用 [subagent:code-explorer] 核实 13 屏展示字段与枚举取值示例
|
|
status: completed
|
|
- id: write-stitch-head
|
|
content: 撰写 Stitch.md 前半：产品定位、小程序平台约束、设计语言、导航结构
|
|
status: completed
|
|
dependencies:
|
|
- extract-ui-fields
|
|
- id: write-stitch-screens
|
|
content: 续写 13 屏逐屏连续描述与空态、加载态、异常态
|
|
status: completed
|
|
dependencies:
|
|
- write-stitch-head
|
|
- id: proofread-stitch
|
|
content: 校对 Stitch.md：枚举一致、小程序规范、无虚构功能、可整体粘贴
|
|
status: completed
|
|
dependencies:
|
|
- write-stitch-screens
|
|
---
|
|
|
|
## 产品概述
|
|
|
|
为智能衣橱后端项目生成一份可直接粘贴给 Google Stitch 的 UI 设计提示词，写入项目根目录已存在的空文件 `Stitch.md`。描述面向**微信小程序**前端（非 Web/H5），覆盖全部业务页面，让 Stitch 一次性生成整套现代简约风格的小程序界面原型。
|
|
|
|
## 核心功能
|
|
|
|
- **单一完整描述**：整份文档即一段连续提示词，整体复制粘贴即可，不做分屏表格、不做多段 prompt
|
|
- **全量 13 屏**：微信授权登录、衣橱、衣物上传、衣物详情/编辑、穿搭列表、穿搭详情、AI 穿搭推荐、每日运势、衣柜分享、通知、额度与会员商城、订单、我的
|
|
- **小程序平台约束**：顶部导航栏与右上胶囊按钮、底部 tabBar、375×812 逻辑分辨率、rpx 栅格、无浏览器地址栏
|
|
- **现代简约设计语言**：浅灰底 + 白色卡片 + 细分割线 + 充足留白 + 克制中性色 + 单一强调色 + 线性图标
|
|
- **每屏完整描述**：页面目标、顶部导航、内容区元素与文案、主要交互、空态/加载态/异常态
|
|
- **真实业务状态呈现**：衣物处理状态（排队/抠图/分类/成功/失败）、订单状态（待支付/已支付/已取消/已过期/已退款）、分享状态（正常/已取消/已过期）、穿搭公开与审核、额度与会员、通知未读
|
|
- **字段与枚举以代码为准**：衣物 15 维属性、运势四项评分与幸运色/数字、商品五类与价格为分、四类额度等，均取自项目真实数据结构，不虚构后端不存在的能力
|
|
|
|
## 设计方法
|
|
|
|
面向 Google Stitch 生成小程序原型：文档开头 1-3 行使用说明，其后为一段可整体复制的连续提示词正文。正文顺序为：产品一句话定位与目标用户 → 平台约束（微信小程序：状态栏、导航胶囊、tabBar、375×812 逻辑分辨率、rpx 栅格、无地址栏）→ 设计语言（浅灰页面底 + 白色卡片 + 细分割线 + 8pt 间距 + 统一圆角 + 单一强调色 + 线性图标 + 中文无衬线字阶）→ 导航结构 → 13 屏逐屏描述 → 全局通用元素（按钮、标签、弹窗、Toast、状态徽标、图片占位）。
|
|
|
|
页面导航结构：
|
|
|
|
```mermaid
|
|
flowchart LR
|
|
S["微信授权登录"] --> A
|
|
A["tabBar 衣橱"] --> A1["衣物上传"]
|
|
A --> A2["衣物详情/编辑"]
|
|
B["tabBar 穿搭"] --> B1["穿搭详情"]
|
|
B --> B2["AI 穿搭推荐"]
|
|
C["tabBar 运势"] --> C1["每日运势详情"]
|
|
D["tabBar 通知"] --> D1["通知列表"]
|
|
E["tabBar 我的"] --> E1["额度与会员商城"]
|
|
E --> E2["订单列表"]
|
|
E --> E3["衣柜分享"]
|
|
```
|
|
|
|
每屏描述统一包含：页面目标、顶部导航标题与返回、内容区元素与示例文案、主要交互、空态/加载态/异常态。真实业务状态需内联到界面元素中（如衣物卡片角标"排队中/抠图中/分类中/失败"、订单卡片状态徽标、分享卡片"已过期"遮罩），使 Stitch 能生成对应状态样式。篇幅控制在 1200-2500 字，便于一次性粘贴。
|
|
|
|
## Agent Extensions
|
|
|
|
### SubAgent
|
|
|
|
- **code-explorer**
|
|
- Purpose：读取 internal/dto/ 下 13 个文件与 internal/service/constants.go，提取 13 屏所需的展示字段语义与取值示例（衣物 15 维属性字段名与示例值、穿搭/分享/订单/通知/商品/额度/运势列表项与详情字段），确保 Stitch 描述中的信息结构与真实数据结构一致
|
|
- Expected outcome：输出按页面组织的字段事实清单（字段名 + 含义 + 示例取值 + 对应枚举），作为撰写 Stitch.md 的唯一数据依据，杜绝臆造字段与功能 |