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

将Markdown瞬间转化为专业级网页、演示文稿或社交媒体视觉内容。

详细介绍

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）。

工作方式

你提供输入 — 将 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，可立即导出到目标平台。

你需要提供

已安装并登录的 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 博客文章转换为杂志风格文章

将你的 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 复制到剪贴板，直接粘贴到推文编辑器中。

选型说明

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 个模板，可搜索和过滤 — 按模式（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 。

导出目标

平台
实现方式
粘贴行为

微信公众号
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 始终留在你的笔记本电脑上）。

快速开始

克隆仓库： 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 订阅均可）。

功能状态

功能
状态

Agent 检测（8 个 CLI）
✅ 稳定

技能注册 + 选择器（75 个技能）
✅ 稳定

SSE 流式渲染
✅ 稳定

沙箱 iframe 预览
✅ 稳定

一键导出微信 / X / 知乎 / .html / .png
✅ 稳定

CSV / Excel / JSON / SQL 格式自动检测
✅ 稳定

多模板对比（生成 4 个，选 1 个）
🛠 进行中

Hyperframes → .mp4 一键交给 Remotion
🛠 进行中

浏览器扩展（在任意页面选择 → 转换）
⏳ 计划中

历史 / 版本差异 / IndexedDB 存档
⏳ 计划中

技能市场（ install <github-repo> ）
⏳ 计划中

试试这样做

• 使用 deck-guizang-editorial 模板，根据我的项目大纲生成一份具有杂志质感的演示文稿。
• 利用 doc-kami-parchment 模板，将这篇长文章渲染为具有羊皮纸质感的优雅阅读页面。
• 使用 social-x-post-card 模板，为我的最新技术更新设计一张精美的X平台分享卡片。

作者：nexu-io 自媒体人 / 设计师 ｜ GitHub Stars 8K ｜ 标签：写作文案 图片设计 已认证 开源许可: Apache

来源：colaos.ai ｜ Skill ID：html-anything