Anthropic：HTML 才是给读者看的，HTML-Anything

Hey_AI_Coder
170 阅读9分钟

前几天在 X 上刷到一条有趣的消息：Anthropic 的 Claude Code 团队宣布他们内部文档不再写 Markdown 了，直接写 HTML。

理由很简单也很戳人：Markdown 是写给写作者看的，HTML 才是给读者看的。

写 HTML 这件事本身门槛就不低。要懂 CSS、要挑字体、要对齐网格、要做响应式——大部分人没这个耐心，设计师嫌麻烦，内容创作者根本不想碰。

那有没有一种方式，能让我们不用写代码，也能得到专业级的 HTML 呢？答案就是今天要介绍的这个开源项目：HTML-Anything。

Github：

github.com/nexu-io/htm…

一句话说清楚：HTML-Anything 是什么？

HTML-Anything 是 nexu-io 团队在2026年最新发布的开源项目，这个团队还打造了拥有40k+星标的 open-design。它是一个专门为 Agent 时代设计的智能 HTML 编辑器，让你的本地 AI Agent 直接将任何内容转换为专业设计水准的 HTML，无需你手写代码。

项目支持 75 套 Skill 模板（覆盖9种交付形态），能够自动识别你电脑上安装的 8 种 Code Agent CLI（包括 Claude Code、Cursor Agent、OpenAI Codex、Gemini CLI、GitHub Copilot CLI、OpenCode、Qwen Coder、Aider 等）。顶栏一键切换，复用已登录会话，零API Key，零边际成本。

核心功能亮点

1. 75 套专业 Skill 模板，覆盖全场景

HTML-Anything 内置了 75 套精心设计的 Skill 模板，每一套都有真实的 example.html 可以直接打开看效果。这些模板覆盖了 9 种不同的交付场景：杂志文章采用暖色调羊皮纸风格，类似 tw93/kami 的阅读体验；Keynote 演示包含瑞士国际主义风格、贵藏编辑风格等 20 种专业模板；还有专业级的简历设计、报纸风格的大幅海报、专为小红书设计的竖版卡片、适合发 X/Twitter 的卡片设计、SaaS 落地页和仪表盘等 Web 原型、数据报告模板，以及可直接用于 Remotion 或 HeyGen 渲染的 Hyperframes 视频分镜。

每个 Skill 都有严格的设计约束——CJK 优先字体栈、8px 基线网格、对比度 ≥ 4.5、必须使用真实数据等等，保证生成的每一个 HTML 都是专业级的。

2. 自动识别 18 种 Code Agent

这是 HTML-Anything 最聪明的地方。它会自动扫描你电脑 PATH 上的所有 Code Agent CLI，包括 Claude Code、Cursor Agent、OpenAI Codex、Gemini CLI、GitHub Copilot CLI、OpenCode、Qwen Coder 和 Aider 等。

你不用配置任何 API Key，直接复用你已经通过 claude login、cursor login、gemini auth 等方式登录的会话。

你的现有订阅就能工作，边际成本是 $0。

3. 一键发布到多平台

生成好的 HTML 可以一键导出到多个平台，微信公众号支持 CSS 全部内联，粘贴进去直接用，不用重新调整格式；X/微博/小红书会自动渲染成 2× 高 DPI 的 PNG，直接复制到剪贴板即可；知乎平台会自动处理 LaTeX 公式成图片占位符；还支持下载单文件 HTML 或高 DPI PNG 保存到本地。

所有这些都通过一个按钮完成，生成出来就是最终可以发布的样子。

4. 智能Agent检测与无缝集成

HTML-Anything会在启动时自动扫描系统PATH（包括通常被GUI应用忽略的目录如~/.local/bin、/.bun/bin、/opt/homebrew/bin、/.npm-global/bin），识别已安装的Code Agent CLI。它支持8种主要的AI编码Agent，包括Claude Code、Cursor Agent、OpenAI Codex、Gemini CLI、GitHub Copilot CLI、OpenCode、Qwen Coder和Aider。

最聪明的是，它直接复用你已通过claude login、cursor login或gemini auth等方式登录的会话，完全不需要API密钥，现有订阅即可工作，边际成本为零。

5. 流式实时渲染，可视化创作过程

采用SSE（服务器推送事件）技术，Agent生成HTML的过程实时流式渲染在预览区，用户可直观看到内容逐行生成、排版逐步成型的过程，若不满意可随时中断，避免浪费AI生成资源。

6. 安全沙箱预览，本地运行更安心

所有生成的HTML均在沙箱iframe中预览，隔离本地存储与Cookie，避免恶意代码影响本地环境；项目全程本地运行，内容不上传至任何服务器，保障数据隐私与安全。

7. 多格式输入支持，兼容各类内容源

支持Markdown、CSV、TSV、JSON、SQL、纯文本等多种输入格式，自动识别内容类型（如表格数据自动解析为可视化报表），无需手动转换格式，降低使用门槛。

快速上手

前置条件

  1. 安装Node.js（建议≥22版本）与pnpm包管理器
  2. 本地安装至少一款支持的AI编码Agent CLI（如Claude Code、Cursor Agent等），并完成终端登录

部署启动

# 1. 克隆仓库 
git clone https://github.com/nexu-io/html-anything 
# 2. 进入项目目录 
cd html-anything 
# 3. 安装依赖 
pnpm install 
# 4. 启动项目 
pnpm dev 
# 5. 访问页面（默认地址） 
http://localhost:3000

