AI 智能体面向设计师：如何设计和构建智能体工作流

聊天机器人和智能体的区别，就是一个等你下一条消息的初级员工和一个自己把整件事做完的初级员工之间的区别。

第二种已经在过去十八个月里悄悄进入了你的工具里，而大多数设计师还没注意到。他们还在往聊天窗口里打提示词，复制答案，粘贴到 Figma，然后纳闷为什么自己的工作流感觉只是 2023 年的加速版。智能体的转变不是"更好的 ChatGPT"，而是一次品类变革。

智能体接收一个目标，自己决定调用哪些工具，按顺序调用，读取结果，修正方向，最后交给你一个完成品。你不再是在聊天窗口里打字，而是在向一支小团队简报，然后审查交付成果。

聊天机器人、副驾、智能体，以及为什么这种区别很重要

这三个词经常被当成同一个意思用。它们不是。

聊天机器人是回合制的。你问，它答，你再问。没有工具的 ChatGPT，普通聊天窗口里的 Claude，应用里的 Gemini。上下文是你粘贴进去的内容，输出是文字。

副驾是内嵌辅助。GitHub Copilot，Figma 的 AI 功能，Notion AI。它住在另一个工具里，在你工作时建议下一步。它不会离开你所在的车道，也不会规划多步工作。

智能体是目标导向的。你给它一个结果，而不是下一步指令。它自己选择工具，在循环中调用它们，检查自己的进度，直到目标达成或需要你介入才停下来。目前最清晰的例子是在终端里运行并接入 MCP 服务器的 Claude Code，虽然 ChatGPT 的智能体模式、Cursor 的智能体面板以及 Anthropic 的 Computer Use 都有相同的行为方式。

结论：聊天机器人响应，副驾协助，智能体交付。

智能体是一个循环，不是一个单一提示

你将会用到的每一个智能体都运行同样的四步循环。学会这个形状，你就能预测任何智能体工具的行为。

1. 计划。 智能体读取目标，决定第一步。
2. 行动。 它调用一个工具。读取文件，查询 API，运行命令，抓取 URL。
3. 观察。 它读取工具的输出，判断是否更接近目标了。
4. 迭代。 如果未完成，规划下一步。如果完成，汇报结果。

循环就是全部。人们归功于智能体的魔法，不过是循环在足够多有用工具的支撑下干净地运转。没有循环，就没有智能体。只回复一次的模型是聊天机器人，带着工具朝着目标运行循环的模型才是智能体。

2026 年设计师的智能体工具包

你不需要从零开始构建智能体。2026 年 4 月，对设计师有用的智能体工具如下。

Claude Code。 住在你的终端或 VS Code 里。读取你整个代码库，调用文件，运行命令，与 MCP 服务器通信。最适合任何涉及代码、token 或设计系统仓库的工作。

Claude Desktop 和带 MCP 的 ChatGPT。 两者现在都支持 MCP 连接。你可以把它们连接到 Figma、Google Drive、Notion、Linear 和你的文件系统。比起编码，更适合研究、简报、规格编写和内容工作。

Cursor 智能体模式。 用于在 React、Vue 或 Svelte 中构建的编辑器原生智能体。在功能上接近 Claude Code，但用的是可视化界面而不是终端。

Figma MCP。 它本身不是智能体，而是工具连接器。它把 Figma 变成智能体可以读取的数据源。接入一次，每个支持 MCP 的智能体就都能看到你的设计稿了。设置方法在 Figma MCP：将 Figma 连接到 Claude Code 和 AI 智能体 中有介绍。

n8n、Zapier 智能体和自定义脚本。 如果你想要一个按计划运行或对 webhook 做出响应的智能体（新 Figma 评论、新 Google 表单提交、共享收件箱里的新邮件），这些是托管平台。设计师用它们来做"胶水"智能体，就是那些在你睡觉时在后台运行的。

对大多数设计师来说，正确的入门技术栈是 Claude Code 加 Figma MCP 加一个 Google Drive 或 Notion 的连接。这足以覆盖 90% 的智能体设计工作。

