AI导哈

Figma转Next.js代码生成器

一款基于Bun和Next.js 15的应用，通过Claude和Figma MCP将Figma设计转换为生产就绪的Next.js代码。

  • by otiszero
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 otiszero/claude-figma-mcp

使用说明

Figma 到 Next.js 代码生成器

一个由Bun驱动的Next.js 15应用程序，利用Claude和Figma MCP将Figma设计转换为可直接投入生产的Next.js代码。

特点/功能

  • 组件生成提取带有变体、属性和设计系统映射的Figma组件
  • **设计令牌（或设计标记）**自动将Figma变量和样式转换为CSS自定义属性和Tailwind类
  • 布局翻译将Figma的自动布局、网格和约束转换为响应式的Next.js布局
  • 资产导出导出并优化图标、图像和其他资源
  • 开发模式集成从Figma开发者模式中检索特定于平台的代码片段
  • 类型安全全面支持TypeScript，具备严格的类型检查

先决条件

  • 面包 （v1.3.0 或更高版本）
  • Node.js 18+（为了兼容性）
  • 拥有API访问权限的Figma账户

安装

安装依赖项：

bun install

发展

运行开发服务器：

bun dev

打开 http://localhost:3000 翻译为中文是：“本地主机上的3000端口”。不过，通常在中文语境中，我们可能会更简洁地表达为“本地3000端口”或“本机3000端口”，以指代通过localhost（即本机）访问的3000端口服务 查看该应用程序。

项目结构

claude-figma-mcp/
├── src/
│   ├── app/              # Next.js App Router pages
│   │   ├── layout.tsx    # Root layout
│   │   ├── page.tsx      # Home page
│   │   └── globals.css   # Global styles
│   ├── components/       # React components
│   ├── lib/             # Utility functions
│   │   └── figma-utils.ts
│   └── types/           # TypeScript type definitions
│       └── figma.ts
├── public/              # Static assets
└── .claude/            # Claude configuration

使用方法

该应用程序遵循定义在（某处）的工作流程 CLAUDE.md:

  1. 提供Figma文件URL以及页面/节点ID
  2. 通过Figma MCP检索组件、令牌、布局、交互和资源
  3. 生成实施计划和初始代码
  4. 导出可直接用于生产的 Next.js 组件

脚本

  • bun dev - 启动开发服务器
  • bun build - 为生产构建（或：准备生产环境）
  • bun start - 启动生产服务器
  • bun lint - 运行 ESLint

技术栈

  • 框架Next.js 16（App Router）
  • 运行时Bun 1.3.0
  • 语言TypeScript 5.9
  • 造型Tailwind CSS 4.1
  • **代码检查（或代码规范检查）**带有 Next.js 配置的 ESLint

许可证

麻省理工学院（MIT）

相关 MCP