zt-closet-backend/Stitch.md

使用说明（本段不要粘贴）：本文件是给 Google Stitch 的分段粘贴提示词，共 15 段。请按段号从小到大、每段单独复制一次依次粘贴发送给 Stitch：复制范围＝该段标题行（## 第 N 段｜…）以下、下一段标题行以上的正文，不要包含段标题行。 第 1 段必须先发，它是全局设计基准；第 2~15 段每页一段，每段开头自带「上下文锚点」，保证分次发送时跨页风格一致。请在同一轮对话中按顺序发送，不要一次性粘贴多段，也不要跳段。

---

第 1 段｜全局规范与设计语言（必须先发）

你是一位资深的 Apple 生态产品设计师，精通 iOS 与微信小程序的界面规范。接下来我要让你为一款名为「纸条AI衣橱」的微信小程序设计全套高保真 UI 界面原型（共 14 个页面：13 个主页面 + 「创建/编辑穿搭」）。

我会在本条消息给出全局规范，随后逐页单独发送每一屏的详细描述，请你逐屏生成，并保证全部 14 页风格、组件、配色完全一致。请先阅读并记住以下全局规范，本轮不要生成任何页面，只回复「已理解全局规范，请发送第 1 屏」。

【产品定位】这是一款面向年轻女性用户的 AI 衣橱管理工具：用户拍照上传自己的衣物，系统自动抠图并识别衣物的 15 个属性维度（大类、小类、风格、主色、副色、厚度、版型、材质、花纹、袖型、衣长、领型、正式程度、适用场合、视觉冲击力）；随后用户可以自由组合衣物创建穿搭、一键生成 AI 穿搭推荐（结合当日星座运势）、把整套衣橱或精选衣物分享给好友、在社区公开自己的穿搭并收获点赞与收藏，还可以购买会员或额度包解锁更多上传、AI 推荐与分享次数。产品气质应当是清爽、克制、值得信赖的私人衣橱助手，而不是电商导购。

【平台与画布约束】所有界面均为微信小程序（WeChat Mini Program），不是 Web 页面，也不是原生 App。画布按 iPhone 逻辑分辨率 375×812pt 设计（即 750rpx 宽），尺寸请用 rpx 思维表达。每个页面顶部必须有微信原生导航栏：居中显示页面标题，右上角固定保留微信胶囊按钮（圆角边框内的「···」与「⊙」）的位置，任何自定义图标都不得覆盖胶囊区域；二级页面左上角为原生返回箭头。底部 tabBar 为微信小程序标准样式：高度约 50pt，半透明毛玻璃（frosted material）底 + 顶部 0.5px 发丝分隔线，每个 tab 为「SF Symbols 风格线性图标 + 中文文字」，选中态为系统蓝 #007AFF、未选中为系统灰 #8E8E93，共 5 个：衣橱、穿搭、运势、通知、我的。全局不得出现浏览器地址栏、汉堡菜单、网页式页脚。

【设计语言】整体遵循 Apple 人机界面指南（HIG）的 iOS 视觉语言：干净、克制、以内容为中心。页面背景统一为 iOS 系统分组灰 #F2F2F7，内容一律承载在纯白 #FFFFFF 卡片中，卡片圆角 16pt 并采用 inset 分组列表（分组之间留 16pt 间距，分组内列表行高 44pt，用 0.5px 发丝级分隔线 #E5E5EA 且分隔线左缩进 16pt 与文字左对齐），不使用彩色阴影与重投影；层次靠背景色、毛玻璃与发丝分隔线区分，避免渐变与强装饰。强调色使用 iOS 系统蓝 #007AFF，辅助色使用系统靛蓝 #5856D6，情感化元素（点赞、收藏、喜欢）使用系统粉 #FF2D55；文字使用系统标签色：主要文字 #000000（label）、次要文字 #8E8E93（secondaryLabel）、占位与弱提示 #C7C7CC（tertiaryLabel）；功能色严格使用 Apple 系统色：绿 #34C759、橙 #FF9500、红 #FF3B30、蓝 #007AFF、黄 #FFCC00。字体使用 SF Pro Text / Display 与中文苹方（PingFang SC）：iOS 大标题 34px/700 左对齐（上滑时收进导航栏变为 17px 居中）、区块标题 17px/600、正文 15px/400、辅助说明 13px/400、最小注释 11px；金额与时间使用等宽数字（tabular figures）。图标统一采用 SF Symbols 风格：线性、2px 圆角描边、字重与文字协调、单一颜色，不使用多色拟物图标。控件遵循 iOS 规范：主操作为系统蓝填充按钮（圆角 12pt、白字、按下时降低不透明度），次操作为浅灰 #F2F2F7 无边框按钮或系统蓝文字按钮，危险操作为系统红文字，禁用态文字与底色同时降透明度；开关为 iOS 绿色开关，分段控件为灰底滑块，滑块为细轨圆点。导航栏与标签栏使用半透明毛玻璃材质（frosted material）并带 0.5px 发丝分隔线；留白遵循 8pt 栅格，页面左右安全边距 16pt。所有衣物图片为白底或透明底的单件商品图，居中展示在 #F2F2F7 圆角方块内，图片圆角与卡片一致。

