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