鸿蒙原生应用 HarmonyOS 6.0实战：衣橱首页的天气卡与今日穿搭三件套

App 28「智能衣橱管理」首页（HomeTab），主题色 #BE185D 品红（rose），4 个 Tab 分别为首页（👗）、衣橱（🧥）、穿搭（✨）、我的（👤）。首页采用"天气 + 统计 + 穿搭推荐"三区布局——Header（智能衣橱/今日穿搭已生成 ✨）+ 渐变天气卡（☀️ 32°C 晴 + 适合轻薄透气穿搭 + 换一套 >） + 4 宫格统计（48 衣物总数/12 穿搭方案/5 本周穿搭/8 收藏搭配） + SectionTitle（今日推荐穿搭）+ 三件套穿搭卡（👕白色T恤/👖牛仔裤/👟运动鞋 80×80 图块） + SectionTitle（穿搭方案）+ 5 组横滑方案（👕👖/👔👖/🧥👖/👕👗/👔👗）。本篇基于 28-smart-wardrobe/entry/src/main/ets/pages/HomeTab.ets（约 131 行）逐段拆解，附 4 张实机截图。

一、整体结构：三区"天气 + 统计 + 穿搭"布局

App 28 首页是"天气 + 统计 + 穿搭推荐"的三区布局——5 个 @Builder 块：

build() {
  Column() {
    this.Header()
    Scroll() {
      Column({ space: 14 }) {
        this.WeatherCard()
        this.StatGrid()
        this.SectionTitle('今日推荐穿搭')
        this.OutfitCard()
        this.SectionTitle('穿搭方案')
        this.OutfitList()
      }
      .width('100%')
      .padding({ left: D.pad, right: D.pad, top: 14, bottom: D.pad + this.safeBottom + 20 })
    }
    .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top)
  }
  .width('100%').height('100%').backgroundColor(C.bg)
}

5 块结构：

1. Header — "智能衣橱" + 副标题
2. WeatherCard — 渐变天气卡（本页核心）
3. StatGrid — 4 宫格统计
4. SectionTitle('今日推荐穿搭') + OutfitCard — 三件套穿搭
5. SectionTitle('穿搭方案') + OutfitList — 5 组横滑方案

与 App 27 首页对比：App 27 是"倒计时卡 + 提醒列表"双区、App 28 是"天气 + 统计 + 穿搭"三区——"27 管'时间'、28 管'穿搭'"——"三区比双区信息更丰富"——因为穿搭推荐需要"天气依据 + 衣橱数据 + 具体方案"三块信息支撑——"首页的区数 = 决策链路的信息环数"。

主题色 #BE185D 品红——系列第一个"时尚粉红"主题：

• 品红 = "时尚/潮流/衣橱"（时尚杂志、服装品牌爱用玫红）
• 品红 = "女性化/温柔/优雅"（衣橱管理的主力用户画像）
• 品红 = "玫瑰/花朵"（衣柜的浪漫联想）

"品红"是时尚/穿搭类 App 的经典色（小红书红、蘑菇街粉、穿搭博主常用玫红）——与 App 18 粉红（#EC4899）的区别：App 18 社交匹配偏"桃粉/恋爱"、App 28 品红偏"时尚/衣橱"——"同是粉色系，18 社交、28 穿搭"——"粉色系内部的语义细分"。

#BE185D 比 #EC4899 更深更玫——BE185D 是深品红（玫瑰红）、EC4899 是亮粉红（桃红）——"衣橱用深品红更有质感、社交用亮粉更有活力"——"同色系的明暗 = 气质差异"。

项目源码开源：https://gitee.com/codenestFlow/HarmonyOSHub

二、Header：智能衣橱品牌区

Header 是"智能衣橱 / 今日穿搭已生成 ✨"双行品牌区（与系列同款双行）：

@Builder Header() {
  Column() {
    Text('智能衣橱')
      .fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.text)
      .width('100%')
      .padding({ top: this.safeTop + 10, left: D.pad, right: D.pad, bottom: 4 })
    Text('今日穿搭已生成 ✨')
      .fontSize(12).fontColor(C.textDim)
      .width('100%')
      .padding({ left: D.pad, right: D.pad, bottom: 12 })
  }
  .width('100%').backgroundColor(C.card)
}

"智能衣橱"——产品名（App 28 的名字），"智能"前缀点明 AI 能力。

"今日穿搭已生成 ✨" 副标题——"产品状态"：

