让 AI 编程助手直接写 HTML：opencode 集成 html-anything 实战

9 个 coding-agent CLIs、75 个可组合 skill 模板、9 种交付物、0 API Key——AI 不再只写 Markdown 草稿，而是直接生成排版精美的 HTML 内容，从草稿到发布一键完成。

如果你在用 AI 编程助手（Cursor、Claude Code、opencode）写内容，你一定遇到过这个场景：

AI 生成了一段 Markdown，你得手动复制到编辑器里排版、调样式、导出，折腾半小时才能发布。

Markdown 是草稿，HTML 才是读者真正看到的。AI 时代的内容工作流，不该止步于 Markdown。

● ● ●

一、为什么 Markdown 不够用了

传统工作流是这样的：

1. 1.
   AI 生成 Markdown 草稿
2. 2.
   复制到编辑器（Notion、Typora、公众号后台）
3. 3.
   手动调排版、配色、间距
4. 4.
   导出、发布

这个流程最大的问题是：AI 只负责了第一步，剩下的全是人工。

@trq212 在推文中说："在 AI 时代, HTML 已经取代 markdown 成为最终形态。"

我深以为然。Markdown 是中间态，HTML 才是终点。让 AI 直接生成 HTML，跳过手动排版，才是正确的工作流。

● ● ●

二、html-anything 是什么

html-anything 与传统编辑器对比

html-anything 的核心理念很简单：Markdown is the draft. HTML is what humans read. Your local agent writes it.

它有三大特点：

1. 自动检测 9 个 coding-agent CLIs

Claude Code、Cursor Agent、Codex、Gemini CLI、GitHub Copilot CLI、OpenCode、Qwen Coder、Aider、IBM Bob——html-anything 会自动扫描 PATH，列出你已登录的 agent，无需额外配置。

2. 75 个可组合 skill 模板

从杂志文章到幻灯片，从简历到海报，从社交媒体卡片到数据报告，75 个模板覆盖常见内容场景。

3. 9 种交付物，一键导出

• ●
  Magazine articles（杂志文章）
• ●
  Keynote decks（幻灯片）
• ●
  Résumés（简历）
• ●
  Posters（海报）
• ●
  Xiaohongshu cards（小红书卡片）
• ●
  Tweet cards（推特卡片）
• ●
  Web prototypes（网页原型）
• ●
  Data reports（数据报告）
• ●
  Hyperframes videos（视频帧）

导出支持微信公众号、知乎、X/Twitter、PNG 图片，零调整直接可用。

项目基于 Apache 2.0 协议开源，本地优先，不需要任何 API Key。

● ● ●

三、安装部署：30 秒上手

git clone https://github.com/nexu-io/html-anything cd html-anything pnpm install pnpm -F @html-anything/next dev # → http://localhost:3000

技术栈：

• ●
  Next.js 16
• ●
  React 19
• ●
  Tailwind v4

打开浏览器后，顶栏会自动列出已登录的 agent。如果你已经用 opencode login 登录过，opencode 会出现在列表中。

关键点：复用已登录的 CLI session，0 边际成本。不需要额外申请 API Key，不需要配置环境变量，html-anything 直接调用你本地已有的 opencode 会话。

● ● ●

四、opencode 集成实战

opencode agent 检测与调用流程

4.1 自动检测机制

html-anything 启动时会扫描 PATH 中的 opencode 和 opencode-cli：

which opencode # /usr/local/bin/opencode  which opencode-cli # /usr/local/bin/opencode-cli

如果检测到，opencode 会出现在顶栏的 agent 列表中。

4.2 调用方式

html-anything 通过 child_process.spawn 调用 opencode：

opencode run --format json --dangerously-skip-permissions -

参数说明：

• ●--format json
  ：输出 JSON 格式，方便解析
• ●--dangerously-skip-permissions
  ：跳过权限确认（在受控环境中使用）
• ●-
  ：从 stdin 读取输入

4.3 实测：opencode 生成 magazine article 的完整流程

Step 1：选模板

在 html-anything 界面选择 "Magazine Article" 模板。该模板提供 10 套锁版设计和 5 套配色方案。

Step 2：粘贴内容

把 Markdown 草稿粘贴到输入框。比如：

