claude-code-design-skills
将Figma设计稿自动转换为高质量React/Next.js代码
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：claude-code-design-skills。 它的用途是：将Figma设计稿自动转换为高质量React/Next.js代码 完整的 Skill 内容见：https://321skill.com/skills/claude-code-design-skills/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请根据这个Figma链接中的设计，帮我生成一个可复用的导航栏组件。”，它会通过Figma MCP读取设计文件，分析图层和变体，然后生成一个带有完整TypeScript类型定义、可访问性属性和样式逻辑的React组件代码。
介绍
这个Skill旨在解决设计师与前端开发者之间繁琐的沟通与手动编码问题，它能自动化地将Figma设计稿转换为生产就绪的TypeScript代码，显著提升从设计到代码的交付效率。
使用前需要安装Claude Code CLI和Figma MCP Server，通过克隆仓库并将技能文件夹复制到指定目录即可完成安装。安装后，在Claude Code中处理Figma设计相关任务时，该技能会自动被调用，引导你完成从组件识别、代码生成到优化的完整工作流。
它非常适合前端开发、全栈开发和UI设计师等角色，尤其适合那些需要在React/Next.js技术栈下，快速将视觉设计转化为可维护、类型安全且符合无障碍标准的代码的团队或个人。
建议在使用前仔细阅读技能自带的详细文档，并根据你的具体项目结构（如组件库路径、样式方案）进行必要的配置。由于它依赖于Figma MCP Server获取设计数据，请确保你有相应的Figma文件访问权限。
核心特点
与同类工具相比，它不仅生成代码，更通过系统化的工作流强制实施前端/后端边界，并内置了Figma变体到代码属性的自动映射策略，优先考虑组件复用而非一次性代码。
注意事项
不适合需要生成非React框架（如Vue、Svelte）代码或处理极其复杂、非标准设计规范的项目。
常见问题
支持哪些前端框架？
目前主要支持React和Next.js，并生成TypeScript代码。
需要Figma付费账户吗？
不需要付费账户，但需要安装并配置Figma MCP Server来访问设计文件。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/claude-code-design-skills/raw/index.md 读取 claude-code-design-skills 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/claude-code-design-skills/raw/index.md（查看排版版本）