zt-closet-backend/.codebuddy/plans/生成_Stitch_设计描述文档_fac81b47.md

name, overview, design, todos

name	overview	design	todos
生成 Stitch 设计描述文档	根据 zt-closet-backend（智能衣橱微信小程序后端）的真实能力，在已存在的空文件 /root/zt-closet-backend/Stitch.md 中撰写一份面向 Google Stitch 的完整描述：单一连续、可直接一次性粘贴的提示词，覆盖约 12 个微信小程序页面，视觉风格为现代简约。	architecture styleKeywords fontSystem colorSystem component tdesign 现代简约 浅色卡片 充足留白 细分割线 单一强调色 微信小程序规范 fontFamily heading subheading body PingFang SC size weight 20px 600 size weight 15px 500 size weight 13px 400 primary background text functional #5B5BD6 #8B87FF #F1F0FF #F5F6F8 #FFFFFF #1A1A1C #6B7280 #9CA3AF #16A34A #F59E0B #EF4444 #3B82F6	id content status extract-ui-fields 用 [subagent:code-explorer] 核实 13 屏展示字段与枚举取值示例 completed id content status dependencies write-stitch-head 撰写 Stitch.md 前半：产品定位、小程序平台约束、设计语言、导航结构 completed extract-ui-fields id content status dependencies write-stitch-screens 续写 13 屏逐屏连续描述与空态、加载态、异常态 completed write-stitch-head id content status dependencies proofread-stitch 校对 Stitch.md：枚举一致、小程序规范、无虚构功能、可整体粘贴 completed 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、状态徽标、图片占位）。

页面导航结构：

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 的唯一数据依据，杜绝臆造字段与功能