Ultimate Design：给 Coding Agent 加一道设计流程

2026 年 7 月 4 日

Coding Agent 做页面时，很容易从 HTML 开始。颜色、卡片和动效都有了，最重要的问题却没回答：这页给谁看，先看什么，哪些事实不能丢。

我把自己反复补的步骤写成了 Ultimate Design。它先读用户的内容和现有代码，再生成一份设计合同；页面完成后，还要过一轮评审和真实浏览器检查。

先把要说什么定下来，再决定页面长什么样。

五个步骤

1. 固定需求：记录原始诉求、最新约束、成功标准和不能改掉的事实。
2. 整理内容：先排清信息顺序、术语和语气，再进入视觉设计。
3. 写 DESIGN.md：把颜色、字体、布局、组件和检查项写成可以继续用的文档。
4. 做完再挑错：检查需求有没有跑偏、层级、空话、移动端和没用的装饰。
5. 打开浏览器看：桌面和手机都截图，确认没有重叠、裁切和奇怪换行。

一个实际例子

输入是一份 1228 行的 Ontology 调研。我把它拆成九章，用卖衣服系统解释对象、Action、权限、审计和 AI 工具门，再做成中英文教学页。

打开教学页 · 看制作过程

最简单的用法

目标、读者、素材和边界说清楚就够了。剩下的合同、页面和检查交给流程。

用 ultimate-design 把这份调研做成一个公开教学页。
读者是 AI 产品和工程团队。
保留中英文切换；不要写成供应商宣传；最后检查桌面和移动端。