如何设计一个智能体（它仍然是一份简报）

设计智能体不是编码任务，而是简报任务。就是你每次把工作交给自由职业者或初级员工时做的那种事。

在构建任何东西之前，按顺序回答四个问题。

1. 目标是什么？ 一句话。"从客户发现通话记录中产出一份情绪板和一份简短的创意简报。"
2. 智能体需要哪些工具？ 列出来。"读取 Google Doc，搜索网络，抓取图片，写入 Figma 文件，保存到 Google Drive 文件夹。"
3. 哪些规则约束它？ "只从编辑类来源获取图片，不用图库图片。永远不要捏造品牌。引用每一个来源。简报始终使用我们的内部格式。"
4. 何时停止？ "当 Figma 文件有一个至少包含 12 个参考资料的情绪板框架，且简报以 PDF 格式保存在共享云盘中时。"

没有目标，智能体会漂移。没有工具，它会用错误的工具临时发挥。没有规则，它会交给你训练数据的平均值，那通常是图库照片和 AI 垃圾内容。没有停止条件，它要么无限循环，要么过早停止。

这和 面向设计师的提示工程 中涵盖的五部分提示框架形状相同，只是扩展到了多步工作。

配方 1：研究到情绪板智能体

每个设计工作室都应该构建的第一个智能体。它接收一份客户发现通话记录，输出第一版情绪板和一份简短的创意简报。

目标。 从一份发现通话记录出发，在 Figma 中产出一份情绪板，并在 Google Drive 中生成一份创意简报。

所需工具。 Google Drive MCP（读取记录、写简报），网络搜索，图片抓取，Figma MCP（写入情绪板框架）。

系统提示框架。 这是你在会话开始时给智能体的一次性指令。

You are a senior brand strategist at Brainy, a design studio with 2M+
community followers. Your job: turn a discovery call transcript into
a first-pass creative direction.

Goal:
- Read the transcript at the Google Drive URL I give you.
- Extract: client name, industry, audience, brand adjectives (3-5),
  competitors mentioned, any visual references they named.
- Produce two deliverables:
  1. A creative brief, saved as a Google Doc in /Brainy/Briefs/
     using our template at /Brainy/Templates/brief.docx.
  2. A Figma moodboard in the file I specify, populated with at
     least 12 editorial image references (no stock photography).

Rules:
- Use only editorial sources: Are.na, It's Nice That, Brand New,
  museum archives, design studio portfolios. Never Shutterstock,
  Getty, or Unsplash generic.
- Every image needs a source URL captioned on the Figma frame.
- Voice for the brief: Brainy house voice. Opinionated on craft,
  neutral on facts. No corporate filler.
- If the transcript is unclear on an adjective, flag it as "needs
  confirmation" in the brief instead of inventing one.

Stop when:
- Brief is saved, moodboard has 12+ captioned references, and you
  have posted the two URLs back to me.

这就是一份可用的智能体简报。把它粘贴到连接了 Drive 和 Figma 的 MCP 的 Claude Desktop 中，指向一份记录，然后审查输出结果。

你要审查什么。 形容词对吗？参考资料有品牌感吗，还是漂向了显而易见的东西？它真的给每张图片加了来源注释吗？简报用的是内部腔调，还是又退回到了 LinkedIn 英语？

迭代。 第一次运行会很粗糙。用智能体遗漏的内容更新系统提示，再运行一次。三四轮之后，智能体交付的简报你可以直接转给面向客户的策略师，无需重写。

配方 2：规格到交付智能体

这个智能体填补了"设计已审批"和"开发有了所需的一切"之间的空缺。它读取 Figma 文件，写出工程交接文档。

目标。 给定一个 Figma 文件 URL，产出一份包含组件清单、token 列表、间距值和待解决问题的开发者交接文档。

所需工具。 Figma MCP，一个写输出的地方（Notion、GitHub issue、Google Doc，你选）。

系统提示框架。

You are a senior design systems engineer acting as the bridge
between a design team and a front-end team.

