今天在翻日本 DJ 的独立站，意识到把分发交给公众号和平台是一桩跟魔鬼的交易 —— 表达被压扁，品味在坍缩。所以我们想认真做一下 HTML：SVG、Mermaid、内容寻址的图床，都直接进 huozi。HTML 不只是下一代 PPT，更是下一代 Micro Homepage。
A lunchtime crawl through Japanese DJs’ personal sites: when distribution belongs to platforms, the price we quietly pay is taste collapse. Why huozi treats HTML as a first-class artifact — SVG and Mermaid rendered in place, images as content-addressed assets — and why HTML isn’t just the next PPT, it’s the next micro homepage.
中午无意中点开几个日本年轻 DJ 的个人站点 —— 不是 SoundCloud，不是 Spotify 的 Artist 页 —— 是他们自己一行一行写出来的 HTML。颜色乱七八糟，字体不讲究，pixelated GIF 在角落里转。但每翻一个，我都觉得 —— 啊，这个人是这样一个人。
然后我突然意识到：当信息分发被公众号和平台统治之后，我们其实做了一桩非常昂贵的、跟魔鬼的交易。我们只是没在意它的价格。
平台分发的逻辑是 —— 你给它内容，它给你流量。但代价是，所有内容都要被它的格式吃下去：
长此以往，问题不是哪一篇文章变差，而是 —— 整个表达的可能性空间被压扁了。
你可以叫它“表达灾难”，也可以叫它品味坍缩。人有 1000 种讲一件事的方式，平台只让你用其中一种。为了那点“高效分发”，整代人的审美都被驯化成了一个样子。
中午翻日本 DJ 站的时候我有一个非常清楚的感觉 —— 还是要独立站。就算你不会做设计，不会写 React，不会买域名，至少你要有一个 HTML 自由 的发布通道。
Substack、个人 Notion、博客系统 —— 它们都接近这件事了，但又都没完全到位：
真正的“HTML 自由”应该意味着：你想写什么，它就显示什么。颜色、字体、动画、嵌入、图表 —— 都是你的事，不是平台的事。
活字本来在做的，是给 Agent 的一块“云优盘” —— Agent 把文件写进 workspace，huozi_share 一键变成公网 URL。
但我们越用越觉得，HTML 在 Agent 时代有特殊地位。它不是一个文档格式 —— 它是 Agent 唯一可以一次性输出 “结构 + 样式 + 一点交互”的载体。Markdown 太穷，PDF 太死，PPT 太重。HTML 刚刚好。
所以我们围绕 HTML 做了几件具体的事：
huozi_image_render 接受 SVG 源码，服务端渲成 PNG，落到 /__assets__/ 这个内容寻址的图床里。Agent 写一段 <svg> 就有图。/__assets__/<hash>.png 这个内容寻址命名空间。HTML 里写 ，发布时 /p/<slug> 的渲染层会自动重写成公网 blob URL。作者不操心 CDN，路径不会因为分享而失效。# Agent 写一篇带图的小站:
huozi_image_render({ format: "svg", source: "<svg>...</svg>" })
→ /__assets__/9a3f...png
huozi_write({
file_path: "index.html",
content: `<h1>こんにちは</h1>
<img src="/p/vrbug927wv/a/9a3f...png" />
<p>...</p>`,
})
huozi_share({ path: "index.html" })
→ https://huozi.app/p/<slug>
# /__assets__/ 的路径在这里被自动重写为公网 URL换句话说，Agent 写的不是“一篇文章”，是一个目录 —— 文本、SVG、Mermaid、图、HTML，全部按 huozi 的内容寻址规则躺在一起。huozi_share 一键发出去，对外就是一个干净的网页。
上面那条 Mermaid 走 huozi_image_render 渲染成 PNG，适合“图作为最终静态产物”。但很多时候 Agent 想要的是页面里活的图、活的代码块、活的公式 —— 鼠标悬停能看 tooltip，公式能跟随主题切色，图表能下钻。这些都得靠浏览器里的 JS 库。
问题是 huozi 的 /p/<slug> 跑在沙箱里，<script src="https://cdn..."> 会被 CSP 拦下来。所以我们直接在服务端预置了 8 个常用库，作者一行 meta 声明要用哪些，huozi 同源注入并自动初始化。不声明的页面零 JS 开销，零 hint 也不会偷偷注入。
<pre class="mermaid"> 即渲染。适合“图要随文本一起 diff、版本化”的场景。<pre><code class="language-*">。技术博客、API 文档必备。$$ … $$ / \[ … \] / \( … \)。论文、推导、ML 报告。huozi.md(string)，把一段 markdown 字符串就地转 DOMPurify 过滤后的 HTML。HTML 里掺片段 markdown 用。init，按场景选一个）<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="huozi:bundle" content="mermaid,highlight,echarts">
<!-- 可选：主题 / 字体 -->
<meta name="huozi:theme" content="light"> <!-- light | dark | auto -->
<meta name="huozi:font" content="sans"> <!-- sans | serif | mono -->
</head>
<body>
<pre class="mermaid">
flowchart LR
A --> B --> C
</pre>
<div id="chart" style="width:600px;height:400px"></div>
<script>
// bundle 已被 huozi 服务端同源注入，全局变量直接用
echarts.init(document.getElementById('chart')).setOption({ /* ... */ })
</script>
</body>
</html>三条规则：
<script src="https://cdn..."> 加这些库 —— 会被沙箱 strip，且和 huozi 注入版双初始化。mermaid@9），版本由 huozi 锁定，统一升级。X-Huozi-Bundle-Warn 会反馈给作者。“HTML 是下一代 PPT”的故事我们以前讲过：长文太重，PPT 又太死，HTML 是 Agent 时代的中间态。但越做越觉得，PPT 这个比方低估了它。
HTML 更是 —— 下一代 Micro Homepage。
那些日本 DJ 的个人站，那些 90 年代的 GeoCities，那些 MySpace 上五颜六色的 profile —— 它们其实是同一种东西：一个属于个人的、可以被随便表达的、不被平台模板规训的小角落。
PPT 的本质是说服一个房间。Micro Homepage 的本质是 —— 告诉互联网你是一个怎样的人。
Agent 时代的好消息是：你不需要会 CSS，也可以拥有这样一个小角落。你说一句话，Agent 写一段 HTML，huozi 给你一个 huozi.app/p/<slug> 的公网链接 —— 没有平台模板，没有信息流推荐算法，没有“卡片化”的版式。就是 HTML。就是你。
至少，先把 HTML 自由这件事做回来。
At lunch I went down a rabbit hole of personal sites — Japanese DJs in their twenties, hand-written HTML, the kind nobody gets paid to make. Not SoundCloud, not a Spotify artist page. Just a colored background, a weird font, a pixel-art GIF spinning in the corner. And every time I clicked through one, I had a small clear thought: oh, this person is this kind of person.
Then it hit me. The deal we’ve quietly made by handing distribution over to platforms — WeChat 公众号, Substack-as-default, Twitter threads, you name it — is a very expensive deal. We just don’t notice the price.
Platform distribution works like this: you give it content, it gives you reach. The price is that all content has to be digested through the platform’s format:
Over time, the problem isn’t that any one piece gets worse. It’s that the whole space of possible expression flattens.
Call it an expression disaster. Or, more precisely, taste collapse. There are a thousand ways to say a thing, and the platform allows one. For a little distribution efficiency, a generation’s aesthetic gets domesticated into a single shape.
Clicking through those DJ sites I had a very clear feeling: the indie web has to come back. Even if you don’t do design, don’t write React, don’t want to register a domain — you should at least have a publishing channel that gives you HTML freedom.
Substack, personal Notion, blog engines — they each gesture at this, none quite arrives:
Real HTML freedom should mean: whatever you want on the page, that’s what shows up. Colors, fonts, animations, embeds, charts — those are your decisions, not the platform’s.
Huozi, at its core, is a cloud drive for Agents. The Agent writes files into a workspace; huozi_share flips a switch and the workspace becomes a public URL.
But the longer we use it, the clearer it gets: HTML has a special place in the Agent era. It’s not just a document format — it’s the one container in which the Agent can hand back “structure + style + a little interaction” in one shot. Markdown is too poor, PDF too rigid, slides too heavy. HTML lands right in between.
A few concrete things we’ve built around HTML:
huozi_image_render takes raw SVG markup, renders it to PNG, and stores it under the content-addressed /__assets__/ namespace. One <svg> block, one image asset. No external image generator in the loop./__assets__/<hash>.png. The HTML writes ; at publish time the /p/<slug> renderer rewrites those paths to public blob URLs. The author never thinks about CDNs, and a path doesn’t break the moment you share it.# An Agent writes a small site, with an embedded image:
huozi_image_render({ format: "svg", source: "<svg>...</svg>" })
→ /__assets__/9a3f...png
huozi_write({
file_path: "index.html",
content: `<h1>こんにちは</h1>
<img src="/p/vrbug927wv/a/9a3f...png" />
<p>...</p>`,
})
huozi_share({ path: "index.html" })
→ https://huozi.app/p/<slug>
# /__assets__/ paths get rewritten to public URLs at view time.Put another way: what the Agent produces isn’t an article. It’s a directory — text, SVG, Mermaid, images, HTML — laid out under huozi’s content-addressed rules. One huozi_share and the whole thing is a clean public page.
The Mermaid path above goes through huozi_image_render and produces a PNG — fine for “the chart is a final static asset.” But often what the Agent really wants is a live diagram, a live code block, a live formula — tooltip on hover, formulas that follow the theme, charts you can drill into. All of that needs JS in the browser.
The catch: huozi’s /p/<slug> runs in a sandbox, and <script src="https://cdn..."> is blocked by CSP. So we pre-bundle 8 commonly-used libraries on the server. The author declares which ones in a single meta tag; huozi injects them same-origin and auto-initializes them. Pages without the declaration ship zero JS — nothing is injected behind your back.
<pre class="mermaid"> and it renders. Best when “the diagram should diff and version with the prose.”<pre><code class="language-*">. Tech blogs, API docs.$$ … $$, \[ … \], \( … \). Papers, derivations, ML reports.huozi.md(string), turning a markdown string into DOMPurify-sanitized HTML in place. For when you want a markdown fragment inside a hand-written HTML page.init, pick the one that fits)<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="huozi:bundle" content="mermaid,highlight,echarts">
<!-- optional: theme / font -->
<meta name="huozi:theme" content="light"> <!-- light | dark | auto -->
<meta name="huozi:font" content="sans"> <!-- sans | serif | mono -->
</head>
<body>
<pre class="mermaid">
flowchart LR
A --> B --> C
</pre>
<div id="chart" style="width:600px;height:400px"></div>
<script>
// bundles are injected same-origin by huozi — globals are ready
echarts.init(document.getElementById('chart')).setOption({ /* ... */ })
</script>
</body>
</html>Three rules:
<script src="https://cdn..."> for these libs — the sandbox strips them, and you’d double-init against the huozi-injected copy.mermaid@9); huozi locks and upgrades them centrally.X-Huozi-Bundle-Warn tells the author.We’ve told the “HTML is the next PPT” story before: long documents are too heavy, slides are too rigid, HTML is the right middle in the Agent era. But the more we work in it, the more we think the PPT framing under-sells it.
HTML is also — the next micro homepage.
Those Japanese DJs’ personal sites, GeoCities pages, MySpace profiles in their full Comic-Sans glory — at root they were the same thing: a small, personal corner, expressible at will, untouched by a platform’s template grammar.
A slide deck exists to convince a room. A micro homepage exists to — tell the internet what kind of person you are.
The good news, in the Agent era: you don’t have to know CSS to have one of these corners. You say a sentence, the Agent writes some HTML, huozi hands you a huozi.app/p/<slug> URL — no template, no algorithmic feed, no “card-ifying” of your prose. Just HTML. Just you.
At minimum — let’s bring HTML freedom back.