17638755181/fitness-coach
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
fitness-coach/FITCOACH-DESIGN-PROPOSAL.md
wm b94eb706ff feat: Kinetic Dark 设计语言 + Lucide 图标迁移 + 首页轻量个性化 
- 建立 Lucide 子集 iconfont（49 字形），全站 emoji 替换为 fc-icon 组件
- 重塑 Design Token（冷中性近黑底 + Volt 荧光绿 #B6F24E），消除硬编码颜色
- 首页登录后个性化：我的计划 / 我的收藏 / 今日推荐（纯前端复用现有 API）
- 后端 DEFAULT_EMOJI→Lucide 名，PALETTE 对齐 Kinetic Dark 语义色板
- 修复 person-standing 缺失字形；14 个官方组合 seed emoji 全部映射到现有字形
2026-07-22 21:38:56 +08:00

23 KiB
Raw Permalink Blame History

FITCOACH 设计语言重塑提案（v2 暗色动能系统）

设计师：颜好看 ｜ 日期：2026-07-22 ｜ 寄存器：Product（app UI）｜ 平台：微信小程序（原生） 配套机器可读：design-system/design-tokens.json（已产出） 三轴刻度：DESIGN_VARIANCE=5（克制、可预测网格）／ MOTION_INTENSITY=4（状态反馈为主）／ VISUAL_DENSITY=4（日常应用密度）

0. 当前视觉审计（暗金奢华风 → 问题清单）

我实际通读了 miniprogram/ 下页面与组件。结论：当前"暗金奢华"调性与健身教练产品不匹配，且存在大量 P0 级违规（emoji 当图标）、Token 不全（硬编码）、以及 AI 模板味的结构问题。 逐项如下。

0.1 P0 级硬伤（违反即退回）

# 问题 位置 现状
P0-1a emoji 当功能图标（首页） pages/index/index.wxml search-pill__icon=🔍、cta__icon=✨；quick__emoji=✨💪🏋️📋🗂️👤；prog__emoji 6 个快捷入口 + 搜索 + CTA 全用 emoji
P0-1b emoji 当功能图标（导航） components/bottom-nav/index.js 🏠📚📋👤 主导航 4 项全 emoji
P0-1c emoji 当功能图标（个人页/空态/占位） profile.wxml ❤️🗂️⭐📋💪；favorites/search/my-plans/plan-favorites/plan-detail 空态 ⭐📋🔍🏋️；exercise-card/detail 占位 🏋️ 几乎每页都有
P0-1d 收藏切换用字符 ♥/♡ detail.wxml collection-detail.wxml 字符当图标，应换 SVG heart
P0-3a 硬编码颜色散落 全 13 个 wxss 中大量 #0E1110、rgba(229,84,75,…)、#fff 直接写死（见下表） 改主题要改 N 处，违反"颜色全走 Token"
P0-2 当前非紫粉渐变（此项未违规，但注意 CTA 用金→浅金渐变 linear-gradient(135deg, gold, gold-2) 属"奢华模板味"，新方案去掉） index.wxss .cta 保留为审计备注

0.2 Token 不全 / 硬编码（必须重塑）

全量 grep 出的硬编码色值（应下沉为 Token）：

