Founder Notes · 2025

如果 HTML 是 agent 给人看的最佳格式,那设计稿呢?

一个 Open Design 创始人对 Thariq《The Unreasonable Effectiveness of HTML》的回应。

Joey · Building Open Design @ Nexu Labs · 中文

最近 Anthropic Claude Code 团队的 Thariq 写了一篇推文,叫《Using Claude Code: The Unreasonable Effectiveness of HTML》。核心观点很简单:别让 agent 再用 markdown 输出了,改用 HTML。

他给了几个理由:信息密度高(能放 SVG、表格、可交互组件)、超过 100 行也读得下去、可以直接发链接分享、还能让 Claude 顺手做一次性的小工具——拖拽排优先级、表单编辑配置、prompt side-by-side 调参。代价是 token 多 2-4 倍、生成慢 2-4 倍、diff 难审,但 Opus 4.7 的 1M context 撑得住。

我读完反应是:这是一篇迟到了至少一年的文章。

不是说他写晚了,而是说整个行业看着 markdown 滞涨这件事看了太久。markdown 一开始之所以成为 agent 的默认输出格式,不是因为它最适合「agent 给人看」,是因为它最适合「agent 给自己看」——纯文本、可 diff、token 便宜、在 transcript 里好对齐。这是一个 agent-side 的优化结果,被默认套用到了 human-facing output 上。

而 Thariq 文章里那一句最值钱:

"Claude Design is based on HTML."

这句话不是修辞,是态度。Anthropic 自己做 design 工具的时候选择了 HTML 作为 underlying medium,理由不是「HTML 最像设计稿」——它显然不是——而是 HTML 是当下唯一一种 agent 能高保真生成、且人类可以直接消费、又随时能翻译成任何下游格式(React / Swift / Figma / 视频脚本)的中间表达。

这件事如果只发生在 Claude 自家产品里,那它最多是一个 Anthropic 内部的工程选择。但如果它是一个普适规律呢?

那它就是 Open Design 的存在理由。

Open Design 在赌的事

我们做 Open Design 的判断很简单:设计这件事,正在从「人在 canvas 上拖元件」变成「agent 在生成可执行工件」。Figma 是前者的极致工具,但前者已经不是设计的全部。

新的设计工作流是这样的:

Agent-time design loop

HTML 不是终点,是中间表达。

为什么 HTML 适合扮演这个中间表达?因为它同时满足三件事:

agent 能可靠生成——LLM 看了一万亿行 HTML 训练数据
人类能直接看——浏览器原生渲染,不需要任何专用工具
可以自动化翻译到任何下游 surface——React、Vue、Swift UI、Compose、邮件模板、PDF、PPT、视频分镜、Figma JSON

中间表达

agent 能稳定生成

人类能直接消费

Markdown

✓ 完美

~ 100 行内还行

Figma 文件

✗ 几乎不可能

✓ 设计师能

React / Swift 源码

~ 能,但耦合具体技术栈

✗ 非工程师看不懂

HTML

✓ 训练数据极多

✓ 浏览器原生

Markdown 满足前两条,但缺一条:你试过把 markdown 翻译成 React 组件吗?信息根本不够。Figma 文件第三条做得很好(design tokens、auto layout 都是为翻译服务的),但第一条——agent 直接生成 Figma file——目前几乎不可能稳定做到。

HTML 是这三件事的当前最优交集。

那 Open Design 到底在做什么?

具体一点:

Open Design 是 agent-time 的设计协作平台。你不是在它里面「画」东西,你是在它里面指挥 agent 生成、迭代、对比、落地设计工件。

它的几个核心动作:

Generate——给一段需求 + 你的 design system reference,agent 生成一组 HTML 探索方案
Iterate——你点一个,告诉 agent 改哪里,它改;不满意可以平行开五条线对比
Critique——你可以让另一个 agent 当 reviewer,按你的 design rules 提意见
Translate——选定的 HTML 工件可以翻译成 React / SwiftUI / Compose 组件代码
Distribute——HTML 工件本身就是可直接分享的链接,不需要再走 export 流程

你会发现这套流程里,HTML 既是 agent 的工作介质,也是 人类的 review 介质,还是 跨工具的交换介质。Thariq 文章里讲他个人怎么用 HTML 做 spec / report / 一次性 editor,本质上是把一套「个人 workflow」做出来了;Open Design 在做的是把这套 workflow 变成一个 multiplayer 的、可以被设计/产品/工程共同使用的协作平台。

为什么是开源

这一点想说清楚:我们叫 Open Design 不是文字游戏。

如果「agent 时代的设计中间表达」会变成行业默认,那它不应该是任何一家闭源公司的私有协议。Figma 走过的路走一次就够了——好的协议应该被所有 agent / 所有 IDE / 所有设计工具共同消费。

所以 Open Design 的几个选择:

核心 spec 公开(plugin / skill / craft / pipeline 的 protocol 都在开源仓里)
插件 = SKILL.md + sidecar——你写一次插件,可以在 Claude Code、Cursor、Codex、Gemini CLI、OpenClaw、Hermes 里都跑;加上 sidecar 就解锁 Open Design 的 marketplace 表面
headless 优先——所有能在 UI 里做的事,都能用 od CLI 做;CI 流水线可以直接调用
self-host 友好——你不想用我们的云就自己部署

简而言之:Open Design 不在卖一个特定的 UI,它在定义一个 agent 时代的设计协作协议,并且给一个还不错的默认实现。

回到 Thariq 那篇

Thariq 写的是「我作为一个 Anthropic 员工,怎么用 Claude Code 个人 workflow」。这是一个非常具体、非常 down-to-earth 的视角。

我们做 Open Design 的视角刚好在他论点的下游:如果 HTML 真的是 agent → 人 communication 的最佳格式,那这件事不应该止步于 individual workflow,它应该有平台、有协议、有协作模型、有跨 agent 的互操作性。

这就是我们在做的事。

如果你也在思考「agent 时代设计是什么样」——欢迎来 github.com/nexu-io/open-design 看看,或者直接 reply 这条推。