HTML Anything — AI 时代的 HTML 编辑器

让你的 AI Agent 直接写 HTML，输出精美的杂志、PPT、小红书卡片、海报等

前置条件

1. 安装依赖

cd tools/html-anything
pnpm install

2. 启动服务

pnpm dev

默认运行在 http://localhost:3000

使用方式

方式一：通过 Web 界面操作

1. 启动服务后打开 http://localhost:3000
2. 选择模板（如：小红书卡片、轮播图、海报等）
3. 粘贴内容 → 按 ⌘+Enter 生成
4. 一键导出 HTML/PNG 或复制到公众号/小红书

方式二：通过 API/命令行

本地 Agent 可直接调用 html-anything 生成内容。

可用模板（75+ 套）

🏆 推荐模板

模板	说明	适用平台
social-carousel	轮播图	小红书、抖音
card-xiaohongshu	小红书卡片	小红书
deck-xhs-post	小红书风格PPT	小红书
poster-hero	海报	全平台
ppt-keynote	PPT演示文稿	公众号
article-magazine	杂志文章	公众号、知乎
data-report	数据报告	公众号
card-twitter	推文卡片	微博、X
video-hyperframes	视频帧	抖音、视频号
social-x-post-card	社交卡片	全平台

完整模板分类

• 文章类: article-magazine, blog-post, docs-page
• PPT/演示: deck-pitch, deck-simple, deck-swiss-international, deck-tech-sharing 等
• 海报: poster-hero, magazine-poster
• 社交卡片: card-xiaohongshu, card-twitter, social-carousel, social-x-post-card
• 数据报告: data-report, finance-report, dashboard
• 视频: video-hyperframes, frame-* 系列, motion-frames
• 原型: prototype-web, web-proto-*, mobile-app
• 邮件: email-marketing
• 其他: resume-modern, invoice, kanban-board, pricing-page 等

工作流程（Agent 协作）

yisheng（内容输出）
  ↓ 养生/知识文字
html-anything（技术制作）
  ↓ 选择模板 → 生成 HTML
douyin-maker 或 main（发布）
  ↓ 导出/发布到各平台

注意事项

• HTML/css 是内联的，可直接粘贴到微信公众号编辑器
• 支持导出 2x 高清 PNG，适合小红书/抖音发图
• 生成的 HTML 文件可独立打开，无需额外依赖