/ 目录 / 演练场 / Claude Code Design Skills
● 社区 scoobynko ⚡ 即开即用

Claude Code Design Skills

作者 scoobynko · scoobynko/claude-code-design-skills

Figma-to-Next.js以正确的方式—首先重用组件, Figma变体映射到props ,严格的TypeScript ,默认情况下为a11y。

scoobynko/claude-code-design-skills是用于设计到代码工作流程的Claude Code技能包。旗舰“Figma to Code”技能将Figma设计转换为具有明确规则的生产就绪的React/Next.js代码:更喜欢重用现有组件,将Figma变体映射到类型化的道具,强制执行前端/后端边界,并从一开始就连接a11y。与Figma MCP配对;更关注像素完美,而不是生成您的团队实际将合并的代码。

为什么要用

核心特性

实时演示

实际使用效果

claude-code-design-skills.replay ▶ 就绪
0/0

安装

选择你的客户端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

点击 Cline 侧栏中的 MCP Servers 图标,然后选 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

格式与 Claude Desktop 相同。重启 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "claude-code-design-skills",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ]
    }
  ]
}

Continue 使用服务器对象数组,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "claude-code-design-skills": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/scoobynko/claude-code-design-skills",
          "~/.claude-code/skills/claude-code-design-skills"
        ]
      }
    }
  }
}

加入 context_servers。Zed 保存后热重载。

claude mcp add claude-code-design-skills -- git clone https://github.com/scoobynko/claude-code-design-skills ~/.claude-code/skills/claude-code-design-skills

一行命令搞定。用 claude mcp list 验证,claude mcp remove 卸载。

使用场景

实战用法: Claude Code Design Skills

用Figma框架搭建新页面的脚手架

👤 前端工程师将设计转换为代码 ⏱ ~45 min intermediate

何时使用: 你有一个现成的Figma框架,并希望React/Next.js代码适合你的代码库。

前置条件
  • Figma MCP设置 — 安装Figma MCP并提供PAT
  • 技能已安装 — git克隆到~/.claude-code/skills/
步骤
  1. 指向边框
    将此Figma框架转换为Next.js页面:<figma URL>。重用来自src/components/的组件。✓ 已复制
    → 代理在编写新组件之前清点现有组件
  2. 道具地图变体
    将Figma变体映射到类型化的道具(大小、意图、禁用)。✓ 已复制
    → 生成的TS类型;无任何
  3. 模拟数据
    使用模拟数据;不要发明API调用。将后端挡在外面。✓ 已复制
    → 使用mocks文件清理无取件组件

结果: 一个真正的Next.js页面合并在一个PR中—无需审阅者重写。

注意事项
  • 在现有组件库旁边生成并行组件库 — 从“列出现有组件”开始,以便客服代表重复使用现有组件
搭配使用: figma · magic-ui-mcp

将组件的道具同步到Figma变体

👤 维护设计系统的团队 ⏱ ~25 min intermediate

何时使用: 设计师在Figma中添加了一个新的变体,代码需要跟上。

步骤
  1. 将Figma与组件进行比较
    将Button (Figma)变体与src/components/Button.tsx道具进行比较。✓ 已复制
    → 清除增量列表:新变体、重命名变体等。
  2. 应用差异
    更新Button.tsx以包含新的“ghost”变体;保留API。✓ 已复制
    → 使用不会中断呼叫者的默认值键入更新

结果: 设计系统漂移关闭而不会破坏消费者。

使用正确的语义和焦点管理转换Figma流

👤 注重辅助功能的前端工程师 ⏱ ~45 min intermediate

何时使用: 您需要通过屏幕阅读器审核的对话框/菜单/表单。

步骤
  1. 询问代码中的流程
    从Figma构建结账对话框—尊重聚焦陷阱、逃生、减少运动。✓ 已复制
    → 适当的角色、标签、焦点管理、Esc-to-close
  2. 运行审核员
    对结果运行claude-design-auditor技能。✓ 已复制
    → A11y评分≥ 85分

结果: 无需手持每个组件即可实现。

组合

与其他 MCP 搭配,撬动十倍杠杆

claude-code-design-skills + figma

通过MCP拉取Figma框架;通过此技能转换

获取Figma框架X ;使用技能转换现有组件重复使用。✓ 已复制
claude-code-design-skills + magic-ui-mcp

将Figma模式映射到存在的Magic UI组件上

在Figma使用模糊英雄的情况下,请使用Magic UI的模糊淡入,而不是编写模糊淡入。✓ 已复制
claude-code-design-skills + claude-design-auditor-skill

验证生成的代码是否通过18规则审核

转换后,运行设计审核员并修复任何高发现。✓ 已复制

工具

此 MCP 暴露的能力

工具输入参数何时调用成本
figma-to-code (SKILL) Figma frame URL + repo conventions 将设计转化为适合您代码库的代码 0

成本与限制

运行它的成本

API 配额
无技能; Figma MCP有自己的配额
每次调用 Token 数
Figma帧+现有代码+输出—可以很大;精确地确定帧的范围
费用
免费
提示
一次转换一个帧;巨大的选择浪费了上下文和审查能量。

安全

权限、密钥、影响范围

凭据存储: Figma PAT属于Figma MCP ,而不是此技能
数据出站: 技能中没有;网络呼叫发生在Figma MCP中

故障排查

常见错误与修复

专员编写新按钮,而不是重复使用现有按钮

在提示符中显式列出存储库的组件目录。

验证: Include 'check src/components/ first' in the request
缺少较新Figma变体的道具

在转换之前询问变体diff ;更新组件而不是分叉。

验证: Agent output includes a 'variants' section
类型过于宽松(随处可见)

要求“无任何;如果无法键入变量,则大声失败”。

验证: Search the diff for ': any'

替代方案

Claude Code Design Skills 对比其他方案

替代方案何时用它替代权衡
magic-ui-mcp您需要预先构建的动画组件,而不是Figma转换器库优先,而不是设计优先
claude-design-auditor-skill您想要评估设计质量,而不是生成代码审核,而不是生产
hue-brand-skill您需要设计语言,而不是帧转换系统优先,而不是帧优先

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills