先说几个核心判断：把Figma设计稿里的按钮、卡片、表单直接变成能跑的Vue或React组件，这事现在已经不是靠截图识别的路子走了。真正的做法是直读设计稿的图层语义和约束关系，最终生成带类型定义、响应式断点、甚至基础交互的工程级代码。在CodeBuddy这套工具链里，实现这个目标有三个明确的路径，分别对应不同的场景。

用Figma MCP插件直连生成原子化组件

这一步的关键在于——必须先打通Figma API权限，否则插件拿不到图层的真实属性，生成的代码会缺失尺寸、颜色、自动布局这些关键信息，最终只能输出一个空壳结构。操作路径非常清晰：

先从Figma官网进入Settings，在Security里生成Personal Access Token，复制保存。然后在VS Code中打开CodeBuddy IDE，右上角MCP市场搜索并安装"Figma MCP"插件。装好后在配置页粘贴Token，务必要点击"Sa ve & Test Connection"验证连通性——这个步骤跳过的话，后续所有生成操作都会返回空结果。

连通之后，回到Figma选中目标组件，比如一个命名为"Button/Primary"的Frame，右键选择"Send to CodeBuddy"。需要特别注意：必须是命名中含斜杠的Component才能被插件识别为可导出组件。数据传入CodeBuddy后，系统会自动调用混元设计识别引擎，输出的文件像src/components/buttons/PrimaryButton.vue，里面会包含defineProps接口、useSlots逻辑、Tailwind类名映射以及disabled状态的样式隔离，基本是开箱即用的状态。

用自然语言指令驱动Craft智能体推导组件

另一种常见场景是：你手头只有产品需求描述，没有现成的设计稿。这时候Craft智能体就能派上用场，它比纯文本提示的生成模式更可靠——会先渲染一个HTML原型预览，确认方向正确后再生成真实代码。

具体操作有两种方式。第一种：在VS Code命令面板输入/craft new component，接着输入一个具体的描述，比如："生成一个支持暗色模式切换的用户头像上传组件，含裁剪预览、拖拽上传区、格式校验（仅允许jpg/png）、上传进度条。"Craft会根据这些约束推导出钱I逻辑树，最终输出可直接使用的组件代码。

第二种方式更实用——直接基于现有组件做增强。选中项目中已有的A vatar.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节点，比如header.na vbar、main.content-grid、footer.copyright——没勾选的节点，比如fetch调用、useState声明，会被自动剔除。导出粒度设为"模块级"，指定目标目录为src/components/layout/，点击Extract即可。

生成完成后需要检查一点：生成的LayoutContainer.vue是否移除了所有ref、onMounted和API调用，仅保留slot插槽与class绑定。只有当这些业务逻辑被完全剥离，组件才算真正具备了复用性。需要警惕的是，如果原文件使用了非标准的CSS-in-JS方案，比如styled-components，提取后样式类名可能会丢失，这时候需要手动补全className映射。

从实际工程角度出发，这三个路径覆盖了从设计稿生成、需求描述推导到现有代码拆解的全流程。值得记住的是，无论走哪条路，最终的代码都只是工程化的起点，而不是终点——响应式断点的微调、边缘状态的补全、无障碍支持的完善，这些工作仍然需要开发者根据实际场景来完成。