HTML Anything

HTML Anything 是一个在本地机器上运行的 agentic HTML 编辑器。它使用你现有的 coding-agent CLI（Claude Code、Cursor Agent、Codex、Gemini CLI、GitHub Copilot CLI、OpenCode、Qwen Coder、Aider 或 IBM Bob），将任何输入（Markdown、CSV、Excel、JSON、SQL 或纯文本笔记）转换为可直接发布的单文件 HTML 文档。输出可直接粘贴到微信、X（Twitter）、知乎，或下载为 .html 或 .png。无需 API 密钥；该工具复用你已在终端登录的会话。

适用场景

• 任何需要将笔记、数据或草稿转换为视觉精美的 HTML 页面，且无需手动编写 CSS 的人。
• 在微信、X、知乎、微博或小红书等平台发布内容，并希望一键导出的创作者。
• 需要快速原型、演示文稿、数据报告或社交媒体卡片的开发者、设计师、产品经理、市场营销人员和工程师。
• 制作演示文稿、会议记录、OKR 或操作手册，并希望由 agent 生成最终格式化输出的团队。

效果预览

以下是出现在选择器顶部的八个精选技能。每个技能都附带一个 example.html 文件，你可以直接从仓库中打开。

deck-guizang-editorial · deck · recommended: 1 杂志 × 电子墨水编辑风格演示文稿，灵感来自 op7418/guizang-ppt-skill — 10 种固定布局 × 5 种调色板（Ink / Indigo Porcelain / Forest Ink / Kraft / Dune）。读起来像印刷的艺术杂志，而不是幻灯片。	deck-swiss-international · deck · recommended: 2 瑞士国际风格演示文稿 — 16 列网格 + 一种饱和度强调色（Klein Blue / Lemon / Mint / Safety Orange），覆盖 22 种固定布局。冷静、理性、机构化。打开时让人感觉“这是设计师做的”。
doc-kami-parchment · doc · recommended: 3 暖羊皮纸编辑文档，灵感来自 tw93/kami。#f5f4ed 底色 + 墨蓝强调色 + 单一衬线字体 — 对于长文、报告和单页文档，是一种比纯白 Markdown 明显更平静的阅读表面。	magazine-poster · poster · recommended: 4 新闻纸周日版海报 — 超大衬线标题、双栏正文、六个编号段落、点纹奶油底色。读起来像印刷的宽幅报纸，而不是网页。
video-hyperframes · frame / video · recommended: 5 Hyperframes / Remotion 兼容的故事板 — 6–10 个连续的 1920×1080 帧，带有隐藏的持续时间和过渡标记以及自动播放脚本。直接交给 heygen-com/hyperframes 或 Remotion 渲染 .mp4。	frame-glitch-title · frame · recommended: 6 故障标题帧 — 青/品红色差偏移、CRT 扫描线、损坏数据字幕、角落 ASCII 噪点。赛博朋克英雄卡或视频过渡。
vfx-text-cursor · vfx · recommended: 7 VFX 文本光标开场 — 光标在画布上“打字”，每个字符显示时带有热粉色 × 青色色差痕迹和方向性光晕。放入一句引文，即可获得电影级的开场帧。	frame-logo-outro · frame · recommended: 8 Logo 结束帧 — Logo 逐块组装，带有发光绽放，标语升起，CTA 出现。产品发布或品牌短片的结束卡。

完整的技能目录（按模式组织）在下面的“核心能力”部分。

核心能力

• 75 个可组合的技能模板，覆盖 9 种交付物表面：杂志文章、演示文稿、简历、海报、小红书卡片、推文卡片、网页原型、数据报告和 Hyperframes 视频。
• 无需 API 密钥。 该工具自动检测你 PATH 上的 coding-agent CLI（Claude Code、Cursor Agent、Codex、Gemini CLI、GitHub Copilot CLI、OpenCode、Qwen Coder、Aider 和 IBM Bob），并复用你已登录的会话。
• 一键导出 到微信公众号（内联 CSS 粘贴）、X / 微博 / 小红书（2× PNG 通过 ClipboardItem）、知乎（LaTeX 图像占位符），或下载独立的 .html 或高 DPI .png 文件。
• 流式渲染 — agent 的输出通过 SSE 实时流式传输到 iframe 预览中。你可以在生成过程中中断并重新提示。
• 沙箱预览 — 生成的 HTML 在隔离的 iframe 中运行，阻止 cookie 和 localStorage 访问宿主页面。
• 格式自动检测 — 编辑器接受 Markdown、CSV、TSV、JSON、SQL 和纯文本。表格数据在客户端解析；不上传任何内容。
• 硬约束 内置于每个技能模板：CJK 优先字体堆栈、8px 基线网格、色彩对比度 ≥ 4.5、无纯黑或纯白，以及要求使用用户的真实数据（无 Lorem Ipsum）。

