01
INTERNAL SHARE· 设计协作流程复盘
把 Claude Design 的
产品设计，搬进 Figma
用真实 TVU 设计库 还原 · AI 装配 + 人审 的半自动工作流
分享Nancy
受众产品 & UX 设计师
日期2026·07·01
01 / 09
02
02CONTEXT· 背景
把设计搬进 Figma，有 两条路
旧路 · html.to.design
DOM 像素级导入
秒级、视觉保真，但产出无语义普通图层。
秒级像素快照 · 视觉保真
扁平图层，Swap / 绑定纯体力活
永远不连团队库
快，但不可维护
本次 · use_figma 编程装配
装配真实库实例
前期慢、非一键，但产出真组件 + 绑变量 + componentize。
真库组件 · 选中即库组件
绑 TVU 变量 · 切 Dark/Light 自适应
库更新联动
慢，但连库可维护
02 / 09
03
03METHOD· 方法
use_figma 通路 · 5 步装配
1
拿组件 / 变量 key
search_design_system
+ includeLibraryKeys 锁权威库
+ includeLibraryKeys 锁权威库
2
建真实库实例
importComponentSetByKeyAsync + createInstance
3
绑颜色 / 间距
setBoundVariableForPaint / setBoundVariable
4
应用库文字样式
node.textStyleId（Roboto）
5
只读自查
binding-audit 揪未绑实色 / 选错 theme / 来源库
03 / 09
04
04RESULTS· 成果
真实还原 2 屏
Studio · Overview ~30 min ↗ Claude Design 原型
14 库实例TopBar + Sidebar库 Chart
Live · Discover ~20 min ↗ Claude Design 原型
卡片 componentize1 主组件 → 7 实例8 分类 chip
04 / 09
05
05CORE· 踩坑复盘
9 个坑 · 怎么揪出、怎么根治
01 命名映射
题材词搜不到库图标
改功能语义词 search · 建键名↔canonical 映射表
02 取错库
fallback 到旧库图标
锁唯一权威库 · miss 报缺不 fallback
03 漏 componentize
重复模块平铺成独立 frame
componentize 三阶段硬规则 + 走查
04 选错 theme
深色底误用浅色组件
跨 set 实读变体名 · 深色用 dark set
05 漏绑变量
状态红点写死颜色
搭完必跑 binding-audit
06 露白底
透明容器默认白 fill
audit 揪出 · fills=[] 纪律
07 位图丢失
外部 sprite 搬不进来
导出栅格化 / 内联 · 禁运行时 fetch
08 chart 色无变量
代码有、Figma 无
真源方向划分：图表色板 = 代码 SoT
09 预判偏差 ✓
以为要自建的库里全有
自建前先 search 库 catalog 全集
05 / 09
06
06WHY· 共通根因
三条 元教训
01
真瓶颈是「命名 / 同步映射」+「锁库纪律」，
不是「库缺资产」——搜不到就换功能语义词再搜。
不是「库缺资产」——搜不到就换功能语义词再搜。
02
use_figma 通路 = AI 装配 + 人审
几乎每个问题都靠走查 / binding-audit / 实证揪出，非一键生成。
几乎每个问题都靠走查 / binding-audit / 实证揪出，非一键生成。
03
治本靠回流规则到设计系统仓库
团队共享才治本，不只留助手 memory（那只治一个 AI）。
团队共享才治本，不只留助手 memory（那只治一个 AI）。
06 / 09
07
07WORKFLOW· 推荐落地
推荐工作流 · 半自动 + 人审
1
Claude Design 生成效果图
2
导出自包含 HTML
结构 / 文案 / TVU token 名完整
3
AI 按库逐 section 装配
真实例 + 绑 Variables + 文字样式
4
微调审校 + 兜底
Figma 走查 + 跑 binding-audit
想更接近「自动匹配」？最大杠杆是 Code Connect（查表代替猜组件）。但实测 Professional plan publish 401、v1.0 已决定走自研旁路 —— 当前杠杆：让 AI 查 figma-sync 已产出的映射表，把「猜组件」变「查表」，不需升级 plan。
07 / 09
08
08WHICH· 选型
什么场景 用哪种
途径
何时用
关键特性
Claude.ai / Design从 0 出稿
从 0 出稿 · 只需看效果 / 评审
需求描述直接生成体系化设计 + 可导出 HTML（下面两条的上游源）
html.to.designHTML → Figma
已有 HTML · 静态单页 · 要快 · 不连库
秒级像素快照 · 扁平图层 · 仅导入默认渲染页 · 不连库
use_figma 编程装配HTML / 描述 → Figma
需连库 / 可维护 · 多页 SaaS
语义重建 · 真库实例 + 绑变量 + componentize · 识别多页一次全画 · 连库
use_figma 编程装配原型 / UX 流程
复杂 · 多页原型 · UX 交付流程
一次生成多页 · 自动识别多页（插件只识别单页）· 连库
08 / 09
09
09DISCUSS· 落地 & 讨论
已定原则 · 待决讨论
已定原则 · 非讨论项
库组件一律用 —— 库无对应才建本地 componentize + 提库扩展候选，绝不 free-form 自画。
Q1
评估 html.to.design 付费版？
去水印 · 批量 · 更高保真
Q2
升级 Figma plan 启用 Code Connect？
根治命名映射 · 需 Organization / Enterprise
09 / 09
A
※补充信息 · Appendix
两条路的 成本对比
同一份 HTML 源，两种通路的投入与产出差异（定性 · 时间为本次实测）
html.to.design（旧路）
出稿速度秒级
后续整理 / Swap 人力高（纯体力）
可维护性 / 连库不连库
源改后重导 + 重新整理
use_figma 编程装配
出稿速度~20–30 min / 屏
后续整理 / Swap 人力低（装配即成品）
可维护性 / 连库连库 · 自动联动
源改后重跑装配 · 实例随库更新
补充 · APPENDIX
A
※补充信息 · Appendix
订阅 & 席位成本
html.to.design 付费门槛 · Figma Code Connect plan 升级（实时报价 · 本次调研）
html.to.design · 免费 vs 付费
维度
FREE — $0
PRO — $12/mo 起
价格
$0 · 永久免费
$12/mo（年付）· $18/mo（月付）
导入额度
10 次 / 30 天
无限（公平使用约 1000 次/月）
包含能力
URL 导入 · Chrome 扩展 · 多视口 · 深/浅主题 · 字体下载
上述全部 + 批量导入 · 高清图 · 优先支持
→ use_figma 编程装配用不到 html.to.design；付费仅当保留它做静态页通道时才需要。
Figma Code Connect · plan 门槛
维度
现状 · Professional
需升级 · Organization
席位价
Full $16/mo
Full $55/mo（年付）· Dev $25/mo +$39/席·月（约贵 244%）
Code Connect
✗ 不含（figma connect publish 401）
✓ 含（仅 Org / Enterprise 提供）
迁移方式
—
org 级整体迁移（全员按席位）· 附带 SSO / 治理 / branching
→ 旁路 figma-sync manifest 已部分替代命名映射；是否升级按「自动化收益 vs org 级差价」权衡。
Sources：html.to.design/docs/pro-plan · figma.com/pricing
补充 · APPENDIX