【导航结构】5 个 tabBar 页面：衣橱（衣物网格 + 上传入口）、穿搭（我的穿搭 + AI 推荐入口）、运势（今日星座运势）、通知（消息列表）、我的（个人资料、额度、会员、订单、分享管理）。二级页面包括：衣物上传、衣物详情与编辑、穿搭详情、AI 穿搭推荐、衣柜分享（列表 / 创建 / 详情）、额度与会员商城、订单列表、编辑资料。

【页面跳转关系】登录成功进入「衣橱」；衣橱右下悬浮按钮 → 衣物上传 → 处理完成自动进入衣物详情；点击衣物卡片 → 衣物详情；穿搭页点击卡片 → 穿搭详情，点「AI 推荐」→ AI 穿搭推荐，保存后回到穿搭详情；创建穿搭从衣橱多选衣物后进入；运势页「生成今日推荐穿搭」→ AI 穿搭推荐；我的页 → 额度与会员商城 / 订单 / 我的分享 / 我的收藏 / 额度明细 / 编辑资料；我的分享 → 创建分享 → 分享详情；通知项点击后标记为已读；商品购买 → 订单确认 → 订单列表。所有二级页面左上角为返回箭头并支持右滑返回。

【图标与组件规格】图标采用 SF Symbols 语义：衣橱 = hanger、运势 = sparkles、通知 = bell、我的 = person.crop.circle、上传 = camera、点赞 = heart、收藏 = star、分享 = square.and.arrow.up、删除 = trash、编辑 = pencil、会员 = crown、订单 = doc.text、额度 = gauge、设置 = gear、返回 = chevron.left。尺寸：tabBar 图标 24pt，行内图标 20pt，卡片大图标 28pt，头像 40~64pt 圆形。按钮：主按钮高 48pt、圆角 12pt、整宽时左右留 16pt；次按钮高 44pt；输入框高 44pt、圆角 10pt、内边距 12pt、占位文字用 #C7C7CC。布局：卡片内边距 16pt、卡片间距 12pt、分组间距 16pt、页面左右安全边距 16pt、底部安全区 34pt；衣物网格为两列，列间距与行间距均 12pt，卡片圆角 16pt，图片区 1:1，列表行高 44pt，分隔线 0.5px #E5E5EA。

【全局通用元素】状态徽标统一为小圆角胶囊标签（10~11px，系统色 10% 浅底 + 同色深字），颜色取系统灰 / 系统蓝 / 系统橙 / 系统绿 / 系统红。空态统一为「居中 SF Symbols 风格线稿插画（系统蓝线条 + 淡蓝 #E8F2FF 块面）+ 17px 加粗主文案 + 13px 系统灰说明 + 一个系统蓝填充按钮或系统蓝文字引导」。加载态：首屏为骨架屏（#F2F2F7 与 #E5E5EA 圆角块轻微呼吸动画），按钮内为 iOS 风格活动指示器，下拉刷新为微信小程序标准三点动画。轻提示为毛玻璃圆角浮层（白色 80% 底 + 深色文字，圆角 12pt，1.5 秒后自动消失）；确认提示为 iOS 风格居中 Alert（毛玻璃白底、圆角 14pt、标题 17px 加粗 + 说明 13px、按钮横向平分，主按钮为系统蓝加粗文字，取消为常规字重，危险操作为系统红 #FF3B30）；底部面板为 iOS sheet（顶部居中 36×5pt 灰色 grabber 小横条，顶部圆角 10pt，毛玻璃白底，取消项单独成组并与其他项间隔 8pt）。衣物图未就绪时显示 #F2F2F7 圆角方块 + 居中线性衣架图标。金额统一展示为「¥ + 两位小数」并使用等宽数字（后端单位为分，前端需除以 100），原价用系统灰删除线。时间统一展示为「刚刚 / x 分钟前 / 今天 / 2025-04-15」（后端为 10 位秒级时间戳）。所有列表支持下拉刷新与上拉加载，每页最多 50 条。页面跳转使用微信小程序标准的右滑返回手势与原生导航返回，转场为 iOS 风格的右推与右滑。

【负面约束】不要出现 Material Design 风格（带阴影的圆形浮动按钮、汉堡菜单、黑色 Snackbar）、不要用 emoji 充当功能图标、不要出现英文界面文案（金额符号与 SF Symbols 名称除外）、不要使用真实照片或任何品牌 Logo、不要使用浓烈渐变、霓虹色、拟物质感与彩色投影、不要出现网页式页脚与浏览器地址栏、不要在右上角胶囊区域放置任何自定义按钮、不要虚构后端不存在的字段与能力（穿搭封面图由多件衣物图拼接、不展示收藏数与穿搭创建时间、不展示穿搭作者信息、通知不展示发送者头像、不提供「全部已读」、商品不展示图片与标签、不提供衣物搜索与排序、分享不展示标题与访问量、运势只有综合/爱情/工作/财富四项评分）。

【后续生成约定】