• 今日——"每天更新"（穿搭推荐的时效性）
• 穿搭已生成——"AI 已完成推荐"（结果就绪）
• ✨——闪光 emoji（AI 生成的魔力感）

"已生成"的时态设计——"副标题用完成时态，暗示'结果已经准备好了'"——用户一进首页就知道"今天穿什么已经安排好了"——"状态告知 = 减少用户的等待焦虑"——"AI 生成类 App 的副标题要传达'结果就绪'"（与 App 26 "AI 一键生成 PPT 大纲"的"能生成"不同，28 是"已生成"）。

@StorageProp('safeTop') 安全区适配——同系列标准。

三、WeatherCard：渐变天气卡（本页核心）

WeatherCard 是 渐变底 + 天气 + 建议 + 换一套的天气卡：

@Builder WeatherCard() {
  Row({ space: 14 }) {
    Text('☀️').fontSize(40)
    Column({ space: 4 }) {
      Text('32°C 晴').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
      Text('适合轻薄透气穿搭').fontSize(12).fontColor('#FFFFFF').opacity(0.85)
    }.alignItems(HorizontalAlign.Start).layoutWeight(1)
    Text('换一套 >').fontSize(12).fontColor('#FFFFFF')
  }
  .width('100%').padding(16).borderRadius(D.rLg)
  .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })
  .onClick(() => { promptAction.showToast({ message: '换一套' }); })
}

天气卡结构（3 层）：

1. ☀️ 40 号大太阳——天气图标
2. "32°C 晴"（18 号加粗白）+ "适合轻薄透气穿搭"（12 号白 0.85）——温度/天气 + 穿搭建议
3. "换一套 >"（12 号白）——行动按钮

linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })——品红 → 粉 135° 渐变——"系列渐变卡的又一应用"（App 26/27 同款结构）——"品红 → 粉的渐变像晚霞/玫瑰"——"天气卡用渐变 = 天气的'温度感'"——晴天的暖色调呼应"32°C"的炎热。

"换一套 >"的交互语义——"不满意当前推荐？一键换"——这是穿搭推荐产品的核心交互（穿搭推荐不可能一次就合心意）——"换一套 = AI 推荐的容错机制"——点击弹"换一套"Toast 占位——"真实产品会重新生成一套"。

穿搭建议的"智能化"："适合轻薄透气穿搭"——"天气 → 穿搭建议的推理链"——32°C 晴 → 轻薄透气——"demo 展示了'天气驱动穿搭'的 AI 逻辑"——虽然建议是写死的，但逻辑链完整——"天气卡的智能感 = 建议与天气的因果感"。

点击反馈：整卡点击弹"换一套"Toast——"天气卡全卡可点"。

四、StatGrid：4 宫格统计

StatGrid 是 4 项统计的宫格——数值 + 标签：

@Builder StatGrid() {
  Row({ space: 10 }) {
    ForEach(this.stats, (s: StatItem) => {
      Column({ space: 4 }) {
        Text(s.value).fontSize(18).fontWeight(FontWeight.Bold).fontColor(C.primary)
        Text(s.label).fontSize(11).fontColor(C.textDim)
      }.layoutWeight(1).padding({ top: 12, bottom: 12 })
      .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
    }, (s: StatItem) => s.label)
  }.width('100%')
}

4 项统计：

1. 48 衣物总数（衣橱规模）
2. 12 穿搭方案（生成方案数）
3. 5 本周穿搭（本周产出）
4. 8 收藏搭配（收藏数）

与 App 27 首页（无统计）的区别——App 28 首页带统计宫格——"衣橱 App 的统计是核心"（用户想看到"我有多少衣服/方案"）——"统计的有无 = 业务对'资产展示'的需求度"——衣橱是资产型 App（衣物/方案都是资产），统计必须上首页。

统计宫格 vs 我的页统计卡的差异：

• 首页 StatGrid：4 个独立小卡（白底描边分格）
• 我的页 StatRow：1 张大卡 4 等分（白底无分隔）

"两种统计的视觉形态"——首页要"每个数字独立突出"用分格、我的页要"整体一致"用连卡——"同数据不同形态 = 页面角色的差异"——"首页的统计是'亮点展示'、我的页的统计是'汇总报表'"。

数值用 C.primary 品红——"统计数值 = 页面的强调色"——品红数字在白卡上跳跃醒目——"数字彩色化 = 数据可视化"。