pages/index/index.wxss:5    linear-gradient(150deg, #1C2A22 0%, #0E1110 70%)   ← hero 背景硬编码
pages/index/index.wxss:26   color: #0E1110;                                    ← CTA 前景硬编码
plan-detail.wxss:16,50      rgba(229,84,75,0.92) / #E5544B                      ← danger 硬编码
plan-detail.wxss:33,48      color: #0E1110;                                     ← 硬编码
profile/recommend/my-plans/favorites/plan-edit/detail ...  color: #0E1110      ← 同值散落 8+ 处
exercise-card.wxss:28       color: #0E1110;
gif-player.wxss:12          var(--gold, #c9a24b)                                 ← 兜底硬编码（可接受但应统一）
app.wxss:5                  --bg-grad: linear-gradient(160deg,#16201B,#0E1110)   ← 已有变量，但页面级又重复写

问题归纳：app.wxss 里其实定义了 --bg/--surface/--gold/--text/--line/--radius 等，但（1）命名偏"金色语义"（--gold/--gold-2/--gold-soft），不利去奢华化；（2）缺语义色（success/warn/danger）、缺层级阴影、缺字体三族、缺字距/字重规范；（3）页面级普遍不引用 Token 直接写 hex。

0.3 层级 / 间距 / 字体 / 对比 / 留白 / 动效

维度 现状问题
层级 卡片全靠 box-shadow: 0 12rpx 40rpx rgba(0,0,0,.35) 抬升 + 28rpx 大圆角 → "幽灵卡片"（发丝边框 + 大阴影同屏，见绝对禁令 #9）；缺乏"背景递进表达层级"
间距 混用 40rpx/32rpx/36rpx/28rpx/24rpx/20rpx/18rpx/16rpx/22rpx 等，无统一尺度（quick__grid gap:18rpx 不在 4px 网格；cta padding:28rpx 非标）
字体 只用系统 -apple-system, "PingFang SC", ...，无 Latin 显示字体、无等宽数据字；Hero 56rpx 与正文 28rpx 跨度大但中间阶梯缺
对比 正文 --text-2:#98A39B 在 #0E1110 上约 6.5:1（OK）；但 --text-3:#6B746D 仅约 3.3:1，用于次要信息勉强达标，用于小字会吃力
留白 卡片内边距 28rpx、区块 padding 40rpx 偏挤；Hero 下方直接接内容，缺少节奏呼吸
动效 几乎无状态动效（hover/active/loading 无反馈）；CTA 有光晕但无按下态；进度/加载无骨架屏
结构 首页用"全大写英文 eyebrow（FEATURED/PROGRAMS）+ 图标网格 + 横向滑动"结构，偏模板；且 emoji 占位使整页廉价感强

0.4 审计结论

当前方案在 P0-1（emoji 图标）、P0-3（硬编码/模板味）、Token 完整性 三处不达标，必须重塑。设计语言从"暗金奢华"转向 「动能暗色 / Kinetic Dark」：保留深色高级基底，去掉金色奢华语义，换成单一有能量的珊瑚橙强调色 + 发丝边框 + 数据化表达，贴合健身教练的"专业、能量、可信赖"。

1. 新设计语言提案：Design Token 草案

完整机读版见 design-system/design-tokens.json。此处给出关键决策与色值。

1.1 配色（中性 85% ＋ 强调 8% ＋ 语义 5% ＋ 效果 <2%）

基底（A1，冷中性近黑，非纯黑、非绿调奢华）

  • --bg:#0B0F0E 页面背景 ｜ --surface:#141A18 卡片 ｜ --surface-2:#1C2421 次级表面/chip
  • --fg:#ECF1EF 主文本 ｜ --fg-2:#9BA7A1 次级 ｜ --fg-3:#6B7670 三级（仅用于非关键 meta，且字号≥24rpx）
  • --border:rgba(255,255,255,.08) ｜ --border-strong:rgba(255,255,255,.14)

强调色（A1，单一品牌色，每屏≤2 处）

  • --accent:#FF6A3D Pulse 珊瑚橙（CTA、激活导航、关键数据高亮）
  • 派生：--accent-hover:#FF8263 / --accent-active:#E8562B / --accent-on:#20100A（深暖字，橙底上对比>7:1）/ --accent-soft:rgba(255,106,61,.12)

语义色（A2，不计入"第二品牌色"——success 用于进度/连续天数这类"正向"语义）

  • --success:#2BD9A6（进度环/连续天数/正向趋势）｜ --warn:#F2B53D ｜ --danger:#FF5C5C（替代旧 #E5544B）｜ --info:#4FA8FF
  • 派生 soft 版用于淡底标签

为什么不是紫/粉/金：紫→粉渐变属 AI 模板红线（P0-2）；金色奢华与"健身教练"调性错位（奢侈感≠专业运动感）；珊瑚橙在深色上能量强、对比足、且与现品牌"暗底"自然衔接，迁移成本低。

备选方向（待 PM 拍板）：若想要更"运动品牌"的辨识度，可把 accent 换成 Volt 荧光绿 #B6F24E（Gymshark/Nike 味，更激进）；或 Ion 青 #1FD4C4（更冷静健康）。本提案默认推荐珊瑚橙。

1.2 字体（含中文，三族明确）

  • 显示/标题/数字：'Manrope', 'PingFang SC', 'HarmonyOS Sans SC', 'Source Han Sans SC', 'Noto Sans CJK SC', sans-serif
    • Latin 用 Manrope（几何、运动感、不在反射拒绝清单）；中文回落系统黑体 —— 小程序不打包 10MB+ CJK 字体，这是真实约束下的最优解。
  • 正文：'PingFang SC', 'HarmonyOS Sans SC', 'Source Han Sans SC', 'Noto Sans CJK SC', -apple-system, sans-serif（中文系统字体优先）
  • 数据/统计：'JetBrains Mono', ui-monospace, monospace（等宽，tabular 数字，用于进度环中心数字、连续天数、历史曲线 Y 轴）

字重三级：Regular 400（正文）／ Medium 510（按钮、小标题）／ Semibold 590（大标题）。小程序字体若无 510 字重则回落 500。

字距：eyebrow 全大写 0.08em；大标题 -0.02em；正文 0。

1.3 字号阶梯（rpx，750rpx=375pt）

xs 22 / sm 24 / base 28 / md 30 / lg 32 / xl 36 / 2xl 44 / 3xl 56(hero) / 4xl 72(巨型数字)。中间补 md 30 让"正文→小标题"过渡平滑（旧方案缺这档）。

1.4 间距尺度（4px 网格 → rpx 偶数）

8/16/24/32/40/48/64/80/96/128(rpx)，对应 4–64px。统一替换旧方案里的 18rpx/22rpx/28rpx/36rpx 等非标值。区块节奏：桌面/大屏 section-y = 48rpx，移动 32rpx（小程序默认移动，省略断点差异，但安全区 env(safe-area-inset-bottom) 必须在底部导航与吸底按钮处使用）。

1.5 圆角（收紧，去"过度圆滑"）

sm 16 / md 24 / lg 32 / xl 40 / pill 9999 (rpx)。卡片用 md(24rpx=12px) 或 lg(32rpx=16px)，不再用 28rpx 这种临界值；chip/pill 用 pill。

1.6 阴影 / 层级（Hairline First）

默认卡片 不用阴影，用 1px 发丝边框（--shadow:ring）。仅悬浮/选中用 --shadow:raised；底部导航用 --shadow:float；唯一允许的彩色阴影是 CTA 的 --shadow:glow（珊瑚橙光晕，替代旧金色光晕）。深色模式靠"背景亮度递进"表达层级（#0B0F0E → #141A18 → #1C2421），不靠投影。

1.7 动效（150ms 收敛，无 bounce）

fast 150 / base 200 / slow 300ms，标准缓动 cubic-bezier(0.2,0,0,1)。禁 bounce/elastic。所有交互组件补 hover/active 反馈；列表/卡片进入用 ≤300ms 的淡入（勿每节相同动画）。尊重 prefers-reduced-motion（小程序通过 wx.getSystemSetting().reduceMotion 或 CSS @media (prefers-reduced-motion: reduce) 降级）。

2. 图标系统：锁定 Lucide（MIT）

2.1 推荐与理由

锁定一套：lucide（MIT，原 Feather 续作）。

维度 说明
一致性 统一 24×24 网格、2px 描边、单线风格 → 缩到 16/20/24 视觉不变形
覆盖 健身语义齐全：dumbbell/activity/flame/heart/target/calendar-check/trending-up/search/user/home/sparkles 等
许可 MIT，可子集化编译为 iconfont，无商用风险
调性 中性、现代、"赢得熟悉感"（Product 寄存器标杆），不像彩色 emoji 那样廉价
落地 小程序无原生 inline SVG：把所需子集编译成 iconfont（.ttf/.woff2），用 <text class="fc-icon"> + font-family 引用；或 base64 SVG <image>。严禁 emoji

为何不选其他：Remix Icon（含 outline/fill 双风格，可作备选，但双风格易混，先锁 Lucide 单风格）；Radix Icons（集太小、偏开发工具、缺健身图标）；Iconify（聚合器非单一风格，混用即违反 P0-1"锁定一套"）。

2.2 尺寸规范

用途 尺寸 示例
行内/列表前置 16rpx (8px) 单元格图标、标签前置
按钮内 20rpx (10px) CTA、次要按钮
独立图标/导航 24rpx (12px) 底部导航、区块图标、空态

注意：小程序 rpx 在 750 基准下 24rpx=12px 物理点；若真机偏小，导航图标可上探到 44–48rpx（见下表映射的视觉权重）。底部导航按平台规范建议视觉区 ~44–48rpx。

2.3 现有 emoji → Lucide SVG 映射表（全量）

现有 emoji 位置 语义 Lucide 图标 备注
🔍 index 搜索胶囊、search 页、favorites 空态 搜索 search / 空态 search-x
✨ index CTA、quick"智能推荐" AI 推荐 sparkles
💪 quick"按部位" 部位/身体 accessibility（或 person-standing） 不与器械混
🏋️ quick"按器械"、exercise 占位、detail 占位、plan-detail 空态 器械/训练 dumbbell
📋 quick"官方计划"、profile"设置"、my-plans 空态 计划/列表 clipboard-list（官方计划）/ settings（设置） 两处语义不同，分两个图标
🗂️ quick"我的计划"、profile"我的计划" 我的计划 folder-open
👤 quick"我的"、bottom-nav"我的" 个人 user
🏠 bottom-nav"首页" 首页 home
📚 bottom-nav"分类" 分类浏览 layout-grid
❤️ profile"收藏"、detail/collection 收藏切换 收藏 heart（outline/fill 两态） 替 ♥/♡ 字符
♥ / ♡ detail、collection-detail 收藏按钮 收藏切换 heart 字符→SVG
⭐ profile"成就"、plan-favorites 空态 成就/收藏 star（成就）/ star outline（空态）
🔥 （个性化档）连续训练天数 连击/能量 flame 新区块用
🎯 （个性化档）今日推荐 目标/推荐 target 新区块用
⚡/🌟/🤸/🧘/🥊/🚴/🐯/🦁 plan-edit / profile 的"emoji 选择器" 用户自选头像/计划图标 保留 emoji 选择器（UGC） 或迁移到 Lucide 子集 dumbbell/run/bike/heart/flame/target/yoga/medal 见 §2.4

2.4 关于"用户自选 emoji"的边界判定（重要）

P0-1 红线的例外是"emoji 仅允许出现在用户生成内容（UGC）"。因此：

  • plan-edit 的 emoji 选择器、profile 的头像 emoji 选择器：这是用户表达（UGC），允许保留 emoji 选择器。
  • 但：用所选 emoji 渲染出的"计划图标/头像"若出现在卡片头部（plan-card、collection-detail、plan-detail 的 header__emoji），它已从"用户输入"变成"界面元素"，长期应迁移到 SVG 图标选择器（从 Lucide 取一个运动子集：dumbbell/run/bike/heart/flame/target/yoga/medal/trophy）。
  • 短期方案（MVP）：保留 UGC emoji 选择器；系统默认图标、所有功能导航、空态、占位、收藏切换 一律 SVG。这样 P0-1 在"功能图标"维度完全达标，UGC 例外成立。

3. 首页个性化区块视觉草案

寄存器=Product，故"个性化"不是营销炫技，而是降低用户启动成本的实用信息密度。两档按 PM 选定的范围实现。

3.1 轻量档（Light）：我的计划 · 收藏动作 · 今日推荐

布局顺序（插入 Hero 之后、精选动作之前，作为"为你"区）：

┌─────────────────────────────────────┐
│ [section-header] 为你准备   action:编辑 │
│                                       │
│ ┌─ 我的计划卡（整卡可点）──────────┐  │
│ │ 📋 推胸日 · 第 3 周           进行中 │  │  ← clipboard-list 图标 + 状态 pill
│ │ 今日 6 个动作 · 已完成 2/6          │  │
│ │ ▓▓▓▓▓▓▓░░░░░  33%                    │  │  ← 线性进度条（accent 填充）
│ └─────────────────────────────────┘  │
│                                       │
│ ┌─ 今日推荐（AI 行）──────────────┐  │
│ │ ✨ 上斜哑铃推胸                    │  │  ← sparkles + 动作名
│ │ 根据你的推胸计划，匹配度 92%        │  │  ← 一行理由（具体，非模板）
│ │                            ›        │  │
│ └─────────────────────────────────┘  │
│                                       │
│ [section-header] 收藏的动作   action:全部│
│ ┌────┐ ┌────┐ ┌────┐  ← 横滑缩略卡      │
│ │ 💪 │ │ 💪 │ │ 💪 │   (dumbbell 占位)  │
│ │名 │ │名 │ │名 │                      │
│ └────┘ └────┘ └────┘                    │
└─────────────────────────────────────┘

卡片样式（轻量档）

  • 我的计划卡：surface 底 + 1px border（ring），圆角 lg(32rpx)，内边距 space-5(40rpx)；左侧 clipboard-list 20rpx 图标 + 计划名（fg，semibold）；右上状态 pill（进行中=accent-soft 底 + accent 字，或 已完成=success-soft 底 + success 字）；进度条高 8rpx、圆角 pill、track=border、fill=accent，宽度=完成比例。
  • 今日推荐行：与计划卡同容器规格，但左侧用 sparkles 20rpx（accent 色）；动作名 fg semibold；理由行 fg-2 24rpx 一行截断；右箭头 ›（用 SVG chevron-right，不字符）。
  • 收藏动作横滑：每张 200rpx 宽，surface 底 + ring，圆角 md；缩略图区 16:10 比例（用 dumbbell 占位 SVG 直到真实 GIF 加载），下方动作名 24rpx 单行省略。

3.2 完整档（Full）：+ 进度环 · 连续天数 · 历史曲线

在轻量档顶部追加一个 「本周概览」卡（一卡三信息，密度克制）：

┌─────────────────────────────────────┐
│ [section-header] 本周概览              │
│ ┌─────────────────────────────────┐  │
│ │   ╭───╮   连续训练                 │  │
│ │  │ 4 │    🔥 12 天                │  │  ← 进度环 + 中心数字(4/5)
│ │  │ ╱5 │   本周 4/5 次              │  │     火焰图标+天数(stat)
│ │   ╰───╯                           │  │
│ │  ──╱╲──╱── 历史曲线(14天)          │  │  ← 内联 SVG 面积图
│ │  训练时长趋势 ↑ 8%                 │  │     trending-up + 文案
│ └─────────────────────────────────┘  │
└─────────────────────────────────────┘

视觉表达规范

  • 进度环：SVG <circle> 双环。track=border（1.5px 在 120rpx 直径上≈2px），progress=accent（或成功语义绿，当"完成周目标"用 success），stroke-linecap:round，转角用 stroke-dasharray 动画 300ms 进入。中心数字用 mono 字体、4xl(72rpx) 主数 + sm 分母。环直径 ~120rpx，整体占卡左侧 1/3。
  • 连续训练天数：flame 24rpx（accent 或 warn 色，不抢进度环）→ 数字 mono xl(36rpx) fg semibold → "天" 后缀 fg-2 sm。作为小统计块置于环右侧第一行。
  • 历史曲线：内联 SVG 面积图（宽 ~100%，高 ~120rpx），14 个数据点（近 14 天训练分钟），填充 accent 8% 渐变 + 1.5px accent 描边线，末端小圆点。X 轴不标注，Y 靠趋势文案"↑ 8%"传达（不靠颜色单独传达含义——配文字）。下方一行 trending-up 20rpx + "训练时长较上周 +8%"。
  • 整卡：surface + ring，圆角 lg，内边距 space-5；内部用 divide-y/间距分组，不嵌套卡片。

3.3 状态覆盖（两档通用，5 态）

状态 表现
Loading 区块骨架屏（与卡同形的灰色脉冲块，accent-soft 微光）
Empty 空态：SVG 图标（非 emoji）+ 一句引导（"还没有计划？去挑选一个官方计划"）+ 主按钮（accent）
Error "网络开小差了" + 重试按钮（ghost）
Populated 上文布局
Edge 计划名超长 → 单行省略；进度 0% → 显示"开始第一次"而非空环；连续天数 0 → 显示"开始你的连击"

4. 反模式自检（13 项视觉清单 ＋ P0 三绝对规则）

4.1 P0 三绝对规则（逐条）

  • P0-1 禁止 emoji 作功能图标：✅ 本提案全量替换功能图标为 Lucide SVG（§2.3 映射 18 处）；仅 UGC 选择器保留 emoji（§2.4 已界定边界）。通过。
  • P0-2 禁止紫色→粉色渐变：✅ 新配色无紫无粉；强调色为珊瑚橙 #FF6A3D，语义绿 #2BD9A6 仅用于正向。无 #7C3AED/#A855F7/#EC4899 任意组合。通过。
  • P0-3 禁止 AI 模板味：✅ 颜色全走 Token（§1.1，design-tokens.json 机读）；无 "Lorem ipsum"/"Welcome to"；Hero 改为展示真实训练内容（§3 个性化区块即真实数据）；去"全大写英文 eyebrow + 图标网格 + 金渐变 CTA"模板味。通过。

4.2 十三条视觉清单

# 检查项 本提案 结论
1 无 emoji 功能图标 Lucide 全量替换 ✅
2 无紫粉渐变 珊瑚橙 + 语义绿 ✅
3 无 AI 模板味/空洞文案 真实数据 Hero、具体按钮文案 ✅
4 颜色全走 Token design-tokens.json，页面级禁止裸 hex（除 #000/#fff 例外，本项目仅 accent-on 用深暖色） ✅
5 间距全 4px 网格 8/16/24/32/40/48/64/80/96/128 rpx，清掉 18/22/28/36 非标 ✅
6 字体三族含中文 Manrope+PingFang SC（CJK）/ JetBrains Mono（数据） ✅
7 Hero 真实内容非口号 个性化区块承载真实计划/进度/推荐 ✅
8 图标库锁定一套+尺寸 16/20/24 Lucide，§2.2 ✅
9 无纯黑/纯灰裸用 bg #0B0F0E 非纯黑；灰带冷调；语义色有 chroma ✅
10 对比度 + reduced-motion + 焦点 fg/fg-2 达标；motion 尊重 reduced；focus-ring accent 3px ✅（实现期需 audit 复测）
11 安全区 + 触摸目标≥44 env(safe-area-inset-bottom)；图标按钮命中区≥88rpx ✅
12 组件 5 态覆盖 §3.3 loading/empty/error/populated/edge ✅
13 每屏强调色≤2 处 accent(珊瑚橙) 用于 CTA+激活导航；success 仅正向语义；克制 ✅

4.3 设计时主动规避的 AI 模板禁令（对照绝对禁令）

  • 侧条纹边框：border-left>1px 彩色强调 → 不用，选中态用 border-strong 整圈或 accent-soft 底。
  • 渐变文字 background-clip:text → 不用，强调靠字重/字色。
  • 默认毛玻璃 → 仅底部导航用 backdrop-filter:blur（功能目的：内容滚过不刺眼），不作装饰。
  • 幽灵卡片（1px 边框+大阴影同屏）→ 改为 hairline-first，默认无阴影。
  • 过度圆角（≥24px）→ 卡片上限 16px(32rpx)。
  • 每节相同淡入 → 进入动画匹配内容（进度环转、曲线绘、卡淡入各异）。
  • 奶油/米色默认化 → 基底为冷中性近黑，暖意由 accent 传达。

5. 落地建议（给架构师 / 前端）

  1. 图标：从 Lucide 取 §2.3 所列子集，用 iconfont 工具编译为 .ttf/.woff2 放入 miniprogram/assets/fonts/，在 app.wxss 用 @font-face 声明 fc-icon；组件用 <text class="fc-icon fc-icon--20">{{codepoint}}</text>。需我提供 codepoint 映射表可补。
  2. Token 注入：把 design-tokens.json 的 color/spacing/radius/shadow 编译进 app.wxss 的 page{} 变量；fontSize/letterSpacing/motion 同步为 WXSS 变量；JS 侧把字号/色值常量化供 setData 用（如动态 style="background:{{item.color}}22" 这类应改为 Token 变量）。
  3. 去硬编码：全局替换 #0E1110→var(--bg)、#E5544B→var(--danger)、rgba(229,84,75,…)→var(--danger-soft) 等（grep 命中见 §0.2）。
  4. 动态色迁移：index.wxml 里 style="background:{{item.color}}22;color:{{item.color}}"（训练组合/计划卡按色渲染）应改为从"预设语义色板"取 Token 别名（如 var(--accent-soft)），避免任意 hex 注入破坏系统。
  5. 需 PM/架构师确认：accent 最终色（珊瑚橙 vs Volt 绿 vs Ion 青）；个性化区块选轻量档还是完整档；UGC emoji 选择器是否迁移到 SVG 图标选择器。

文档结束。机读 Token：design-system/design-tokens.json。视觉草案可出 SVG 线框（如需我可补 home-personalization-mockup.svg）。