尧图网站建设 
代码库逆向设计系统Figma Console MCP figma_ds_*七件套如何将生产代码挖掘为DTCG TokenStorybook脚手架【免费下载链接】figma-console-mcpYour design system as an API. Connect AI to Figma for extraction, creation, and debugging.项目地址: https://gitcode.com/gh_mirrors/fi/figma-console-mcpFigma Console MCP 是一个把设计系统即 API做到极致的开源 MCP 服务器让 AI 助手与 Figma 双向互通。它最硬核的能力之一是代码库逆向设计系统在 Local Mode 下提供七个figma_ds_*工具能把生产应用的真实代码扫描成组件清单把散落在 CSS、SCSS、Tailwind 配置里的事实样式挖掘为带溯源信息的DTCG 标准 Design Token一键生成含Storybook 工作坊的设计系统包用确定性评测做质量门禁——最终还能把 Token 直接导入 Figma 变量完成代码 → 设计系统 → Figma的完整闭环。 快速认识 Figma Console MCP简单来说Figma Console MCP 有四种连接方式NPX、Cloud Mode、Remote SSE、Local Git提供 121 个本地工具。其中设计系统提取Extraction从 Figma 拉取变量、组件、样式代码库 → 设计系统本次主角从生产代码反向挖掘设计系统双向 Token 同步figma_export_tokens/figma_import_tokens覆盖 10 种输出格式需要注意figma_ds_*七件套仅在 Local ModeNPX / Local Git可用因为它们需要读写本地文件系统。在 MCP 客户端中通过npx启动并配置好 Figma 访问令牌即可使用配置界面大致如下️ figma_ds_* 七件套总览七个工具按流水线编排各司其职工具职责产出figma_ds_analyze扫描生产代码库组件清单 架构分析清单figma_ds_extract_tokens挖掘事实样式带溯源的 DTCG Token 文件figma_ds_scaffold生成设计系统包包骨架 Token 文件 展示页figma_ds_setup_storybook接通 Storybook 工作坊主题层、字体、主题工具栏figma_ds_extract_component深度提取单个组件移植清单 CSF3 故事脚手架figma_ds_verify确定性保真评测质量门禁报告figma_ds_status记录移植进度跨会话持久化状态完整定义见 design-system-extraction-tools.ts官方工具文档见 docs/tools.md。 第一步figma_ds_analyze 扫描生产代码库摸清家底分析器会回答三个关键问题用了什么自动识别框架React / Next / Angular / Web Components、样式方案Tailwind v3/v4、CSS Modules、SCSS、Emotion、styled-components以及供应商组件层shadcn/ui、Radix、MUI、Chakra有哪些组件构建按使用频率排序的组件清单逐个分类为vendored / wrapped / pure-vendor / bespoke并推断真实调用点上的变体variant inference、检测重复组件架构健康吗区分UI 套件与设计系统的差异——比如FollowButton其实是按用途命名的Button特化版分析器会给出missingPrimitives缺失的通用原语也就是你的设计系统待建清单完整分析清单持久化在outDir/.extraction/analysis.json返回结果则是压缩摘要。多个应用可同时传入targets跨应用合并清单并标记重复——适合寻找多应用间共享的设计语言。 第二步figma_ds_extract_tokens 挖掘带溯源的 DTCG Token这是整条流水线的灵魂。提取器token-extractor.ts按两层置信度挖掘避免拍脑袋造 Token声明层declared明确的设计意图——多模式 CSS 自定义属性.dark/[data-theme]等约定、SCSS 变量、Tailwind 配置值、shadcn HSL 三元组。它们保留原名直接成为 Token推断层inferred散落的原始值hex 颜色、px 尺寸必须在应用内重复出现达到频率阈值默认minFrequency: 4才升级为 Token未达标的进入belowThreshold列表留给人工审查每个 Token 都在$extensions中携带溯源信息——源文件file:line、置信层、出现频率。这意味着每个 Token 都能回答你从哪来、凭什么成立。输出不止 DTCG通过共享格式化引擎可同时产出 CSS 变量、Tailwind v3/v4、SCSS、TS 模块等 10 种格式。规范输出tokens/tokens.json可直接被figma_import_tokens导入 Figma 变量。 第三步figma_ds_scaffold 一键生成设计系统包基于已完成的分析与 Token 提取脚手架scaffolder.ts在outDir生成package.json骨架——应用框架作为 peer depssrc/components目录结构与 Token 文件框架中立的展示文档页MDXToken / 排版 / 图标一览一眼看懂挖出了什么含工作流说明的 READMEStorybook 本身不在这一步安装——scaffold 之后在outDir里运行npm create storybooklatest即可由 Storybook CLI 自动检测框架并安装当前版本避免模板腐化。 第四步figma_ds_setup_storybook 接通 Storybook 工作坊原版工作坊不认识你的源应用每个生成物都对应一次真实提取中踩过的渲染保真坑.storybook/preview.css导入提取的 Token 源应用的theme工具映射、自定义utility、layer base、从样式表挖出的font-face暗色变体同时覆盖.dark和[data-theme]两种约定字体自托管字体文件复制进 staticDirsmain.js补丁Tailwind vite 插件 自动 JSX 运行时preview.jsx补丁用提取出的模式名生成主题切换工具栏同时设置 class 与data-theme幂等设计可安全重跑。 第五步figma_ds_extract_component figma_ds_status 组件移植与进度管理逐组件移植时figma_ds_extract_component深度提取一个组件源码64KB 上限、本地导入闭包、props 契约、真实调用点变体、样式触点classNames、CSS Module 引用、自定义属性以及一份可直接改写的 CSF3 故事脚手架——变体故事从真实用法推断而来。figma_ds_status把移植进度pending / in-progress / ported / skipped持久化在.extraction/status.json长周期工程可跨会话续接——下次打开直接接着搬。✅ 第六步figma_ds_verify 确定性保真门禁交接或推回 Figma 之前figma_ds_verify运行一组确定性评测每项检查都编码自真实提取中踩过的失败类型检查项捕获的问题DTCG 解析 别名完整性Token 文档解析失败、悬空别名引号包裹的 CSS 表达式扫描被字符串误包住的cubic-bezier(...)等导致过渡失效工作坊var()解析Storybook 中 Token 引用无法落地结构 移植覆盖率包结构残缺、组件漏移植Figma 往返就绪度Token 能否被figma_import_tokens直接消费返回{ passed, checks, figmaRoundTrip }并给出确切的 Figma 导入调用建议。 闭环从代码 Token 回到 Figma 变量对于设计驱动的团队提取出的tokens/tokens.json通过figma_import_tokens直接成为 Figma 变量集合顶层分组即 collection实现完整的代码 → 设计系统 → Figma往返反向的figma_export_tokens则支持 10 种格式导出替代 Style Dictionary / Tokens Studio 的导出管线。 相关源码与文档索引模块路径七件套工具注册src/core/design-system-extraction-tools.tsToken 提取引擎src/core/extraction/token-extractor.ts包/故事脚手架src/core/extraction/scaffolder.ts代码库扫描器src/core/extraction/analyzer.ts架构/检测器src/core/extraction/architecture.ts、detectors.ts工具完整文档docs/tools.md模式能力对比docs/mode-comparison.md一句话总结figma_ds_analyze → extract_tokens → scaffold → setup_storybook → extract_component/status → verify七步流水把代码里长出来的设计系统变成可交接、可验证、可回灌 Figma 的资产。【免费下载链接】figma-console-mcpYour design system as an API. Connect AI to Figma for extraction, creation, and debugging.项目地址: https://gitcode.com/gh_mirrors/fi/figma-console-mcp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 代码库逆向设计系统：Figma Console MCP figma_ds_*七件套如何将生产代码挖掘为DTCG Token+Storybook脚手架
代码库逆向设计系统Figma Console MCP figma_ds_*七件套如何将生产代码挖掘为DTCG TokenStorybook脚手架【免费下载链接】figma-console-mcpYour design system as an API. Connect AI to Figma for extraction, creation, and debugging.项目地址: https://gitcode.com/gh_mirrors/fi/figma-console-mcpFigma Console MCP 是一个把设计系统即 API做到极致的开源 MCP 服务器让 AI 助手与 Figma 双向互通。它最硬核的能力之一是代码库逆向设计系统在 Local Mode 下提供七个figma_ds_*工具能把生产应用的真实代码扫描成组件清单把散落在 CSS、SCSS、Tailwind 配置里的事实样式挖掘为带溯源信息的DTCG 标准 Design Token一键生成含Storybook 工作坊的设计系统包用确定性评测做质量门禁——最终还能把 Token 直接导入 Figma 变量完成代码 → 设计系统 → Figma的完整闭环。 快速认识 Figma Console MCP简单来说Figma Console MCP 有四种连接方式NPX、Cloud Mode、Remote SSE、Local Git提供 121 个本地工具。其中设计系统提取Extraction从 Figma 拉取变量、组件、样式代码库 → 设计系统本次主角从生产代码反向挖掘设计系统双向 Token 同步figma_export_tokens/figma_import_tokens覆盖 10 种输出格式需要注意figma_ds_*七件套仅在 Local ModeNPX / Local Git可用因为它们需要读写本地文件系统。在 MCP 客户端中通过npx启动并配置好 Figma 访问令牌即可使用配置界面大致如下️ figma_ds_* 七件套总览七个工具按流水线编排各司其职工具职责产出figma_ds_analyze扫描生产代码库组件清单 架构分析清单figma_ds_extract_tokens挖掘事实样式带溯源的 DTCG Token 文件figma_ds_scaffold生成设计系统包包骨架 Token 文件 展示页figma_ds_setup_storybook接通 Storybook 工作坊主题层、字体、主题工具栏figma_ds_extract_component深度提取单个组件移植清单 CSF3 故事脚手架figma_ds_verify确定性保真评测质量门禁报告figma_ds_status记录移植进度跨会话持久化状态完整定义见 design-system-extraction-tools.ts官方工具文档见 docs/tools.md。 第一步figma_ds_analyze 扫描生产代码库摸清家底分析器会回答三个关键问题用了什么自动识别框架React / Next / Angular / Web Components、样式方案Tailwind v3/v4、CSS Modules、SCSS、Emotion、styled-components以及供应商组件层shadcn/ui、Radix、MUI、Chakra有哪些组件构建按使用频率排序的组件清单逐个分类为vendored / wrapped / pure-vendor / bespoke并推断真实调用点上的变体variant inference、检测重复组件架构健康吗区分UI 套件与设计系统的差异——比如FollowButton其实是按用途命名的Button特化版分析器会给出missingPrimitives缺失的通用原语也就是你的设计系统待建清单完整分析清单持久化在outDir/.extraction/analysis.json返回结果则是压缩摘要。多个应用可同时传入targets跨应用合并清单并标记重复——适合寻找多应用间共享的设计语言。 第二步figma_ds_extract_tokens 挖掘带溯源的 DTCG Token这是整条流水线的灵魂。提取器token-extractor.ts按两层置信度挖掘避免拍脑袋造 Token声明层declared明确的设计意图——多模式 CSS 自定义属性.dark/[data-theme]等约定、SCSS 变量、Tailwind 配置值、shadcn HSL 三元组。它们保留原名直接成为 Token推断层inferred散落的原始值hex 颜色、px 尺寸必须在应用内重复出现达到频率阈值默认minFrequency: 4才升级为 Token未达标的进入belowThreshold列表留给人工审查每个 Token 都在$extensions中携带溯源信息——源文件file:line、置信层、出现频率。这意味着每个 Token 都能回答你从哪来、凭什么成立。输出不止 DTCG通过共享格式化引擎可同时产出 CSS 变量、Tailwind v3/v4、SCSS、TS 模块等 10 种格式。规范输出tokens/tokens.json可直接被figma_import_tokens导入 Figma 变量。 第三步figma_ds_scaffold 一键生成设计系统包基于已完成的分析与 Token 提取脚手架scaffolder.ts在outDir生成package.json骨架——应用框架作为 peer depssrc/components目录结构与 Token 文件框架中立的展示文档页MDXToken / 排版 / 图标一览一眼看懂挖出了什么含工作流说明的 READMEStorybook 本身不在这一步安装——scaffold 之后在outDir里运行npm create storybooklatest即可由 Storybook CLI 自动检测框架并安装当前版本避免模板腐化。 第四步figma_ds_setup_storybook 接通 Storybook 工作坊原版工作坊不认识你的源应用每个生成物都对应一次真实提取中踩过的渲染保真坑.storybook/preview.css导入提取的 Token 源应用的theme工具映射、自定义utility、layer base、从样式表挖出的font-face暗色变体同时覆盖.dark和[data-theme]两种约定字体自托管字体文件复制进 staticDirsmain.js补丁Tailwind vite 插件 自动 JSX 运行时preview.jsx补丁用提取出的模式名生成主题切换工具栏同时设置 class 与data-theme幂等设计可安全重跑。 第五步figma_ds_extract_component figma_ds_status 组件移植与进度管理逐组件移植时figma_ds_extract_component深度提取一个组件源码64KB 上限、本地导入闭包、props 契约、真实调用点变体、样式触点classNames、CSS Module 引用、自定义属性以及一份可直接改写的 CSF3 故事脚手架——变体故事从真实用法推断而来。figma_ds_status把移植进度pending / in-progress / ported / skipped持久化在.extraction/status.json长周期工程可跨会话续接——下次打开直接接着搬。✅ 第六步figma_ds_verify 确定性保真门禁交接或推回 Figma 之前figma_ds_verify运行一组确定性评测每项检查都编码自真实提取中踩过的失败类型检查项捕获的问题DTCG 解析 别名完整性Token 文档解析失败、悬空别名引号包裹的 CSS 表达式扫描被字符串误包住的cubic-bezier(...)等导致过渡失效工作坊var()解析Storybook 中 Token 引用无法落地结构 移植覆盖率包结构残缺、组件漏移植Figma 往返就绪度Token 能否被figma_import_tokens直接消费返回{ passed, checks, figmaRoundTrip }并给出确切的 Figma 导入调用建议。 闭环从代码 Token 回到 Figma 变量对于设计驱动的团队提取出的tokens/tokens.json通过figma_import_tokens直接成为 Figma 变量集合顶层分组即 collection实现完整的代码 → 设计系统 → Figma往返反向的figma_export_tokens则支持 10 种格式导出替代 Style Dictionary / Tokens Studio 的导出管线。 相关源码与文档索引模块路径七件套工具注册src/core/design-system-extraction-tools.tsToken 提取引擎src/core/extraction/token-extractor.ts包/故事脚手架src/core/extraction/scaffolder.ts代码库扫描器src/core/extraction/analyzer.ts架构/检测器src/core/extraction/architecture.ts、detectors.ts工具完整文档docs/tools.md模式能力对比docs/mode-comparison.md一句话总结figma_ds_analyze → extract_tokens → scaffold → setup_storybook → extract_component/status → verify七步流水把代码里长出来的设计系统变成可交接、可验证、可回灌 Figma 的资产。【免费下载链接】figma-console-mcpYour design system as an API. Connect AI to Figma for extraction, creation, and debugging.项目地址: https://gitcode.com/gh_mirrors/fi/figma-console-mcp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考