数据呼应：48 衣物总数 ↔ 衣橱 Tab 6 件？——"48 是全部衣物、衣橱页展示 6 件示例"——"demo 的量级对比"（总量大、展示少）——12 穿搭方案 ↔ 穿搭 Tab 记录 4 条（方案总数大于记录数）——"统计数字代表更全的数据"。

五、OutfitCard：今日推荐三件套

OutfitCard 是 👕👖👟 三件套的推荐穿搭卡：

@Builder OutfitCard() {
  Row({ space: 20 }) {
    Column({ space: 8 }) {
      Row() { Text('👕').fontSize(40) }.width(80).height(80)
        .backgroundColor(C.cardSoft).borderRadius(D.rSm).justifyContent(FlexAlign.Center)
      Text('白色T恤').fontSize(12).fontColor(C.textDim)
    }
    Column({ space: 8 }) {
      Row() { Text('👖').fontSize(40) }.width(80).height(80)
        .backgroundColor(C.cardSoft).borderRadius(D.rSm).justifyContent(FlexAlign.Center)
      Text('牛仔裤').fontSize(12).fontColor(C.textDim)
    }
    Column({ space: 8 }) {
      Row() { Text('👟').fontSize(40) }.width(80).height(80)
        .backgroundColor(C.cardSoft).borderRadius(D.rSm).justifyContent(FlexAlign.Center)
      Text('运动鞋').fontSize(12).fontColor(C.textDim)
    }
  }
  .width('100%').padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke })
  .onClick(() => { promptAction.showToast({ message: '查看搭配' }); })
}

三件套结构：👕 白色T恤 / 👖 牛仔裤 / 👟 运动鞋——每件一个"40 号 emoji + 80×80 浅灰底方块 + 名称"——"上装 + 下装 + 鞋"的完整穿搭。

"三件套"的穿搭逻辑：T恤（上装）+ 牛仔裤（下装）+ 运动鞋（鞋）——"夏季轻便穿搭的标准组合"——呼应天气卡的"32°C 晴 · 轻薄透气"——"推荐穿搭与天气卡的建议一致"——"首页的数据自洽：天气 → 建议 → 具体穿搭"——这是 App 28 首页的核心逻辑链。

三件套与 App 27 首页倒计时卡的对比：27 是"一个核心信息放大"（倒计时）、28 是"三个元素并排"（三件套）——"展示形态 = 内容结构"——倒计时是"一个时间的细节"（放大）、穿搭是"三个物品的组合"（并排）——"内容决定布局"。

点击反馈：弹"查看搭配"Toast——"占位跳转"（真实产品进搭配详情）。

80×80 图块 + 40 号 emoji——"大方块装大 emoji"——与衣橱页 64 高图块、穿搭页 52 高图块的尺寸差异——"emoji 块尺寸 = 信息重要性"——今日推荐最重要（80 最大）。

六、OutfitList：5 组横滑方案

OutfitList 是 5 组穿搭方案的横向滚动列表：

@Builder OutfitList() {
  Scroll() {
    Row({ space: 12 }) {
      ForEach(this.outfits, (o: string, idx: number) => {
        Column({ space: 6 }) {
          Row() { Text(o).fontSize(28) }.width(80).height(80)
            .backgroundColor(C.cardSoft).borderRadius(D.rSm).justifyContent(FlexAlign.Center)
          Text('方案 ' + (idx + 1)).fontSize(11).fontColor(C.textDim)
        }
        .onClick(() => { promptAction.showToast({ message: '方案 ' + (idx + 1) }); })
      }, (o: string, idx: number) => o + idx)
    }
  }
  .scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off).width('100%')
}

5 组方案（每组 2-3 个 emoji 组合）：

1. 👕👖（T恤 + 牛仔裤）
2. 👔👖（衬衫 + 牛仔裤）
3. 🧥👖（外套 + 牛仔裤）
4. 👕👗（T恤 + 半身裙）
5. 👔👗（衬衫 + 半身裙）

方案卡片结构：28 号 emoji 组合（80×80 方块）+ "方案 X"（11 号灰）——"双 emoji 组合 = 穿搭的速记"——用两个 emoji 表达"上装 + 下装"——"emoji 组合是零成本的穿搭可视化"。

5 方案的"方案库"逻辑：上衣（👕👔🧥）× 下装（👖👗）的排列组合——"穿搭方案 = 衣物组合的生成结果"——"demo 的方案展示了 AI 穿搭推荐的产品形态：从衣橱选衣组合"——每种方案都是一个可行的搭配——"方案库的合理性与真实穿搭逻辑一致"。