1. 我接下来会按「登录 → 衣橱 → 衣物详情 → 穿搭 → AI 穿搭推荐 → 衣物上传 → 穿搭详情 → 运势 → 衣柜分享 → 通知 → 额度与会员商城 → 订单 → 我的 → 创建/编辑穿搭」的顺序，每屏单独发一条消息，共 14 屏（13 个主页面 + 「创建/编辑穿搭」补充页）。
2. 每屏输出为一个独立画板（竖版 375×812pt），画板顶部标注中文页面名。
3. 收到某屏描述后只输出该屏，不要重复输出其他页面，不要复述我的描述。
4. 同一组件（按钮、标签、卡片、列表行、弹窗、空态）在各页保持完全一致。
5. 各屏描述中已内联该屏的空态、加载态与异常态，请在同一画板旁一并生成。
6. 所有文案使用简体中文；图片位置使用 #F2F2F7 占位或简约线稿，不要出现真实照片。

请回复「已理解全局规范，请发送第 1 屏」，我将逐屏发送页面描述。

---

第 2 段｜第 1 屏 微信授权登录

【上下文锚点】沿用第 1 段全局规范：微信小程序「纸条AI衣橱」，竖版 375×812pt，顶部微信原生导航栏 + 右上胶囊按钮占位，iOS 系统蓝 #007AFF 为强调色，#F2F2F7 分组灰底 + 纯白卡片 + 0.5px #E5E5EA 发丝分隔线，SF Symbols 风格线性图标，SF Pro / 苹方字阶，左右安全边距 16pt。本条为第 1 屏，请只生成本页一个画板（画板顶部标注「微信授权登录」），并一并生成其中的空态/异常态。

全屏页面，无顶部导航标题。顶部 1/3 为淡蓝 #E8F2FF 块面托起一张轻盈的线稿插画：衣架、连衣裙、T 恤、鞋子错落摆放，线条用系统蓝 #007AFF、块面用 #E8F2FF 与 #5856D6 点缀。中部为线性衣架图标组成的产品 Logo 与产品名「纸条AI衣橱」，下方一句 slogan「把你的衣橱，交给 AI 打理」。底部为安全区上方的整宽圆角 14pt 填充按钮「微信一键登录」（按钮内左侧带微信图标），按钮正下方一行 11px 灰色小字「登录即代表同意《用户协议》和《隐私政策》」，其中协议名为可点击的系统蓝文字。页面不要出现手机号输入框、验证码、账号密码等任何登录方式。

---

第 3 段｜第 2 屏 衣橱（tabBar）

【上下文锚点】沿用第 1 段全局规范：微信小程序「纸条AI衣橱」，竖版 375×812pt，iOS 系统蓝 #007AFF 强调色、#F2F2F7 页面底 + 纯白卡片 + 0.5px #E5E5EA 发丝线，SF Symbols 线性图标，两列衣物网格（列间距与行间距 12pt、卡片圆角 16pt、图片区 1:1）。本条为第 2 屏「衣橱」，属于 5 个 tabBar 页之一（衣橱 / 穿搭 / 运势 / 通知 / 我的，本页为选中态），请只生成本页一个画板。

顶部导航标题「我的衣橱」。标题下方第一行是可横向滑动的分类筛选标签：全部、上装、下装、连衣裙、外套、鞋、配饰（选中为系统蓝实心底白字，未选中为浅灰底深灰字）；第二行是一行 11px 灰色统计小字「共 128 件 · 上传额度剩余 13 次」。主体为两列等宽衣物卡片网格：每张卡片为白底圆角，上部为 1:1 浅灰圆角图区，透明底衣物图居中；图区右上角为处理状态徽标——排队中（系统灰）、AI 抠图中（系统蓝）、智能分类中（系统蓝）、识别失败（系统红，点击可重试）；下部左侧为衣物名「白色纯棉T恤」（单行截断），下方灰色小字「上装 · T恤 · 白色」。右下角为悬浮圆形系统蓝按钮（内为加号），点击上传衣物。空态：中央衣架线稿插画 + 主文案「衣橱还空着」+ 说明「拍照上传第一件衣物，AI 自动抠图并识别属性」+ 系统蓝按钮「上传衣物」。加载态：两列骨架卡片（灰块呼吸动画）。列表支持下拉刷新与上拉加载更多。

---

第 4 段｜第 4 屏 衣物详情与编辑

【上下文锚点】沿用第 1 段全局规范：微信小程序「纸条AI衣橱」，竖版 375×812pt，二级页面（左上角原生返回箭头、支持右滑返回），顶部微信原生导航栏 + 右上胶囊占位，iOS 系统蓝 #007AFF，#F2F2F7 底 + 纯白卡片 + 0.5px #E5E5EA 发丝线，inset 分组列表（行高 44pt、分隔线左缩进 16pt）。本条为第 4 屏，请只生成本页一个画板，并同时给出「浏览态」与「编辑态」两个版本。

