Agent 提报信息卡 · 资产化收集

设计规范生成器Design Token Studio

面向 UI 设计师的设计令牌(Design Token)工具,打通「正向生成 + 反向反推」双向工作流,让代码 / Figma / AI 三端共享同一份设计真相源。

🏷️ 归属:无极 · 周宜 🧩 类型:Web 工具 + Figma 插件 📈 人效缩短:约 80–95% 👥 使用成员:6 人
1

Agent 名称

设计规范生成器(Design Token Studio)

2

是做什么的 / 突出优势

设计规范生成器是一个面向 UI 设计师的设计令牌(Design Token)工具,打通「正向 + 反向」双向工作流:

正向 · 从零生成

输入一个品牌色 → 秒级生成整套规范

基于 OKLCH 感知均匀引擎 生成色阶、语义色、字阶、间距、圆角、阴影、明暗双模式;可一键导出 CSS / Tailwind / W3C Tokens / AI JSON 等代码格式,并一键同步进 Figma(变量库、文本 / 效果样式、可视化规范页)。

反向 · 从现成稿反推

选中 Figma 设计稿 → 自动审计并令牌化

自动审计散落的颜色 / 字号 / 圆角 / 间距,聚类成干净的「基础色 + 语义色」两层令牌;在副本上把图层绑定到变量(渐变自动提升为共享样式、颜色优先绑语义色),生成规范预览页,支持一键换主色。

突出优势

①
双向打通既能从零生成、又能从现成稿反推规范。
②
单一事实源代码 / Figma / AI 三端始终一致。
③
忠实又干净保真数值的同时合并噪声,产出可维护规范。
④
本地零上传浏览器即开即用,数据隐私安全。
⑤
回归测试守护核心逻辑有回归测试,迭代不退化。
⑥
系统化资源管理、利于协作设计稿常多人共同修改迭代,统一令牌 / 变量规范让所有人引用同一「真相源」——改一处全局生效、风格不走样、新人易对齐,修改与交接更省心高效。
3

使用成员

6 位同岗位 UI 设计师在日常设计中持续使用使用反馈详见第 6 节(匿名)
4

Agent 使用链接

🔗 网页工具(含介绍 + Figma 插件下载入口):
https://shirleyxiaolulu.github.io/design-token-studio/
📦 说明:Figma 插件为本地安装——从首页「下载 Figma 插件」下载 zip,按指引在 Figma 桌面端导入 manifest 即可使用(含反推功能)。
5

自评估人效缩短

80–95% 整体相关重复性工时缩短
环节原工时使用后
从零手搓一套设计规范约 0.5–1 天→几分钟
改主色 / 换肤重铺整盘约 1 天→几秒
手工在 Figma 建变量库 / 样式库约半天→一键生成
现有设计稿反推成规范并绑定变量约 1–数天→十几分钟
6

使用者反馈

综合 6 位使用者(含组内设计师与设计负责人)的匿名反馈:多在新项目启动、规范搭建与设计系统整理、交付前走查、换肤、人员交接盘点等环节使用,「只要在做设计基本都会用到」,已融入日常流程,整体评价高、依赖度强。要点总结如下。

✓ 优点

  • 自动产出规范、效率大增:一键导入颜色规范及延伸的全部色调与变量、绑定 Token、快速生成深浅双模式;不用手动记录颜色 / 字号 / 圆角,手动比例从约 30% 降到约 10%,一人即可独立作业,大幅降低设计与沟通成本。其绑定的精细度,甚至高于让 Claude / Codex 调用 Figma MVP 来绑。
  • 统一「真相源」、结构先行:一套变量 + 样式管全组,把零散的视觉选择整理成可复用体系——先搭好主色阶、文字 / 背景层级、状态色等框架再按业务细化,而非从空白起步;规范不再散落在个人脑子或聊天记录里,改一处全局生效,避免命名不统一、颜色重复、各页面标准不一,终于能讲清「我们的规范到底是什么」。
  • 从「靠人盯」到「靠源头管」:不一致在源头就被收住,负责人角色从「逐一走查挑错」转为「定标准」。
  • 降低对齐与交接成本:新人直接在变量库上作画、不跑偏,onboarding 从数天缩短;人员交接时用反推快速盘点资产(用了多少颜色 / 字号),等于一把判断设计稿规范性的尺子。
  • 自带质检、盘点有据:WCAG 对比度校验、深浅模式可读性、Token 完整度等基础提示,让组员自查即可通过、不必都堆到走查,也能更早发现易忽略的问题、减少后期开发 / 验收返工;反推审计摘要让资产盘点有数据支撑、不凭感觉。
  • 门槛低、稳定可信:可不依赖 AI 模型、本地使用(无误判、无打扰式推送);AI 仅作「先过一道筛子」,最终由人拍板,分工放心。
  • 释放设计师创造力:把人从「持续手动改色」里解放出来,得以投入更多精力去思考设计本身的提升。
  • 整体评价高、有付费意愿:使用者均表示会依赖 / 想念并愿意推荐,甚至有人表示愿意为其按月付费(约 ¥30 / 月)——它解决的是设计资源的「管理成本」(一致性、对齐、交接),不只是个人工时。

⚠ 待改进

  • 走查报错希望更深入、更准确,间距相关识别与迭代进一步加强。
  • 补齐版本管理 / 变更记录(谁、何时、改了哪个 Token),让设计资产可治理、可追溯。
  • 支持双主题(深 / 浅)双源反推,补上覆盖面。
  • 更强的对接与同步:识别网页 HTML 并导入成 Figma UI;与 Figma Variables、组件库、前端 Token 更深同步,乃至直接映射到现有组件(工作量大,属长期目标)。
  • 希望脱离 Figma 独立运行:当前 Figma 限制了它的延展性,若能独立成工具,潜力会更大。
  • 部分生成结果偏通用,业务语义与颜色细节仍需人工微调(影响很小)。