Scroll().scrollable(ScrollDirection.Horizontal) 横滑——5 组超出一屏宽——"横向滚动 = 方案的浏览方式"——与 App 13 推荐横滑、App 27 日历缩略图横滑同构——"横滑列表是系列的内容浏览标配"。

(o: string, idx: number) => o + idx 的 key——emoji 组合可能重复（加索引保唯一）——"key 唯一性兜底"。

点击反馈：弹"方案 X"Toast——"占位跳转"（真实产品进方案详情/应用此穿搭）。

5 组方案与 12 穿搭方案统计的关系：首页展示 5 组"精选方案"、统计说 12 套——"展示 5、统计 12"——首页只展示一部分（横滑可看更多）——"列表分页/精选的语义"。

七、数据模型与主题体系

StatItem 模型（2 字段）：value/label——同系列标准。

outfits: string[] 方案数组——纯字符串（emoji 组合）——"简单数据用字符串"——方案只需展示组合，不需要额外字段——"数据复杂度 = 展示需求"。

C 主题色在本页的运用：

• primary 品红——天气卡渐变起点 + 统计数值
• accent 粉——天气卡渐变终点
• cardSoft 浅灰——穿搭图块底
• card/stroke——卡片/描边

渐变（品红 → 粉）与数值（品红）的双重品红——"品红是本页的绝对主角"——从最醒目的天气卡到最小的统计数字，品红贯穿——"主题色的'全页渗透'"。

D 尺寸类：rLg=20 大卡、rMd=14 统计卡、rSm=10 图块——系列统一——"三级圆角体系"。

首页的 4 个设计亮点总结：

1. 天气 → 建议 → 穿搭的逻辑链——32°C 晴 → 轻薄透气 → T恤+牛仔裤+运动鞋
2. 渐变天气卡——品红→粉 135°，"换一套"提供容错
3. 4 宫格统计——独立小卡 + 品红数值
4. 横滑方案库——5 组 emoji 组合展示 AI 穿搭推荐

八、首页的交互细节与可用性分析

8.1 全卡可点的反馈体系

首页 4 个可点元素（天气卡/穿搭卡/方案卡/方案列表）全部有 Toast——"每个可点元素都有响应"——"demo 的反馈完整性"。

8.2 滚动结构与首屏设计

Scroll + Column({ space: 14 }) + 底部 padding——系列标准——"首屏装下：Header + 天气卡 + 统计 + 今日推荐"——"首屏 = 决策信息完整"——用户不用滚动就能看到"今天穿什么"（天气卡 + 三件套）——"穿搭决策的核心信息首屏可见"。

8.3 字号梯队

22（标题）/18（温度）/16（区块标题）/14（无）/12（副标题/建议/名称）/11（统计标签/方案名）——"信息层级通过字号表达"——温度 18 最大（天气是决策依据）——"字号 = 决策权重"。

8.4 对比度与可读性

• 白字在品红渐变上——高对比 ✓
• 品红数字在白卡上——高对比 ✓
• 灰字在浅灰块下——中对比（辅助）✓

"主信息高对比、辅信息中对比"——系列一致的对比度哲学。

8.5 首页的"3 秒决策"

模拟用户 3 秒扫读：

1. 第 1 秒——天气卡"32°C 晴 · 轻薄透气"（最大渐变）
2. 第 2 秒——三件套"T恤+牛仔裤+运动鞋"（推荐结果）
3. 第 3 秒——结论"今天穿这套，不满意点换一套"

"3 秒内给出穿搭方案"——"穿搭首页的终极测试"——天气卡给依据、三件套给答案、换一套给退路——"决策闭环完整"。

8.6 与系列首页的对比

App	首页上区	核心决策
26	模板 Grid	选哪个模板
27	倒计时卡	先做什么
28	天气卡 + 三件套	今天穿什么

"28 首页的决策是'穿什么'"——天气卡提供依据（32°C）→ 三件套给出答案——"首页的核心 = 帮用户做一个决策"——"每个 App 首页都在帮用户完成当天最重要的那个决策"。

8.7 渐变卡在系列首页的位置

App 27 首页渐变卡（琥珀倒计时）、App 28 首页渐变卡（品红天气）——"渐变卡上移到首页业务区已成系列手法"（App 26 我的页渐变 → 27/28 首页渐变）——"渐变 = 首页最核心信息的视觉标配"。