二级页面，标题「衣物详情」，标题下方右侧放一个「编辑」文字按钮。顶部为占屏约 45% 的浅灰圆角大图区，透明底衣物图居中展示。下方白色卡片：第一行为衣物名「白色纯棉T恤」大字（编辑态为输入框，右侧「保存」按钮）；下面是属性列表，按分组以「左侧字段名 + 右侧值」的行式呈现，整行可点击并在底部弹起选择器或输入框，正式程度与视觉冲击力两项用 5 段小进度条加数字「3/5」「4/5」展示，主色一项在文字右侧跟一个同色小色块：大类（上装）、小类（T恤）、风格（简约）、主色（白色）、副色（—）、厚度（薄）、版型（宽松）、材质（纯棉）、花纹（纯色）、袖型（短袖）、衣长（常规）、领型（圆领）、正式程度（3/5）、适用场合（休闲、通勤，标签形式）、视觉冲击力（4/5）；再下方是备注区「备注：去年夏天买的，领口略松」。页面底部为红色文字按钮「删除这件衣物」，点击弹确认框「删除后将退回 1 次上传额度，确认删除？」+「取消」「确认删除」（红色）。注意额度回退规则：仅「处理中 / 已成功」的衣物删除时回退 1 次上传额度；「识别失败」的衣物在失败时已自动回退，删除时不再返还，弹窗文案应改为「确认删除？」（不提返还）。

---

第 5 段｜第 5 屏 穿搭（tabBar）

【上下文锚点】沿用第 1 段全局规范：微信小程序「纸条AI衣橱」，竖版 375×812pt，iOS 系统蓝 #007AFF 强调色、辅助靛蓝 #5856D6、情感粉 #FF2D55，#F2F2F7 底 + 纯白卡片（圆角 16pt）+ 0.5px #E5E5EA 发丝线，SF Symbols 线性图标（点赞 = heart、收藏 = star）。本条为第 5 屏「穿搭」，属于 5 个 tabBar 页之一（本页为选中态），请只生成本页一个画板。

顶部导航标题「穿搭」，下方为分段控件：我的穿搭 / 已收藏（选中段为白底系统蓝字滑块）。其下右侧一行两个入口：描边小按钮「+ 创建穿搭」与系统蓝小按钮「AI 推荐」。主体为纵向卡片流：每张穿搭卡片为白底圆角，顶部为「拼图式」封面——把该穿搭包含的衣物抠图并排错落摆放在浅灰圆角横图上（示例 4 件，最多 10 件；若只有一件则居中放大）；下方左侧为穿搭名「初秋通勤三件套」，右侧为状态标签：仅自己可见（系统灰）、已公开（系统蓝）、AI 推荐（系统靛蓝 #5856D6）；第二行为穿搭描述「白T配直筒牛仔裤，清爽干净，适合初秋通勤」两行截断；第三行为场景标签「通勤」+ 灰色小字「4 件衣物」；卡片底部右侧为点赞图标与数量「128」、收藏图标（未收藏为线框、已收藏为系统蓝实心）。点击卡片进入穿搭详情。空态：插画 + 「还没有穿搭」+「从衣橱挑几件，搭一套吧」+ 系统蓝按钮「创建穿搭」；收藏 tab 空态为「还没有收藏的穿搭」。

---

第 6 段｜第 7 屏 AI 穿搭推荐

【上下文锚点】沿用第 1 段全局规范：微信小程序「纸条AI衣橱」，竖版 375×812pt，二级页面（左上角返回箭头、支持右滑返回），iOS 系统蓝 #007AFF 强调色、辅助靛蓝 #5856D6，#F2F2F7 底 + 纯白卡片 + 0.5px #E5E5EA 发丝线，SF Symbols 线性图标，底部固定操作栏位于安全区上方（白底 + 上分割线）。本条为第 7 屏，请生成本页画板，并一并生成「场景选择弹窗」「生成中状态页」「结果页」与三种异常态。

从穿搭页「AI 推荐」按钮进入。进入后首先是场景选择半屏弹窗（可跳过，默认「每日推荐」）：两个大卡片单选——每日推荐（按今日运势与衣橱自动搭配）与自定义场景（下方出现输入框，占位文案「例如：海边度假、周一例会、初次约会」），底部系统蓝按钮「开始生成（消耗 1 次推荐额度）」。生成中为全屏状态页：中央是衣物线稿轮播的加载动画，下方文案「AI 正在为你搭配…」+ 灰字「结合今日白羊座运势与你的 128 件衣物」。生成完成后展示结果页：顶部为推荐组合的大幅拼图（4~6 件衣物），下方白卡为 AI 生成的标题「晴日轻复古通勤组合」+ 推荐文案「今日综合运势 4 星，适合以米白针织开衫搭配直筒牛仔裤，清爽又有层次」+ 场景标签「通勤」；再下方是「推荐单品」横向列表（每件为小方图 + 名称 + 小类，如「米白针织开衫 · 上装」）。底部固定栏：系统蓝按钮「保存到我的穿搭」+ 描边按钮「换一套」（下方一行 11px 灰字「换一套将再消耗 1 次推荐额度」；受 180 秒并发限制，上一套生成后 180 秒内点击不发起请求，仅轻提示「正在生成中，请稍候」并禁用按钮）。保存成功后 轻提示「已保存到我的穿搭」并跳转穿搭详情；保存前该穿搭标注标签「待保存」。异常态有三种：衣橱为空或无可用衣物 → 插画 +「还没有可用衣物」+「先上传几件处理成功的衣物吧」+ 按钮「去上传」；额度不足 → 弹窗「AI 推荐额度不足」+ 按钮「去购买」；请求过于频繁（180 秒内重复生成，返回 429）→ 轻提示「正在生成中，请稍候」并禁用「换一套」与「开始生成」按钮。

