Claude Talk To Figma MCP Daisyui

克劳德对话Figma MCP-DaisyUI版

一个模型上下文协议（MCP）插件，允许Claude Desktop和其他AI工具直接与Figma交互， 增强了智能DaisyUI组件检测、用于快速查询的本地缓存、HTMX/Tailwind代码生成、设计令牌提取、可访问性审计和实时更改通知.

叉子: 阿林斯珀克/克劳德与费玛·麦克普对话 Sonny Lazuardi和Xúlio Zé的原创作品

______________________________________________________________________

项目上下文

这个分叉是为一个需要增强Figma编码工作流功能的项目开发的。虽然针对特定的工作流程（HTMX+DaisyUI+Tailwind+Playwright）进行了定制，但这些工具是通用的，可以与任何Figma项目配合使用。

此分叉中的自定义设置：

• 组件注册表格式使用 docs/ui/component-registry/*.yaml 结构
• 页面对象生成遵循Playwright测试惯例
• 针对Tailwind配置优化设计令牌提取

所有工具都是独立工作的，可以适应其他项目结构。

______________________________________________________________________

v0.9.0中的新功能-变量绑定和每文档缓存

上一篇：v0.8.0-全面的Figma到Code流水线

______________________________________________________________________

DaisyUI版功能

此分叉为DaisyUI+Tailwind+HTMX工作流添加了强大的功能：

______________________________________________________________________

所有工具

索引和搜索工具

代码生成工具

设计令牌工具（新）

i18n和辅助工具（新）

组件注册表工具（新）

视觉测试工具（新）

变量和样式绑定工具

备注: get_local_variables 和 get_variable_collections 由于响应大小过大（约25k令牌），在v1.1.0中被删除。使用下面的缓存替代方案。

可变缓存和搜索工具（新v0.9.0）

原型和交互工具

实用工具

______________________________________________________________________

安装

1.先决条件

2.克隆和构建

git clone https://github.com/morteng/claude-talk-to-figma-mcp-daisyui.git
cd claude-talk-to-figma-mcp-daisyui
bun install
bun run build

3.配置克劳德桌面

添加到 ~/.claude.json:

{
  "mcpServers": {
    "figma": {
      "command": "/path/to/bun",
      "args": ["run", "/path/to/claude-talk-to-figma-mcp-daisyui/dist/talk_to_figma_mcp/server.js"],
      "env": {
        "FIGMA_CACHE_DIR": "/path/to/cache/dir"
      }
    }
  }
}

4.设置Figma插件

导入 src/claude_mcp_plugin/manifest.json 在Figma→ 插件→ 发展

5.首次连接

# Terminal 1: Start WebSocket server
bun socket

# Terminal 2: Use Claude
"Connect to Figma channel abc-123"
"Search for primary buttons"  # Index auto-builds on first query

______________________________________________________________________

使用示例

设计令牌提取

"Extract design tokens as Tailwind config"
→ Generates theme.extend with colors, spacing, typography, shadows

"Extract design tokens as CSS variables"
→ Generates :root { --color-primary: #...; } format

可访问性审计

"Audit the login page for accessibility"
→ Returns WCAG 2.1 AA/AAA violations with severity levels

Example output:
- Error: Contrast ratio 2.1 (needs 4.5 for AA)
- Warning: Touch target 32x32px (recommended 44x44px)
- Error: Text size 10px below minimum 12px

i18n文本提取

"Extract text nodes from the settings page with namespace 'settings'"
→ Returns all text with suggested i18n keys

Example output:
- "Save Changes" → settings.save_changes
- "Account Settings" → settings.account_title

组件注册表同步

"Sync component registry for the dashboard page"
→ Compares Figma with local YAML files

Example output:
- in_registry_not_figma: ["old-component"]
- in_figma_not_registry: ["new-feature-card"]
- name_mismatches: [{"figma": "Stats Card", "registry": "stat-card"}]

可视化回归导出

"Export the dashboard frames for visual regression testing"
→ Exports frames as PNG at specified scale

代码生成

"Generate a Jinja template from node 123:456"
→ Produces HTMX-ready template with DaisyUI classes

"Generate a Playwright Page Object for the Login page in Python"
→ Creates Python test helper with selectors

变量和样式绑定（新v0.9.0）

"Get all DaisyUI color variables"
→ Lists all color variables organized by collection (base, primary, secondary, etc.)

"Bind the base-100 variable to the navbar background"
→ Makes the fill theme-compatible (auto-switches light/dark)

Example workflow:
1. resolve_variable_by_name("base-100") → Get variable ID
2. set_fill_variable(nodeId, variableId) → Bind to node
→ Now the node's fill automatically adapts to theme changes

"Check what variables are bound to this card"
→ Shows all variable bindings for fills, strokes, and other properties

原型交互

"Link the Login button to the Dashboard frame"
→ Creates ON_CLICK prototype link with smooth transition

"Show all prototype links in the navigation bar"
→ Lists all interactive elements and their destinations

______________________________________________________________________

自动同步行为

索引会自动与您的Figma文档保持同步：

随时检查同步状态 index_status.

变更通知流程

Figma Document Change
        ↓
Plugin Event Listener (throttled, 1s minimum)
        ↓
WebSocket Notification
        ↓
MCP Server Handler
        ↓
Index Invalidation Flag
        ↓
Next Query → Auto-rebuild

______________________________________________________________________

建筑

┌─────────────────────────────────────────────────────────────────┐
│                        CLAUDE CODE                               │
└───────────────────────────────────┬─────────────────────────────┘
                                    │ MCP Protocol
                                    ▼
┌─────────────────────────────────────────────────────────────────┐
│              DAISYUI EDITION MCP SERVER                          │
│  ┌─────────────┐  ┌──────────────┐  ┌────────────────────┐     │
│  │ SQLite FTS5 │  │ DaisyUI      │  │ Code Generator     │     │
│  │ Index       │  │ Component    │  │ - Jinja/HTMX       │     │
│  │ - Nodes     │  │ Detector     │  │ - Tailwind         │     │
│  │ - Components│  │ - Colors     │  │ - Page Objects     │     │
│  │ - Pages     │  │ - Patterns   │  │ - Registry YAML    │     │
│  └──────┬──────┘  └──────┬───────┘  └────────────────────┘     │
│         │                │                                       │
│  ┌──────┴────────────────┴───────────────────────────────────┐  │
│  │              NEW TOOLS (v0.8.0)                            │  │
│  │  - Design Token Extraction    - Accessibility Audit       │  │
│  │  - i18n Text Extraction       - Component Registry Sync   │  │
│  │  - Visual Regression Export   - Change Notifications      │  │
│  └───────────────────────────────────────────────────────────┘  │
│                                                                  │
│  ┌───────────────────────────────────────────────────────────┐  │
│  │                Original Tools (50+)                        │  │
│  │  Document, Creation, Modification, Text, Components        │  │
│  └────────────────────────────────────────────────────────────┘  │
└───────────────────────────────┬─────────────────────────────────┘
                                │ WebSocket + Change Notifications
                                ▼
┌─────────────────────────────────────────────────────────────────┐
│                      FIGMA PLUGIN                                │
│  - Document change listener                                      │
│  - Selection change listener                                     │
│  - Page change listener                                          │
│  - Throttled notification relay                                  │
└─────────────────────────────────────────────────────────────────┘

______________________________________________________________________

DaisyUI组件类别

该索引会自动对组件进行分类：

______________________________________________________________________

测试

bun run test            # Unit tests
bun run test:coverage   # Coverage report
bun run test:integration # Integration testing

______________________________________________________________________

版本历史记录

1.1.0（上下文优化）

• 已移除: get_local_variables, get_variable_collections, get_document_info -这些返回的大量响应（约25000个令牌）迅速填充了上下文
• 请改用：缓存的替代方案，如 get_cached_variable_by_daisyui(), search_cached_variables(), list_pages(), get_page_tree()
• 为什么：上下文窗口保留，更快的响应，更好的代理行为

1.0.0（DaisyUI+顺风版）

• 完整的顺风CSS调色板：全面支持所有22个颜色系列和所有色调
• 增强型变量分类：颜色系统、标记类型、语义角色
• 多模式主题支持：在亮/暗模式下存储和查询变量值
• 变量绑定跟踪：跟踪哪些变量绑定到哪些节点
• 间隔和大小标记：支持非颜色设计标记

0.9.0（变量绑定和缓存）

• 变量绑定：将Figma变量（设计标记）绑定到节点填充和笔划
• 主题兼容颜色：使用 set_fill_variable 而不是硬编码RGB以支持亮/暗主题
• 变量发现: resolve_variable_by_name 用于按名称查找变量
• 样式绑定: set_fill_style_id, set_stroke_style_id, set_text_style_id
• 计量检验: get_bound_variables 查看绑定到节点的内容
• 清除绑定: clear_variable_binding 删除变量连接
• 变量缓存：使用FTS5搜索存储在SQLite中的变量(search_cached_variables, list_cached_color_variables)
• 每个文档数据库：每个Figma文件都有自己的SQLite数据库(list_cached_documents)
• DaisyUI自动映射：自动映射到语义名称的变量（主、100进制等）

0.8.0（DaisyUI扩展版）

• 设计令牌提取：提取颜色、间距、排版→ 顺风配置或CSS变量
• i18n文本提取：使用建议的i18n键提取文本节点
• 可访问性审计：WCAG 2.1 AA/AAA审核（对比度、触摸目标、文本大小）
• 组件注册表同步：将Figma与本地YAML注册表进行比较
• 可视化回归导出：导出用于视觉测试的框架
• 实时变更通知：文档更改时自动同步索引
• 增强插件：文档/选择/页面更改事件侦听器
• 自动索引无效：基于更改类型的智能缓存失效

0.7.0（DaisyUI版）

• 本地SQLite索引：快速查询，无需Figma往返
• FTS5搜索：自然语言组件搜索
• DaisyUI检测：自动组件到类映射
• 尾风提取：Figma风格→ 尾风公用设施
• 代码生成：Jinja/HTMX模板，页面对象
• 代理优化：具有即用型命令的较小响应

上一页（来自上游）

看 更改日志.md 上游历史。

______________________________________________________________________

许可证和信用证

许可证：MIT

这个叉子:

• DaisyUI版本增强了全面的Figma到代码管道
• 用于设计令牌提取、可访问性审计和代码生成的其他工具

上游:

• 阿林斯珀克/克劳德与费玛·麦克普对话 -克劳德改编自Xúlio Zé
• 光标与figma mcp对话 -Sonny Lazuardi原创

______________________________________________________________________

贡献

1. 分叉此回购
2. 创建要素分支： git checkout -b feature/amazing
3. 进行更改和测试
4. 提交带有清晰描述的PR

重点贡献领域:

• 其他DaisyUI组件模式
• 更多顺风测绘覆盖范围
• 增强的代码生成（React、Vue模板）
• 更好的主题令牌提取
• 其他可访问性检查
• 更多i18n密钥生成模式