8.8 首页的代码组织

首页 6 个 @Builder（Header/WeatherCard/StatGrid/SectionTitle/OutfitCard/OutfitList）——"一区块一 Builder"——build() 里 6 行调用即页面骨架——"代码可读性 = 结构即页面"——每个 Builder 自包含（数据渲染 + 样式 + 交互）——"ArkUI 组件化的标准组织"。

8.9 ForEach 的渲染细节

OutfitList 的 (o: string, idx: number) => o + idx——emoji 组合 + 索引做 key——"内容可能重复，加索引保唯一"——"key 的唯一性兜底"——StatGrid 用 s.label（标签唯一）——"不同数据用不同的 key 策略"。

8.10 首页的字号与对比度

字号梯队：22（标题）/18（温度/数值）/16（区块标题）/14（无）/12（副标题/建议/名称）/11（统计标签/方案名）——"温度 18 最大 = 决策依据优先"——"字号 = 决策权重"——对比度：白字渐变（高）/品红数字白卡（高）/灰字（中）——"主高辅中"。

8.11 首页的"资产感"

统计宫格（48/12/5/8）给用户"资产感"——"我有 48 件衣服、12 套方案"——"资产数字 = 使用粘性"——用户看到积累的数字更愿意持续使用——"统计的留存价值"——衣橱类 App 的统计是核心留存手段。

8.12 首页与穿搭页的"双穿搭"

首页"今日推荐穿搭"（三件套）+ 穿搭页"穿搭记录"（4 条）——"推荐（今天）+ 历史（过去）的双视角"——首页给"今天穿这套"、穿搭页给"以前穿过什么"——"同 App 的穿搭双视图"——"首页精选、穿搭页全量"。

8.13 首页的"换一套"设计哲学

"换一套 >"的容错机制——"AI 推荐不可能一次就完美，要给人退路"——"生成类 App 的'再来一次'按钮"（AI 绘画的"重新生成"、AI 写作的"换个风格"同理）——"容错 = AI 产品的基本礼仪"——首页把"换一套"放在最醒目的天气卡上——"容错入口的位置 = 容错的重要性"。

8.14 首页数据与全 App 的贯通

• 48 衣物总数 ↔ 衣橱页衣物
• 12 穿搭方案 ↔ 穿搭页记录
• 8 收藏搭配 ↔ 穿搭页 ❤️ 收藏
• 天气（32°C） ↔ 穿搭页记录天气

"首页统计 = 全 App 数据的汇总"——"首页是 App 28 的数据门户"——"统计数字的跨页自洽"——demo 各页静态但数字互相印证——"数字一致 = 可信"。

8.15 天气卡的"信息三层"

天气卡的信息层级：☀️（视觉符号）→ "32°C 晴"（事实数据）→ "适合轻薄透气穿搭"（智能建议）→ "换一套"（行动入口）——"符号 → 数据 → 建议 → 行动"的四层递进——"一张卡片完成'看天气 → 得建议 → 可操作'的完整闭环"——"卡片设计的叙事结构"——天气卡是 App 28 首页信息设计最完整的一张卡。

8.16 统计宫格的"资产叙事"

48/12/5/8 四个数字——"衣橱的资产报表"：

• 48 衣物——"衣橱规模"（基础资产）
• 12 方案——"AI 产出"（增值资产）
• 5 本周——"近期活跃"（新鲜度）
• 8 收藏——"你的偏好"（品味资产）

"四维资产 = 用户与 App 的联结"——"资产数字让用户有'家底'感"——"资产型 App 的留存逻辑：数字越滚越大，用户越走不了"——统计宫格虽小，却是 App 28 留存设计的核心。

8.17 三件套的"横版陈列"

👕👖👟 三件横排——"穿搭的左右陈列"——像衣柜里挂着的三件衣服——"从左到右 = 从上到下（上装→下装→鞋）"——"陈列顺序 = 穿搭顺序"——用户一眼看到"从上衣到鞋"的完整搭配——"布局即逻辑"。

8.18 横滑方案的"滑动隐喻"

5 组方案横向滑动——"翻衣架的体验"——"横滑 = 实物世界的'滑动衣架'"——用户左右滑像在衣架上翻找搭配——"横滑列表的物理隐喻"——这是横向滚动在穿搭场景的天然合理性——"交互设计从实物找灵感"。

