---
title: Ultimate Design：给 Coding Agent 加一道设计流程
date: 2026-07-04
summary: 我把需求、内容、设计合同和浏览器检查串成了一套工作流。
image: /assets/ultimate-design-ontology-preview.png
---

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

我把自己反复补的步骤写成了 [Ultimate Design](https://github.com/aa2246740/ultimate-design)。它先读用户的内容和现有代码，再生成一份设计合同；页面完成后，还要过一轮评审和真实浏览器检查。

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

## 五个步骤

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

## 一个实际例子

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

[打开教学页](/works/ultimate-design-ontology-case/) · [看制作过程](/works/ultimate-design-ontology-case/case-study.html)

## 最简单的用法

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

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