Mimic Ai

Mimic AI

仅使用你的设计系统将 HTML 转换为 Figma，确保正确使用组件，并在需要时安全回退，同时在每次构建中提升准确度。

开源 MCP 服务，完全在你的设备上运行——无需 Mimic 云服务，也不依赖第三方服务。唯一的网络请求是使用你自己的令牌调用 Figma 自有 API。

设门禁，而非引导

让 AI 在 Figma 中创作已不再是难事；现在已有多种工具可以做到。差异体现在 AI 尝试使用设计系统中不存在的内容时会发生什么。即使工具会引导 Agent 使用你的组件，最终仍可能用上原始十六进制颜色值、原始像素尺寸，或系统中没有的字体；对于这类工具，通常还需要在交付使用前进行人工审核和清理。Mimic 会在写入时直接于 Figma 插件内部执行约束，而不只是写进提示词。

门禁会拦截什么

• 当存在 DS 颜色变量时，拦截原始十六进制／rgb 填充色
• 当存在 DS 文本样式时，拦截原始像素字号
• 拦截设计系统之外的字体
• 拦截变量类别不匹配的情况（例如，将背景令牌用于描边）
• 当 DS 已有对应组件时，拦截为元素创建的基础框架（按钮、徽章、输入框、表格单元格等）

如果 DS 确实没有合适的对应项，Mimic 会在构建报告中说明，而不是悄悄保留原始值。

学习成果会累积什么

• 组件配方：确认后会在后续构建中自动重放
• 多数胜出变体默认值：根据你的使用模式学习
• 你只需在修正构建时设置一次的设计规则，之后每次构建都会强制执行
• 无效编译记录：记录尝试过并确认不可行的模式，因此不会再次尝试
• 过时检测：存储的配方一旦不再符合当前 DS，就会立即标记
• 所有内容都按设计系统库分别限定：不会串到无关文件中

没有其他工具会在多次构建中累积这些内容。手动编写的 Figma Agent Skill 是静态文本，不会从你的修正中学习。

报告能证明什么 每次构建都会生成经过合规审计的报告：使用了哪些组件及其键、构建了哪些基础元素及原因、检查了哪些已存储规则及其是否通过，以及 DS 仍有哪些覆盖缺口。报告的设计初衷是展示给利益相关方，而不只是供执行构建的人阅读。

Mimic 为何存在

你构建了一个设计系统，包含组件、令牌和变量，每个决策都经过深思熟虑。然后有人需要在 Figma 中制作一个界面，却从头开始。颜色硬编码，字号使用原始值，调整尺寸就会变形的框架。你的系统就在旁边的库面板中，却无人使用。

Mimic 的输出就是最终交付物：真正的 Figma 图层，包含真正的组件实例、变量绑定和自动布局。无需转换，无需替换。直接交付。

它会学习你的系统

首次构建时，它会扫描设计系统。到第三次构建时，常用组件就能自动验证。到第十次构建时，大多数决策都能即时完成。每次构建都会累积知识。

只需纠正一次。 告诉 Mimic：“这个 Badge 不对，要用 Tag/Neutral。”映射就会永久更新。之后每次构建都会采用这个更正，无需你重复说明。

你的 DS 不断演进，Mimic 紧随其后。 每次构建开始时，Mimic 都会将当前系统与上次缓存的内容进行比较，检测组件的新增、移除和变体更改，无需手动重新同步。更深入的变量级变更检测（例如重命名颜色令牌）将在未来版本中推出。

每次构建都是一次 DS 评审。 每次构建后，Mimic 都会生成一份报告：它使用了哪些组件、从基础组件构建了哪些内容以及原因、它学到了哪些模式，以及你的 DS 缺少什么。建议会以提问而非命令的形式提出：“你的 DS 是否应该包含状态徽章？在 3 次构建中，有 4 个元素是使用基础组件构建的。”

工作原理

选择任意起点：

“构建一个包含 3 张指标卡片和一个活动表格的仪表板”

“这是我们预发布环境中的 HTML，请在 Figma 中构建出来”

“用真实组件重建这个 Claude Design 原型”

Mimic 会发现你文件中的设计系统，匹配组件和令牌，并构建结构化的 Figma 文件。无论从哪里开始，遵循的规则都相同，输出质量也一致。

