用途:VibeFigma 用于把 Figma 设计稿转换为可维护的 React 组件,默认输出 Tailwind CSS 样式,代码为 TypeScript/React。
主要能力:通过官方 Figma API 提取设计并生成组件;支持交互式与直接命令两种 CLI 模式;可自定义组件输出路径与资源目录;支持 --optimize 优化、--clean 使用 AI 代码清理(需 GOOGLE_GENERATIVE_AI_API_KEY)、--no-tailwind 生成普通 CSS、--no-responsive 关闭响应式、--no-fonts 不引入字体、--no-absolute 禁用绝对定位、--force 覆盖文件。另含 REST API(POST /v1/api/vibe-figma),可程序化转换并返回组件代码与资源列表。
使用方式:需先获取 Figma Personal Access Token 并设为 FIGMA_TOKEN 环境变量。可直接运行 npx vibefigma,或 npm install -g vibefigma 全局安装,或 npm install --save-dev vibefigma 作为开发依赖。交互模式:npx vibefigma --interactive。直接命令示例:npx vibefigma "https://www.figma.com/design/FILE_ID/FILE_NAME?node-id=NODE_ID" --component ./src/components/Hero.tsx --assets ./public/images。API 服务需 bun install,开发模式 bun run dev,生产模式 bun run start。
适用场景:React、Next.js、Vite 项目中的设计到代码转换,Storybook 集成,批量转换脚本,以及 CI/CD 中定期同步 Figma 设计。
限制:需要有效的 Figma 访问令牌;AI 清理功能依赖 Google Generative AI API Key;生成代码建议审查测试后再用于生产;令牌不应提交到版本库。具体收费、价格与效果资料暂未提供。