Markdown 是草稿，HTML 是成品灵感来自 Anthropic Claude Code 团队的宣言：他们内部文档不再写 Markdown 了，改发 HTML。理由很简单——
| Markdown |  HTML | |
|---|---|---|
| 读者体验 | 对写作者友好，对读者不友好 | 天生就是给人看的 |
| 布局控制 | 受限于渲染器 | 完全由你掌控 |
| 社交分享 | 截图发推不好看 | 截图就是一张设计好的图片 |
| 跨平台发布 | 发微信/知乎要重新排版 | 一键转换格式，跨平台粘贴 |
HTML 是给人类看的最终形态，Markdown 只是写作时的中间态。
但手写 HTML + CSS + 排版？大部分人不会，设计师懒得，写作者没耐心。HTML Anything 解决的就是这个问题——你不是在写代码，你是在描述需求。
核心数字[ul]
[li]75 个技能模板——从杂志文章到演讲 PPT 到视频帧到办公文档
[li]8 款 AI CLI 支持——Claude Code、Cursor Agent、OpenAI Codex、Gemini CLI、GitHub Copilot、OpenCode、Qwen Coder、Aider
[li]9 种输出面——杂志文章 · 演讲 PPT · 简历 · 海报 · 小红书卡片 · 推特卡片 · 网页原型 · 数据报告 · Hyperframes 视频
[li]6 个一键导出目标——微信 · X(Twitter) · 知乎 · 小红书 · .html 下载 · .png 下载
[li]0 API Key——复用你已在终端登录的 Agent 会话，边际成本为零
[/ul]
六个承重设计理念HTML Anything 不是又一个"AI 写网页"玩具。它背后有六个精心设计的承重理念。
我们不内置 AI——你的就够了启动时扫描 PATH，自动检测已安装的 8 个 Agent CLI。每个 CLI 只有一个薄适配层（argv + stdin 协议 + 流解析器），全部在 next/src/lib/agents/argv.ts 里。复用你已有的终端会话，不存第二份 API Key。
技能是文件夹，不是插件遵循 Claude Code 的 SKILL.md 规范：一个文件夹 = SKILL.md + assets/ + references/ + example.html。丢进 next/src/lib/templates/skills/，重启 dev server，选择器就自动显示。
硬约束阻止 AI 自由发挥每个模板硬编码：CJK 优先字体栈、8px 基线网格、圆角+软阴影、禁止纯黑/纯白、对比度 ≥4.5、必须使用用户的真实数据（不许 lorem ipsum）。约束写在 prompt 里，不是写在代码里。
流式渲染 = 看着 AI 画POST /api/convert 走 SSE。Agent stdout 的 JSON-line 被解析为文本 delta，通过 SSE 事件实时推送到 iframe 的 srcdoc。你看着页面一行一行被画出来，随时中断重试——不必为不想要的整段生成等待。
一键导出 = 零二次排版- 微信：juice 内联 CSS，粘贴即用，样式完整保留
- X / 小红书：modern-screenshot 渲染为 2× PNG → ClipboardItem → 直接丢进推文编辑器
- 知乎：LaTeX 图片占位符自动替换，公式渲染无问题
- .html 下载 / .png 下载——自包含单文件，随处分享
沙箱 iframe = 安全 + 隔离用户生成的 HTML 始终在 iframe[sandbox="allow-scripts allow-same-origin"] 里运行。三方脚本（Tailwind CDN、Google Fonts、自定义动画）正常运行，但 cookie 和 localStorage 与宿主隔离。
架构一览
代码:
┌─────────────────────────────────────────────────────────────┐
│ Browser (Next.js 16) │
│ Editor · Agent picker · Template picker · iframe preview │
└───────────┬──────────────────────────────────────┬──────────┘
│ ⌘+Enter │
▼ ▼
┌───────────────────────┐ ┌──────────────────────────────────┐
│ GET /api/agents │ │ POST /api/convert │
│ 扫描 PATH，列出 CLI │ │ SSE — spawn CLI │
└───────────────────────┘ │ pipe stdin / stdout │
└──────────┬───────────────────────┘
│ spawn + stdin pipe
▼
┌──────────────────────────────────────────────────┐
│ Your local coding-agent CLI │
│ claude / codex / cursor-agent / gemini / ... │
│ → 复用你已有的终端会话 │
└──────────────────────────────────────────────────┘
│
▼
stdout JSON-line ──► SSE event
│
▼
iframe srcdoc append (live)
│
⌘+C copy → ClipboardItem
⌘+S download → .html / .png技术栈速览：
- 前端：Next.js 16 App Router + Turbopack · React 19 · Tailwind v4 · zustand
- 服务端路由：GET /api/agents（检测）· POST /api/convert（SSE 流式 spawn）
- Agent 传输层：child_process.spawn · 每个 CLI 一个薄适配层
- 浏览器端处理：juice（CSS 内联）· modern-screenshot（PNG 导出）· xlsx/papaparse（表格解析）· dompurify（XSS 防御）
- 部署：本地 pnpm dev · Vercel 一键（Agent 始终留在本地）
75 个技能模板速览
网页原型 & Marketing 页面| 技能名 | 用途 |
|---|---|
| prototype-web | 通用网页原型（1440×900） |
| saas-landing | SaaS 落地页（Hero / 功能 / 定价 / CTA） |
| dashboard | 管理后台 / 分析控制台 |
| blog-post | 长文博客编辑布局 |
| mobile-app | iOS/Android 原型（iPhone 15 Pro 包裹） |
| resume-modern | 极简简历（A4 210×297mm） |
演讲 Deck 模板（20 个）| 技能名 | 用途 |
|---|---|
| deck-swiss-international | 瑞士国际风格（16 列网格 + Klein 蓝点缀） |
| deck-guizang-editorial | 杂志墨水编辑风（10 种锁定布局 × 5 调色板） |
| deck-open-slide-canvas | 1920×1080 Agent 原生画布 |
| deck-xhs-pastel | 小红书柔和粉彩风 |
| deck-hermes-cyber | Hermes 赛博霓虹奢华风 |
| deck-pitch | 投资人 Pitch 演示 |
Hyperframes 视频帧 & VFX| 技能名 | 用途 |
|---|---|
| frame-liquid-bg-hero | 流动背景 Hero 开屏 |
| frame-data-chart-nyt | 纽约时报风格数据图表 |
| frame-glitch-title | 故障艺术标题卡（青/品红偏移 + CRT 扫描线） |
| vfx-text-cursor | 文本光标 VFX 开屏特效 |
| mockup-device-3d | 3D 设备框架模型展示 |
| video-hyperframes | Hyperframes 帧脚本 → Remotion 渲染 .mp4 |
社交媒体卡片 & 办公文档| 技能名 | 用途 |
|---|---|
| social-x-post-card | X / Twitter 引用卡片（1600×900） |
| card-xiaohongshu | 小红书图文卡片 |
| social-carousel | 3 卡 1080×1080 轮播 |
| social-spotify-card | Spotify Wrapped 风格卡片 |
| pm-spec | PM 需求文档 + 决策日志 |
| data-report | CSV/Excel → 可视化数据报告 |
| doc-kami-parchment | 暖羊皮纸编辑文档（来自 tw93/kami） |
30 秒快速上手
代码:
git clone https://github.com/nexu-io/html-anything
cd html-anything
pnpm install
pnpm -F @html-anything/next dev
# → 浏览器打开 http://localhost:3000打开浏览器 → 顶部栏自动检测你已登录的 Agent CLI → 选一个模板 → 粘贴内容 → ⌘+Enter。
不需要 API Key。
写在最后HTML Anything 不是又一个 AI 网页生成器。它代表了一种理念转变：输出格式应该对读者友好，而不是对写作者友好。
在 AI Agent 替你写 HTML 的时代，你不应该再纠结于布局和 CSS——你把需求说清楚，本地 Agent 替你搞定设计。
