交付与协作Handoff

三样东西，各在哪

东西	在哪	干什么用
规范页面（本页）	这个链接（需管理员从 Share 分享）	读规则、看 token、看组件预览、换主题对照
代码包	仓库 design-system/	tokens.json 单一来源 + 四端接入文件 + 105 个图标四端产物 + 审查清单
参考实现	wutong-lingou/（Web）	活着的样板。新页面先找它里面最像的一页照着做

各角色怎么开始

设计师：先读品牌书与「设计原则」，然后打开「视觉定稿」参考页面（wutong-lingou/docs/03-视觉定稿.html，可切六套主题）。Figma 里建变量集：把 tokens.json 里 color / spacing / radius 逐个建成变量，模式（Mode）= light / dark / teal / teal-dark。组件先按本页组件列表做，尺寸取 token 表里的值，不目测。

前端：globals.css 里 @import 代码包的 web/tokens.css + web/tailwind.css，从此只用 bg-card text-muted-foreground rounded-md 这些类名，不写色值。shadcn/ui 做底座时 npx shadcn add 后立刻改 components/ui/ 的默认值。图标内联 design-system/icons/svg/。提 PR 附 CHECKLIST.md 自查。

iOS：ios/WutongTheme.swift + icons/ios/WutongIcons.xcassets 加进 target；界面只用 WT.*。现有 Theme.swift 逐步迁移，先迁颜色与圆角（差异最大），再迁字号。

Android：android/WutongTheme.kt 包住 setContent，icons/android/drawable/ 拷进 res。所有 Button 显式传 shape = MaterialTheme.shapes.medium。

小程序：app.wxss 引 miniprogram/theme.wxss，注册 wt-icon 组件。尺寸按现场端字阶（rpx 已换算）。

用 AI 写代码的人（Claude Code 等）：在项目的 CLAUDE.md 里写一句「UI 一律遵守 design-system/README.md，先读它再写界面」，并把本页链接放进去。设计系统页面本身可被 AI 读取（它会先读品牌书再读 token）。

改动流程

1. 改 design-system/tokens.json（同时改本页的 project/tokens.json，两边一致）。
2. 跑 python3 scripts/gen.py 与（图标）node icons/build-icons.mjs，产物一并提交。
3. PR 里贴改动前后截图，标明影响哪些主题、哪些端。
4. 规则类改动（新增一条禁止、改一个尺寸）同时改本页对应章节，并在下方「变更记录」加一行。

什么不能改：状态五色、圆角四档、不加载 web font、状态必须带图标、红涨绿跌。改这些等于换一套语言，需要重新对齐所有端，先讨论。

审查

PR 评审对照 design-system/CHECKLIST.md，带 ⛔ 的是否决项。设计评审对照「设计原则」五条，不对照「好不好看」。

提问

规范没写到的：先看 wutong-lingou/ 里有没有先例；没有就按「设计原则」推一个，做出来贴到本页评论区，讨论后补进规范。不要各自发明——两个页面各自发明的结果就是两套语言。

变更记录

• 2026-09-19 · 首版。从灵构 globals.css 与四份设计文档提取；参考 beautifului.dev 补表面分层、发丝线阴影、圆角分级、动效曲线、AI 原生组件；含 iOS / Android / 小程序落地与 105 个四端图标。