# 我的运维日报  ## 今日完成 - 修复了 3 个生产环境告警 - 部署了新版监控脚本 - 更新了 5 台服务器的 SSL 证书  ## 明日计划 - 优化数据库查询性能 - 完成备份策略调整

Step 3：⌘+Enter 触发 opencode

html-anything 会把 Markdown 和模板指令一起发送给 opencode：

{   "template": "magazine-article",   "variant": "modern",   "colorScheme": "ocean",   "content": "# 我的运维日报\n\n## 今日完成..." }

Step 4：SSE 流式输出 + iframe 实时预览

opencode 通过 stdout 返回 JSON-line 流：

{"type": "content", "html": "<article class=...>...</article>"} {"type": "content", "html": "<article class=...>...</article>"} {"type": "done"}

html-anything 的预览沙箱用 iframe 实时渲染：

<iframe sandbox="allow-scripts allow-same-origin" srcdoc="<html>...</html>"></iframe>

从输入到看到预览，整个过程不到 10 秒。

● ● ●

五、5 个 skill 模板实测

skill 模板矩阵与实测数据

我实测了 5 个常用模板，数据如下：

所有模板都遵循同一套工作流：

1. 1.
   用户输入 Markdown
2. 2.
   html-anything 组装 prompt（模板指令 + 用户内容）
3. 3.
   通过 stdin 发送给 opencode
4. 4.
   opencode 生成 HTML
5. 5.
   stdout 返回 JSON-line
6. 6.
   iframe 实时预览
7. 7.
   用户满意后一键导出

● ● ●

六、一键发布到公众号

发布流程与数据统计

生成 HTML 后，html-anything 提供一键发布功能：

微信公众号

• ●
  juice 内联 CSS，把所有样式写入 HTML 标签的 style 属性
• ●
  data-tool 标记保留编辑能力
• ●
  直接粘贴到公众号编辑器，0 调整

知乎

• ●
  同上，额外支持 LaTeX 公式自动渲染
• ●
  数学公式无需手动转换

X/Twitter、微博、小红书

• ●
  modern-screenshot 生成 2× PNG
• ●
  高清截图，直接上传

实测从 HTML 生成到公众号发布，全程不到 1 分钟。

● ● ●

七、踩坑总结

● ● ●

八、与运维场景的结合

html-anything 不只是内容创作工具，在运维场景中也有实用价值：

运维日报自动生成

secterminal 每天产生大量运维数据（告警、部署、变更），用 opencode + html-anything 的 data report skill，可以把原始日志自动转换成结构化的数据报告：

# 运维日报 2026-10-04  ## 告警统计 - P0: 0 - P1: 3 - P2: 12  ## 变更记录 - 部署: 5 次 - 回滚: 1 次 - 配置变更: 8 次  ## 资源使用 - CPU: 45%（环比 -3%） - 内存: 62%（环比 +5%） - 磁盘: 78%（告警阈值 80%）

输入后，html-anything 自动生成带图表的 HTML 报告，直接贴到群里或导出 PNG。

Hyperframes 视频帧脚本

运维操作录屏后，用 html-anything 生成视频帧脚本，把操作步骤转换成带标注的视频片段，方便培训和复盘。

人设一致性

本篇内容聚焦 AI 工程实战，与 secterminal 的运维场景形成互补：secterminal 解决"怎么管服务器"，html-anything + opencode 解决"怎么把运维数据变成好看的内容"。

● ● ●

总结

html-anything 让 AI 编程助手从"写 Markdown 草稿"进化到"直接生成 HTML 成品"：

• ●9 个 agent CLI
  ：Claude Code、Cursor、Codex、Gemini CLI、Copilot CLI、OpenCode、Qwen Coder、Aider、IBM Bob
• ●75 个 skill 模板
  ：覆盖文章、幻灯片、简历、海报、社交媒体等场景
• ●9 种交付物
  ：从网页到 PNG，从公众号到知乎，一键导出
• ●0 API Key
  ：复用已登录的 CLI session，本地优先

opencode + html-anything 的工作流可以总结为：Markdown → HTML → 发布，全自动化。

核心价值很明确：让 AI 直接写 HTML，跳过手动排版，把时间还给内容本身。

想了解更多 AI 工程实战内容？关注公众号「AIman」，每周分享开源工具、效率工作流、Vibe Coding 实践。

本文涉及的 html-anything 部署脚本、opencode 集成配置已开源，回复「html-anything」获取完整代码。