HTML Anything：把本地 Agent 变成 75 个技能模板的 HTML 工作室

你的 Agent 会写 HTML，但放任不管它就会自由发挥：字体乱选、间距随意、lorem ipsum 占位。HTML Anything 是 Open Design 团队出品的 9k 星、Apache-2.0 本地编辑器，用 75 个技能模板解决这个问题——每个模板都是一个 SKILL.md 文件夹，里面写满了你的 Agent 必须遵守的硬性设计约束。

为什么这个 Skill 重要

它的前提是：Markdown 对写作者友好，HTML 对读者友好——而在 agentic 时代，HTML 由你的本地 Agent 来写，你完全不用碰 CSS。应用会自动检测你机器上已安装的 coding-agent CLI——其检测表格列出的九个 CLI 中就包括 Claude Code、Codex 和 Gemini CLI——并复用你已登录的会话。不需要 API key，也不需要新订阅。

这 75 个技能分布在 9 种交付面上：杂志长文、主题演讲、简历、海报、小红书卡片、推文卡片、网页原型、数据报告和 Hyperframes 视频。每个技能都在仓库里附带一个 example.html，生成之前你就能看到成品长什么样。

安装

快速开始只有四条命令：

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

打开浏览器，顶栏会显示它在你的 PATH 上找到的已登录 CLI。不需要 API key——你现有的 Claude、Cursor、Codex 或 Gemini 订阅就能干活。

实战：把一份数据导出变成数据报告

1. 在选择器里挑一个技能——按 mode（prototype、deck、frame、social、office、doc）和 scenario 过滤。做指标复盘就选 data-report 技能：它把 CSV 或 Excel 输入变成可视化的报告页面。
2. 把内容粘进左侧编辑区。编辑器接受 Markdown、CSV、TSV、JSON、SQL 或纯文本，表格数据在浏览器里解析——什么都不会上传。
3. 按 ⌘+Enter。应用会拉起你的 CLI，把 stdout 通过 SSE 流式传回，边生成边写进一个沙箱 iframe——你能看着页面一行行渲染出来，中途随时可以打断并重新提示。
4. 导出。一键渲染高清 PNG 发 X 或小红书，内联 CSS 后直接粘贴到微信公众号，或者下载一个自包含的 .html 文件。

第二个工作流：制作主题演讲

把选择器切到 deck 模式——20 个演示技能，包括瑞士国际主义版式，以及从 op7418/guizang-ppt-skill 完整引入的杂志油墨风编辑排版。粘入大纲、生成，然后用方向键翻页、导出 PDF。这些 deck 技能带着和其他技能相同的约束：8 px 基线网格、对比度不低于 4.5、CJK 优先的字体栈，以及一条禁止 lorem ipsum 的必须使用真实数据规则。

技巧

• 技能是文件夹而不是插件：每个技能是 next/src/lib/templates/skills/ 下的一个 SKILL.md 加一个 example.html，frontmatter 里带扩展字段（mode、scenario、surface、preview、design_system）。新增一个技能就是复制、修改、重启三步。
• 生成跑在你顶栏选中的 CLI 上——随时换 CLI，不需要重新授权，因为各用各的现有登录。
• 预览 iframe 是沙箱化的（allow-scripts allow-same-origin），Tailwind CDN 和 Google Fonts 正常工作，而 cookie 和 localStorage 与宿主页面隔离。
• 对于重复的格式——同样的周报、同样的 X 卡片——复用同一个技能，让每期的输出风格保持一致。

何时不用这个 Skill

这是一个本地单操作者的工具：它的 API 路由会以宽松参数拉起你的 CLI，默认只放行回环地址主机名，所以它不是共享 Web 服务。如果你需要像素级的品牌控制或真正的设计工具，请用设计工具——它做的是快速、够用、能发布的成品。它还要求同一台机器上有已登录的 coding-agent CLI；Web 层可以部署到 Vercel，但 Agent 始终留在你的笔记本上。

查看 排行榜 了解更多 skill。