Figma MCP到React+Tailwind v4代码生成器
使用带有Claude code的Figma MCP工具演示人工智能驱动的Figma到代码工作流程。
⚠️ 重要：这是一个大约20分钟的起点，展示功能，而不是生产就绪代码。
这个项目展示了什么
- Figma MCP工作流程：两阶段提取和实施过程
- 设计代币策略：通过用户控制的整合进行有意复制
- 纯UI组件：基于道具的组件，没有业务逻辑
- 并行生成：同时生成具有唯一名称的多个组件
快速链接
示例组件（能力演示）
修改：这个项目中的组件是衍生作品——从原始Figma设计生成的React代码，与Tailwind v4样式和自定义实现相适应。
该项目包括从Figma设计系统生成的8个电子商务组件：
- 导航栏-1型/ -带有顶部栏和导航菜单的响应式导航栏
- 旋转木马-1/ -带有叠加内容的英雄旋转木马
- 旋转木马-2/ -次级转盘组件
- 产品卡片/ -带有卡片变体的产品网格
- 编辑选择/ -带有特色项目的编辑布局网格
- 博客-3/ -博客帖子卡片布局
- 英尺-6/ -带有订阅表单和社交链接的页脚
- 容器流体/ -响应式容器组件
命名注意事项：出于演示目的，原始Figma文件中保留了组件名称（例如“navbar-style-1”、“carousel-2”）。在实际项目中，使用与您的域匹配的更多语义名称。
🎯 目的：这些组件展示了工作流的功能，并对系统进行了压力测试。他们是 非 最佳实践组件架构或组合模式的示例。
查看它们：运行 npm run dev -所有组件都在主页上以演示的形式呈现。
Figma MCP工作流程入门
先决条件
- Node.js 18+和npm
- Figma文件URL，设计用于转换
- Claude Code或使用Figma MCP工具的类似AI助手
步进
- 准备你的Figma文件:
- 获取Figma URL node-id 参数 - 格式： https://figma.com/design/{fileKey}/{fileName}?node-id=1234-5678 - 确保您有查看该文件的权限
- 选择您的模板:
- 单个URL：一个带有响应帧的Figma文件→ Use figma-mcp-single-mplate.md - 双URL：将桌面和移动Figma文件分开→ Use figma-mcp-dual-template.md
- 复制模板 从
/templates/目录
- 填写你的路径 （替换占位符）：
- 组件文件夹路径：在哪里创建组件（例如。， ./app/components/my-component/) - 根CSS文件路径：主CSS文件的路径（例如。， ./app/app.css) - 必须存在 - 元框架：可选（例如。， nextjs, remix, vite) - UI库路径：可选（例如。， ./app/components/ui/)
- 粘贴到Claude代码中 并遵循两阶段的工作流程：
- 第一阶段：提取（助手将保存原始文件） - 审查检查点 - 第二阶段：实施（助理将生成组件）
- 审查和完善：验证生成的代码，测试响应行为，添加业务逻辑
理解生成的代码
1.设计令牌复制是有意的✨
每个组件在中都有自己的命名空间设计标记 app/app.css:
@theme {
/* Blog-3 Component Design Tokens */
--color-blog-primary: #23a6f0;
--font-size-blog-h3: 24px;
/* Footer-6 Component Design Tokens */
--color-footer-primary: #23a6f0;
--font-size-footer-h3: 24px;
}为什么重复？ 工作流程并不假设哪些设计令牌在您的系统中真正共享。 你 根据您的设计要求决定要整合什么。
下一步做什么：评论 app/app.css 当你理解了你的模式后，将重复项合并到一个统一的设计系统中。例如，上述两个组件都使用 #23a6f0 -你可以把它合并成一个 --color-brand-primary 令牌。
2.组件是纯UI（没有业务逻辑）🎨
所有生成的组件只接受道具和渲染UI：
export interface NavbarStyle1Props {
brandName?: string
cartCount?: number
// ... props only, no data fetching or state management
}添加什么：将组件连接到后端，添加业务逻辑，实现实际功能，并与应用程序的状态管理集成。
3.并行生成能力⚡
使用工作流可以同时生成具有唯一名称的组件。这大大加快了最初的脚手架阶段。
运作原理：每个组件都有自己的命名空间设计令牌（例如。， --color-navbar-primary, --color-footer-primary)，防止并行生成多个组件时发生冲突。
需求要求
规格
：在开始并行生成之前，确保每个组件都有一个唯一的名称。
工作流程第1阶段：提取（只读）📥 目的 ：从Figma中提取所有设计数据并保存原始输出。制造
- 无修改
- 到系统文件。 - 使用Figma MCP工具提取： - 设计系统变量（颜色、排版、间距） - 组件元数据和测量
- 视觉截图和描述
temp-outputs/生成的代码上下文 - 将6-11个原始文件保存到
- 目录 现阶段无系统修改
停止查看
-在继续之前验证提取第二阶段：实施（审查后）🛠️
- 目的
- ：使用提取的原始数据更新系统文件并生成像素完美组件。
- 从保存的原始文件读取（从不重新提取）
app/app.css合并设计系统和文档策略@theme更新 - 使用设计令牌
tailwind.config.ts指令 - 扩展
- 具有语义效用类
生成具有像素完美实现的组件使用TypeScript、linting和视觉比较进行验证 查看详细工作流程 : 单一URL指南
|
双URL指南
- 技术栈基金会 我们为Figma提供了编码工作流的基础设施：
- React路由器v7 -全栈React框架
- TypeScript -类型安全的JavaScript
- 顺风CSS v4 -CSS优先配置方法
- shadcn/ui -Radix UI组件原语（供应商提供）
- TanStack查询 -服务器状态管理（可选）
- 状态 -客户端状态管理（可选）
- 维特 -构建工具和开发服务器
剧作家
-端到端测试
Tailwind v4:CSS第一配置⭐ tailwind.config.js 我们使用Tailwind v4革命性的CSS优先方法（2025年1月22日发布）： 不 @theme 必需的
@import 'tailwindcss';
@config '../tailwind.config.ts'; /* Optional, for DX only */
@theme {
/* Design tokens → Utility classes */
--color-brand-primary: #23a6f0;
--font-montserrat: 'Montserrat', sans-serif;
--navbar-height: 91px;
}
@theme inline {
/* Reference existing CSS variables */
--color-background: var(--background);
}-所有配置都直接在CSS中使用
Hello World
指令：然后在组件中使用语义工具： @theme 为什么这对Figma工作流程很重要
：从Figma中提取的设计标记直接映射到CSS变量，而不需要配置文件的复杂性。这指令自动生成实用程序类，使Figma到代码的转换无缝衔接。
@themeTailwind v4的主要变化 :指令-直接在CSS中定义设计标记(@theme inline文档)-在主题中引用CSS变量(- 文档 )
tailwind.config.ts可选配置文件
-包括纯粹用于DX（创建语义别名） 了解更多 : 顺风v4公告
|
# Development
npm run dev # Start dev server at http://localhost:5173
npm run start:server # Start JSON server mock API on port 3001
# Code Quality
npm run typecheck # TypeScript + React Router type generation
npm run lint # ESLint (strict: max-warnings 0)
npm run lint:fix # Auto-fix linting issues
npm run format # Format with Prettier
npm run format:check # Check formatting (CI-friendly)
# Production
npm run build # Build for production
npm start # Run production server
# Testing
npm test # Run Playwright tests headless
npm run test:ui # Interactive test UI mode
npm run test:debug # Debug tests with dev toolsshadcn/ui v4指南
开发命令
双URL模板
- -复制粘贴提示 技术
- Tailwind v4 CSS首次配置 -正式文件
- 顺风v4公告 -有什么新鲜事吗
- React路由器v7 -框架文件
- shadcn/ui -组件库文档
- shadcn/ui顺风v4指南 -迁移指南
- TanStack查询 -数据同步
剧作家
-测试框架
- 贡献
- 这是一个示范项目。请随意：
- 对工作流进行分叉和实验
- 根据您的特定需求调整模板
分享对工作流程文档的改进
报告生成过程中的问题