HTML Anything

在 AI 辅助写作日益普及的今天，Markdown 因其简洁性成为首选草稿格式，但其有限的排版能力往往导致最终交付效果大打折扣——尤其是在微信、小红书、X (Twitter) 等富媒体平台上。HTML Anything 是一款基于本地 AI Agent 的 HTML 编辑器，旨在让 AI 直接生成“可交付”的 HTML，而非中间态的 Markdown。

它无需任何 API Key，直接复用你已登录的 Claude Code、Cursor、Codex、Gemini 等 CLI 会话，通过 75+ 预置技能模板，将文本瞬间转化为具备专业排版、响应式设计及视觉吸引力的单文件 HTML。无论是杂志文章、幻灯片、社交媒体卡片还是数据报告，一键即可导出为 PNG 或适配特定平台的 HTML 代码。

核心亮点：零密钥、多 Agent 兼容、交付级质量

1. 零 API 密钥，复用现有会话

• 无额外成本：不依赖独立的 LLM API，而是通过扫描系统 PATH，自动检测并调用你已安装的 AI 编码代理 CLI。
• 广泛兼容：支持 Claude Code, OpenAI Codex, Cursor Agent, Gemini CLI, GitHub Copilot CLI, OpenCode, Qwen Coder, Aider 等 8 种主流工具。
• 隐私安全：所有处理均在本地完成，数据不上传至第三方服务器，仅通过本地 CLI 与你信任的模型交互。

2. 75+ 技能模板，覆盖九大交付形态

遵循 Claude Code SKILL.md 规范，将模板组织为可组合的技能文件夹：

• 社交媒体：X 卡片、小红书风格卡片、Spotify 风格分享图。
• 演示文稿：20 种幻灯片模板（如 Swiss International, Hermes Cyber）。
• 网页原型：SaaS 落地页、仪表盘、移动 App 原型。
• 办公文档：PRD、OKR 看板、周报、发票、入职指南。
• 视觉特效：Hyperframes 视频帧、设备 Mockup。
• 硬约束设计：每个模板均内置 CJK 优先字体栈、8px 基线网格、柔和阴影及高对比度配色，确保输出即精品。

3. 流式渲染与沙盒预览

• 实时可见：通过 SSE (Server-Sent Events) 实时流式传输 HTML 生成过程，用户可看着 AI “绘制”页面，随时中断或调整。
• 安全隔离：生成的 HTML 在沙盒 iframe 中渲染，允许执行脚本以展示动态效果，但严格隔离 Cookie 与 LocalStorage，保障宿主环境安全。

4. 一键导出，无需二次排版

• 微信/知乎：自动内联 CSS，知乎数学公式转为图片占位符，直接粘贴即可发布。
• X/微博/小红书：利用 modern-screenshot 将页面渲染为高分辨率 (2×) PNG，自动复制到剪贴板。
• 通用下载：支持下载自包含的 .html 文件或 .png 图片，便于归档或邮件发送。

快速开始

1. 环境准备

确保已安装以下任一 AI Agent CLI 并登录：

• Claude Code (claude)
• Cursor Agent (cursor-agent)
• Gemini CLI (gemini)
• …或其他支持列表中的工具。

2. 安装与运行

git clone https://github.com/nexu-io/html-anything.git
cd html-anything
pnpm install
pnpm dev
# 访问 http://localhost:3000

3. 使用流程

1. 自动检测：打开页面，顶部栏会自动识别可用的 CLI。
2. 选择模板：从左侧技能库选择所需形态（如 “X Card” 或 “SaaS Landing”）。
3. 输入内容：粘贴你的 Markdown 草稿或自然语言指令。
4. 生成：按下 ⌘+Enter (Mac) 或 Ctrl+Enter (Win)。
5. 预览与导出：右侧实时显示渲染结果，点击导出按钮获取 PNG/HTML。

扩展与自定义

• 添加新技能：在 src/lib/templates/skills/ 下新建文件夹，编写 SKILL.md 定义提示词与约束，重启服务即可在界面中看到新模板。
• 调整硬约束：修改模板中的 CSS 变量或字体栈，以适应品牌规范。
• 集成工作流：可通过 CLI 调用方式，将 HTML Anything 嵌入自动化脚本中，实现批量内容生成。