Goal:
- Read the Figma file at the URL I give you.
- Produce a handoff document containing:
  1. Component inventory: every component instance used, counted,
     with Figma component name and closest existing code component
     name from our /components/ directory.
  2. Token usage: every color, spacing, and typography variable
     referenced, compared against /design/tokens.css.
  3. Layout specs: breakpoints used, any auto-layout frames that
     might be ambiguous at edge cases.
  4. Open questions: a bulleted list of anything in the Figma file
     that cannot be resolved from the file alone (missing states,
     unclear interactions, content placeholders).
- Write the output as a Notion page in /Engineering/Handoffs/.

Rules:
- Never invent a component. If a Figma element does not map to an
  existing code component, list it under "new components required"
  with a one-line description.
- Flag every free-form (non auto-layout) frame as a risk.
- Include the Figma node ID for every item so devs can jump to it.
- Do not assume interactions that are not explicitly in the file.

Stop when:
- Notion page is written and you have posted the URL back to me.

为什么这个配方重要。 "设计师以为已经交接了，开发从没找到 token"这个问题是经典老病。这个智能体在每个功能大约九十秒内就能解决它。

它在哪里失效。 在一团糟的 Figma 文件上。非自动布局框架，不一致的变量使用，随机的一次性组件。智能体会把这些乱象暴露出来，这要么是一份礼物（你现在知道了），要么是个麻烦（你现在要去修它了）。

配方 3：设计 QA 智能体

这个智能体在部署后运行，告诉你什么地方出了问题。

目标。 将已部署的预发布 URL 与 Figma 记录文件进行对比，报告视觉偏差。

所需工具。 Figma MCP，Playwright（用于截取预发布页面的截图），图像对比（Claude 可以在其视觉模式下原生对比图像）。

系统提示框架。

You are a senior product designer doing a pre-release visual QA pass.

Goal:
- Visit the staging URL I give you at three breakpoints: 1440px,
  768px, 375px.
- For each breakpoint, take a full-page screenshot using Playwright.
- Compare each screenshot to the corresponding Figma frame at the
  URL I provide.
- Produce a QA report listing every visual difference, categorized:
  - BLOCKING: wrong components, wrong colors, broken layouts
  - NON-BLOCKING: spacing off by less than 4px, minor type weight
    mismatches, image crops slightly different
  - INFORMATIONAL: intentional differences between design and code
    worth noting

Rules:
- Do not flag differences that are within 2px of intended spacing
  unless they visibly break alignment.
- Include a screenshot-with-annotation for every BLOCKING item.
- Link every item back to the Figma node ID.
- Output as a Markdown file in /qa/reports/ with timestamp.

Stop when:
- Report is saved and you have posted the path back to me.

为什么这个配方重要。 大多数团队手动做设计 QA，或者根本不做。QA 智能体在每次预发布部署时运行，捕捉第三个页面上眼睛会错过的 80% 的偏差。

设计师如何使用它。 把它接入 CI，让它在预发布部署时自动运行。或者保持手动，在上线任何可见内容之前运行它。无论哪种方式，你都不再是"这个东西发布对了吗"的瓶颈。

智能体目前还不能做什么

对自己诚实。以下是智能体在 2026 年 4 月的失效之处。

品味决策。 智能体会给你交出一份还过得去的情绪板。它无法告诉你这份情绪板情感上是平的，或者品牌应该在克制上走得更远。那还是你的活儿。

模糊的目标。 "让网站更好"不是一个目标。智能体会无限循环或产出通用输出。如果你无法用一句话加一个明确的停止条件来陈述目标，智能体就没有机会。

原创策略。 智能体非常擅长执行你定义的策略，但在从空白页发明策略方面很差。定位、品牌架构、从第一原理出发的产品决策，仍然是人类的工作。

长期判断。 智能体可以告诉你"这个 Button 变体没有被使用"。它无法告诉你"我们即将上线一个定价页面，需要第四个 Button 变体，所以别删它"。智能体看到的是快照，不是路线图。