---

第 7 段｜第 3 屏 衣物上传

【上下文锚点】沿用第 1 段全局规范：微信小程序「纸条AI衣橱」，竖版 375×812pt，二级页面（左上角返回箭头、支持右滑返回），iOS 系统蓝 #007AFF 强调色、系统红 #FF3B30 危险色，#F2F2F7 底 + 纯白卡片 + 0.5px #E5E5EA 发丝线，SF Symbols 线性图标（上传 = camera），底部面板为 iOS sheet（36×5pt grabber、圆角 10pt、取消项单独成组间隔 8pt）。本条为第 3 屏，请生成本页画板，并一并生成「初始态」「处理中」「失败态」「额度不足弹窗」与「底部动作面板」。

二级页面，标题「上传衣物」。初始态为一块占屏约 40% 的白色虚线圆角上传区，中央为线性相机图标 + 文案「拍照或从相册选择」+ 灰色小字「支持 JPG / PNG，单张不超过 20MB，上传消耗 1 次上传额度」，区域下方为一行灰色说明「AI 将自动抠图并识别 15 项属性」。点击后从底部弹起半屏动作面板：拍照、从相册选择、取消（白色圆角上滑面板，取消项与其他项之间用 8pt 灰间隔）。选择图片后进入处理中状态：顶部为所选图片缩略（圆角），中部为三步横向步骤条「排队中 → AI 抠图 → 智能分类」，当前步骤圆点为系统蓝实心、已完成为对勾、未开始为浅灰；下方文案「AI 正在识别你的衣物…」与小字「通常需要 10 秒左右，请稍候」。处理成功后自动跳转衣物详情；失败态为红色感叹号图标 + 「识别失败：图片抠图失败」+ 灰字「本次上传额度已自动退回」+ 两个按钮「重新上传」（系统蓝）与「手动填写信息」（描边）。若上传前额度为 0：居中弹窗「上传额度不足」+ 说明「当前剩余 0 次，购买额度包后可继续上传」+ 按钮「去购买」（系统蓝）与「取消」。

---

第 8 段｜第 6 屏 穿搭详情

【上下文锚点】沿用第 1 段全局规范：微信小程序「纸条AI衣橱」，竖版 375×812pt，二级页面（左上角返回箭头、右上「更多」入口），iOS 系统蓝 #007AFF、情感粉 #FF2D55、辅助靛蓝 #5856D6，#F2F2F7 底 + 纯白卡片 + 0.5px #E5E5EA 发丝线，SF Symbols 线性图标（点赞 = heart、收藏 = star、分享 = square.and.arrow.up），底部固定操作栏位于安全区上方。本条为第 6 屏，请生成本页画板，并一并给出「属主视角」「他人浏览视角」两个版本与「公开确认弹窗」。

二级页面，标题为穿搭名。顶部为大幅拼图封面（白底圆角，多件衣物横排错落）。下方白色卡片：穿搭名 + 场景标签「通勤」+ 来源标签（自建 / AI 推荐）+ 公开状态（仅自己可见 / 已公开）；描述文案；「包含衣物」横向滚动小卡列表（每件为小方图 + 名称，点击可进入该衣物详情）。底部为固定操作栏（安全区上方白底 + 上分割线）：左侧爱心点赞按钮（含数量）与星形收藏按钮，右侧为「公开到社区」系统蓝按钮（已公开时变为描边按钮「取消公开」）与分享图标按钮。点击「公开到社区」弹确认框「公开后将展示在社区供他人点赞收藏，并消耗 1 次社区分享额度」+「取消」「确认公开」。他人浏览公开穿搭时，底部操作栏只保留点赞与收藏。删除与编辑入口放在页面右上「更多」弹出的动作面板中（编辑穿搭、删除穿搭）。

---

第 9 段｜第 8 屏 运势（tabBar）

【上下文锚点】沿用第 1 段全局规范：微信小程序「纸条AI衣橱」，竖版 375×812pt，iOS 系统蓝 #007AFF、淡蓝块面 #E8F2FF，#F2F2F7 底 + 纯白卡片（圆角 16pt）+ 0.5px #E5E5EA 发丝线，SF Symbols 线性图标（运势 = sparkles），等宽数字。本条为第 8 屏「运势」，属于 5 个 tabBar 页之一（本页为选中态），请只生成本页一个画板，并一并生成加载态与异常态。注意：运势只有综合 / 爱情 / 工作 / 财富四项评分与幸运色、幸运数字，不要出现其他评分维度；星座由用户生日推算，不提供「切换星座」能力，右上角只放「去设置生日」文字入口（跳转编辑资料）。

