使用说明

Figma MCP到React+Tailwind v4代码生成器

使用带有Claude code的Figma MCP工具演示人工智能驱动的Figma到代码工作流程。

⚠️ 重要：这是一个大约20分钟的起点，展示功能，而不是生产就绪代码。

这个项目展示了什么

Figma MCP工作流程：两阶段提取和实施过程
设计代币策略：通过用户控制的整合进行有意复制
纯UI组件：基于道具的组件，没有业务逻辑
并行生成：同时生成具有唯一名称的多个组件

快速链接

📄 单一URL模板 -用于统一的Figma设计
📄 双URL模板 -用于单独的桌面/移动文件

示例组件（能力演示）

设计来源：此项目使用电子商务UI-Figma电子商务UI套件（演示版）来自Figma社区，获得许可 CC 4.0非常感谢创作者提供这个令人惊叹的开源Figma资源，其中包含475多个UI组件和70多个网页。

修改：这个项目中的组件是衍生作品——从原始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中使用

<div className='bg-brand-primary h-navbar-height font-montserrat'>
  Hello World
</div>

**指令：**然后在组件中使用语义工具： @theme 为什么这对Figma工作流程很重要

：从Figma中提取的设计标记直接映射到CSS变量，而不需要配置文件的复杂性。这指令自动生成实用程序类，使Figma到代码的转换无缝衔接。

@theme Tailwind 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 tools

shadcn/ui v4指南

开发命令

了解更多 Figma MCP工作流程
单URL工作流指南 -完整的工艺文件
双URL工作流指南 -用于单独的桌面/移动文件
单一URL模板 -复制粘贴提示

双URL模板

-复制粘贴提示技术
Tailwind v4 CSS首次配置 -正式文件
顺风v4公告 -有什么新鲜事吗
React路由器v7 -框架文件
shadcn/ui -组件库文档
shadcn/ui顺风v4指南 -迁移指南
TanStack查询 -数据同步

剧作家

-测试框架

贡献
这是一个示范项目。请随意：
对工作流进行分叉和实验
根据您的特定需求调整模板

分享对工作流程文档的改进

报告生成过程中的问题