使用流程

  1. 启动应用：打开浏览器访问 http://localhost:3000，顶部栏会自动检测已安装的Agent
  2. 选择模板：在中间区域选择合适的Skill模板（可按场景和模式筛选）
  3. 输入内容：在左侧编辑器粘贴或输入内容（支持Markdown、CSV、JSON、SQL等格式）
  4. 生成HTML：按Cmd+Enter（Mac）/Ctrl+Enter（Windows）触发生成
  5. 实时预览：在右侧iframe中实时查看生成过程
  6. 导出使用：点击顶部导出按钮，选择目标平台（微信/微博/小红书/知乎）或下载HTML/PNG文件

推荐 Skill 模板

项目精选了 8 个最受欢迎的 Skill 模板（按推荐度排序），每个都附带可直接在仓库中打开查看的 example.html：

  1. deck-guizang-editorial（推荐度第一）：贵藏编辑风格演示稿，融合杂志与电子墨水风格，包含10种锁定布局和5种配色方案（水墨/靛蓝瓷/森林墨/ kraft/沙丘），读起来像一本印刷的艺术杂志。

  2. deck-swiss-international（推荐度第二）：瑞士国际主义风格演示稿，16列网格布局，配有饱和色强调（克莱因蓝/柠檬黄/薄荷绿/安全橙），22种锁定布局，具有专业设计感。

  3. doc-kami-parchment（推荐度第三）：暖羊皮纸风格编辑文档，灵感来自 tw93/kami，采用#f5f4ed 背景和墨水蓝色调，提供比纯白色更舒适的阅读体验，适合长文章和报告。

  4. magazine-poster（推荐度第四）：报纸风格海报，超大衬线标题，双栏正文，6个编号部分，点图案奶油色背景，读起来像印刷的大幅报纸，而不是网页。

  5. video-hyperframes（推荐度第五）：Hyperframes/Remotion兼容的分镜脚本，包含6-10个连续的1920×1080帧，带有隐藏的时长和过渡标记，可直接交给HeyGen或Remotion渲染MP4。

  6. frame-glitch-title（推荐度第六）：故障艺术标题帧，青色/洋红色 chromatic 偏移，CRT扫描线，数据损坏字幕，角落有ASCII噪声，适合赛博朋克风格的英雄卡或视频过渡。

  7. vfx-text-cursor（推荐度第七）：视觉特效文字光标开场，光标"打字"穿过画布，每个字符都带有品红色×青色 chromatic 尾迹和定向漏光，适合电影级开场。

  8. frame-logo-outro（推荐度第八）：Logo片尾帧，Logo逐步组装并带有发光效果，标语上升，CTA出现，适合产品展示或品牌影片的收尾。

技术架构与团队背景

HTML-Anything 由 nexu-io 团队开发，基于其开源项目 open-design 构建，拥有40k+星标、200+贡献者的成熟技术底座，专注于Agent驱动的HTML创作，兼顾专业性、易用性与安全性。

核心技术特性

HTML-Anything采用本地优先架构，项目全程在本地运行，内容不上传至任何服务器，保障数据安全。同时支持多Agent集成，无缝衔接8种AI编码Agent CLI。生成的HTML具备响应式设计，自动适配不同设备尺寸。采用流式渲染技术，用户可实时查看生成过程。所有HTML均在iframe沙箱中预览，有效隔离本地环境，防止恶意代码影响。

四大开源基础

项目站在四个开源巨人的肩膀上：

项目名称主要贡献
nexu-io/open-design提供Agent检测层、设计系统模型和SKILL.md协议
mdnice/markdown-nice证明了内联CSS可以在微信和知乎上完美粘贴
gcui-art/markdown-to-image实现iframe到高DPI PNG的导出路径
alchaincyf/huashu-md-html提供了反AI垃圾内容的规范（如CJK优先字体栈、8px基线网格、对比度≥4.5、必须使用真实数据等）

Skill模板架构

75个Skill模板按交付形态分为9大类：

分类中文名称说明
deck演示稿20种幻灯片设计，包括瑞士国际风格、贵藏编辑风格等
doc文档杂志文章、羊皮纸风格文档等
prototype原型SaaS落地页、仪表盘、移动端原型等
poster海报报纸风格海报、营销海报等
social社交X/Twitter卡片、小红书卡片、Spotify风格卡片等
office办公PM规格书、工程手册、财务报告等
frame视频帧Hyperframes视频分镜脚本、特效帧等
vfx视觉特效文字光标动画、故障艺术效果等
mockup原型3D设备框架、手机界面等

Github：

github.com/nexu-io/htm…

写在最后

在 Agent 时代，我们确实不需要再手写文档了。

HTML-Anything 把 Markdown 从最终输出降格为写作过程的中间状态，让 HTML 回归它本该有的位置——给人类阅读的最终形态。

这个项目的理念很清晰：你的 Agent 写代码，你专注内容。

75 套专业模板、零配置、一键多平台发布，这些加起来，确实能让内容创作的最后一公里变得无比丝滑。

如果你也厌倦了在不同平台反复调整格式，如果你想让你的内容以最好的样子呈现给读者，不妨试试 HTML-Anything。

关注

如果这篇文章对你有帮助，欢迎点赞、在看、转发三连。我们会持续跟进 HTML-Anything 的最新动态，分享更多 AI 辅助设计的实战经验。

avatar
文章
阅读
粉丝