顶部导航标题「每日运势」。页面主体是一张淡蓝 #E8F2FF 圆角大卡（不要浓烈渐变）：顶部左侧为星座线性图标与星座名「白羊座」，右侧为日期「2025.04.15」与文字按钮「去设置生日」；中部为「综合运势」标签 + 超大数字「4.0」+ 一排 5 星（4 星为实心系统蓝、1 星为浅灰线框）；下方为三项评分行，每行为「名称 + 5 段小进度条 + 分数」：爱情运势 3/5、工作运势 5/5、财富运势 4/5（进度条填充系统蓝、未填充为浅灰）；再下方为白色小卡「今日运势」+ 文案「今天适合主动出击，贵人运旺，适合尝试新的穿搭风格」；底部并排两张小卡：幸运色（左侧一个红色小圆点 + 「红色」）与幸运数字（「6」）。页面底部为描边按钮「生成今日推荐穿搭」（跳转 AI 推荐页）。异常态：用户未设置生日 → 插画 + 「还没有设置生日」+「设置生日后即可查看你的星座运势」+ 系统蓝按钮「去完善资料」。加载态为整卡骨架屏；若返回「运势生成中」（首次无缓存异步生成），保持骨架屏并轻提示「运势生成中，请稍后重试」，3~5 秒后自动重试一次。

---

第 10 段｜第 9 屏 衣柜分享（3 个子页面）

【上下文锚点】沿用第 1 段全局规范：微信小程序「纸条AI衣橱」，竖版 375×812pt，二级页面（左上角返回箭头、支持右滑返回），iOS 系统蓝 #007AFF，#F2F2F7 底 + 纯白卡片 + 0.5px #E5E5EA 发丝线，SF Symbols 线性图标，两列衣物网格（间距 12pt、圆角 16pt、图片区 1:1），底部固定栏位于安全区上方。本条为第 9 屏，包含 ①②③ 三个子页面，请生成三个画板，分别标注「衣柜分享 - 我的分享」「衣柜分享 - 创建分享」「衣柜分享 - 分享详情」，并一并生成其中的有效期面板、分享预览卡片与失效态。

①「我的分享」列表页（从我的页进入，标题「衣柜分享」）：右上角下方为「+ 新建分享」描边按钮；列表项为白卡，左侧为衣物小图组成的 2×2 预览网格，右侧第一行「衣柜分享 · 12 件」，第二行类型标签（部分衣物 / 全量衣橱），第三行为有效期「3 天后过期」或「长期有效」；已取消或已过期的卡片整体降透明度并在右上角加盖灰色角标「已取消」「已过期」。

②创建分享页：第一步为两个大卡片单选——部分衣物（说明「挑选几件衣物分享给好友」）与全量快照（说明「分享当前衣橱的全部衣物」）；若选部分，进入衣物多选网格（勾选态为卡片系统蓝描边 + 右上系统蓝对勾），底部固定栏显示「已选 6 件」+ 系统蓝按钮「下一步」；随后底部弹起有效期面板：1 天 / 7 天 / 30 天 / 长期有效（单选，选中右侧对勾），底部按钮「确认分享（消耗 1 次衣柜分享额度）」。分享成功后展示分享卡片预览：小程序卡片样式，顶部为分享者头像与昵称「小雨 向你分享了 12 件衣物」，中部为衣物预览横图，底部为「查看衣橱」按钮。

③分享详情页（访客或属主视角）：顶部为分享者头像 + 昵称 + 「分享了 12 件衣物」与有效期提示，下方为只读衣物网格；属主视角底部固定栏为「取消分享」红色文字按钮，访客视角无操作栏。分享已失效时整页为失效态：灰色插画 +「该分享已过期或已被取消」+ 描边按钮「返回首页」。

---

第 11 段｜第 10 屏 通知（tabBar）

【上下文锚点】沿用第 1 段全局规范：微信小程序「纸条AI衣橱」，竖版 375×812pt，iOS 系统蓝 #007AFF、系统红 #FF3B30，#F2F2F7 底 + 纯白卡片 + 0.5px #E5E5EA 发丝线，SF Symbols 线性图标（通知 = bell），未读标记为 6pt 系统蓝小圆点。本条为第 10 屏「通知」，属于 5 个 tabBar 页之一（本页为选中态，tabBar 通知图标右上角带红色未读数徽标「7」），请只生成本页一个画板，并一并生成空态。注意：通知不展示发送者头像，不提供「全部已读」入口。

顶部导航标题「通知」，下方为筛选标签：全部、点赞、订单、系统。列表项为白卡：左侧 40pt 圆形线性图标——点赞为心形（浅粉底 #FFE8EC 红字 #FF3B30）、订单为票据（淡蓝底 #E8F2FF 系统蓝）、系统为铃铛（浅灰底 #F2F2F7 灰字）；右侧第一行为标题「收到新的点赞」加粗，右上角为时间「2 小时前」，第二行为内容「你的穿搭「周末休闲通勤套」收到了一个赞」两行截断。未读项在标题左侧带一个 6pt 系统蓝小圆点且卡片底部有一条极浅系统蓝左边线，已读项文字整体偏灰。tabBar 的通知图标右上角带红色未读数徽标「7」。点击通知项进入「通知详情」二级页面（标题「通知详情」，左上角返回箭头）：白卡内自上而下为类型圆形图标 + 加粗标题「收到新的点赞」+ 灰色时间「2025-04-15 14:32」+ 完整内容正文「你的穿搭「周末休闲通勤套」收到了一个赞」，进入的同时将该条标记为已读（列表红点消失、文字转灰）；不展示发送者头像，不提供「全部已读」入口。空态：铃铛线稿插画 +「还没有消息」+「穿搭被点赞、订单动态都会出现在这里」。

