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

技能	最佳用途	输出
prototype-web	通用网页原型	单页 HTML，1440×900 桌面
saas-landing	SaaS 落地页	英雄区 / 功能 / 定价 / CTA
waitlist-page	候补名单 / 早期访问页面	最小表单 + 社交证明
pricing-page	定价页面	多层对比表格
dashboard	管理 / 分析控制台	侧边栏 + 密集数据布局
docs-page	技术文档	三栏文档布局
blog-post	长文博客文章	编辑布局
mobile-app	iOS / Android 原型	iPhone 15 Pro 外壳
mobile-onboarding	应用引导流程	启动页 · 价值页 · 登录页三件套
gamified-app	游戏化应用	任务 · XP · 等级三件套
dating-web	约会 / 匹配仪表盘	左侧栏 · KPI · 30 天图表
magazine-poster	单页杂志海报	1080×1920
poster-hero	营销海报	单页展示海报
web-proto-editorial	编辑风格网页	衬线展示 + 网格
web-proto-brutalist	粗野主义网页	硬边、黑白、反网格
web-proto-soft	柔和 / 温暖网页	柔和阴影、圆角、温暖调色板
article-magazine	长篇杂志文章	A4 / 长页
digital-eguide	数字电子指南	封面 + 课程页
resume-modern	极简简历	A4 210×297mm
email-marketing	品牌产品发布邮件	居中单栏，表格回退
wireframe-sketch	手绘线框图	早期构思

演示文稿（deck 模式）

技能	最佳用途
deck-swiss-international	瑞士国际风格演示文稿
deck-guizang-editorial	编辑墨水风格演示文稿（来自 op7418/guizang-ppt-skill）
deck-open-slide-canvas	1920×1080 agent 原生画布（来自 1weiho/open-slide）
deck-magazine-web	杂志风格网页演示文稿
deck-hermes-cyber	Hermes Cyber 霓虹奢华
deck-replit	Replit 风格产品演练
deck-xhs-pastel	小红书柔色演示文稿
deck-xhs-white	小红书纯白演示文稿
deck-xhs-post	小红书单帖演示文稿
deck-tech-sharing	技术分享演示文稿
deck-product-launch	产品发布活动演示文稿
deck-pitch	投资者 Pitch
deck-blueprint	蓝图 / 路线图
deck-presenter-mode	演讲者笔记感知
deck-course-module	课程模块演示文稿
deck-dir-key-nav	方向键导航深度浏览
deck-graphify-dark	深色数据图形密集演示文稿
deck-obsidian-claude	Obsidian / Claude 风格笔记
deck-safety-alert	事故 / 安全简报
deck-simple	极简水平滑动演示文稿

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

技能	最佳用途
frame-liquid-bg-hero	液态背景英雄区
frame-data-chart-nyt	纽约时报风格数据图表
frame-flowchart-sticky	便利贴流程图
frame-glitch-title	故障标题卡
frame-light-leak-cinema	影院光晕
frame-macos-notification	macOS 通知吐司
frame-logo-outro	品牌 Logo 结束卡
motion-frames	通用动效设计帧
video-hyperframes	Hyperframes 帧脚本架构
sprite-animation	像素 / 8-bit 动画
vfx-text-cursor	文本光标 VFX
mockup-device-3d	3D 设备框架模型

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

技能	最佳用途
social-x-post-card	X / Twitter 引用卡片（1600×900）
social-spotify-card	Spotify Wrapped 风格卡片
social-reddit-card	Reddit 帖子卡片
social-carousel	3 张 1080×1080 轮播
card-xiaohongshu	小红书图文卡片
card-twitter	Twitter 拉取引用卡片
social-media-dashboard	社交媒体运营仪表盘
social-media-matrix	多平台内容矩阵

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

技能	场景	最佳用途
doc-kami-parchment	personal	暖羊皮纸编辑文档（来自 tw93/kami）
pm-spec	product	PM 规格文档 + 决策日志
team-okrs	product	OKR 评分表
meeting-notes	operation	会议决策日志
weekly-update	operation	团队周报
kanban-board	operation	看板快照
eng-runbook	engineering	事故处理手册
finance-report	finance	高管财务摘要
invoice	finance	单页发票
hr-onboarding	hr	角色入职计划
data-report	finance / product	CSV/Excel → 可视化数据报告
live-dashboard	operation	实时数据仪表盘
flowai-team-dashboard	operation	团队工作流仪表盘
ppt-keynote	personal	通用 Keynote 风格演示文稿

界面概览

以下是 HTML Anything 界面的截图。

入口视图 入口视图 — 顶部栏显示已安装的 CLI，左侧是编辑器，中部是模板 + 设计系统选择器，右侧是实时 iframe 预览。同一界面可生成杂志、演示文稿、海报、网页原型和 Hyperframes 帧脚本。	75 个技能，可搜索和过滤 75 个模板，可搜索和过滤 — 按模式（prototype / deck / frame / social / office / doc）× 场景（design / marketing / engineering / product / personal）选择。每个技能都附带一个 example.html，你可以直接从仓库打开，查看 agent 会生成什么。
实时 SSE 流式传输 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 视频帧 Hyperframes 帧 — 10 个动效帧脚本（液态英雄区、NYT 数据图表、便利贴流程图、故障标题、影院光晕、macOS 通知、品牌 Logo 结束卡、文本光标 VFX、3D 设备模型等），符合 heygen-com/hyperframes 规范；直接交给 Remotion 渲染 .mp4。

导出目标

平台	实现方式	粘贴行为
微信公众号	juice 内联 CSS + data-tool 标记	粘贴到编辑器，零重新格式化
知乎	与微信相同 + <mjx-container> → data-eeimg LaTeX 图像占位符	公式在上传后渲染
X / 微博 / 小红书	modern-screenshot → 2× PNG → ClipboardItem	直接放入编辑器
下载 .html	单文件，资源内联	在任何浏览器中打开
下载 .png	高 DPI 截图	任意分享

重要说明

• 无需 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 订阅均可）。

功能状态

功能	状态
Agent 检测（8 个 CLI）	✅ 稳定
技能注册 + 选择器（75 个技能）	✅ 稳定
SSE 流式渲染	✅ 稳定
沙箱 iframe 预览	✅ 稳定
一键导出微信 / X / 知乎 / .html / .png	✅ 稳定
CSV / Excel / JSON / SQL 格式自动检测	✅ 稳定
多模板对比（生成 4 个，选 1 个）	🛠 进行中
Hyperframes → .mp4 一键交给 Remotion	🛠 进行中
浏览器扩展（在任意页面选择 → 转换）	⏳ 计划中
历史 / 版本差异 / IndexedDB 存档	⏳ 计划中
技能市场（install <github-repo>）	⏳ 计划中