用HTML设计杂志、演示文稿和海报

HTML Anything 是一个在本地机器上运行的 agentic HTML 编辑器：它复用你已登录的 coding-agent CLI（Claude Code、Cursor、Codex、Gemini CLI 等 9 种），把 Markdown、CSV、Excel、JSON、SQL 或纯文本笔记转成可直接发布的单文件 HTML。内置 75 个可组合模板，覆盖杂志文章、演示文稿、简历、海报、小红书与推文卡片、网页原型、数据报告和 Hyperframes 视频，可一键导出到微信公众号、X、微博、小红书、知乎，或下载为 .html / 高 DPI .png，全程无需 API 密钥。

技能介绍

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 密钥；该工具复用你已在终端登录的会话。

页面上标注这是一个组合 Skill，包含 81 个可安装子 Skill（模板目录为 75 个模板）。

适用场景

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

核心能力

75 个可组合的技能模板，覆盖 9 种交付物表面：杂志文章、演示文稿、简历、海报、小红书卡片、推文卡片、网页原型、数据报告和 Hyperframes 视频。
无需 API 密钥。 该工具自动检测你 PATH 上的 coding-agent CLI，并复用你已登录的会话；现有订阅负责工作，边际成本为 $0。
一键导出到微信公众号（内联 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）。

技能按两个维度组织：模式（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，选择器允许按模式和场景过滤。

导出目标

↔ 左右滑动查看完整表格

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

重要说明

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_ALL_HOST=1（在没有信任代理的情况下不要使用）。
Hyperframes 视频帧设计为交给 Remotion 渲染 .mp4；该工具不直接生成视频。
基于来源的 X / Twitter 卡片应用 TweetClaw 等工具捕获推文文本、作者、回复数、点赞数、浏览量、媒体 URL 和推文上下文，再把数据包粘贴到 social-x-post-card 或 card-twitter 技能中。HTML Anything 负责视觉渲染和导出，抓取、审批和发布保留在你自己的工作流程中。
该工具早期但真实。 闭环（检测 agent → 选择技能 → SSE 流 → 沙箱 iframe 预览 → 一键导出）在所有 8 个列出的 CLI 上端到端运行。如果出现故障，请使用你使用的 agent CLI 和输入打开一个 issue。

效果预览

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

↔ 左右滑动查看完整表格

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

模板目录（按模式）

网页原型与营销页面（prototype）：prototype-web、saas-landing、waitlist-page、pricing-page、dashboard、docs-page、blog-post、mobile-app、mobile-onboarding、gamified-app、dating-web、magazine-poster、poster-hero、web-proto-editorial、web-proto-brutalist、web-proto-soft、article-magazine、digital-eguide、resume-modern、email-marketing、wireframe-sketch。
演示文稿（deck）：deck-swiss-international、deck-guizang-editorial、deck-open-slide-canvas、deck-magazine-web、deck-hermes-cyber、deck-replit、deck-xhs-pastel、deck-xhs-white、deck-xhs-post、deck-tech-sharing、deck-product-launch、deck-pitch、deck-blueprint、deck-presenter-mode、deck-course-module、deck-dir-key-nav、deck-graphify-dark、deck-obsidian-claude、deck-safety-alert、deck-simple。
Hyperframes 视频帧 / VFX / 设备模型：frame-liquid-bg-hero、frame-data-chart-nyt、frame-flowchart-sticky、frame-glitch-title、frame-light-leak-cinema、frame-macos-notification、frame-logo-outro、motion-frames、video-hyperframes、sprite-animation、vfx-text-cursor、mockup-device-3d。
社交媒体分享卡片（social）：social-x-post-card、social-spotify-card、social-reddit-card、social-carousel、card-xiaohongshu、card-twitter、social-media-dashboard、social-media-matrix。
办公与运营（office / doc）：doc-kami-parchment、pm-spec、team-okrs、meeting-notes、weekly-update、kanban-board、eng-runbook、finance-report、invoice、hr-onboarding、data-report、live-dashboard、flowai-team-dashboard、ppt-keynote。

工作方式

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

架构概览：前端为 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 防御）；预览沙箱使用 srcdoc。部署方式为本地开发或 Vercel 一键部署 Web 层（agent 始终留在你的笔记本电脑上）。

功能状态：Agent 检测（8 个 CLI）、技能注册 + 选择器（75 个技能）、SSE 流式渲染、沙箱 iframe 预览、一键导出、CSV / Excel / JSON / SQL 格式自动检测均为稳定；多模板对比（生成 4 个选 1 个）与 Hyperframes 一键交给 Remotion 正在进行中；浏览器扩展、历史/版本差异/IndexedDB 存档、技能市场仍在计划中。

你需要提供

已安装并登录的 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。

使用示例

快速开始

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

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

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

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

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

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

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

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

页面上的「试试这样做」示例

使用 deck-guizang-editorial 模板，根据我的项目大纲生成一份具有杂志质感的演示文稿。

利用 doc-kami-parchment 模板，将这篇长文章渲染为具有羊皮纸质感的优雅阅读页面。

使用 social-x-post-card 模板，为我的最新技术更新设计一张精美的X平台分享卡片。