vibe_figma
将Figma设计稿自动转换为生产级React组件
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：vibe_figma。 它的用途是：将Figma设计稿自动转换为生产级React组件 完整的 Skill 内容见：https://321skill.com/skills/vibe-figma/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'帮我把这个Figma登录页设计稿转换成React组件'，它会引导你提供Figma文件URL和访问令牌，然后自动生成对应的、带有Tailwind CSS样式的React组件文件，你可以直接将其集成到项目中。或者说：'用VibeFigma技能转换这个设计，并禁用Tailwind'，它会生成使用常规CSS的组件代码。
介绍
VibeFigma是一款专为开发者设计的工具，它解决了从设计到代码的繁琐手动转换问题。设计师在Figma中完成UI设计后，开发者需要花费大量时间将其重写为前端代码。VibeFigma通过官方Figma API直接读取设计文件，并自动生成带有Tailwind CSS的React/TypeScript组件，极大地提升了开发效率。
使用方式非常灵活。你可以通过交互式CLI（npx vibefigma --interactive）逐步引导完成转换；也可以作为Claude Code Skill直接集成到编码环境中；或者通过命令行直接指定Figma URL和访问令牌快速生成代码。它还支持自定义输出路径、禁用Tailwind、强制覆盖等高级选项。
这个工具非常适合前端开发、全栈开发和UI设计师。前端开发者可以快速将设计稿落地为可维护的组件代码；全栈开发者可以专注于业务逻辑，无需深究样式细节；UI设计师则可以与开发团队更顺畅地协作，验证设计的技术可行性。
使用前，你需要从Figma账户设置中生成一个个人访问令牌。建议将令牌保存在环境变量中以确保安全。虽然工具能处理大部分布局和样式，但对于极其复杂或高度动态的交互组件，可能仍需人工调整和优化。
核心特点
与同类工具相比，VibeFigma深度集成了官方Figma API，确保设计属性提取的准确性；其默认且深度集成的Tailwind CSS支持，能生成更符合现代前端开发习惯、易于维护的样式代码。
注意事项
不适合需要高度定制化动画逻辑或极其复杂状态管理的交互组件生成场景。
常见问题
如何获取Figma访问令牌？
登录Figma官网，进入账户设置，找到'Personal Access Tokens'部分，生成新令牌并妥善保存。
生成的代码支持TypeScript吗？
支持，工具默认生成的是带有类型定义的React TypeScript组件。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/vibe-figma/raw/index.md 读取 vibe_figma 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/vibe-figma/raw/index.md（查看排版版本）