---

第 12 段｜第 11 屏 额度与会员商城

【上下文锚点】沿用第 1 段全局规范：微信小程序「纸条AI衣橱」，竖版 375×812pt，二级页面（左上角返回箭头、支持右滑返回），iOS 系统蓝 #007AFF、警示橙 #FF9500，#F2F2F7 底 + 纯白卡片（圆角 16pt）+ 0.5px #E5E5EA 发丝线，SF Symbols 线性图标（会员 = crown、上传 = camera、AI = sparkles、衣柜分享 = 衣柜、搭配分享 = hanger），金额展示为「¥ + 两位小数」等宽数字、原价为系统灰删除线。本条为第 11 屏，请生成本页画板，并一并生成「订单确认」子页面。注意：商品不展示图片与标签，只展示名称、描述、售价与原价。

从我的页进入，标题「额度与会员」。顶部为会员卡（淡蓝 #E8F2FF 底、系统蓝文字的圆角大卡）：左侧为皇冠线性图标 + 「月度会员」+ 灰字「有效期至 2025-05-15」，右侧为「立即续费」描边按钮；体验会员（新用户注册赠送，通常 3 天）时显示「体验会员」+ 灰字「3 天后到期」；非会员时显示「开通会员，解锁更多 AI 与上传权益」+ 系统蓝按钮「立即开通」。下方为「我的额度」四个小卡组成的 2×2 网格，每卡为白底圆角：名称为「上传额度 / AI 推荐额度 / 社区分享额度 / 衣柜分享额度」，中部为剩余数大字「13」+ 灰字「/ 20」，底部为细进度条（已用比例，系统蓝填充；剩余低于 20% 时进度条转为警示橙 #FF9500）。额度网格下方为「看广告得额度」入口条（白底圆角横条，左侧为 SF Symbols 风格「播放」线性图标 + 文案「看广告得额度」，右侧为「看广告 +N」小系统蓝描边按钮，N 由服务端配置固定）：点击弹出微信激励视频广告（小程序原生广告组件），完整观看后自动调后端 /ad-reward/grant（前端只传奖励类型与广告记录 ID，不传金额），成功后对应额度余量实时 +N 并轻提示「已到账 +N 额度」；广告未看完或中途关闭不发放；服务端未开启广告激励时整个入口条不展示。加载态：广告加载中按钮内为 iOS 活动指示器；失败态：轻提示「广告加载失败，请稍后重试」。其下为「额度明细」入口行（右侧箭头，进入流水列表：每条为「变更原因 + 数量（-1 / +30）+ 变更后剩余 + 时间」）。再下方为「额度与会员充值」商品区，顶部为类型标签：全部、会员包、上传包、AI 推荐包、衣柜分享包、搭配分享包。商品卡为白底圆角：左侧为类型图标（会员=皇冠、上传=相机、AI=星星、衣柜分享=衣柜、搭配分享=衣架），中部第一行为商品名「月度会员」，第二行为描述「开通后 30 天内无限使用 AI 推荐」灰色小字，右侧为售价「¥19.00」（系统蓝 15px 加粗）与原价「¥29.00」（灰色划线），下方右侧为小系统蓝按钮「购买」。点击购买进入订单确认：商品摘要卡（名称 + 权益说明）+ 金额行「实付 ¥19.00」+ 底部系统蓝按钮「微信支付」。

---

第 13 段｜第 12 屏 订单

【上下文锚点】沿用第 1 段全局规范：微信小程序「纸条AI衣橱」，竖版 375×812pt，二级页面（左上角返回箭头、支持右滑返回），iOS 系统色：警示橙 #FF9500、成功绿 #34C759、系统灰 #8E8E93、系统蓝 #007AFF，#F2F2F7 底 + 纯白卡片 + 0.5px #E5E5EA 发丝线，SF Symbols 线性图标（订单 = doc.text），金额「¥ + 两位小数」等宽数字。本条为第 12 屏，请生成本页画板，并一并生成「微信支付面板」「申请退款面板」与空态。

顶部导航标题「我的订单」，下方为状态筛选标签：全部、待支付、已支付、申请退款中、已取消、已过期、已退款。列表项为白卡：第一行左侧为订单号尾部「订单 …8b」灰色小字，右侧为状态徽标——待支付（警示橙）、已支付（成功绿）、申请退款中（警示橙）、已取消（浅灰）、已过期（系统灰）、已退款（系统蓝）；第二行为商品名「月度会员」+ 权益灰字「30 天会员」；第三行左侧为实付金额「实付 ¥19.00」，右侧为操作按钮：待支付显示倒计时灰字「剩余 14:32」+ 描边按钮「取消订单」+ 系统蓝按钮「去支付」；已支付显示描边按钮「申请退款」；其余状态无按钮。点击「去支付」从底部弹起微信支付面板（金额「¥19.00」+ 商品名 + 绿色「确认支付」按钮）。申请退款弹出面板：退款原因输入框（占位「请填写退款原因」，上限 200 字）+ 提交按钮，提交后 轻提示「退款申请已提交，等待审核」，订单状态变为「申请退款中」（前端轮询 GET /order：6 继续等待、5 已退款为终态、回到 2 表示退款失败可重新申请）。空态：票据线稿插画 +「还没有订单」+ 描边按钮「去看看额度包」。