工作方式

1. 你提供输入 — 将 Markdown、CSV、Excel、JSON、SQL 或原始笔记粘贴到编辑器中。或者上传文件；所有内容在客户端处理。
2. 选择一个技能 — 从 75 个模板中选择，按模式（prototype、deck、frame、social、office、doc、mockup、vfx）和场景（design、marketing、engineering、product、finance、HR、personal）组织。
3. 按下 ⌘+Enter — 该工具启动你的本地 coding-agent CLI，传递技能模板和你的输入，并将 agent 的输出逐行流式传输到 iframe 预览中。
4. 你获得一个可直接发布的 HTML 文件 — 最终输出是一个单文件 HTML，包含内联 CSS，可立即导出到目标平台。

你需要提供

• 已安装并登录的 coding-agent CLI（Claude Code、Cursor Agent、Codex、Gemini CLI、GitHub Copilot CLI、OpenCode、Qwen Coder、Aider 或 IBM Bob）。
• 你的输入内容（Markdown、CSV、Excel、JSON、SQL 或纯文本）。
• 本地环境（安装 Node.js 和 pnpm）用于初始设置。

你会获得

• 一个自包含、样式完整的单文件 HTML 文档，可直接导出。
• 可选：页面的高 DPI PNG 截图。
• 一个包含 text/html 和 image/png 的剪贴板项目，用于直接粘贴到社交媒体平台。
• 能够下载 HTML 或 PNG。

使用示例

示例：将 Markdown 博客文章转换为杂志风格文章

1. 将你的 Markdown 内容复制到编辑器中。
2. 从选择器中选择 article-magazine 技能。
3. 按下 ⌘+Enter。
4. Agent 生成带样式的 HTML 页面。实时观看构建过程。
5. 点击“导出”按钮，选择“微信”或“下载 .html”。

示例：从会议记录创建演示文稿

1. 粘贴你的会议记录（Markdown 或纯文本）。
2. 选择如 deck-swiss-international 的演示文稿技能。
3. 按下 ⌘+Enter。
4. 在预览中使用 ←/→ 导航幻灯片。
5. 导出为 PDF 或直接到演示工具。

示例：为 X 生成社交媒体卡片

1. 使用 TweetClaw 等工具捕获推文文本、作者、回复数、点赞数、浏览量、媒体 URL 和推文上下文。
2. 将该数据包粘贴到编辑器中。
3. 选择 social-x-post-card 技能。
4. 按下 ⌘+Enter。
5. Agent 生成一张 1600×900 的卡片。点击“导出” → “X” 将 2× PNG 复制到剪贴板，直接粘贴到推文编辑器中。

选型说明

HTML Anything 按两个维度组织技能：

• 模式（Mode） — 输出类型：prototype（网页、落地页、仪表盘、简历、海报）、deck（演示文稿）、frame（单帧视频）、social（社交媒体卡片）、office（文档如 PM 规格、操作手册、OKR、发票）、doc（编辑文档）、mockup（设备框架）、vfx（视觉效果）。
• 场景（Scenario） — 使用场景：design、marketing、engineering、product、finance、hr、sale、personal。

每个技能的前置元数据包括 mode、scenario、surface、preview 和 design_system。选择器允许你按模式和场景过滤。

网页原型与营销页面（prototype 模式）

演示文稿（deck 模式）

Hyperframes 视频帧 & VFX & 设备模型（frame / vfx / mockup）

社交媒体分享卡片（social 模式）

办公与运营（office / doc 模式）

界面概览

以下是 HTML Anything 界面的截图。

