UI 设计师是如何使用 agent 提效的？
发布时间：2026-09-30
预计阅读时间：15分钟
字数共计：3072
秉持着提升工作效率的目的，最近我一直在研究使用 agent 生成设计稿。虽然结果不甚理想，但也确实可以省去部分工作。以下是我个人实践中的一些心理路程，希望能为大家提供参考。
一、搭建页面框架
说起提升效率，我首先想到的是：虽然 agent 生成的视觉效果未必靠谱，但若能利用组件库搭建起页面框架，我在此基础上再进行调整也算是省下了不少事。于是我进行了第一次尝试，虽然 figma agent 可以指定组件库生成设计稿，但最终的效果还是差强人意：组件用法错误、更擅自更改组件名称、分离组件、未使用文本样式和变量…… 各种问题层出不穷。我本想着在网上找找相关 skill 来约束下生成结果，但遗憾的是没有找到合适的方案，于是只能自己动手，丰衣足食。
有了 agent 的加持，编写 skill 其实并不困难。只要将整理好的诉求丢给它，便能得到一份还不错的初稿。接下来需要不断优化和测试，关于优化需要注意流程是否合理、内容是否简练、表达是否自然，关于测试则需要关注模型版本、上下文及agent 能力边界。经过一系列调整，agent 终于能够严格按照组件库搭建设计稿。
解决组件库的问题后，我又想到两个可以提升效率的方向：文本翻译和页面命名。因为我们做的是海外项目，设计稿需要使用英文文本。过去的工作方式是一边搭建页面框架，一边进行翻译；现在可以将翻译流程加入 skill，让 agent 直接输出英文稿。至于页面命名，过去需要手动复制交互页面名称，再逐一粘贴；现在也可以将这步写入 skill，让 agent 一并完成。
最后，我还希望 agent 生成的设计稿能够更加符合个人习惯，因此对设计稿尺寸、图层结构与命名、自动布局的使用方式等进行了约束。最终结果是：论视觉表现，我依旧认为它不够靠谱，甚至低于及格线；但如果只是用于搭建页面框架，效果已经足够实用，也确实可以省下不少工作。
二、生成图标
页面搭建好后，我又想到图标是不是也可以交由 agent 生成呢？毕竟工作中仍然有不少图标需要手动绘制。尝试后发现，Figma Agent 并不支持矢量路径编辑；第三方 agent 虽然可以绘制，但审美能力有限，结果也不太实用。
后来我想到了自己绘制图标的流程： 搜索参考 - 二次创意 - 按规范绘制。 如果我可以提供一些图标库，让 agent 帮我检索，然后将命中的 SVG 以项目规范写入 figma，那么我只需要进行二次创意并调整就行了。于是，我按照自己的想法向 agent 提供了图标库和具体要求，并让它协助编写 skill。后续效果比较理想：我只需要告诉 agent 生成什么图标，以及采用线性还是面性风格，它就会按照要求在 Figma 中写入一系列图标，我只需从中挑选合适的进行调整即可。
当然，这个流程仍然存在一些限制和不足，主要集中在图标库方面。目前，绝大部分图标库只提供线性和面性图标，因此可以满足日常功能图标的需求，但复杂的个性化图标仍然需要自行绘制。另外，图标库中的 SVG 都已经转曲，写入后无法直接调整圆角；如果需要修改圆角，就必须对相关部位进行重绘。使用 skill 时，也可以尽量提供多个图标库用于检索，因为并不是每个图标库都能命中目标，多提供几个库可以获得更多选择。
三、绘制页面流程
设计完成后，我觉得很没有营养的一项工作就是绘制页面流程：需要按照交互稿的流程，将 UI 稿串连起来。 对于不同团队，这件事未必是必需的，但我们团队有着明确要求，而且每次都要花费二三十分钟。我就想着 agent 能不能帮我把这件事也干了。
起初，我以为这是一项比较复杂的工作，并不确定 agent 能否完成，于是先进行了能力测试。我向 agent 描述需求并询问它是否能够执行，没想到它给出了肯定的答复。随后，我迅速将设计稿交给它进行验证。基础效果还不错，但细节问题较多，其中最突出的是连线方式。很多时候，agent 给出的并不是最优连线：一条折线就能完成的事，它往往会折线两到三次，导致画板上出现密密麻麻的连线。
解决这个问题，需要针对不同情况制定具体规则。可是，如何准确描述这些情况又是一大难点，毕竟很多视觉上的问题很难用语言说清。最后，我采用了这样的方式：先截图，再在截图上标出理想的连线方式，然后将截图交给 agent，让它对问题进行分类和总结，最后整理出相应的连线规则。
之后，我又将整个流程整理成 skill。最终效果也比较满意，虽然偶有犯错，但通常只需要进行少量调整即可。
四、设计需求
经过以上尝试，我觉得是时候给 agent 上上强度了，我想试试它到底能不能完成整个需求的设计。需求设计相对复杂，我的计划是先梳理流程，再进行能力测试，然后将流程转化为 agent 可以执行的任务，最后输出 skill。
1. 整理流程
整理流程其实没有过多值得探讨的地方，毕竟牛马对于自己的工作流程肯定是比较熟悉的，只要完整描述即可。面对一般需求，我的工作流程是：了解需求内容 - 理解交互原型 - 填写设计看板 - 完成 UI 设计 - 交付。
2. 进行能力测试
完成流程整理后，有些具体任务我并不确定 agent 能否顺利完成，所以需要先进行下能力测试，我比较关注的几个点是：
生成多页设计稿：在之前的尝试中我一直都是生成单页设计稿，而面对实际需求动辄就是十几、二十页，我不知道 agent 是否还能严格按照组件库搭建页面，因此进行了测试。结果还算满意，虽然偶尔会出错，但整体效果可用。
获取需求信息：在开始设计前，我需要将需求名称、产品经理、设计时间等信息填入设计看板。单纯填写信息对 agent 来说当然不难，但它能否主动获取这些信息，我并不确定。于是，我将需求链接发送给 agent，让它从中提取需求信息。大部分信息都可以顺利获取，唯一的问题是它无法区分负责人的岗位，不知道谁是产品经理、谁是设计师。最后只能提前在需求链接中做好备注。
获取历史稿：日常需求中，有很大一部分属于设计迭代，需要找到历史稿并在其基础上继续设计。如何让 agent 找到对应的历史稿，是一个问题。我的思路是根据页面名称和字段遍历整个设计资产，找到匹配项后，再与交互稿进行对比，确认模块相似的页面就是历史稿。但还有一个问题：同一个页面可能出现在不同资产中，如何获取最新版本？这时，设计看板上的设计时间就能发挥作用。可以让 agent 对比各个资产的设计时间，选取最新资产中的历史稿。最终测试结果也比较满意，agent 能够顺利找到对应的历史稿。
3. 转化任务
接下来是将流程转化为 agent 可以执行的任务。之所以进行这一步，是因为设计师实际的工作流程未必适合 agent。例如，“理解交互原型”对设计师来说很容易理解需要做哪些事，但对于 agent 就未必了。因此，需要把它转化为具体任务，例如将“理解交互原型”改写为“读取设计备注并整理设计任务”。只有明确、具体的任务，agent 才能更有效地执行。
除此之外，任务顺序也需要根据关联性进行调整，否则会影响执行效果。例如，我的实际工作流程是先理解交互原型，再填写看板信息，最后完成 UI 设计。“理解交互原型”和“完成 UI 设计”是强关联项，但为了操作方便，我通常会先填写看板信息，再完成 UI 设计。如果 agent 也按照这个顺序执行，中间的“填写看板信息”可能会对上下文造成不必要的干扰，导致结果出现偏差。因此，任务顺序应该调整为：先填写看板信息，再理解交互原型，最后完成 UI 设计。
调整后的任务流程：获取看板信息 - 创建 Section 和需求看板 - 整理页面清单 - 读取设计备注并整理设计任务 - 完成 UI 设计 - 交付
4. 输出 skill
由于“设计需求”属于复杂任务，skill 没有采用单文件结构。单文件结构会使内容冗长、复杂，也不利于执行和管理。本次采用多文件模块化结构：主 skill 负责流程导航，references 中的文件负责具体细则。这样可以让整个流程更加清晰、直接、有效。
五、几点总结与感悟
复盘是指在完成一项任务后，通过结构化的回顾和反思，总结经验和教训的过程。它可以帮助我们避免类似错误，沉淀成功经验，提升团队协同，最重要的是促进个人能力成长。
以上 skill 仅是笔者根据自身工作流程总结而来，并不具备通用性，大家作为思路参考即可。
agent 的绘制能力有限，更适合处理偏向组件搭建和文字排版的 B 端项目；对于追求个性化表达和视觉绘制的 C 端项目，则不太适用。
agent 的执行效果与模型版本密切相关。执行复杂任务时，最好选择能力更强的模型。笔者在上述尝试中使用的是 GPT-5.6 Sol（高）及以上版本。
agent 确实能在很多方面提升效率，也可以在同一时间完成不同工作。但频繁切换工作内容，会让人难以进入心流，工作的乐趣少了很多。