要用codebuddy mcp插件将figma设计稿转为vue/react组件，需先配置figma api权限获取token并验证连接，再通过规范命名的frame组件触发生成；无设计稿时可用craft智能体依自然语言指令创建或增强组件；已有页面则支持反向提取原子化组件。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你想把Figma设计稿里的按钮、卡片、表单直接变成可运行的Vue或React组件，而不是手动一层层写HTML结构、补CSS类名、再套逻辑，那就得用CodeBuddy的MCP插件走标准解析路径——它不靠截图识别，而是直读图层语义和约束关系，生成带类型定义、响应式断点、甚至基础交互的工程级代码。
用Figma MCP插件直连生成原子化组件
这一步必须先打通Figma API权限，否则插件拿不到图层真实属性，生成的代码会缺失尺寸、颜色、自动布局等关键信息，最终只能输出空壳结构。
1、登录Figma官网 → 进入Settings → Security → “New token”，复制生成的Personal Access Token。
2、在VS Code中打开CodeBuddy IDE → 右上角点击MCP市场图标 → 搜索并安装“Figma MCP”插件。
3、安装完成后，在插件配置页粘贴刚复制的Token，【务必点击“Save & Test Connection”验证连通性】，失败则后续所有生成操作均返回空结果。
4、回到Figma，选中目标组件（如一个命名为“Button/Primary”的Frame），右键 → “Send to CodeBuddy”。注意：必须是命名含斜杠的Component，比如Button/Outline，否则插件无法识别为可导出组件。
5、CodeBuddy收到结构数据后，自动调用混元设计识别引擎，输出src/components/buttons/PrimaryButton.vue文件，内含defineProps接口、useSlots逻辑、Tailwind类名映射及disabled状态样式隔离。
用自然语言指令驱动Craft智能体推导组件
当你只有产品需求描述、没有设计稿时，Craft智能体能反向构建UI逻辑树，比纯文本提示更可靠——它会先渲染HTML原型预览，确认无误后再生成真实代码。
方法一：在VS Code命令面板输入/craft new component，然后输入：“生成一个支持暗色模式切换的用户头像上传组件，含裁剪预览、拖拽上传区、格式校验（仅允许jpg/png）、上传进度条。”
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
方法二：选中项目中已有的Avatar.vue文件 → 右键 → “CodeBuddy: Enhance Component” → 输入指令：“为该组件增加头像尺寸缩放控制，支持64px/128px/256px三档，且缩放后裁剪框同步调整。”
这一步操作起来很简单，直接把文件拖进去就行。Craft会分析现有props和emits，只在setup中插入scale相关响应式逻辑，不改动原有结构。
基于现有页面反向提取骨架与组件结构
已有真实页面但想拆出可复用子组件？CodeBuddy能从JSX/TSX/Vue SFC中剥离业务逻辑，保留容器层级与尺寸约束，生成语义清晰的原子组件。
第一步：在VS Code中右键点击Home.tsx → 选择“CodeBuddy: Extract Component”。
第二步：弹窗中勾选需保留的DOM节点，例如
第三步：设置导出粒度为“模块级”，指定目标目录为src/components/layout/，点击“Extract”。
第四步：检查生成的LayoutContainer.vue是否移除了所有ref、onMounted和API调用，仅保留slot插槽与class绑定，确保它真正可复用。
注意：若原文件使用了非标准的CSS-in-JS方案（如styled-components），提取后样式类名可能丢失，需手动补全className映射。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