入口视图 — 顶部栏显示已安装的 CLI，左侧是编辑器，中部是模板 + 设计系统选择器，右侧是实时 iframe 预览。同一界面可生成杂志、演示文稿、海报、网页原型和 Hyperframes 帧脚本。	75 个模板，可搜索和过滤 — 按模式（prototype / deck / frame / social / office / doc）× 场景（design / marketing / engineering / product / personal）选择。每个技能都附带一个 example.html，你可以直接从仓库打开，查看 agent 会生成什么。
SSE 流式传输 — agent 的标准输出 JSON 行被解析为文本变化，实时追加到 iframe 的 srcdoc 中。你逐行观看页面渲染。不喜欢进展？中断并重新提示 — 不会浪费完整的生成。	一键导出 — 微信（juice 内联 CSS）· X / 微博 / 小红书（modern-screenshot → 2× PNG → ClipboardItem）· 知乎（LaTeX 图像占位符）· 下载 .html · 下载 .png。直接粘贴，无需二次手动格式化。
演示文稿模式 — 20 个演示文稿技能，包括 Swiss International（Helvetica 网格极简主义）、Guizang Editorial（杂志墨水）、Open Slide Canvas（1920×1080 agent 原生）、Magazine Web、XHS Pastel、Hermes Cyber、Replit Style。←/→ 导航幻灯片，演讲者笔记，PDF 导出。	Hyperframes 帧 — 10 个动效帧脚本（液态英雄区、NYT 数据图表、便利贴流程图、故障标题、影院光晕、macOS 通知、品牌 Logo 结束卡、文本光标 VFX、3D 设备模型等），符合 heygen-com/hyperframes 规范；直接交给 Remotion 渲染 .mp4。

导出目标

重要说明

• 无需 API 密钥。 该工具复用你已通过 claude login、cursor login、gemini auth 等登录的会话。你的现有订阅负责工作；边际成本为 $0。
• Agent 检测 扫描 PATH，包括 ~/.local/bin、~/.bun/bin、/opt/homebrew/bin、~/.npm-global/bin — 这些是 GUI 启动的 Node 进程通常遗漏的目录。
• 安全性： /api/* 路由适用于单台机器上的单个操作员。默认只接受 127.0.0.1、localhost 和 ::1 的 Host 头。对于局域网访问，设置 HTML_ANYTHING_ALLOWED_HOSTS 环境变量。对于反向代理设置，设置 HTML_ANYTHING_ALLOW_ANY_HOST=1（在没有信任代理的情况下不要使用）。
• 流式渲染 允许你随时中断；你不会为不需要的完整生成付费。
• 每个技能中的硬约束 确保 CJK 优先字体堆栈、8px 基线网格、圆角、柔和阴影、无纯黑或纯白、色彩对比度 ≥ 4.5，以及要求使用用户的真实数据（无 Lorem Ipsum）。
• Hyperframes 视频帧 设计为交给 Remotion 渲染 .mp4；该工具不直接生成视频。
• 对于基于来源的 X / Twitter 卡片，你应该使用 TweetClaw 等工具捕获推文文本、作者、回复数、点赞数、浏览量、媒体 URL 和推文上下文，然后将该数据包粘贴到 social-x-post-card 或 card-twitter 技能中。HTML Anything 负责视觉渲染和导出；抓取、审批和发布保留在你自己的工作流程中。
• 该工具早期但真实。 闭环（检测 agent → 选择技能 → SSE 流 → 沙箱 iframe 预览 → 一键导出）在所有 8 个列出的 CLI 上端到端运行。如果出现故障，请使用你使用的 agent CLI 和输入打开一个 issue。

架构概览

• 前端： Next.js 16 App Router + Turbopack、React 19、Tailwind v4、zustand 状态管理。
• 服务端路由： GET /api/agents（检测）和 POST /api/convert（SSE 流式启动）。
• Agent 传输： child_process.spawn，每个 CLI 有一个 stdin/stdout 适配器。
• 浏览器端处理： juice（CSS 内联）、modern-screenshot（PNG 导出）、xlsx / papaparse（电子表格解析）、marked + highlight.js（Markdown 兼容输入）、dompurify（XSS 防御）。
• 预览沙箱： <iframe sandbox='allow-scripts allow-same-origin'> 使用 srcdoc。
• 导出目标： .html 独立文件、.png 高 DPI、ClipboardItem（text/html + image/png）、微信兼容内联 CSS。
• 部署： 本地开发（pnpm -F @html-anything/next dev）或 Vercel 一键部署 Web 层（agent 始终留在你的笔记本电脑上）。

快速开始

1. 克隆仓库：git clone https://github.com/nexu-io/html-anything
2. 进入目录：cd html-anything
3. 安装依赖：pnpm install
4. 启动开发服务器：pnpm -F @html-anything/next dev
5. 在浏览器中打开 http://localhost:3000。
6. 顶部栏自动检测你已登录的 coding-agent CLI。
7. 选择一个模板，粘贴你的内容，按下 ⌘+Enter。

无需 API 密钥。该工具复用你已登录的会话（Claude、Cursor、Codex、Gemini、Copilot 订阅均可）。

功能状态