---

第 14 段｜第 13 屏 我的（tabBar）

【上下文锚点】沿用第 1 段全局规范：微信小程序「纸条AI衣橱」，竖版 375×812pt，iOS 系统蓝 #007AFF、警示橙 #FF9500，#F2F2F7 底 + 纯白卡片 + 0.5px #E5E5EA 发丝线（分隔线左缩进 16pt 与文字对齐），inset 分组列表行高 44pt，SF Symbols 线性图标，头像 40~64pt 圆形。本条为第 13 屏「我的」，属于 5 个 tabBar 页之一（本页为选中态），是最后一屏。请生成本页画板，并一并生成「编辑资料」子页面与顶部额度提示条。

顶部为个人信息白卡：左侧 64pt 圆形头像（未设置时为灰色人像占位），右侧第一行为昵称「小雨」+ 性别图标，第二行为两个小标签：会员标签（系统蓝浅底）——非会员时不展示该标签，体验会员展示「体验会员 · 3 天后到期」（新用户注册赠送，通常 3 天），月度/年度会员展示「月度会员 · 05-15 到期」；与星座「白羊座」（浅灰底，未设置生日时显示可点击的「设置生日」）；卡片右侧为「编辑资料 >」文字按钮。下方第一组功能列表（白卡，每行线性图标 + 文字 + 右侧说明 + 箭头）：我的额度（右侧灰字「上传额度剩 13」）、我的订单、我的分享、我的收藏、额度明细。第二组：编辑资料、设置生日、客服与反馈、关于纸条AI衣橱。底部为灰色小字版本号「v1.0.0」。编辑资料页为表单：头像（点击更换）、昵称（≤32 字）、性别（男 / 女）、生日（日期选择器，不可晚于今天）、手机号（只读展示），底部系统蓝按钮「保存」。额度不足或会员到期前，在「我的」页顶部显示一条浅橙提示条「你的上传额度仅剩 2 次，点击购买额度包 >」。

---

第 15 段｜补充页 创建 / 编辑穿搭

【上下文锚点】沿用第 1 段全局规范：微信小程序「纸条AI衣橱」，竖版 375×812pt，二级页面（左上角返回箭头、支持右滑返回），iOS 系统蓝 #007AFF 强调色、系统红 #FF3B30 危险色，#F2F2F7 底 + 纯白卡片（圆角 16pt）+ 0.5px #E5E5EA 发丝线，输入框高 44pt 圆角 10pt、占位文字 #C7C7CC，两列衣物网格（间距 12pt、卡片圆角 16pt、图片区 1:1），底部固定栏位于安全区上方（白底 + 上分割线），轻提示为毛玻璃圆角浮层。本条为最后一个补充页，请生成「创建穿搭」「编辑穿搭」两个版本（表单与多选网格一致，编辑态预填已有内容），并一并给出空态与轻提示异常态。

从穿搭页「+ 创建穿搭」按钮进入（或从穿搭详情右上「更多」→「编辑穿搭」进入），标题为「创建穿搭」（编辑态为「编辑穿搭」）。页面顶部为拼图预览区：白底圆角横图内把已选衣物抠图并排错落摆放，未选择任何衣物时显示 #F2F2F7 占位 + 居中线性衣架图标 + 灰字「还没有选择衣物」。其下为白色表单卡片：第一行为「穿搭名称」输入框（必填，上限 32 字，占位「给这套穿搭起个名字」，示例「初秋通勤三件套」）；第二行为「穿搭描述」多行输入框（上限 500 字，占位「简单描述这套穿搭」，右上角显示字数「12/500」）；第三行为「适合场景」输入框（上限 100 字，占位「例如：通勤、约会、休闲」，可展示为已选场景标签 + 「+ 添加」）。表单下方为「选择衣物」分组（白卡，行式入口，右侧显示「已选 4 件」与箭头）：点击进入衣橱多选网格（复用第 2 屏的两列衣物卡片，勾选态为卡片系统蓝描边 + 右上系统蓝对勾，最多 10 件、至少 1 件），底部固定栏显示「已选 4 件」+ 系统蓝按钮「确定」。底部固定操作栏：系统蓝按钮「保存」（未填名称或未选衣物时为禁用态，文字与底色同时降透明度），编辑态在按钮上方另加一行红色文字按钮「删除穿搭」（点击弹确认框「确认删除这套穿搭？」+「取消」「确认删除」（红色））。异常态用轻提示：未选任何衣物点保存 →「至少选择 1 件衣物」；选择超过 10 件 →「最多选择 10 件衣物」；名称为空 →「请填写穿搭名称」。保存成功后 轻提示「已保存」并返回穿搭详情。