Mimic 的对比

Claude Design 非常适合构思创意。Figma Make 非常适合交互式原型设计。Framelink 非常适合向 AI 提供设计上下文。当输出需要成为你实际交付的 Figma 文件时，就该用 Mimic 了。

适用人群

Mimic 适用于任何 Figma 库：你团队的库、社区套件，或客户发布的系统。

• 设计师：希望无需手动查找组件，就能制作符合 DS 规范的屏幕
• 设计系统负责人：通过构建真实屏幕来测试系统，并以证据呈现覆盖缺口
• 新团队成员：通过使用 DS 构建屏幕来了解它，查看有哪些组件以及缺少哪些组件
• 代理机构和自由职业者：接手客户的库，并需要快速制作屏幕
• DS 迁移团队：使用新系统重建现有屏幕，在决定是否迁移前评估覆盖情况
• 开发者：需要与前端组件相匹配的 Figma 参考
• 产品经理：希望使用 DS 快速制作创意稿，无需等待设计师

开始使用

要求： Node.js v20.6+ · Figma 桌面应用（不支持浏览器版 Figma — 下载）· Figma Professional 计划或更高版本（发布和使用团队库需要此计划）。

1. 安装

一行安装程序：

bash <(curl -fsSL https://raw.githubusercontent.com/miapre/mimic-ai/main/install.sh)

此命令会将仓库克隆到 ~/mimic-ai，运行 npm install，提示你输入 Figma 个人访问令牌，并提供自动在 Claude Code 的 settings.json 中注册 mimic-ai 的选项。

手动安装：

git clone https://github.com/miapre/mimic-ai.git
cd mimic-ai
npm install

然后在 MCP 客户端的服务配置中设置 FIGMA_TOKEN（或在 ~/.mimic-ai.json 中设置 — 如何生成令牌，请参阅下文的“Figma 设置详情”），并将客户端中 mimic-ai 条目指向克隆的 mcp.js（{ "command": "node", "args": ["/path/to/mimic-ai/mcp.js"] }）。

2. 添加 Figma 插件

Plugins > Development > Import plugin from manifest > 选择 ~/mimic-ai/plugin/manifest.json

3. 连接（每个会话）

Figma：Plugins > Development > Mimic AI > Run

首次调用工具时，桥接程序会自动启动。无需管理单独的进程。

4. 启用你的设计系统

资源面板 > 团队库图标 > 开启。每个文件执行一次即可。社区库开箱即用。

5. 构建

“构建一个包含三个表单字段和一个保存按钮的设置页面。”

一次调用即可发现整个 DS（变量、样式、组件），预加载所有内容，并进入可构建状态。无需多步设置。

它会学习并强制执行的内容

它会学习：

• 组件配方： 配置一次组件（变体、布尔值、文本插槽）后，Mimic 会在每次后续插入时重放该配置。构建 3 次后，配方即得到确认并会自动应用。
• 布局模式： 首次构建时捕获框架配置（方向、内边距、间距、填充），并在出现相同模式时重复使用。
• 设计规则： 只需纠正 Mimic 一次（“品牌色只能用于链接”“卡片必须有卡片标题组件”），它就会保存规则，并在每次后续构建时强制执行。
• DS 缺口： 在多次构建中追踪以基础元素构建的模式。Mimic 会提供有证据支持的建议（“状态徽章在 5 次构建中作为基础元素使用了 31 次”）。

它如何强制执行：

• 变量类别。 将 bg-* 用作描边？Mimic 会警告并建议使用 border-。将 bg- 用作文本颜色？它会警告并建议使用 text-*。
• 基于经验优先使用组件。 如果 Mimic 已在 3 次或更多构建中使用过徽章组件，而你尝试将其构建为原始框架，它会阻止操作，显示组件键，并提示“改用这个组件”。
• 规则合规性。 每份构建报告都会审查已存储的规则与实际构建内容。违规项会附带证据列出。
• 图表颜色语义。 品牌色、成功色、警告色和错误色不会纳入图表调色板。数据可视化只会建议使用中性色的功能色。

效率功能：

• 批量文本： 在一次调用中设置组件实例的所有文本覆盖
• 批量表格构建器： 一次调用即可构建完整的数据表（标题、单元格、变体、文本）
• 批量图表构建器： 一次调用即可构建柱状图、折线图、环形图和雷达图，并绑定 DS 颜色

自动检查的内容

每次构建都会分 6 个阶段依次执行 19 条质量规则。

• 文本使用 DS 文本样式，而非原始字体属性
• 颜色绑定到 DS 变量，而非硬编码
• 强制使用变量类别：文本使用 text-，填充使用 bg-，描边使用 border-*
• 语义颜色（Brand、Success、Warning、Error）仅限用于指定用途
• 间距和圆角在有可用 DS 令牌时绑定到相应令牌
• 每个框架都使用自动布局
• 内容与源内容逐字完全一致
• 在有匹配项时使用 DS 组件，包括从先前构建中学习到的组件
• 完整配置组件：文本覆盖、变体、图标插槽
• 用户定义的设计规则在使用时强制执行，并在构建报告中审计
• 构建报告包含组件使用率、绑定质量、规则合规情况和 DS 缺口建议

完整规范：CLAUDE.md

适用于任何设计系统

执行方式会根据 DS 提供的内容进行调整。如果库包含文本样式但没有颜色变量，就会强制使用文本样式，并接受原始颜色。构建报告会显示缺少哪些内容，以及添加这些内容后可以启用哪些功能。

MCP 客户端设置

适用于任何 MCP 客户端。针对 Claude Code 进行了优化。Claude Code、Cursor、Codex CLI 和 Gemini CLI 的设置（以及通用的 stdio 主机配置）也见 docs/HOSTS.md。

{
  "mcpServers": {
    "mimic-ai": {
      "command": "npx",
      "args": ["-y", "@miapre/mimic-ai"]
    }
  }
}

{
  "mcpServers": {
    "mimic-ai": {
      "command": "npx",
      "args": ["-y", "@miapre/mimic-ai"]
    }
  }
}

{
  "mcp": {
    "servers": {
      "mimic-ai": {
        "command": "npx",
        "args": ["-y", "@miapre/mimic-ai"]
        }
    }
  }
}

{
  "mcpServers": {
    "mimic-ai": {
      "command": "npx",
      "args": ["-y", "@miapre/mimic-ai"]
    }
  }
}

所有客户端都需要启用 Figma 插件。桥接功能已内置，并会自动启动。

MCP Client (Claude Code, Cursor, VS Code)
    |
    | MCP Protocol (stdio)
    v
MCP Server (intelligence layer)
    - Tool registry, DS cache, knowledge store
    - Variable validation + suggestions before plugin
    - Circuit breaker (3 failures -> stop + report)
    - Chart geometry engine (Node.js)
    - Phase enforcement (6 sequential phases)
    |
    | Embedded WebSocket bridge (auto-starts)
    v
Figma Plugin (enforcement gate)
    - DS enforcement: rejects raw values when DS has tokens
    - Binding feedback: reports which bindings succeeded/failed
    - Thin handlers: mechanical operations only
    |
    v
Figma Plugin API > Canvas

常见问题

隐私

所有操作都在本地运行。

设计数据不会离开本机。 没有遥测。 没有跟踪。

唯一的出站调用是向 Figma REST API 获取已发布组件的键。

限制

• 需要 Figma Professional 计划。 免费计划无法发布库。
• 首次构建时缓存字体。 非 Inter DS 字体可能在第一个文本节点上加载失败。重试即可成功。
• npx 模式。 不会设置 FIGMA_ACCESS_TOKEN。如需支持团队库，请使用完整安装程序。
• 逐步强制执行 DS。 根据 DS 提供的内容进行适配。仅包含组件的库会使用组件；缺失部分则使用原始值填补。报告会显示需要添加的内容。
• 针对 Claude 优化。 6 阶段协议和上下文工具提示词在 Claude Code 中效果最佳。其他 MCP 客户端可以使用这些工具，但可能不会遵循完整协议。

贡献

欢迎提交 Issue 和 PR。有关开发环境设置和 PR 要求，请参阅 Issue 跟踪器和 CONTRIBUTING.md。发现安全问题？请参阅 SECURITY.md，不要公开提交 Issue。

许可证

MIT