Claude Code 第一次在我的 Figma 文件里画东西时，我就想：这会给我带来太多机会了。事实也确实如此。如今 Figma 是我的智能体干活最多的地方：两个月里，它的 Figma 技能占了 528 次技能调用中的 480 次。关于我的整体配置，详见《Claude Code 不是用来写代码的》。
为什么用 Figma，而不是生成图片
因为我需要矢量。生成的图片只是一张扁平的画，而 Figma 文件是我可以继续加工的东西：
- 图层和真实文字。 我可以改错别字、换个数字或翻译一张幻灯片，什么都不用重画。
- 我的设计系统。 颜色、字体和组件都来自我的设计令牌，所以每件新作品都和旧的保持一致。
- 印刷和网页同出一源。 同样的画框既能导出为展台的印刷文件，也能导出为网站用的 SVG。
- 我自己随时能动手。 我可以打开文件，亲自修改任何地方。
我的 Figma 里有什么
- 我的 Notion 模板店。 它的设计系统有 55 个变量、13 种文字样式和 6 个组件集，还有博客第一批 28 篇文章的封面和图表，每张都有手机版。
- 三种语言的公司演示文稿。 一份关于集装箱数据中心的演示文稿有 15 张幻灯片，英文、俄文和土耳其文三个版本保持同步。
- 展台和印刷品。 展台面板、横幅、三折页小册子、代金券和证书，都已导出为印刷文件。
- 这个网站。 zoyak.tech 首页的各栏目图标，最初就是在 Figma 里做的。
模板店是我最引以为傲的作品。它不仅设计出色，内容也很扎实，我打算把其中的内容用到我自己的学习研究里。
工作循环：智能体起草，我来修改，网站用我的版本
智能体从不把设计直接发布到网站上。它在我的文件里画，我来看、亲手修改，然后才导出结果。
首页图标就是个好例子。智能体并排画了好几个方向，我选了一个，再亲自打磨细节，连 Studies 那本书上的书页块都调细了。网站上的 SVG 是从我修改过的画框导出的，所以我亲手做的每处改动，都原封不动地上线了。
智能体必须学会的 Figma 知识
通过 Figma API 工作，和在 Figma 里手动操作不是一回事。我的智能体记忆里，如今光是关于 Figma 的笔记就有 17 条。举几条经验：
- 文字宽度必须实测。 不能靠字母数量来猜。
- 画框会裁切内容。 一个“明明在那儿”的元素，也可能看不见。
- 不透明度存在于两个地方。 填充不透明度和图层不透明度是两回事。
- 节点 ID 会失效。 昨天还能用的引用，今天可能什么都指不到。
- Logo 无法通过 API 在文件之间迁移，所以要重建，或者手动复制。
- SVG 导出有些怪癖，所以上线前要先检查导出结果。
- 动画无法通过 API 制作。
我的设计工作规则
对于任何视觉内容，智能体还遵循我给它定的规则：
- 先在 Figma 里给我看，而不是直接放到线上网站。
- 用正规的图标库，绝不用 emoji，凡是要发布的东西都如此。
- 主题是某个具体工具时，就用它的真实 Logo，按我的风格重绘，而不是用比喻。
- 信息图要保持轻盈通透： 浅色背景、柔和渐变、一个强调色。
为什么这很重要
矢量意味着作品始终属于我。智能体几分钟就能帮我做出第一版，之后的一切仍然可以编辑，它能改，我也能改。对一个习惯视觉思考、却从没有设计团队随叫随到的人来说，这就是我第一天就看到的机会。