1. 项目概述当设计工具拥有“智能副驾”最近在折腾一个挺有意思的事儿我把一个叫 WorkBuddy 的 AI Agent 的核心能力“塞”进了我日常用的设计工具里。这听起来有点抽象简单说就是让 Figma、Sketch 或者 Adobe XD 这类软件从一个被动的工具变成一个能理解我意图、主动帮我干活的“智能副驾”。比如我画了个按钮的草图它就能自动帮我完善样式、生成适配不同状态的组件甚至根据我的文字描述调整整个页面的布局。这背后的核心就是把 WorkBuddy 这种专注于工作流自动化的 AI 智能体Agent与设计工具的原生操作深度结合。WorkBuddy 本身不是一个具体的软件你可以把它理解为一套“智能工作流引擎”或“AI 副驾框架”。它通过理解你的自然语言指令调用各种技能Skill去操作不同的软件或在线服务从而完成复杂的任务。而“塞进设计工具”意味着我们不是简单地打开两个窗口来回切换而是让 AI 的能力成为设计工具内部的一个“原生功能”设计者无需跳出创作环境就能获得智能辅助。这件事的价值对于设计师、产品经理甚至前端开发者来说都很大。它解决的不仅仅是“提高效率”这种泛泛的问题而是直接切入了创作过程中的几个核心痛点重复性劳动如批量修改样式、灵感具象化将模糊想法快速变成可视草案、以及设计系统的一致性维护确保每个组件都符合规范。如果你也厌倦了在像素和图层间进行机械操作或者希望有一个更懂你的设计伙伴那么这次“塞脑子”的实践或许能给你带来一些全新的思路。2. 核心思路拆解如何让 AI 与设计工具“对话”把 WorkBuddy 的“脑子”塞进设计工具并不是搞一个简单的插件调用 API 那么简单。这背后是一套让 AI 理解设计上下文、并安全精准地执行操作的系统工程。我的核心思路可以拆解为三个层次环境感知、意图理解与任务分解、以及安全执行。2.1 环境感知让 AI“看见”设计稿这是第一步也是最基础的一步。AI 必须知道当前设计工具里正在发生什么。我们需要的不是一张截图而是结构化的、机器可读的设计数据。获取设计上下文现代设计工具如 Figma提供了非常完善的插件 API 和实时数据访问能力。通过插件我们可以获取到当前画布Canvas上所有节点的树状结构、属性位置、尺寸、颜色、字体、效果等以及它们之间的关系父子级、编组、组件实例。这是 AI 的“眼睛”。例如我们可以通过figma.currentPage.selection获取当前选中的元素或者遍历figma.currentPage.children来获取整个页面的节点树。数据结构化获取到的原始数据需要被转换成一种对 AI 更友好的格式。我通常会将设计节点信息整理成 JSON 结构包含节点 ID、类型、关键属性和一个简化的边界框信息。同时会附加上一些全局上下文比如当前页面的名称、使用的颜色和文本样式库等。这一步的目的是为后续的 AI 理解提供一个清晰、无噪声的“事实依据”。2.2 意图理解与任务分解从指令到操作序列用户说“把这个按钮的颜色改成品牌主色并复制一排”AI 需要理解“这个”指代哪个按钮“品牌主色”具体是什么色值“复制一排”意味着水平和垂直间距多少。这就是意图理解和任务分解。自然语言指令解析这里就是 WorkBuddy 或类似 AI Agent 框架发挥作用的地方。我们将上一步得到的结构化设计上下文连同用户的自然语言指令一起提交给大语言模型LLM。我们需要精心设计提示词Prompt让 LLM 扮演一个“设计助手”的角色。Prompt 会明确告诉 LLM你是一个 Figma 专家以下是一份设计稿的结构化数据用户给出了某个指令请将这个指令分解为一系列具体的、可执行的 Figma 插件 API 操作步骤。任务规划Planning优秀的 Agent 框架如 WorkBuddy 所代表的范式核心能力之一就是任务规划。它不会一次性生成所有操作而是先形成一个计划。例如对于复杂的指令“创建一个登录弹窗包含邮箱密码输入框和社交登录按钮”AI 会先规划出1. 创建背景矩形2. 创建标题文本3. 创建邮箱输入框包含标签和输入区域…… 这个计划本身也是一系列原子操作的有序组合。技能Skill匹配在 WorkBuddy 的体系里一个“技能”就是一个封装好的、能完成特定功能如“修改填充颜色”、“创建矩形”、“对齐选中对象”的函数。任务分解的最终输出就是一系列需要调用的技能名称和对应的参数。这确保了 AI 的“思考结果”是确定性的、可执行的。2.3 安全执行与循环修正确保操作精准可控让 AI 直接操作生产环境的设计文件是有风险的。一个错误的循环可能清空你的画布。因此安全执行机制至关重要。操作预览与确认在执行任何实质性修改如修改属性、创建删除节点之前可以先让 AI 生成一个“操作预览”。例如在侧边栏显示“即将执行将节点[ID:123]的填充颜色从 #CCCCCC 改为 #007AFF”。用户确认后再真正执行。对于高风险操作如删除、批量修改这是必须的。沙盒与撤销栈更高级的做法是实现一个轻量级的“沙盒”环境。AI 的操作先在一个当前文件的副本或内存中的临时结构上进行生成结果后再整体性地应用到真实画布。同时务必确保 AI 触发的每一步操作都被纳入设计工具本身的撤销Undo历史栈中。这样用户随时可以一键撤销 AI 的所有操作安全感大大提升。循环ReAct与自我修正AI 不是神它可能误解指令或生成不可执行的操作。这时需要引入 ReActReasoning and Acting模式。即AI 执行一步或几步后再次检查当前画布状态环境感知与预期目标对比。如果发现偏差例如它想移动一个元素但该元素不存在它应该能自我诊断并修正后续计划或给出明确的错误提示请求用户澄清。这构成了一个“感知-思考-行动-再感知”的闭环。3. 实战构建从零搭建一个设计智能辅助插件理论讲完了我们动手做一个简化版的“智能设计副驾”插件。我们将以 Figma 插件开发为例因为它生态最开放文档也最全。这个插件将实现一个核心功能接收自然语言指令修改选中元素的样式。3.1 环境准备与项目初始化首先你需要一个 Figma 账号并在本地准备好开发环境。安装 Node.js 和 npm确保你的电脑上安装了 Node.js建议 LTS 版本。这将用于管理插件依赖和构建。创建 Figma 插件项目Figma 官方提供了插件创建工具。打开终端运行npx create-figma-plugin --template plugin-react这个命令会创建一个基于 React 的 Figma 插件模板项目它包含了基本的构建配置和示例代码。我们将其命名为design-buddy。获取 AI 服务接入能力我们需要一个大语言模型来处理指令。这里有几个选择OpenAI API最通用效果稳定。你需要去 OpenAI 官网注册并获取 API Key。本地模型如果你追求隐私和离线可以使用 Ollama 在本地运行开源模型如 Llama 3、Qwen 等。这需要一定的本地算力。其他云服务如 Anthropic Claude、Google Gemini 等。 本例中我们使用 OpenAI API因为它最简单直接。在项目根目录创建.env文件填入你的密钥OPENAI_API_KEYsk-your-secret-key-here注意前端插件代码不能直接安全地包含密钥。在实际生产中你需要一个后端服务作为中转即 BFF - Backend for Frontend。但为了演示简化我们暂时在插件服务端代码Node.js环境中直接使用并确保不将密钥泄露给客户端。Figma 插件架构中main.js运行在 Node.js 环境相对安全。3.2 核心模块一设计上下文采集器这个模块负责从 Figma 获取当前选中的元素信息并打包成送给 AI 的“情报”。在src/main.js或你项目的主逻辑文件中我们添加一个函数// 获取当前选中元素的上下文信息 async function getSelectionContext() { const selection figma.currentPage.selection; if (selection.length 0) { return { message: 请先选中一个或多个图层。 }; } const context { page: figma.currentPage.name, selectionCount: selection.length, nodes: [] }; // 遍历选中的节点提取关键信息 for (const node of selection) { const nodeInfo { id: node.id, name: node.name, type: node.type, // 只提取部分关键属性避免信息过载 boundingBox: { x: node.x, y: node.y, width: node.width, height: node.height } }; // 根据节点类型提取更具体的属性 if (node.type RECTANGLE || node.type ELLIPSE || node.type POLYGON) { nodeInfo.fills node.fills; nodeInfo.strokes node.strokes; nodeInfo.effects node.effects; } if (node.type TEXT) { nodeInfo.characters node.characters; nodeInfo.fontName node.fontName; nodeInfo.fontSize node.fontSize; nodeInfo.fills node.fills; } // 可以继续补充其他类型如 FRAME, GROUP, INSTANCE 等 context.nodes.push(nodeInfo); } // 获取当前文件的颜色样式作为“品牌色”的参考 const colorStyles await figma.getLocalPaintStylesAsync(); context.availableColorStyles colorStyles.map(s ({ name: s.name, paints: s.paints })).slice(0, 5); // 只取前5个避免上下文太长 return context; }这个函数会生成一个包含选中元素详情和可用颜色样式的 JSON 对象这就是 AI 的“视觉输入”。3.3 核心模块二AI 指令解析与任务生成接下来我们构建与 AI 对话的核心。我们在main.js中创建一个函数调用 OpenAI API或其他 LLM来解析指令。首先安装 OpenAI SDKnpm install openai然后创建解析函数import OpenAI from openai; // 初始化 OpenAI 客户端注意这应在有环境变量的服务端进行 const openai new OpenAI({ apiKey: process.env.OPENAI_API_KEY // 从 .env 文件读取 }); async function parseDesignCommand(userCommand, designContext) { // 构建给 AI 的提示词Prompt这是成败的关键 const systemPrompt 你是一个专业的 Figma 设计助手。你的任务是将用户的自然语言指令转化为具体的、可执行的 Figma 插件操作步骤。 用户当前的设计上下文如下 ${JSON.stringify(designContext, null, 2)} 请严格遵循以下规则 1. 只操作在上下文中明确提到的节点通过其ID引用。 2. 输出必须是一个合法的 JSON 数组每个元素代表一个操作步骤。 3. 每个操作步骤是一个对象包含 action 和 params 字段。 4. 可用的 action 类型包括 - change_fill_color: 修改填充颜色。参数: { nodeId: string, color: { r: number, g: number, b: number } } - change_stroke_color: 修改描边颜色。参数同上。 - resize_node: 调整尺寸。参数: { nodeId: string, width: number, height: number } - move_node: 移动位置。参数: { nodeId: string, x: number, y: number } - duplicate_node: 复制节点。参数: { nodeId: string } - align_nodes: 对齐多个节点。参数: { nodeIds: string[], direction: left | center | right | top | middle | bottom } 5. 如果用户的指令无法理解或无法用上述操作完成请将 action 设为 error并在 params 中提供 { message: string } 说明原因。 6. 颜色值请使用 0-1 范围的 RGB 对象。如果用户提到“品牌主色”请从上下文的 availableColorStyles 中寻找最匹配的或使用一个合理的蓝色如 {r: 0, g: 0.478, b: 1} 对应 #007AFF。 用户的指令是“${userCommand}” 现在请输出操作步骤数组 JSON; try { const completion await openai.chat.completions.create({ model: gpt-4o-mini, // 或使用 gpt-3.5-turbo 控制成本 messages: [ { role: system, content: systemPrompt }, { role: user, content: userCommand } ], temperature: 0.1, // 低随机性确保输出稳定 response_format: { type: json_object } // 要求返回 JSON }); const response completion.choices[0].message.content; const actions JSON.parse(response); // 假设 AI 返回的是 { steps: [...] } 的结构 return actions.steps || []; } catch (error) { console.error(AI 解析失败:, error); return [{ action: error, params: { message: AI 服务调用失败请检查网络和配置。 } }]; } }这个函数是大脑。它把用户指令和设计上下文打包成一个精心设计的 Prompt发送给 LLM并要求 LLM 严格按照我们定义的 JSON 格式返回操作步骤。这本质上就是定义了一个 AI 可用的“技能Skill”列表和调用规范。3.4 核心模块三插件 UI 与操作执行器最后我们需要一个界面让用户输入指令并执行 AI 生成的操作。这主要在插件的 UI 代码中例如src/ui.jsx。// 这是一个简化的 React UI 组件示例 import React, { useState } from react; import ./ui.css; function App() { const [command, setCommand] useState(); const [isProcessing, setIsProcessing] useState(false); const [previewSteps, setPreviewSteps] useState([]); // 1. 发送指令到插件主逻辑进行解析 const handleSendCommand async () { if (!command.trim()) return; setIsProcessing(true); // 通过 Figma 插件通信 API将用户指令发送到 main.js parent.postMessage({ pluginMessage: { type: PARSE_COMMAND, command } }, *); }; // 2. 监听来自 main.js 的解析结果 onmessage (event) { const msg event.data.pluginMessage; if (msg.type COMMAND_PARSED) { setIsProcessing(false); setPreviewSteps(msg.steps); // 收到 AI 生成的操作步骤预览 } else if (msg.type EXECUTION_RESULT) { // 执行完成后的反馈 alert(操作执行完毕: ${msg.result}); setPreviewSteps([]); setCommand(); } }; // 3. 确认并执行预览的操作步骤 const handleExecute () { parent.postMessage({ pluginMessage: { type: EXECUTE_STEPS, steps: previewSteps } }, *); }; return ( div classNamecontainer h2设计智能副驾/h2 textarea placeholder输入你的指令例如把选中的按钮变成红色并复制两个 value{command} onChange{(e) setCommand(e.target.value)} disabled{isProcessing} / button onClick{handleSendCommand} disabled{isProcessing} {isProcessing ? 思考中... : 解析指令} /button {previewSteps.length 0 ( div classNamepreview h3预览操作步骤/h3 ul {previewSteps.map((step, idx) ( li key{idx} strong{step.action}/strong: {JSON.stringify(step.params)} /li ))} /ul button onClick{handleExecute}确认执行/button /div )} /div ); } export default App;在main.js中我们需要补充消息处理逻辑串联起整个流程// main.js 中补充 figma.ui.onmessage async (msg) { if (msg.type PARSE_COMMAND) { // 1. 获取设计上下文 const context await getSelectionContext(); // 2. 调用 AI 解析指令 const steps await parseDesignCommand(msg.command, context); // 3. 将解析结果预览发送回 UI figma.ui.postMessage({ type: COMMAND_PARSED, steps }); } if (msg.type EXECUTE_STEPS) { const steps msg.steps; let result 成功执行了以下操作\n; for (const step of steps) { if (step.action error) { result 错误: ${step.params.message}\n; continue; } // 根据 action 类型调用 Figma API 执行真实操作 try { const node figma.getNodeById(step.params.nodeId); if (!node) throw new Error(未找到ID为 ${step.params.nodeId} 的节点); switch (step.action) { case change_fill_color: if (node.fills Array.isArray(node.fills)) { node.fills [{ type: SOLID, color: step.params.color }]; result 修改了 ${node.name} 的填充色\n; } break; case duplicate_node: const duplicate node.clone(); duplicate.x 100; // 简单偏移实际可根据指令更智能 figma.currentPage.appendChild(duplicate); result 复制了 ${node.name}\n; break; // ... 实现其他 action default: result 未知操作: ${step.action}\n; } } catch (err) { result 执行 ${step.action} 时出错: ${err.message}\n; } } // 执行完毕通知 UI figma.ui.postMessage({ type: EXECUTION_RESULT, result }); } };至此一个最基础的、具备“感知-思考-行动”循环的设计智能辅助插件就完成了。你可以运行npm run build和npm run watch来开发和测试它。4. 避坑指南与进阶思考在实际开发和使用的过程中我踩过不少坑也总结出一些让这类“智能副驾”真正好用、耐用的关键点。4.1 常见问题与调试技巧AI“胡言乱语”输出格式不对原因Prompt 指令不够清晰或者 AI 模型特别是小模型的推理和遵循指令能力有限。解决强化 Prompt 工程在 System Prompt 中反复强调输出格式使用“必须”、“严格遵循”等词。提供更详细的示例Few-shot Learning在 Prompt 里直接写一个输入输出的例子。使用 JSON Mode像上面代码一样调用 API 时设置response_format: { type: json_object }能极大提高返回 JSON 的稳定性。后置校验与重试在代码里对 AI 返回的结果进行 JSON 解析校验如果失败可以将错误信息和原始指令重新发给 AI要求它修正。这是一个简单的自我修正循环。操作执行出错如“节点不存在”原因AI 引用了错误的节点 ID或者用户在设计上下文获取后、AI 执行前移动或删除了节点。解决ID 校验与映射在执行每一步操作前都用figma.getNodeById校验节点是否存在。如果不存在可以尝试通过节点名称等属性进行模糊查找或者直接跳过该步骤并记录错误。状态快照在发送上下文给 AI 后立即为涉及到的节点创建一份轻量级快照如关键属性执行时优先使用快照数据减少对实时状态的依赖。或者更激进一点在 AI 思考期间“锁定”相关节点的选择状态。性能问题操作卡顿或 API 调用慢原因获取整个复杂画布的所有数据上下文可能非常庞大导致序列化慢、网络传输慢、AI 处理慢。解决上下文裁剪不要无脑发送整个页面数据。只发送与选中节点强相关的内容如其父 Frame、同级节点和全局样式。对于大型画布可以询问用户“是否需要分析整个画板”。流式处理与进度反馈对于复杂的多步操作不要等 AI 生成所有步骤再一次性执行。可以采用流式响应或者将大任务拆分成子任务每完成一步就在 UI 上给出反馈如“正在修改颜色...”、“正在复制对象...”提升用户体验。缓存设计样式颜色、文本样式等全局信息不需要每次请求都重新获取可以缓存起来定期更新。4.2 从“玩具”到“生产力”的进阶方向上面我们实现的是一个最小可行产品MVP。要让其真正融入工作流还需要考虑更多技能Skill库的扩展我们只定义了五六个基础技能。一个强大的设计 Agent 需要数十甚至上百个技能例如“创建符合 Material Design 规范的按钮”、“将选中的布局自动转换为响应式约束”、“根据用户流生成页面线框图”等。每个技能都需要精心设计其输入、输出和实现逻辑。记忆与学习一个真正的“副驾”应该能记住用户习惯。比如用户常说“用那个蓝色”AI 应该能学习到“那个蓝色”具体指代哪个色值。这可以通过维护一个用户偏好向量数据库来实现。多模态输入除了文字指令能否支持语音输入甚至用户用画笔在画布上随意圈一下AI 就能理解“把这个区域里的元素对齐”这需要结合视觉模型VLM的能力。与设计系统的深度集成这是企业级应用的关键。AI 应该能读取公司的设计系统文档如 Storybook、零代码平台上的组件库确保生成或修改的组件完全符合规范并能在修改时同步更新设计系统的源组件。安全与权限管控在团队协作环境中需要定义不同角色 AI 的操作权限。实习生使用的 AI 可能只能修改颜色而设计负责人使用的 AI 则可以修改核心组件库。4.3 关于 WorkBuddy 与 Hermes 等框架的思考在探索过程中你肯定会遇到 WorkBuddy、Hermes Agent 等概念。它们本质上是更高层次的 AI Agent 开发框架或平台。WorkBuddy它更像一个“智能工作流编排平台”。它提供了可视化的技能编排、状态管理、记忆机制和与各种第三方工具Notion、Jira、GitHub 等的连接器。你可以把我们的“设计技能”封装成一个 WorkBuddy Skill然后在一个更宏观的“设计评审-修改-交付”工作流中调用它。它的优势在于跨应用的任务自动化。Hermes Agent 等开源框架这些框架提供了构建 Agent 所需的核心基础设施如工具调用Tool Calling、规划器Planner、记忆体Memory的标准化实现。如果你要从零构建一个复杂的设计 Agent使用这类框架可以节省大量基础工作让你更专注于设计领域技能的实现。对于我们“塞进设计工具”这个场景初期可以不用这些重型框架直接用插件LLM API 的模式快速验证。当技能变多、逻辑变复杂后可以考虑将“大脑”部分即指令解析和任务规划迁移到一个独立的 Agent 服务中插件只负责环境感知和安全执行这样架构更清晰也便于复用 AI 能力到其他场景。最后我想说的是将 AI Agent 融入设计工具其终极目标不是替代设计师而是放大设计师的创造力。把重复、琐碎、规则性强的工作交给 AI让人更专注于策略、创意和审美判断。这个过程就像给一位熟练的工匠配上了一套智能的、听话的电动工具。工具本身不会创作但它能让工匠的构思更快、更精准地变为现实。现在这套工具已经触手可及剩下的就是我们去探索和定义如何与这位新的“智能副驾”更好地协作了。 AI Agent 赋能设计工具：构建智能副驾的实战指南
1. 项目概述当设计工具拥有“智能副驾”最近在折腾一个挺有意思的事儿我把一个叫 WorkBuddy 的 AI Agent 的核心能力“塞”进了我日常用的设计工具里。这听起来有点抽象简单说就是让 Figma、Sketch 或者 Adobe XD 这类软件从一个被动的工具变成一个能理解我意图、主动帮我干活的“智能副驾”。比如我画了个按钮的草图它就能自动帮我完善样式、生成适配不同状态的组件甚至根据我的文字描述调整整个页面的布局。这背后的核心就是把 WorkBuddy 这种专注于工作流自动化的 AI 智能体Agent与设计工具的原生操作深度结合。WorkBuddy 本身不是一个具体的软件你可以把它理解为一套“智能工作流引擎”或“AI 副驾框架”。它通过理解你的自然语言指令调用各种技能Skill去操作不同的软件或在线服务从而完成复杂的任务。而“塞进设计工具”意味着我们不是简单地打开两个窗口来回切换而是让 AI 的能力成为设计工具内部的一个“原生功能”设计者无需跳出创作环境就能获得智能辅助。这件事的价值对于设计师、产品经理甚至前端开发者来说都很大。它解决的不仅仅是“提高效率”这种泛泛的问题而是直接切入了创作过程中的几个核心痛点重复性劳动如批量修改样式、灵感具象化将模糊想法快速变成可视草案、以及设计系统的一致性维护确保每个组件都符合规范。如果你也厌倦了在像素和图层间进行机械操作或者希望有一个更懂你的设计伙伴那么这次“塞脑子”的实践或许能给你带来一些全新的思路。2. 核心思路拆解如何让 AI 与设计工具“对话”把 WorkBuddy 的“脑子”塞进设计工具并不是搞一个简单的插件调用 API 那么简单。这背后是一套让 AI 理解设计上下文、并安全精准地执行操作的系统工程。我的核心思路可以拆解为三个层次环境感知、意图理解与任务分解、以及安全执行。2.1 环境感知让 AI“看见”设计稿这是第一步也是最基础的一步。AI 必须知道当前设计工具里正在发生什么。我们需要的不是一张截图而是结构化的、机器可读的设计数据。获取设计上下文现代设计工具如 Figma提供了非常完善的插件 API 和实时数据访问能力。通过插件我们可以获取到当前画布Canvas上所有节点的树状结构、属性位置、尺寸、颜色、字体、效果等以及它们之间的关系父子级、编组、组件实例。这是 AI 的“眼睛”。例如我们可以通过figma.currentPage.selection获取当前选中的元素或者遍历figma.currentPage.children来获取整个页面的节点树。数据结构化获取到的原始数据需要被转换成一种对 AI 更友好的格式。我通常会将设计节点信息整理成 JSON 结构包含节点 ID、类型、关键属性和一个简化的边界框信息。同时会附加上一些全局上下文比如当前页面的名称、使用的颜色和文本样式库等。这一步的目的是为后续的 AI 理解提供一个清晰、无噪声的“事实依据”。2.2 意图理解与任务分解从指令到操作序列用户说“把这个按钮的颜色改成品牌主色并复制一排”AI 需要理解“这个”指代哪个按钮“品牌主色”具体是什么色值“复制一排”意味着水平和垂直间距多少。这就是意图理解和任务分解。自然语言指令解析这里就是 WorkBuddy 或类似 AI Agent 框架发挥作用的地方。我们将上一步得到的结构化设计上下文连同用户的自然语言指令一起提交给大语言模型LLM。我们需要精心设计提示词Prompt让 LLM 扮演一个“设计助手”的角色。Prompt 会明确告诉 LLM你是一个 Figma 专家以下是一份设计稿的结构化数据用户给出了某个指令请将这个指令分解为一系列具体的、可执行的 Figma 插件 API 操作步骤。任务规划Planning优秀的 Agent 框架如 WorkBuddy 所代表的范式核心能力之一就是任务规划。它不会一次性生成所有操作而是先形成一个计划。例如对于复杂的指令“创建一个登录弹窗包含邮箱密码输入框和社交登录按钮”AI 会先规划出1. 创建背景矩形2. 创建标题文本3. 创建邮箱输入框包含标签和输入区域…… 这个计划本身也是一系列原子操作的有序组合。技能Skill匹配在 WorkBuddy 的体系里一个“技能”就是一个封装好的、能完成特定功能如“修改填充颜色”、“创建矩形”、“对齐选中对象”的函数。任务分解的最终输出就是一系列需要调用的技能名称和对应的参数。这确保了 AI 的“思考结果”是确定性的、可执行的。2.3 安全执行与循环修正确保操作精准可控让 AI 直接操作生产环境的设计文件是有风险的。一个错误的循环可能清空你的画布。因此安全执行机制至关重要。操作预览与确认在执行任何实质性修改如修改属性、创建删除节点之前可以先让 AI 生成一个“操作预览”。例如在侧边栏显示“即将执行将节点[ID:123]的填充颜色从 #CCCCCC 改为 #007AFF”。用户确认后再真正执行。对于高风险操作如删除、批量修改这是必须的。沙盒与撤销栈更高级的做法是实现一个轻量级的“沙盒”环境。AI 的操作先在一个当前文件的副本或内存中的临时结构上进行生成结果后再整体性地应用到真实画布。同时务必确保 AI 触发的每一步操作都被纳入设计工具本身的撤销Undo历史栈中。这样用户随时可以一键撤销 AI 的所有操作安全感大大提升。循环ReAct与自我修正AI 不是神它可能误解指令或生成不可执行的操作。这时需要引入 ReActReasoning and Acting模式。即AI 执行一步或几步后再次检查当前画布状态环境感知与预期目标对比。如果发现偏差例如它想移动一个元素但该元素不存在它应该能自我诊断并修正后续计划或给出明确的错误提示请求用户澄清。这构成了一个“感知-思考-行动-再感知”的闭环。3. 实战构建从零搭建一个设计智能辅助插件理论讲完了我们动手做一个简化版的“智能设计副驾”插件。我们将以 Figma 插件开发为例因为它生态最开放文档也最全。这个插件将实现一个核心功能接收自然语言指令修改选中元素的样式。3.1 环境准备与项目初始化首先你需要一个 Figma 账号并在本地准备好开发环境。安装 Node.js 和 npm确保你的电脑上安装了 Node.js建议 LTS 版本。这将用于管理插件依赖和构建。创建 Figma 插件项目Figma 官方提供了插件创建工具。打开终端运行npx create-figma-plugin --template plugin-react这个命令会创建一个基于 React 的 Figma 插件模板项目它包含了基本的构建配置和示例代码。我们将其命名为design-buddy。获取 AI 服务接入能力我们需要一个大语言模型来处理指令。这里有几个选择OpenAI API最通用效果稳定。你需要去 OpenAI 官网注册并获取 API Key。本地模型如果你追求隐私和离线可以使用 Ollama 在本地运行开源模型如 Llama 3、Qwen 等。这需要一定的本地算力。其他云服务如 Anthropic Claude、Google Gemini 等。 本例中我们使用 OpenAI API因为它最简单直接。在项目根目录创建.env文件填入你的密钥OPENAI_API_KEYsk-your-secret-key-here注意前端插件代码不能直接安全地包含密钥。在实际生产中你需要一个后端服务作为中转即 BFF - Backend for Frontend。但为了演示简化我们暂时在插件服务端代码Node.js环境中直接使用并确保不将密钥泄露给客户端。Figma 插件架构中main.js运行在 Node.js 环境相对安全。3.2 核心模块一设计上下文采集器这个模块负责从 Figma 获取当前选中的元素信息并打包成送给 AI 的“情报”。在src/main.js或你项目的主逻辑文件中我们添加一个函数// 获取当前选中元素的上下文信息 async function getSelectionContext() { const selection figma.currentPage.selection; if (selection.length 0) { return { message: 请先选中一个或多个图层。 }; } const context { page: figma.currentPage.name, selectionCount: selection.length, nodes: [] }; // 遍历选中的节点提取关键信息 for (const node of selection) { const nodeInfo { id: node.id, name: node.name, type: node.type, // 只提取部分关键属性避免信息过载 boundingBox: { x: node.x, y: node.y, width: node.width, height: node.height } }; // 根据节点类型提取更具体的属性 if (node.type RECTANGLE || node.type ELLIPSE || node.type POLYGON) { nodeInfo.fills node.fills; nodeInfo.strokes node.strokes; nodeInfo.effects node.effects; } if (node.type TEXT) { nodeInfo.characters node.characters; nodeInfo.fontName node.fontName; nodeInfo.fontSize node.fontSize; nodeInfo.fills node.fills; } // 可以继续补充其他类型如 FRAME, GROUP, INSTANCE 等 context.nodes.push(nodeInfo); } // 获取当前文件的颜色样式作为“品牌色”的参考 const colorStyles await figma.getLocalPaintStylesAsync(); context.availableColorStyles colorStyles.map(s ({ name: s.name, paints: s.paints })).slice(0, 5); // 只取前5个避免上下文太长 return context; }这个函数会生成一个包含选中元素详情和可用颜色样式的 JSON 对象这就是 AI 的“视觉输入”。3.3 核心模块二AI 指令解析与任务生成接下来我们构建与 AI 对话的核心。我们在main.js中创建一个函数调用 OpenAI API或其他 LLM来解析指令。首先安装 OpenAI SDKnpm install openai然后创建解析函数import OpenAI from openai; // 初始化 OpenAI 客户端注意这应在有环境变量的服务端进行 const openai new OpenAI({ apiKey: process.env.OPENAI_API_KEY // 从 .env 文件读取 }); async function parseDesignCommand(userCommand, designContext) { // 构建给 AI 的提示词Prompt这是成败的关键 const systemPrompt 你是一个专业的 Figma 设计助手。你的任务是将用户的自然语言指令转化为具体的、可执行的 Figma 插件操作步骤。 用户当前的设计上下文如下 ${JSON.stringify(designContext, null, 2)} 请严格遵循以下规则 1. 只操作在上下文中明确提到的节点通过其ID引用。 2. 输出必须是一个合法的 JSON 数组每个元素代表一个操作步骤。 3. 每个操作步骤是一个对象包含 action 和 params 字段。 4. 可用的 action 类型包括 - change_fill_color: 修改填充颜色。参数: { nodeId: string, color: { r: number, g: number, b: number } } - change_stroke_color: 修改描边颜色。参数同上。 - resize_node: 调整尺寸。参数: { nodeId: string, width: number, height: number } - move_node: 移动位置。参数: { nodeId: string, x: number, y: number } - duplicate_node: 复制节点。参数: { nodeId: string } - align_nodes: 对齐多个节点。参数: { nodeIds: string[], direction: left | center | right | top | middle | bottom } 5. 如果用户的指令无法理解或无法用上述操作完成请将 action 设为 error并在 params 中提供 { message: string } 说明原因。 6. 颜色值请使用 0-1 范围的 RGB 对象。如果用户提到“品牌主色”请从上下文的 availableColorStyles 中寻找最匹配的或使用一个合理的蓝色如 {r: 0, g: 0.478, b: 1} 对应 #007AFF。 用户的指令是“${userCommand}” 现在请输出操作步骤数组 JSON; try { const completion await openai.chat.completions.create({ model: gpt-4o-mini, // 或使用 gpt-3.5-turbo 控制成本 messages: [ { role: system, content: systemPrompt }, { role: user, content: userCommand } ], temperature: 0.1, // 低随机性确保输出稳定 response_format: { type: json_object } // 要求返回 JSON }); const response completion.choices[0].message.content; const actions JSON.parse(response); // 假设 AI 返回的是 { steps: [...] } 的结构 return actions.steps || []; } catch (error) { console.error(AI 解析失败:, error); return [{ action: error, params: { message: AI 服务调用失败请检查网络和配置。 } }]; } }这个函数是大脑。它把用户指令和设计上下文打包成一个精心设计的 Prompt发送给 LLM并要求 LLM 严格按照我们定义的 JSON 格式返回操作步骤。这本质上就是定义了一个 AI 可用的“技能Skill”列表和调用规范。3.4 核心模块三插件 UI 与操作执行器最后我们需要一个界面让用户输入指令并执行 AI 生成的操作。这主要在插件的 UI 代码中例如src/ui.jsx。// 这是一个简化的 React UI 组件示例 import React, { useState } from react; import ./ui.css; function App() { const [command, setCommand] useState(); const [isProcessing, setIsProcessing] useState(false); const [previewSteps, setPreviewSteps] useState([]); // 1. 发送指令到插件主逻辑进行解析 const handleSendCommand async () { if (!command.trim()) return; setIsProcessing(true); // 通过 Figma 插件通信 API将用户指令发送到 main.js parent.postMessage({ pluginMessage: { type: PARSE_COMMAND, command } }, *); }; // 2. 监听来自 main.js 的解析结果 onmessage (event) { const msg event.data.pluginMessage; if (msg.type COMMAND_PARSED) { setIsProcessing(false); setPreviewSteps(msg.steps); // 收到 AI 生成的操作步骤预览 } else if (msg.type EXECUTION_RESULT) { // 执行完成后的反馈 alert(操作执行完毕: ${msg.result}); setPreviewSteps([]); setCommand(); } }; // 3. 确认并执行预览的操作步骤 const handleExecute () { parent.postMessage({ pluginMessage: { type: EXECUTE_STEPS, steps: previewSteps } }, *); }; return ( div classNamecontainer h2设计智能副驾/h2 textarea placeholder输入你的指令例如把选中的按钮变成红色并复制两个 value{command} onChange{(e) setCommand(e.target.value)} disabled{isProcessing} / button onClick{handleSendCommand} disabled{isProcessing} {isProcessing ? 思考中... : 解析指令} /button {previewSteps.length 0 ( div classNamepreview h3预览操作步骤/h3 ul {previewSteps.map((step, idx) ( li key{idx} strong{step.action}/strong: {JSON.stringify(step.params)} /li ))} /ul button onClick{handleExecute}确认执行/button /div )} /div ); } export default App;在main.js中我们需要补充消息处理逻辑串联起整个流程// main.js 中补充 figma.ui.onmessage async (msg) { if (msg.type PARSE_COMMAND) { // 1. 获取设计上下文 const context await getSelectionContext(); // 2. 调用 AI 解析指令 const steps await parseDesignCommand(msg.command, context); // 3. 将解析结果预览发送回 UI figma.ui.postMessage({ type: COMMAND_PARSED, steps }); } if (msg.type EXECUTE_STEPS) { const steps msg.steps; let result 成功执行了以下操作\n; for (const step of steps) { if (step.action error) { result 错误: ${step.params.message}\n; continue; } // 根据 action 类型调用 Figma API 执行真实操作 try { const node figma.getNodeById(step.params.nodeId); if (!node) throw new Error(未找到ID为 ${step.params.nodeId} 的节点); switch (step.action) { case change_fill_color: if (node.fills Array.isArray(node.fills)) { node.fills [{ type: SOLID, color: step.params.color }]; result 修改了 ${node.name} 的填充色\n; } break; case duplicate_node: const duplicate node.clone(); duplicate.x 100; // 简单偏移实际可根据指令更智能 figma.currentPage.appendChild(duplicate); result 复制了 ${node.name}\n; break; // ... 实现其他 action default: result 未知操作: ${step.action}\n; } } catch (err) { result 执行 ${step.action} 时出错: ${err.message}\n; } } // 执行完毕通知 UI figma.ui.postMessage({ type: EXECUTION_RESULT, result }); } };至此一个最基础的、具备“感知-思考-行动”循环的设计智能辅助插件就完成了。你可以运行npm run build和npm run watch来开发和测试它。4. 避坑指南与进阶思考在实际开发和使用的过程中我踩过不少坑也总结出一些让这类“智能副驾”真正好用、耐用的关键点。4.1 常见问题与调试技巧AI“胡言乱语”输出格式不对原因Prompt 指令不够清晰或者 AI 模型特别是小模型的推理和遵循指令能力有限。解决强化 Prompt 工程在 System Prompt 中反复强调输出格式使用“必须”、“严格遵循”等词。提供更详细的示例Few-shot Learning在 Prompt 里直接写一个输入输出的例子。使用 JSON Mode像上面代码一样调用 API 时设置response_format: { type: json_object }能极大提高返回 JSON 的稳定性。后置校验与重试在代码里对 AI 返回的结果进行 JSON 解析校验如果失败可以将错误信息和原始指令重新发给 AI要求它修正。这是一个简单的自我修正循环。操作执行出错如“节点不存在”原因AI 引用了错误的节点 ID或者用户在设计上下文获取后、AI 执行前移动或删除了节点。解决ID 校验与映射在执行每一步操作前都用figma.getNodeById校验节点是否存在。如果不存在可以尝试通过节点名称等属性进行模糊查找或者直接跳过该步骤并记录错误。状态快照在发送上下文给 AI 后立即为涉及到的节点创建一份轻量级快照如关键属性执行时优先使用快照数据减少对实时状态的依赖。或者更激进一点在 AI 思考期间“锁定”相关节点的选择状态。性能问题操作卡顿或 API 调用慢原因获取整个复杂画布的所有数据上下文可能非常庞大导致序列化慢、网络传输慢、AI 处理慢。解决上下文裁剪不要无脑发送整个页面数据。只发送与选中节点强相关的内容如其父 Frame、同级节点和全局样式。对于大型画布可以询问用户“是否需要分析整个画板”。流式处理与进度反馈对于复杂的多步操作不要等 AI 生成所有步骤再一次性执行。可以采用流式响应或者将大任务拆分成子任务每完成一步就在 UI 上给出反馈如“正在修改颜色...”、“正在复制对象...”提升用户体验。缓存设计样式颜色、文本样式等全局信息不需要每次请求都重新获取可以缓存起来定期更新。4.2 从“玩具”到“生产力”的进阶方向上面我们实现的是一个最小可行产品MVP。要让其真正融入工作流还需要考虑更多技能Skill库的扩展我们只定义了五六个基础技能。一个强大的设计 Agent 需要数十甚至上百个技能例如“创建符合 Material Design 规范的按钮”、“将选中的布局自动转换为响应式约束”、“根据用户流生成页面线框图”等。每个技能都需要精心设计其输入、输出和实现逻辑。记忆与学习一个真正的“副驾”应该能记住用户习惯。比如用户常说“用那个蓝色”AI 应该能学习到“那个蓝色”具体指代哪个色值。这可以通过维护一个用户偏好向量数据库来实现。多模态输入除了文字指令能否支持语音输入甚至用户用画笔在画布上随意圈一下AI 就能理解“把这个区域里的元素对齐”这需要结合视觉模型VLM的能力。与设计系统的深度集成这是企业级应用的关键。AI 应该能读取公司的设计系统文档如 Storybook、零代码平台上的组件库确保生成或修改的组件完全符合规范并能在修改时同步更新设计系统的源组件。安全与权限管控在团队协作环境中需要定义不同角色 AI 的操作权限。实习生使用的 AI 可能只能修改颜色而设计负责人使用的 AI 则可以修改核心组件库。4.3 关于 WorkBuddy 与 Hermes 等框架的思考在探索过程中你肯定会遇到 WorkBuddy、Hermes Agent 等概念。它们本质上是更高层次的 AI Agent 开发框架或平台。WorkBuddy它更像一个“智能工作流编排平台”。它提供了可视化的技能编排、状态管理、记忆机制和与各种第三方工具Notion、Jira、GitHub 等的连接器。你可以把我们的“设计技能”封装成一个 WorkBuddy Skill然后在一个更宏观的“设计评审-修改-交付”工作流中调用它。它的优势在于跨应用的任务自动化。Hermes Agent 等开源框架这些框架提供了构建 Agent 所需的核心基础设施如工具调用Tool Calling、规划器Planner、记忆体Memory的标准化实现。如果你要从零构建一个复杂的设计 Agent使用这类框架可以节省大量基础工作让你更专注于设计领域技能的实现。对于我们“塞进设计工具”这个场景初期可以不用这些重型框架直接用插件LLM API 的模式快速验证。当技能变多、逻辑变复杂后可以考虑将“大脑”部分即指令解析和任务规划迁移到一个独立的 Agent 服务中插件只负责环境感知和安全执行这样架构更清晰也便于复用 AI 能力到其他场景。最后我想说的是将 AI Agent 融入设计工具其终极目标不是替代设计师而是放大设计师的创造力。把重复、琐碎、规则性强的工作交给 AI让人更专注于策略、创意和审美判断。这个过程就像给一位熟练的工匠配上了一套智能的、听话的电动工具。工具本身不会创作但它能让工匠的构思更快、更精准地变为现实。现在这套工具已经触手可及剩下的就是我们去探索和定义如何与这位新的“智能副驾”更好地协作了。