文章来源｜OpenViking 团队
项目地址｜github.com/volcengine/OpenViking
原型十分钟就能点了，设计师看一眼：「这不是我们的产品」。这个问题不在模型，而是 Agent 从来没见过你产品的设计稿。
用 AI 做过原型的产品经理，大概都经历过这几件事：
-
AI 做出来的界面都长一个样：紫色渐变、大圆角卡片、满屏 ✨。你的原型多半也是这个味儿，跟你们自己的设计规范没什么关系，侧边栏是 Agent 编的，颜色是它挑的，弹窗是它想象的。
-
评审会上一大半时间在聊颜色、间距、按钮放哪，需求本身没讲几句。
-
原型过了，设计还得在 Figma 里从头画一遍。你做的原型，最后只是一份「参考」。
-
PRD 里的草图跟线上页面对不上，研发来问：「这个按钮到底加在现在哪个页面上？」
左边是 Figma 定稿，右边是 Agent 没看设计稿时画出来的样子
AI 画得再快，画出来的东西进不了产品，就是在给设计师加活。
我是 OpenViking 的产品经理，这几件事我每周都在经历。后来我决定把 360 张产品的设计稿放进了 OpenViking，原型和 PRD 草图从此直接对齐设计规范，设计拿过去就能用。
下面让我们聊聊到底是怎么做的~
🚀 想直接上手：火山引擎 OpenViking，开通后创建一个个人版库就能跟着做。
你可能已经试过的两个办法
-
每次贴截图。 管用，但只管这一次。截图要你自己找、自己挑，换个会话、换个工具又得重贴一遍。哪天贴错一张旧版截图，Agent 就照着旧版画。
-
给 Figma 链接。 Figma MCP 能读你指定的画板，前提是你已经知道是哪一个。控制台几百个画板，「找图」这件事还是落在你身上。
Agent 能看懂图，这早就不是问题。缺的是它自己知道去哪找、该参考哪一张。
一个产品，360 张设计稿，进一个目录
设计团队先把历史定稿的设计放在 Figma 里。 我的 Agent 把每个画板按 2 倍图导出，一个 Figma 页面一个子文件夹，放进 OpenViking。文件名统一是「序号_画了什么_Figma节点ID.png」，Agent 参考了哪张，设计师查看节点 ID 就能回到 Figma 核对。 传进去之后，OpenViking 会把每张图看一遍，给每一层都写好说明：
-
L0 一句话摘要：这个文件夹装的是什么。
-
L1 导读：像一本书的目录，写清楚每组图画的是什么、想看什么该打开哪张。
-
每张图一段描述：标题、文案、按钮、布局。
OpenViking 给「添加成员」文件夹自动写的说明（原文摘录） 这些说明不用任何人手写。 这也是 OpenViking 和网盘、图库不一样的地方：一堆截图传进去，变成了 Agent 能看懂、能顺着目录找的设计资料库。
Agent 像翻目录一样找图
拿一个产品经理常遇到的需求举例：团队版要支持「批量邀请成员」。我跟 Agent 说：「参考我们的设计稿，画一个批量邀请成员的弹窗。」 Agent 不会把 360 张图一张张打开，而是顺着 OpenViking 写好的目录往下找：
-
总目录说：团队版管理员的界面在 08 文件夹
-
08 的导读说：「添加成员」在 05
-
05 的导读把邀请弹窗、邮箱报错、重复标红、邀请进度、发送成功这些状态分别在哪张图都列清楚了。
一层层往下找，最后只打开要用的两张（邮箱为示例数据） Agent 只打开要用的那几张，照着画。邮箱重复怎么提示、批量发送时进度怎么显示，这些容易漏掉的状态也照着设计稿画出来了。不用你找图，也不用你贴图。
一条规则，所有 Agent 都照做
能搜到，还得 Agent 记得去搜。我在 OpenViking 记忆里存了一条规则：
画任何界面、草图、原型之前，先查
ui-design目录和 README。新旧截图不一致时，以最新的为准。
规则存在 OpenViking 里，不在某个工具自己的配置文件里。Claude Code、Codex、TRAE 接上 OpenViking，读到的都是同一条，我没再重复说过。
那几件事，现在是这样
| 以前 | 现在 |
|---|---|
| 设计师：「这不是我们的产品。」 | 原型用的是定稿的布局、颜色和组件 |
| 评审一大半时间在聊样式 | 样式已经对齐，直接聊流程 |
| 原型过了，设计从头重画 | 18 屏原型 1:1 转进 Figma，组件化后扩到 108 屏、约 290 个点击跳转，没人重画 |
| PRD 草图对不上线上页面 | 草图是真实控制台的整页截图，红框标出改动 |
| 每次贴截图，还可能贴到旧版 | 设计改了就重传那个子文件夹，Figma 里删掉的画板库里也会删掉 |
原型转进 Figma 之后：108 屏，按流程分区
PRD 里的一张需求草图：真实页面，红框标出新增的两处
自己试一下
-
开通 火山引擎 OpenViking，创建一个个人版库，配好模型凭证。
-
按 figma-to-openviking 安装说明，给你用的 Agent 装好 skill。
-
把 Figma 链接发给 Agent：「把这些设计稿导入 OpenViking」。它会先列出页面、问你存到哪个目录，再用 2 张画板试跑并估算 token，你确认后才全部导入。
-
让它把「画界面前先查设计目录」记下来。然后让它画个原型，拿给设计师看。
🚀 上手试用 ：volcengine.com/product/ope...
🌟 Star GitHub ：github.com/volcengine/...