HTML Anything：给 AI 编程工具装上"设计大脑"

你有没有过这样的经历：费了好大劲和 AI 编程工具聊清楚了需求，它吭哧吭哧生成了一大段代码，结果打开一看——排版乱、配色土、图片位置歪七扭八，设计师朋友看了直摇头？

HTML Anything 就是来解决这个问题的。它不是一个传统意义上的"设计工具"，而是一个专门给 AI 编程工具（Claude Code、Cursor Agent、Codex……）使用的设计增强层。你告诉它"我要做一个小红书风格的推广卡片"，它就能通过 Agent 自动生成一张可以直接发出去、视觉质量过关的 HTML 页面。

图1：HTML Anything 项目主页横幅

背景故事：从"能用"到"好看"的行业痛点

这个项目出自 nexu-io 团队之手，该团队同时维护着另一个明星项目 Open Design（40k★，200+ 贡献者），那是一个生产级别的设计系统工具链。HTML Anything 可以看作是 Open Design 的"Agent 专版"——将设计系统的能力以 Skill 模板的形式，注入到各类 AI 编程工具的工作流中。

2024 年下半年开始，"vibe coding"（直觉编程，靠自然语言描述驱动 AI 生成）蔚然成风。但这类工作流有一个普遍痛点：生成的内容质量取决于 prompt，而普通用户的 prompt 很难精确描述设计意图。HTML Anything 的思路是：把设计知识封装成 75 个可组合的 Skill 模板，AI Agent 在生成内容时可以调用这些模板，确保输出在视觉上始终保持在一定水准以上。

核心玩法：9 大输出形态 × 75 个设计技能

HTML Anything 的工作方式很直接：用户（或 AI Agent）选择一个输出形态（Surface），再选择一个 Skill 模板，描述需求，AI 就会生成对应的 HTML 文件。

支持的 9 种输出形态包括：

• Magazine：长文杂志排版，适合公众号风格内容
• Deck：幻灯片演示，适合 PPT 替代场景
• Poster：海报设计，适合社交媒体推广
• XHS / Tweet：小红书卡片或 Twitter/X 推文配图
• Prototype：可交互网页原型
• Data Report：数据报告页面
• Hyperframes：视频帧动画页面（最新加入）

图2：Skill 模板选择界面，可以看到 Featured 推荐区域的精选模板

75 个 Skill 模板并非简单的 HTML 片段，而是经过设计系统规范化的完整解决方案。每个 Skill 包含：模板 HTML 结构、预设配色方案、排版规则、示例输出。以 deck-guizang-editorial 这个 Skill 为例，它模仿高端杂志的 e-ink 风格，提供 10 种锁定布局和 5 套配色（Ink / Indigo Porcelain / Forest Ink / Kraft / Dune），生成结果看起来就像一本精心排版的电子杂志。

图3：deck-guizang-editorial Skill 输出效果——e-ink 杂志风格幻灯片

技术内幕：本地优先，零 API 成本

HTML Anything 最值得注意的设计哲学是本地优先（Local-first）。它不依赖自己的后端服务，也不要求用户申请任何 API Key。支持的 8 款主流 AI 编程工具全部通过本地命令行接口（CLI）调用：

编程工具	状态
Claude Code	✅ 官方支持
Cursor Agent	✅ 官方支持
Codex (OpenAI)	✅ 官方支持
Gemini CLI	✅ 官方支持
GitHub Copilot CLI	✅ 官方支持
OpenCode	✅ 社区支持
Qwen Coder	✅ 社区支持
Aider	✅ 社区支持

这意味着：只要你的机器上装好了其中一个工具，就能直接使用 HTML Anything，不需要注册任何账号。这个设计对于企业内网环境尤其友好——数据不经过任何第三方服务器，HTML 文件完全在用户本地生成。

从技术架构来看，项目采用 Next.js（App Router）+ TypeScript 构建前端界面，使用 Vitest 做单元测试，通过 pnpm workspace 管理多包结构，依赖相对轻量，不需要 GPU 资源。

图4：Agent 流式生成 HTML 的过程，用户可以实时看到内容逐步生成

一键导出：打破平台孤岛

AI 生成的 HTML 最终要发出去才能产生价值。HTML Anything 内置了导出适配层，支持一键发布到：

• 微信公众平台（通过草料二维码等工具绕过了平台对外链的限制）
• X / Twitter
• 知乎
• 直接下载 HTML 文件
• 导出为 PNG 图片

这解决了 AI 生成内容"最后一公里"的问题——很多设计工具能生成漂亮页面，但导出到不同平台需要手动调整，HTML Anything 则把这个过程自动化了。

图5：导出面板，支持多种格式和平台

幻灯片模式：Deck 的独特优势

在所有 Surface 中，Deck 模式最值得单独关注。它区别于传统幻灯片工具的地方在于：

第一，AI 原生设计。每张幻灯片的内容、布局、配色都由 AI 根据 Skill 模板生成，不需要用户手动调整格式。

第二，瑞士国际主义风格支持。内置的 deck-swiss-international Skill 提供了严格的网格系统、大量留白和 Helvetica 式的无衬线字体选择，生成结果具有很强的设计感。

图6：Deck 模式的瑞士国际风格幻灯片输出

图7：deck-swiss-international Skill 输出效果——瑞士国际主义风格

局限与争议

没有工具是完美的，HTML Anything 也不例外。

设计风格有限。75 个 Skill 覆盖了主流场景，但如果你需要非常独特的视觉风格（比如赛博朋克、特定影视 IP 风格），现有模板可能无法满足，需要深度定制 HTML/CSS。

AI 模型能力依赖。最终输出质量高度依赖调用的 AI 编程工具本身的能力——Claude Code 生成的结果和 Qwen Coder 相比可能会有明显差距，用户不能期待所有 Agent 都有同等的设计理解能力。

不适合纯设计师。这个工具的核心用户是"会用 AI 编程工具的开发者/写作者"，如果你是完全不懂命令行、不了解 HTML/CSS 的设计师，使用门槛仍然存在。

行业意义：设计工具的 Agent 化趋势

HTML Anything 的出现反映了一个更广泛的趋势：专业工具正在被 AI Agent 重构。传统设计工具（Figma、PowerPoint）需要人主动操作，而 HTML Anything 尝试的是"让 AI 主动产出符合设计规范的成品"。

2025 年，设计系统工具赛道正在快速增长。Open Design（40k★）的成功证明了这方面的需求是真实存在的。HTML Anything 的 5366 颗星（还在快速增长）在相对细分的市场中已经相当可观，表明"AI 编程工具 × 设计系统"的交叉需求正在被验证。

如果你是一个经常用 AI 编程工具写内容的人（开发者、写作者、内容创作者），HTML Anything 值得放进你的工具箱。它不会替代 Figma，但可以让 AI 生成的内容在视觉上更体面。

图8：Hyperframes 视频帧动画模式——最新的输出形态