01
INTERNAL SHARE· 设计系统同步复盘

TVU 设计系统
接入 claude.ai/design

把 32 个真实组件 同步进设计工具 ·
让 AI 用 TVU 自己的组件出稿，而非通用控件
分享Nancy 受众PM & UX 设计师 32 组件已上线
同步后的 TVU 组件总览
01 / 11
02
02GOAL· 目标

让设计 AI 用 TVU 真实组件 出稿

开箱是通用控件，不像 TVU
claude.ai/design 默认用一套通用组件生成界面——颜色、控件、气质都不是 TVU 的。
同步后，AI 用我们自己的 32 个组件拼界面
每一稿都 on-brand：真实的 TVU 按钮 / 表格 / 图表 / 通知，颜色和间距全走 TVU 设计变量（token）。
设计 ↔ 开发 1:1 对得上
AI 用的组件就是工程师能落码的同一套组件，设计稿到实现少一层「翻译」。
02 / 11
03
03PAIN· 痛点

痛点：技术栈错配

同步之前，组件没法被 claude.ai/design 直接「吸收」——因为两边用的前端框架不是同一个。
我们的设计库
Figma → Code 组件库
用 Vue 建
开发团队技术栈是 Vue，为了设计库和开发对齐，把 Figma 整理成的代码组件库也用 Vue 建。
和开发同框架，落码顺
但——React 工具认不出 Vue 组件
框架不通
吃不进去
设计工具
claude.ai/design
生成 React
claude.ai/design 生成的是 React 代码、只认 React 组件——这是 AI 设计工具的行业主流。
AI 出稿即 React 代码
直接喂 Vue 库 = 识别不了
03 / 11
04
04PRIMER· 科普

Vue vs React · 区别 & 用在哪

两者都是主流前端框架，核心思路一样——把界面拆成可复用的「组件」；区别在写法、生态和适用团队。
维度
Vue（我们的库）
React（设计工具）
写法
模板式：像写 HTML，`.vue` 单文件，上手平缓
JSX：在 JavaScript 里写界面，灵活但门槛略高
生态 / 社区
中小团队友好、中文资料多、渐进式引入
生态最大、大厂主流、AI / 工具链默认支持
适合场景
团队已用 Vue、快速迭代产品（TVU 开发选它）
大型应用、需要和 AI 工具兼容（claude.ai/design 用它）
一句话
开发写着顺
工具只认它 → 所以我们要「翻译」一层给它
04 / 11
05
05SOLUTION· 方案

双框架桥接 · 一套库，两个框架都能用

不重写、不维护两份——用浏览器原生的「Web Component」当中立层，把 Vue 组件包成 React 也能用。
1
Vue 组件（真源）
设计库唯一真源，一份维护
Vue SFC · src/canonical
2
Web Component
浏览器原生标准 · 不挑框架
框架中立层 · <tvu-*>
3
React 包装 × 32
claude.ai/design 能直接吃
React wrapper · 32 组件
4
同步上线
转成设计工具消费格式
/design-sync → 项目上线
05 / 11
06
06RESULT· 成果

32 个真实组件 已上线

同步后的 TVU 组件总览（真实渲染）
32 / 32
组件全部渲染通过
6 → 32
从 6 个手写试作 · 合流到 32 库组件
100%
富预览验收 · 全部合格
右图为同步后 claude.ai/design 里的
真实 TVU 组件渲染 — 按钮 / 状态 /
图表 / 表格 / 通知 / 流程，全走 TVU token。
↗打开同步后项目
06 / 11
07
07IMPACT· 对 PM / UX 意味着什么

对 产品 & 设计 的改变

同步之前
通用控件出稿
↗看同步前项目
颜色 / 控件不是 TVU，不 on-brand
设计稿到开发要重新「找对应组件」
AI 会自创页面 / 自搓控件
同步之后
TVU 真组件出稿
↗看同步后项目
每稿 on-brand · 颜色间距走 TVU token
设计 = 开发同一套组件，交付 1:1
AI 有规则约束，少自由发挥
07 / 11
08
08HOW-TO· 设计师怎么用

设计师 三步用起来

1
打开项目
在 claude.ai/design 打开 TVU UX Design System 项目——组件面板已是 32 个 TVU 真组件。
↗打开项目
2
用自然语言描述
像平时那样描述要的界面（如"做一个直播监看页，顶部状态、下面流列表和图表"）。
3
AI 用真组件生成
AI 直接调 TVU 的 Button / Table / Chart / Notification 拼稿——on-brand、可交付开发。
每个组件的用法、属性、示例都随库带着——AI 会照着 TVU 的规范用，不用你逐个教。
08 / 11
09
09RULES· 设计治理规则

AI 现在会 遵守的规则

这些规则随库一起喂给 AI——它出稿时会照做，UX 引导时也可以据此纠偏。
规则
要这样
不要这样
对话框 / 确认
用 Notification（dialog 类型）：标准图标 + 标题 + 按钮
别用 PopupBox 塞一个自画的确认页
品牌 Logo
用库里的 Logo 资产
别用绿方块 + 字母手拼一个
菜单 / 导航
统一用 MenuList 规范样式
别用文字 + 手排一套行样式
双语
语言切换（一次显示一种）
别中英并排堆在一起
09 / 11
10
10DEBUG· 过程中发现并修的

同步中揪出、当场修好

01 · 对话框语义
该用哪个组件不清晰
立规则：确认 / 提示 = Notification dialog；PopupBox 只做大型自定义模态
02 · 图表空白
Chart 在工具里画不出来
根因是图表库「懒加载」在打包后失效 → 改成直接加载，6 种图表全渲染
03 · 弹窗内容
PopupBox 弹层正文不显示
静态预览的技术限制（实际使用正常）→ 如实标注，不夸大
10 / 11
11
11NEXT· 遗留 & 收获

收获 · 下一步

核心收获
设计库单一真源合流——Vue 一份维护，React 自动桥接；同步是增量的，下次更新很便宜。
遗留
TopBar 的菜单 / 用户菜单 / Logo 还没补齐
这几个组件当前不在库里、且 TopBar 还没开放菜单插槽——已登记 META-02，下个迭代补。
下一步
补齐上述组件 → 再同步
补进双框架库后重跑同步，设计工具即可完整用上导航 / 用户菜单。
11 / 11