figma
将Figma设计稿自动转换为Vue 3组件的MCP服务器。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：figma。 它的用途是：将Figma设计稿自动转换为Vue 3组件的MCP服务器。 完整的 Skill 内容见：https://321skill.com/skills/figma-figma-to-vue-mcp/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请帮我把这个Figma按钮设计（附上链接）转换成Vue 3组件，使用TypeScript和Tailwind CSS。” 它会调用此Skill，解析设计稿的尺寸、颜色、圆角等属性，生成一个包含模板、样式和基础Props定义的Vue单文件组件。你还可以要求它“为这个卡片列表生成代码”，它会批量处理多个相似设计节点。
介绍
这个Skill旨在解决前端开发中设计稿到代码的重复性手动转换问题。它作为一个MCP服务器运行，能够解析Figma设计文件，并遵循特定规范，自动生成对应的Vue 3组件代码，包括模板、样式和基础的脚本逻辑。
使用时，你需要配置好MCP客户端（如Claude Desktop），将此Skill作为工具接入。之后，在AI对话中提供Figma文件链接或设计节点信息，即可请求生成Vue组件代码。它支持批量处理和一定的自定义规则配置。
它主要适合前端开发、全栈开发和UI设计师。前端开发者可以快速搭建页面基础结构；全栈开发者能加速全流程开发；UI设计师则可以验证设计的技术可行性并生成交付物。
建议在使用前，确保Figma设计稿的图层命名和结构清晰规范，这能显著提升生成代码的质量。由于是自动转换，生成后仍需开发者进行逻辑完善、状态管理和样式细节调整，不建议直接用于生产环境。
核心特点
与同类设计转代码工具相比，它深度集成MCP协议，可直接在AI对话环境中调用，实现基于自然语言指令的精准组件生成；同时，它严格遵循Vue 3的Composition API和现代前端工程规范进行代码输出，而非简单的静态HTML。
注意事项
不适合需要复杂交互逻辑、动态数据绑定或高度定制化动画的组件生成。
常见问题
这个Skill能完全替代前端开发吗？
不能，它主要生成基础结构和样式代码，复杂业务逻辑和交互仍需手动开发。
支持Figma的哪些特性？
支持图层、框架、基础样式（颜色、字体、间距）和自动布局的转换，复杂插件效果可能不支持。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/figma-figma-to-vue-mcp/raw/index.md 读取 figma 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/figma-figma-to-vue-mcp/raw/index.md（查看排版版本）