open-design-html-essay/index.html at main · joeylee12629-star/open-design-html-essay · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>如果 HTML 是 agent 给人看的最佳格式,那设计稿呢? — Open Design</title>
<meta name="description" content="一个 Open Design 创始人对 Thariq《Using Claude Code: The Unreasonable Effectiveness of HTML》的回应。" />
<meta property="og:title" content="如果 HTML 是 agent 给人看的最佳格式,那设计稿呢?" />
<meta property="og:description" content="HTML 是 agent 时代的中间表达。这就是 Open Design 在做的事。" />
<style>
  :root {
    --bg: #0e0e10;
    --surface: #16161a;
    --surface-2: #1d1d22;
    --ink: #ededf1;
    --ink-dim: #b6b6c0;
    --ink-faint: #7a7a85;
    --accent: #ff7a3b;
    --accent-soft: #ff7a3b22;
    --line: #2a2a30;
    --quote-bg: #1a1a1f;
    --code-bg: #15151a;
    --max: 720px;
  }
  @media (prefers-color-scheme: light) {
    :root {
      --bg: #fafaf7;
      --surface: #ffffff;
      --surface-2: #f3f3ee;
      --ink: #16161a;
      --ink-dim: #4a4a55;
      --ink-faint: #8a8a95;
      --accent: #d44a14;
      --accent-soft: #d44a1418;
      --line: #e6e6e0;
      --quote-bg: #f3f3ee;
      --code-bg: #f3f3ee;
    }
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Segoe UI", "Noto Sans CJK SC", sans-serif;
    font-size: 17px;
    line-height: 1.72;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 64px 24px 96px;
  }
  header.masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 56px;
    color: var(--ink-faint);
    font-size: 13px;
    letter-spacing: 0.04em;
  }
  .masthead .brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .masthead .brand .dot {
    width: 8px; height: 8px; border-radius: 2px; background: var(--accent);
  }
  .masthead .brand strong { color: var(--ink); font-weight: 600; letter-spacing: 0; }
  .eyebrow {
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 16px;
  }
  h1 {
    font-size: 38px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-weight: 700;
    margin: 0 0 16px;
  }
  .subtitle {
    color: var(--ink-dim);
    font-size: 18px;
    margin: 0 0 32px;
  }
  .byline {
    color: var(--ink-faint);
    font-size: 14px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 32px;
    margin-bottom: 40px;
  }
  h2 {
    font-size: 24px;
    line-height: 1.3;
    margin: 56px 0 16px;
    letter-spacing: -0.005em;
  }
  h3 {
    font-size: 18px;
    margin: 32px 0 12px;
    color: var(--ink-dim);
    font-weight: 600;
  }
  p { margin: 0 0 18px; }
  a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
  a:hover { border-bottom-color: var(--accent); }
  strong { color: var(--ink); font-weight: 600; }
  blockquote {
    margin: 28px 0;
    padding: 20px 24px;
    background: var(--quote-bg);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    color: var(--ink);
    font-size: 17px;
  }
  blockquote p:last-child { margin-bottom: 0; }
  ul { padding-left: 22px; margin: 0 0 18px; }
  ul li { margin-bottom: 8px; }
  hr {
    border: none;
    border-top: 1px solid var(--line);
    margin: 48px 0;
  }
  .pullquote {
    font-size: 22px;
    line-height: 1.5;
    color: var(--ink);
    font-weight: 500;
    text-align: left;
    padding: 32px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin: 32px 0;
    letter-spacing: -0.005em;
  }
  /* Diagram */
  .diagram {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 28px 24px 20px;
    margin: 32px 0;
  }
  .diagram-title {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0 0 16px;
    font-weight: 600;
  }
  .diagram svg { width: 100%; height: auto; display: block; }
  .diagram-caption {
    font-size: 13px;
    color: var(--ink-faint);
    margin-top: 14px;
    text-align: center;
    line-height: 1.55;
  }
  /* Comparison table */
  .cmp {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    margin: 28px 0;
    font-size: 14px;
  }
  .cmp .cell { background: var(--surface); padding: 14px 16px; }
  .cmp .head { background: var(--surface-2); font-weight: 600; color: var(--ink); }
  .cmp .yes { color: #4ade80; font-weight: 600; }
  .cmp .mid { color: #fbbf24; font-weight: 600; }
  .cmp .no { color: #f87171; font-weight: 600; }
  /* footer */
  footer.signoff {
    margin-top: 64px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
    color: var(--ink-faint);
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
  }
  footer.signoff a { color: var(--ink-dim); border-bottom-color: transparent; }
  footer.signoff a:hover { color: var(--accent); border-bottom-color: var(--accent); }
  @media (max-width: 540px) {
    .wrap { padding: 40px 18px 64px; }
    h1 { font-size: 30px; }
    .pullquote { font-size: 19px; }
    .cmp { grid-template-columns: 1.2fr 1fr 1fr; font-size: 13px; }
    .cmp .cell { padding: 12px 12px; }
  }
</style>
</head>
<body>
<div class="wrap">

<header class="masthead">
  <span class="brand"><span class="dot"></span><strong>Open Design</strong></span>
  <span>by Nexu Labs</span>
</header>

<p class="eyebrow">Founder Notes · 2025</p>
<h1>如果 HTML 是 agent 给人看的最佳格式,那设计稿呢?</h1>
<p class="subtitle">一个 Open Design 创始人对 Thariq《The Unreasonable Effectiveness of HTML》的回应。</p>
<div class="byline">Joey · Building Open Design @ Nexu Labs · 中文</div>

<p>最近 Anthropic Claude Code 团队的 Thariq 写了一篇推文,叫 <a href="https://x.com/trq212/status/2052809885763747935" target="_blank" rel="noreferrer">《Using Claude Code: The Unreasonable Effectiveness of HTML》</a>。核心观点很简单:<strong>别让 agent 再用 markdown 输出了,改用 HTML。</strong></p>

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

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

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

<p>而 Thariq 文章里那一句最值钱:</p>

<blockquote><p>"<strong>Claude Design is based on HTML.</strong>"</p></blockquote>

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

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

<p class="pullquote">那它就是 Open Design 的存在理由。</p>

<h2>Open Design 在赌的事</h2>

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

<p>新的设计工作流是这样的:</p>

<div class="diagram">
<p class="diagram-title">Agent-time design loop</p>
<svg viewBox="0 0 720 220" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Agent design loop diagram">
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" fill="currentColor"/>
    </marker>
    <style>
      .node { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; }
      .nlabel { fill: var(--ink); font: 600 13px -apple-system, "PingFang SC", sans-serif; }
      .nsub { fill: var(--ink-faint); font: 11px -apple-system, "PingFang SC", sans-serif; }
      .edge { stroke: var(--ink-faint); stroke-width: 1.5; fill: none; }
      .accent { fill: var(--accent-soft); stroke: var(--accent); }
    </style>
  </defs>
  <g color="#7a7a85">
    <rect class="node" x="20" y="80" width="120" height="60" rx="10"/>
    <text class="nlabel" x="80" y="108" text-anchor="middle">需求描述</text>
    <text class="nsub" x="80" y="125" text-anchor="middle">human prompt</text>

    <rect class="node accent" x="180" y="80" width="160" height="60" rx="10"/>
    <text class="nlabel" x="260" y="108" text-anchor="middle">HTML mockups</text>
    <text class="nsub" x="260" y="125" text-anchor="middle">5 directions, parallel</text>

    <rect class="node" x="380" y="80" width="160" height="60" rx="10"/>
    <text class="nlabel" x="460" y="108" text-anchor="middle">迭代 / Critique</text>
    <text class="nsub" x="460" y="125" text-anchor="middle">side-by-side review</text>

    <rect class="node" x="580" y="80" width="120" height="60" rx="10"/>
    <text class="nlabel" x="640" y="108" text-anchor="middle">落地</text>
    <text class="nsub" x="640" y="125" text-anchor="middle">React / Swift / RN</text>

    <line class="edge" x1="140" y1="110" x2="175" y2="110" marker-end="url(#arrow)"/>
    <line class="edge" x1="340" y1="110" x2="375" y2="110" marker-end="url(#arrow)"/>
    <line class="edge" x1="540" y1="110" x2="575" y2="110" marker-end="url(#arrow)"/>
    <path class="edge" d="M460 140 Q 360 200 260 140" marker-end="url(#arrow)" stroke-dasharray="4 4"/>
    <text class="nsub" x="360" y="195" text-anchor="middle">refine 后继续生成</text>
  </g>
</svg>
<p class="diagram-caption">HTML 不是终点,是中间表达。</p>
</div>

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

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

<div class="cmp" role="table" aria-label="格式对比">
  <div class="cell head">中间表达</div>
  <div class="cell head">agent 能稳定生成</div>
  <div class="cell head">人类能直接消费</div>
  <div class="cell" style="font-weight:600">Markdown</div>
  <div class="cell"><span class="yes">✓</span> 完美</div>
  <div class="cell"><span class="mid">~</span> 100 行内还行</div>
  <div class="cell" style="font-weight:600">Figma 文件</div>
  <div class="cell"><span class="no">✗</span> 几乎不可能</div>
  <div class="cell"><span class="yes">✓</span> 设计师能</div>
  <div class="cell" style="font-weight:600">React / Swift 源码</div>
  <div class="cell"><span class="mid">~</span> 能,但耦合具体技术栈</div>
  <div class="cell"><span class="no">✗</span> 非工程师看不懂</div>
  <div class="cell" style="font-weight:600;background:var(--accent-soft)">HTML</div>
  <div class="cell" style="background:var(--accent-soft)"><span class="yes">✓</span> 训练数据极多</div>
  <div class="cell" style="background:var(--accent-soft)"><span class="yes">✓</span> 浏览器原生</div>
</div>

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

<p><strong>HTML 是这三件事的当前最优交集。</strong></p>

<h2>那 Open Design 到底在做什么?</h2>

<p>具体一点:</p>

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

<p>它的几个核心动作:</p>

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

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

<h2>为什么是开源</h2>

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

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

<p>所以 Open Design 的几个选择:</p>

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

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

<hr/>

<h2>回到 Thariq 那篇</h2>

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

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

<p>这就是我们在做的事。</p>

<p>如果你也在思考「agent 时代设计是什么样」——欢迎来 <a href="https://github.com/nexu-io/open-design" target="_blank" rel="noreferrer">github.com/nexu-io/open-design</a> 看看,或者直接 reply 这条推。</p>

<footer class="signoff">
  <span>—— Joey, building <a href="https://github.com/nexu-io/open-design" target="_blank" rel="noreferrer">Open Design</a> @ Nexu Labs</span>
  <span><a href="https://x.com/JoyLi629" target="_blank" rel="noreferrer">@JoyLi629</a> · <a href="https://x.com/nexudotio" target="_blank" rel="noreferrer">@nexudotio</a></span>
</footer>

</div>
</body>
</html>