夜雨聆风前不久，我发了一个设计师推荐安装的 Skills 文章：【AI辅助设计】终于等到真正有用的 AI Skills：不是提示词合集，而是一套审美操作系统。在测试过程中，还不是那么得心应手，主要是最终产出上，还没贴近真实的工作流。于是就想着自己手搓一个 Skills，当然是站在众多开源 Skills 之上。
这两天我把这个想做很久的东西跑通了：
不是一个普通的 Prompt，也不是“帮我画个好看的界面”这种一次性提示词，而是一套能让 Agent 按设计流程工作的 「Agent Design Skills」。
它的目标很直接：给它一个品牌、一个方向、一个大致需求，它不仅能生成 UI，还要能把 UI 落到代码里，生成需要的视觉资产，补齐设计文档，再做浏览器 QA。
我这次我用我的 AI 小工具品牌 「MyGif」 （mygifai.com）做测试。需求一开始很简单：为 MyGif 设计并落地一个手机 App。
最后跑出来的结果，不只是一个页面。
它包括：
一个可运行的手机 App 原型 一套按 B 方案还原的视觉语言 生成并切好的 UI assets 设计 tokens asset manifest Figma-ready handoff 甚至还顺手做了一版融资用的网页 PPT
黑底、酸橙色、头像 rail、倾斜海报、Creator Feed，这些都来自同一个设计方向。
❝由于跑一次的时间挺长，所以暂时就先跑一个页面进行验证😂。
❞
这个 Skills 想达成的目标
“一键生成 UI 界面”听起来很容易被误解。
如果只是生成一张好看的图，那现在已经不难了。
好看的图已经不稀缺了。
真正麻烦的是后面的事：
你生成了一张图，然后呢？
设计系统在哪里？按钮状态在哪里？移动端会不会溢出？图里的照片、贴纸、缩略图，哪些应该切成资产，哪些应该用代码重建？如果要交给前端，目录结构和组件拆分怎么处理？如果要给设计师，Figma 怎么交付？如果没有 Figma 工具，能不能至少给出可复建的 handoff？
这才是我做 Agent Design Skills 的原因。
我不想让 Agent 只停在“画一张概念图”。我希望它能像一个比较靠谱的设计生产助理：先理解需求，再探索方向，然后提取设计 DNA，生成资产，写代码，跑验证，最后留下可复用的设计资产。
换句话说，它要做的不是“画图”，而是把一个模糊的设计需求推进到一个可交付状态。
所以这里的“一键”，不是省掉设计判断。
它省掉的是大量机械的中间环节：「从设计方向到组件、从截图到资产、从视觉稿到可运行页面、从页面到 QA 记录。」
这次 MyGif 是怎么跑的
❝这个 Skills 目前只适配了 codex。
❞
一开始，我让 Agent 为 MyGif 做一个手机 App。 我录制了一个过程视频：
它先生成了三个方向：
A：偏干净、工具型的创作 App B：黑底酸橙色，更像一个有社交感的创作者工作室 C：更偏实验性的编辑器和时间线
我选了 B。
「选择和判断很关键。」
因为 Design Skills 不应该在方向还没确定时就开始写代码。它需要先有一个视觉目标，再开始落地。
后面我发现第一版还不够。它只是“理解了 B 方案”，但没有真正还原 B 方案。
这也是一个很真实的问题。
很多 AI UI 生成都会犯这个错：它看懂了风格，但没有保住结构。最后出来的东西像是“受某个参考启发”，而不是“沿着这个方向设计出来”。
于是我要求它继续按 Design Skills 流程做三件事：
还原 B 方案的设计 对不能用代码写的 UI 元素，走“提取 UI 元素 -> 生图 -> 切图”的资产流程 补 Figma 交付
这一步之后，结果才真正进入可交付状态。
桌面预览里保留了手机壳和设计说明，方便对外展示。真正的 App 页面仍然是移动端优先。
关键在于：哪些东西用代码，哪些东西必须变成资产
做 UI 生成时，一个很重要的判断是：不能把所有东西都用 CSS 假装出来。
按钮、排版、卡片、底部导航、状态栏、交互状态，这些应该用代码写。
但照片、头像、海报、贴纸、内容缩略图，这些是语义媒体。它们如果只用色块替代，页面会立刻变成“假 UI”。
所以我在这个 Skills 里加了一条很硬的流程：
只要参考图里出现了需要被用户“看”的媒体内容，就要进入 「UI asset generation loop」。
这次 MyGif 里被提取出来的资产包括：
主视觉海报： MAKE IT POP三张 Creator Feed 图片 五个 creator 头像
Agent 先生成这些图片，再把它们裁成 WebP，放进 public/assets/，然后写入 asset-manifest.json。
这张 contact sheet 是资产检查图。它说明页面里的图片不是 CSS 色块，而是真正生成、裁切、落盘的 UI assets。
这个 manifest 很重要。
它记录了每个元素的决策：
哪些是 code 哪些是 generate 哪些是 crop 哪些是 omit 每个资产的来源、用途、alt 文案和 QA 状态
这让 Agent 的设计过程有迹可循。
我不想要“凭感觉生成了一堆东西”。我希望每一步都能被追踪、复盘和修正。
Figma 这件事还没有完成
还有一个细节，我觉得值得单独说。因为我定义 Skills 时，是有说需要生成 Figma 文件的。
当时我问：没有生成 Figma 文件？
Agent 检查了一下当前环境，发现没有可直接创建 Figma 文件或 Figma 节点的 MCP 工具。
这时候有两种做法。
一种是糊弄一下，导出一张截图，说这是 Figma。
另一种是老老实实说：现在不能生成原生 .fig 文件，但可以产出 Figma-ready handoff。
我选第二种。
所以这个 Design Skills 里会明确区分三种东西：
原生可编辑 Figma Figma-ready handoff 纯截图或 PDF
不能把截图叫成可编辑 Figma。
在没有 Figma 工具的情况下，它会输出：
frame spec tokens component inventory asset manifest layer JSON handoff 文档
设计师拿到这些东西，可以比较快地在 Figma 里复建；开发也能知道代码和资产怎么对应。
这不是最完美的 Figma 自动化，但它比“拿一张图冒充设计文件”强得多。
❝对，不够完美，后续我打算专门开发一个 Figma 插件，用于连接转换为 Figma 文件。
❞
这个插件，目前测试基本还原了设计稿，但是还是有些不足。
后面又顺手做了一版产品介绍 PPT
当 App 页面完成后，我继续让它做几页融资用的 PPT，要求用网页输出。
这时候 Design Skills 继续沿用前面的品牌语言：黑底、酸橙色、强视觉冲击，但把布局尺度改成更适合投资人演示的 Web Deck。
最后生成了 10 页：
Cover Problem Solution Product Growth Loop Business Model Market Moat Roadmap Ask
风格是对齐了主 App 的视觉设计，结果还不错。
这套 Skills 的建设思路
我现在对 Agent Skills 的理解越来越明确：
它不是一段万能 Prompt。
它更像一个小型工作流系统。
Prompt 解决的是“这一轮怎么说”。Skills 解决的是“这个人长期怎么工作”。
所以 Agent Design Skills 里，我主要做了几件事。
它的基础原理其实不复杂：
把设计工作拆成一条 Agent 必须走完的生产线。
「第一层是输入约束」。它不能只接收一句“做漂亮一点”，而是要尽量明确品牌、用户、页面类型、参考方向和交付物。
「第二层是设计决策」。Agent 要先探索方向，提取设计 DNA，把颜色、字体、圆角、布局、组件状态这些东西写成 tokens 和 frame spec。
「第三层是生产分工」。按钮、导航、卡片这些结构化 UI 用代码实现；头像、海报、缩略图、贴纸这些需要被用户检查的视觉内容，则进入“提取 UI 元素 -> 生图 -> 切图 -> 落盘”的资产循环。
「第四层是交付闭环」。页面写完之后不是结束，还要 build、截图、做视觉 QA，把发现的问题回到代码或资产层继续修。
这张图是 Agent Design Skills 的基础架构：输入约束、Skills Orchestrator、设计系统、资产与代码分工、交付 QA，以及最后留下来的可追踪产物。
所以它不是把 Prompt 写得更长。
它更像是给 Agent 装上一个设计团队的工作习惯：什么阶段该判断，什么阶段该生成，什么东西必须变成资产，什么东西必须进入 QA。
把设计流程写成硬门槛
新设计不能直接写代码。
要先有方向探索、设计 DNA、frame spec、资产清单，再进入实现。
这可以避免 Agent 一上来就写一堆看似完整但方向漂移的页面。
把资产判断变成显性流程
UI 里所有视觉元素都要分类。
能用代码写的，用代码。
需要用户检查的媒体内容，生成或切成资产。
不需要的装饰，记录为什么省略。
这个过程会写进 manifest，而不是藏在对话里。
把 QA 放进交付标准
我不希望 Agent 说“做好了”就结束。
它需要跑 build，需要做设计审计，需要截图看桌面和移动端，还要检查有没有水平溢出、有没有遮挡、交互状态是否可用。
这次 MyGif 就经历了几次修正：
第一版太像灵感稿，不够还原 B 状态栏符号太硬，后来改成 5G 86%hash 路由不会自动切换，后来监听 hashchangedeck 页面需要重启 Vite 才正确加载，最后重新验证
这些都很小，但都是真实交付里会遇到的问题。
把设计资产保留下来
最终项目里会留下：
design/DESIGN.mddesign/tokens.jsondesign/frame-spec.mdpublic/assets/asset-manifest.jsondesign/component-inventory.jsondesign/traceability.jsonQA 截图
这让设计不是一次性输出，而是可以继续迭代。
怎么使用这个 Design Skills
实际使用非常简单。
你可以直接给 Agent 一个需求：
为 MyGif 品牌，设计、落地一个手机 app。[$agent-design](路径/agent-design/SKILL.md)如果你已经有参考图，可以继续补一句：
我觉得 B 方案合适。请继续还原 B 方案，并按 asset pipeline 生成 UI assets。如果你想要网页、App、融资 Deck，也可以直接说输出目标：
继续使用设计 Skills，帮我做几页产品介绍 PPT，使用网页输出即可。比较推荐的用法是：不要只说“做漂亮一点”。
更好的方式是给它四类信息：
品牌或产品名 目标用户 输出物类型 是否有参考方向
比如：
为一个面向年轻创作者的 GIF App 做移动端首页。品牌名 MyGif。参考方向是黑底、酸橙色、社交创作工作室。需要可运行网页原型，并保留设计文档和 assets。这样 Agent 更容易进入正确的生产流程。
它现在还不是终点
这套 Design Skills 现在已经能跑通很多事，但我不会说它已经完美。
接下来我还想继续测几类场景：
SaaS 官网 数据看板 电商活动页 小程序页面 品牌 landing page Figma 工具接入 更严格的移动端视觉 QA 更稳定的 asset slicing
等我把测试和文档再补一轮，会考虑开源。
我希望它不是一个“炫技用的 Prompt 包”，而是一个能被别人装进工作流里的设计 Skills。
如果你也在做 Agent、设计自动化、AI UI 生成，应该能感受到这个方向的价值。
真正重要的不是让 AI 画出一张好看的图。
真正重要的是：让 AI 按专业工作流交付。
这件事我会继续加快速度。
如果你觉得这个方向有意思，记得点赞、收藏、关注，也欢迎推荐给身边做产品、设计、前端和 Agent 的朋友。
后面开源的时候，我会第一时间发出来。
「更多 AI 前沿技术与设计灵感，欢迎推荐一下「设计小站」公众号（ID：sjxz 00），一起探索科技与设计的融合创新。」