任何需要赢得客户或合作伙伴信任的事。 面向客户的策略师、给自由职业者反馈的艺术总监、提案想法的创意总监。智能体辅助这些人，不替代他们。

规律就是：智能体负责执行，人类负责品味、策略和信任。

如何像智能体设计师一样思考，而不是智能体用户

使用智能体和设计智能体之间有区别。大多数设计师最终会两件事都做。

使用智能体是提示工作。写简报，审查输出，迭代。

设计智能体是系统工作。你在定义目标、挑选工具、编写约束、设定停止条件，并构建一个反馈循环让智能体随时间变得更好。这更接近管理一支小团队，而不是写一条提示词。

三个习惯把设计出好智能体的人与和破损智能体搏斗的人区分开来。

第一，他们在打开工具之前先写好简报。 在目标、工具、规则和停止条件都写在纸上之前，不开始打字。这能省下一个小时的盲目摸索。

第二，他们像对待代码一样对系统提示做版本控制。 把它存在一个文件里，有条件的话提交到 git。每次智能体以新的方式失败，就加一条规则。提示词会随时间变得更聪明，而不是更嘈杂。

第三，他们审查前十次运行的每一次输出。 默认不信任。每一个输出都被阅读、评分，并用来更新提示词。十次运行后，智能体足够可靠，可以在后台运行。十次之前，它还不行。

如果你想要更多 AI 工作流拆解，浏览 Brainy Papers 的其余内容。如果你想要把智能体工作流接入你的团队，却不想自己摸索前三个月，雇用 Brainy，我们会交付整套技术栈。

设计师的智能体入门计划

一周、一个智能体、一个可运行的循环。

• 挑一个你反复在做的工作流。不是想象中的工作流，是你这个月真正做过的那种。
• 把一句话目标、工具列表、规则和停止条件写在纸上。
• 设置 Claude Code 或 Claude Desktop，接入一个 MCP 连接（Figma、Drive 或文件系统）。
• 把简报作为系统提示粘贴进去，用真实输入运行智能体。
• 批判性地阅读输出，对照你自己会交付的东西评分。
• 用失败的地方更新提示词，再运行一次。
• 重复三到五次，记录每次运行与自己做的时间对比。
• 保存最终的系统提示，这就是你的第一个生产级智能体。

做一次，第二个智能体花一半时间。第四个花一个下午。第八个在你睡觉的时候按计划运行。

常见问题

构建 AI 智能体需要会编程吗？

不需要。上面每个配方都通过系统提示加 MCP 连接来配置，两者都是在 UI 或一条命令里设置的。你在写简报、连接工具，不在写生产代码。如果你会配置 Zapier，你就能配置智能体。

Claude Code 和 Claude 智能体有什么区别？

Claude Code 是一个特定的智能体，住在你的终端里，专为处理代码库而构建。"Claude 智能体"是任何由 Claude 模型驱动的智能体，可以是 Claude Code、带工具的 Claude Desktop、通过 Anthropic API 构建的自定义智能体，或者在底层使用 Claude 的 ChatGPT 式智能体。Claude Code 是 2026 年设计师与开发者协作工作的旗舰智能体。

运行一个智能体要花多少钱？

对于个人设计师，Claude Max 订阅或 ChatGPT Plus 订阅分别涵盖了 Claude Code 和智能体模式。费用在每月低几百美元的区间，包含你需要的大多数工具。对于团队，API 使用量随智能体运行量扩展，重度使用的预算从每位设计师每月 50 到 200 美元起。与它节省的时间相比，便宜。

你现在在管理一支小团队

你以前是一个设计师。你接收简报，然后产出作品。那仍然是工作的一部分。

现在有了第二个部分。你在给一支小型智能体团队写简报，它们在你做第一部分的时候产出作品。你审查它们的输出，在它们偏离时纠正它们，淘汰那些不划算的智能体，晋升那些表现好的。

最先理解这一转变的设计师将会主导这个十年。不是因为智能体在取代设计师，而是因为运用智能体的设计师正在取代那些不这么做的设计师。

挑一个工作流，写好简报，交付第一个智能体，审查输出。周一再做一次。