8.19 首页的可访问性

• 温度 18 号白字在品红渐变上——对比度充足 ✓
• 统计品红数字在白卡上——清晰可辨 ✓
• 名称灰字在浅灰块下——辅助信息不抢眼 ✓
• 全卡可点 + Toast——操作反馈明确 ✓

"首页的可访问性达标"——"视觉层级清楚 + 交互反馈完整"——"好设计天然接近无障碍"。

8.20 首页的"当日性"

"今日穿搭已生成" + "32°C 晴" + "今日推荐"——"首页的'当日感'"——"穿搭 App 首页必须'当日有效'"——用户每天打开看到的是"今天的天气 + 今天的穿搭"——"时效性是穿搭 App 的体验核心"——demo 用文案和静态数据营造了"当日感"——"当日感的营造 = 文案 + 数据"。

8.21 天气 emoji 的"表达力"

☀️ 40 号大太阳——"天气的视觉符号"——"emoji 天气 vs 图片天气"：emoji 零成本且语义明确（☀️=晴/🌧️=雨/⛅=多云）——"天气是 emoji 表达力最强的场景之一"——demo 用 40 号大 ☀️ 让天气卡第一时间抓住视线——"符号的大小 = 信息的重要性"——"穿搭决策从天气开始，天气从太阳开始"。

8.22 首页的"白色 vs 品红"

首页的配色对比：品红渐变卡（最重）+ 白卡（内容）+ 品红数值（强调）——"暖色 + 中性色的组合"——"品红做'重点'、白色做'容器'"——"主题色的克制使用"——全页品红只出现在渐变卡和统计数值，其余全是中性色——"克制的品红 = 更高的视觉焦点"——如果首页到处是品红，渐变卡就失去"最重要的"的地位——"主题色的密度管理 = 视觉层级的管理"——demo 的克制让品红的每次出现都有意义——"少即是多"。

8.23 首页的"数据驱动"结构

首页的数据全部来自数组/常量：stats（4 项）/outfits（5 组）——"数据驱动渲染"——"改数据即改页面"——加一组方案 → 横滑列表多一张卡——"声明式 UI 的价值"——demo 的静态数据在结构上是数据驱动的——"真实化只需替换数据源"——把 private stats/outfits 换成接口返回的 @State 即可——"demo 的结构是为真实化准备的"。

8.24 首页的"首屏黄金区"

首屏（无需滚动）：Header + 天气卡 + 统计宫格 + 今日推荐三件套——"黄金区的信息"——"穿搭决策所需全部信息首屏可见"——天气（依据）+ 资产（背景）+ 三件套（答案）——"首屏 = 决策的完整输入"——"首屏设计的目标：不用滚动就能做决策"——App 28 首页达标。

九、总结：品红天气穿搭的首页设计

App 28 首页一句话：用品红（#BE185D）组织一条"天气 → 建议 → 穿搭"的决策链——渐变天气卡给温度依据与换一套退路，4 宫格统计展示衣橱资产，三件套给出今日答案，横滑方案库提供备选。

3 个设计亮点：

1. 天气 → 穿搭的逻辑链——"32°C 晴 → 轻薄透气 → T恤+牛仔裤+运动鞋"三层递进，数据自洽
2. 渐变天气卡——品红→粉 135° + "换一套 >"容错机制，AI 推荐的"不满意可换"
3. 三区布局——天气（依据）+ 统计（资产）+ 推荐（答案），一次首页完成穿搭决策

主题色设计逻辑：品红 = 时尚/潮流/衣橱——"衣橱管理用品红，因为衣柜是时尚的载体"——与 App 18 粉红（社交）、App 19 青绿（相册）区分——"系列色板从灰到粉的时尚光谱"。

与系列呼应：渐变卡（26/27）、#33FFFFFF 半透明（26/27）、4 宫格统计（首页版）、横滑列表（13/22/27）、双行 Header（系列标准）——"28 把系列的渐变/宫格/横滑手法组合出'穿搭决策'场景"。

体验细节："今日穿搭已生成"的完成时态、换一套容错、emoji 组合方案、统计品红数值、全卡 Toast——"穿搭首页的核心 = 让用户 3 秒知道'今天穿什么'"。

可扩展性展望：天气接真实天气接口（API）、换一套接重新生成、方案库接衣橱数据组合、三件套接衣橱详情跳转——"demo 的静态数据都有明确的真实化路径"。