zyt/TUICallKit-Vue3/tongji/design-system/DESIGN.md

VitalMint Health (Stitch)

Source: Google Stitch MCP · project Modern WeChat UI Redesign
Screen HTML: design-system/stitch-weekly.html

Colors

• background / surface: #f4fbf4
• primary: #006c49
• primary-container: #10b981
• tertiary-container (餐后): #fc7c78
• on-surface: #161d19
• error (high glucose): #ba1a1a
• warning: #ea580c

Layout (weekly.vue)

1. TopAppBar — 头像 + 问候 + 朗读按钮
2. 录入今日血糖 — 全宽圆角主按钮
3. 今日血糖 — 双列卡片 + 查看更多
4. 血糖趋势 — 单卡片内含统计、图表、7/30 切换
5. AI 饮食 — 渐变边框白底卡片
6. 能不能吃 — 独立卡片

Styles

• styles/stitch-vitalmint-theme.scss — 设计 token
• styles/weekly-stitch.scss — 页面组件样式 (vm-*)