AI 应用人工智能AI AgentAI 写作媒体生成【免费下载链接】html-anything✨ The agentic HTML editor — your local AI agent writes the HTML, you ship it. 75 Skills × 9 Surfaces (magazine · deck · poster · XHS / tweet · prototype · data report · Hyperframes) ️ Sandboxed preview · 1-click to WeChat / X / Zhihu / HTML / PNG Zero API key — Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider.项目地址https://gitcode.com/gh_mirrors/ht/html-anything点击查看免费下载导读HTML Anything 是一个Agent 时代的 HTML 编辑器——你不再亲手排版而是由本地已登录的 Claude Code、Cursor、Codex 等 coding-agent CLI 直接产出读者真正想看的 HTML。本文基于仓库中文 README 与源码实现完整拆解其零 API Key 的 Agent 自动识别、75 套 Skill 模板、SSE 流式渲染、沙箱预览与一键发布五大机制读完即可在本地跑通粘贴内容 → 选模板 → ⌘Enter → 发布到公众号 / 推特 / 知乎的完整闭环。项目定位HTML 是给人读的成品Markdown 只是中间过程HTML Anything 的核心理念源于一个简单观察Claude Code 团队已经不再用 Markdown 写文档而是全部改成 HTML。理由非常直白——Markdown 是写给作者的HTML 是写给读者的维度MarkdownHTML体验给作者爽给读者爽排版受模板限制排版无限自由传播截图发推丑得离谱直接是好看的图发布二次粘贴公众号要重排一键格式转换但写 HTML在过去意味着写 CSS、调字号、对齐网格、做响应式——普通用户不会设计师懒得作者更没耐心。HTML Anything 做的事情是让 AI 在你按下⌘Enter之后把任何输入Markdown / CSV / Excel / JSON / SQL / 草稿……立刻变成一份可交付的 HTML然后一键去到公众号 / 推特 / 知乎 / 任何地方。所谓可交付生成完就是受众实际看到的样子不需要我先这样、待会再调。从仓库一览表可以看到这套设计的关键承诺详见 README.zh-CN.md本地 coding-agent CLI启动时扫描PATH含~/.local/bin、~/.bun/bin、/opt/homebrew/bin、~/.npm-global/bin等 GUI 启动会漏掉的目录顶栏一键切换零 API Key直接复用你已经在终端登录好的claude login、cursor login、gemini authsession订阅复用 0 边际成本75 套 Skill 模板 × 9 类可交付场景杂志文章、Keynote PPT、简历、海报、小红书、推特卡、Web 原型、数据报告、Hyperframes 视频一键发布公众号粘贴 0 调整、2× PNG 拖入推文、知乎公式自动渲染、单文件.html/ 高 DPI.png下载流式渲染POST /api/convert走 SSE等待时间 看 AI 现场写代码的体验沙箱预览iframe[sandboxallow-scripts allow-same-origin]隔离运行用户 HTML。30 秒上手本地启动与第一个生成git clone https://github.com/nexu-io/html-anything cd html-anything pnpm install pnpm -F html-anything/next dev # → http://localhost:3000打开浏览器后顶栏会自动列出你电脑上已经登录好的本地 code agent选一个模板、粘贴内容、按 ⌘Enter 即可。全程无需 API Key——直接复用你已有的 Claude / Cursor / Codex 订阅。Workspace 结构仓库是一个很小的 pnpm workspace工作区定义见 pnpm-workspace.yamlnext/是完整 Next 应用包名html-anything/nexte2e/是浏览器测试包html-anything/e2e也是 Playwright 用例的唯一真相源根目录只负责 CI、文档和scripts/guard.ts根 package.json 有意不代理 app 或 e2e 命令。从仓库根目录运行 package 命令pnpm exec tsx scripts/guard.ts pnpm -F html-anything/next dev pnpm -F html-anything/next typecheck pnpm -F html-anything/next test pnpm -F html-anything/next build pnpm -F html-anything/e2e typecheck pnpm -F html-anything/e2e test自动识别本地 Agent零配置驱动 9 大 CLI进入主页时浏览器会调用GET /api/agents实现见 next/src/app/api/agents/route.tsserver 端扫描PATH及一系列工具链目录识别到哪些 CLI 在场就把哪些放进顶栏。Agent检测命令调用方式Claude Codeclaudeclaude -p --output-format stream-jsonOpenAI Codexcodexcodex exec --json --sandbox workspace-writeCursor Agentcursor-agentcursor-agent --print --output-format stream-json --force --trustGemini CLIgeminigemini --output-format stream-json --yoloGitHub Copilot CLIcopilotcopilot --allow-all-tools --output-format jsonOpenCodeopencode-cli/opencodeopencode run --format json --dangerously-skip-permissions -Qwen Coderqwenqwen --yolo -Aideraideraider --no-pretty --no-stream --yes-always --message-file -IBM Bobbobbob --output-format stream-json --hide-intermediary-output源码层面的检测实现从 next/src/lib/agents/detect.ts 可以看出这套检测远比扫 PATH更周全工具链目录兜底除了PATH本身还会探测~/.local/bin、~/.bun/bin、~/.volta/bin、~/.asdf/shims、~/.cargo/bin、~/.npm-global/bin、~/.npm-packages/bin、/opt/homebrew/bin、/usr/local/bin等Windows 下额外覆盖 Scoop shims 与%AppData%/npm。这正是很多 GUI 启动的进程扫不到这些 CLI 的原因环境变量覆盖每个 agent 定义envOverride如CLAUDE_BIN、GEMINI_BIN用户可用环境变量显式指定 binary 路径fallbackBins 别名同一 argv 协议的不同名字可互认例如opencode-cli与opencode、openclaude作为claude的 fallback协议抽象每个 agent 声明protocolstdin/argv/argv-message/acp/pi-rpc决定 prompt 怎么喂进去、输出怎么解析。其中acpHermes / Kimi / Devin / Kiro / Kilo / Vibe和pi-rpcPi目前是检测-only——检测到会在 UI 里展示安装指引但调用时会抛出明确的UnsupportedAgentProtocolError见 next/src/lib/agents/argv.ts引导用户换用已支持协议的 agent模型下拉每个 agent 附带一份fallbackModels精选模型列表首个恒为DEFAULT_MODEL不传--model让用户 CLI 自己的配置生效其余为经过验证的模型 id。从源码结构看detect.ts中实际注册的 agent 条目还包含 OpenClaw走argv-message协议、调用前通过openclaw agents list探测 agent id、Qoder、CodeWhale / DeepSeek TUI走argv位置参数协议等README 的 9 CLI 表格是面向常见场景的精简呈现。关键设计唯一 spawn 子进程的是 server route这一层的设计直接借鉴了nexu-io/open-design和multica-ai/multica的 agent 检测策略唯一被 spawn 子进程的进程是 server route业务进程不直接 spawnCLI 的 stdin / stdout 用 JSON-line 协议复用每个 CLI 一个轻量 adapter统一维护在 next/src/lib/agents/argv.ts。只要你已经在终端里登录过对应的 CLI例如claude login、cursor loginHTML Anything 直接复用同一个 session不要求再贴一遍 API Key。75 套 Skills文件夹即模板75 套 skill 在 next/src/lib/templates/skills/ 下开箱即用。每个 skill 是一个文件夹遵循 Claude CodeSKILL.md约定并扩展了 frontmatter 字段mode·scenario·surface·preview·design_system。README 顶部推荐的 8 个精选 skill 都附带example.htmlrepo 里双击就能看效果不用登录、不用启服。picker 用两个维度组织mode——prototypeweb / SaaS landing / dashboard / 数据报告 / 简历 / 文档·deck20 套幻灯片 skill·frame10 套 Hyperframes 视频帧脚本·social4 套社交平台分享卡·officePM / 工程 / 财务 / HR / 行政 表格化文档scenario——design/marketing/engineering/product/finance/hr/sale/personal用于在 picker 里分组展示。Skill 的加载机制从 next/src/lib/templates/loader.ts 看每个 skill 文件夹的标准结构是src/lib/templates/skills/id/ SKILL.md — frontmattername / zh_name / scenario / recommended … prompt body example.md — 可选示例输入内容 example.html — 可选预渲染预览picker 里直接展示新增 skill 新增文件夹无需改任何 TS 代码。API routes 会重新扫描磁盘客户端 refetch/api/templates即可开发模式下元数据缓存会被绕过next dev重启后 picker 自动发现frontmatter 解析是零依赖的正则匹配key: value支持字符串、整数与单行数组字面量tags: [a, b]recommended字段控制推荐 / Featured分组排序数字越小排得越靠前README 中 deck-guizang-editorial 为recommended: 1deck-swiss-international 为recommended: 2依此类推到 frame-logo-outro 的recommended: 8marketplace 安装的 skill 合并进同一注册表用户安装的 skill 位于~/.html-anything/skills/以命名空间 idpkg-owner-repo--originalId并入listSkills()返回列表。两个代表性 skill 的约束密度以 deck-swiss-international/SKILL.md 为例其 frontmatter 声明了scenario: marketing、recommended: 2、aspect_hint: 16:9 横向翻页正文给出了22 个锁死版面S01 Cover 到 S22 Image Hero、4 套主题Klein Blue IKB / Lemon Yellow / Lemon Green / Safety Orange不许混用、不许改 hex以及铁律级设计细节全程border-radius: 0、1px hairline 边框、16 列网格grid-template-columns: repeat(16, 1fr)、Inter Tight / Noto Sans SC / JetBrains Mono 字体、极端字号反差、← / → 切换页并 hash 同步、数字必须来自用户输入。而 frame-glitch-title/SKILL.md 则展示了 frame 类 skill 的画布规范1920×1080 画布、cyan#00f0ff与 magenta#ff2bd6双层像散伪影、clip-path 切片 keyframes错峰故障、CRT 扫描线、SVGrgbShift滤镜、prefers-reduced-motion降级——每个 SKILL.md 都是一份可被 AI 严格执行的设计规格书。六个核心想法源码级解读1 · 我们不发 agent你装的就够好主界面进来时浏览器调/api/agentsserver 端扫一遍PATH含 GUI 启动会丢的工具链目录识别到哪些 CLI 在场就把哪些放进顶栏。每个 CLI 对应一个 adapter参数 stdin 协议 输出解析器在 next/src/lib/agents/argv.ts 里集中维护。整套思路直接借鉴nexu-io/open-design和multica-ai/multica的 agent-detection 模型。2 · Skills 是文件夹不是插件遵循 Claude CodeSKILL.md约定——SKILL.mdassets/references/example.html。drop 一个文件夹到 next/src/lib/templates/skills/重启 dev serverpicker 里就出现。例如deck-guizang-editorial直接 vendor 自op7418/guizang-ppt-skill保留原始 LICENSE 与署名。3 · 强制约束让 AI 不再 freestyle每个模板都硬编码了中文优先字体栈Noto Sans/Serif SC/ 思源黑体英文用Inter/Manrope8 px 基线网格所有间距、行高、字号都是 8 的倍数圆角 / 投影 / 不用纯黑纯白——视觉上去 AI-slop 化颜色对比 ≥ 4.5重要交互必有:focus态必须使用用户提供的真实数据禁止 lorem ipsum。这些约束的底座其实是 next/src/lib/templates/shared.ts 里的SHARED_DESIGN_DIRECTIVES——它被拼到每一个skill 的 prompt 前面包含三类铁律内容驱动数量最高优先级模板只定义可用版面 / 风格 / 配色 / 字体 / 组件库不定义slide / 帧 / 卡片 / section 的数量输出数量完全由用户内容的实际长度和信息结构决定必须完整覆盖每一个要点不许总结压缩硬性技术要求禁止使用 Write / Edit / Bash 等任何文件系统工具HTML 必须流式输出在回复正文落盘由前端负责文档以!DOCTYPE html开头head中通过 CDN 引入 Tailwind v3 Play 与 Google Fonts不引用外部图片 URL第一个字符必须是设计准则中文优先Noto Sans SC/Noto Serif SC英文Inter/Manrope1 主色 2 中性色 至多 1 强调色不使用#000/#fff而改用#0a0a0a/#fafafa段落最大宽度 65ch圆角统一rounded-xl/2xl对比度 ≥ 4.5中英文混排留半角空格盘古之白。assemblePrompt({ body, content, format })就是把这个共享指令 各 skill 的正文 【输入格式】【用户内容】拼成最终 prompt 的规范形态调用点见 next/src/app/api/convert/route.ts。灵感来自alchaincyf/huashu-design的 Junior-Designer mode 反 AI-slop checklist。约束就是 prompt 的一部分写进每个SKILL.md。4 · 流式渲染 看着 AI 现场画POST /api/convert走 SSE。Agent 的 stdout 是一行行 JSON-lineserver 抽出其中的text字段作为 SSE event 推下去客户端 append 进iframe[srcdoc]。整个过程跟在终端里看 AI 写代码一模一样只不过最终产物是好看的 HTML 而不是 markdown。不满意可以打断不浪费一整次 token。从源码看这条链路有三层值得一提的工程细节每个 CLI 一个状态化解析器makeParser→ next/src/lib/agents/argv.ts按 agent 分派解析 JSON-line 信封产出delta增量文本、metausage / model / session 等元数据、html工具调用中的完整 HTML、noise四类事件流式去重Claude / Cursor / Gemini / Qoder 在--include-partial-messages下会同时发出细粒度text_delta和最终的完整assistant消息解析器通过跨行状态sawStreamEventText保留流式 token、跳过重复的 assistant 消息体否则每次运行输出会写两遍HTML 抢救rescueHtmlFromToolUse部分 agent 无视流式输出 HTML的指令改用Write工具把文档写进.html文件只在助手文本里留一句已输出至 …。解析器会从tool_use的 input 里把真正的 HTML 抢救出来仅当目标是.html/.htm后缀作为html事件替换而非追加此前流出的内容——预览仍然拿到真实成品调用层next/src/lib/agents/invoke.ts用child_process.spawn拉起本地 CLIstdin 协议 agent 通过child.stdin.write(prompt)喂提示词argv/argv-message协议则分别走位置参数与--message text标志Windows 下对.cmd/.batshim 走 shell spawnprompt 不经 shell 插值无注入风险AbortSignal支持中断时SIGTERM子进程。5 · 一键发布到平台 0 二次排版微信公众号juice内联 CSS data-tool标记 → 粘进编辑器直接显示不丢样式推特 / 微博 / 小红书modern-screenshot把 iframe 渲染成 2× PNG →ClipboardItem→ 直接粘到推文 / 图床知乎同上 mjx-container→data-eeimgLaTeX 图占位知乎不支持 KaTeX 直渲必须转成图下载.html/下载.png自包含单文件任意分享。实现思路参考自mdnice/markdown-nice和gcui-art/markdown-to-image。源码层面next/src/lib/export/wechat.ts 展示了公众号链路的完整细节用 DOMParser 提取body内容、收集全部style、给顶层子元素打上data-toolhtml-anything微信据此信任样式、juice.inlineContent内联 CSS保留!important与伪元素最终包进section />6 · 沙箱 iframe 安全 隔离用户输出的 HTML 总是放进iframe[sandboxallow-scripts allow-same-origin]里。第三方脚本可以跑Tailwind CDN / Google Fonts / 用户自定义动效但 cookie 和 localStorage 走 iframe 自己的 origin不污染宿主页面。打开 devtools 也只看 iframe 自己的 DOM调试体验和写一个独立 HTML 文件一致。架构一览┌─────────────────────── Browser (Next.js 16) ──────────────────────┐ │ Editor / 上传 · 顶栏 agent picker · 模板 picker · iframe 预览 │ └─────────────┬──────────────────────────────────┬──────────────────┘ │ ⌘Enter │ ▼ ▼ ┌─────────────────────┐ ┌──────────────────────┐ │ GET /api/agents │ │ POST /api/convert │ │ 扫 PATH 检测 CLI │ │ SSE 流式调用 agent │ └─────────────────────┘ └──────────┬───────────┘ │ spawn stdin pipe ▼ ┌────────────────────────────────────┐ │ 你本地的 code agent │ │ claude / codex / cursor-agent / │ │ gemini / copilot / opencode / │ │ qwen / aider │ │ → 复用你已登录的 session │ └────────────────────────────────────┘ │ ▼ stdout JSON-line ──► SSE event │ ▼ iframe srcdoc append实时刷新 │ ⌘C 复制 → ClipboardItem ⌘S 下载 → .html / .png各层技术栈与仓库源码逐一对应层技术栈FrontendNext.js 16 App Router Turbopack · React 19 · Tailwind v4 · zustand 全局状态Server routesGET /api/agents检测next/src/app/api/agents/route.ts·POST /api/convertSSE 流式 spawnnext/src/app/api/convert/route.tsAgent transportchild_process.spawn· 每个 CLI 一个 stdin/stdout adapternext/src/lib/agents/argv.ts浏览器端处理juiceCSS 内联·modern-screenshotPNG 截图·xlsx/papaparseCSV/Excel 解析·markedhighlight.jsmarkdown 兼容输入·dompurifyXSS 防御预览沙箱iframe[sandboxallow-scripts allow-same-origin]srcdoc导出.html单文件 ·.png高 DPI · ClipboardItem 富文本 / image/png · 微信兼容 inline CSSnext/src/lib/export/部署本地pnpm -F html-anything/next dev· Vercel 一键部署 web 层agent 永远跑在本地一键发布到平台速查平台实现粘贴效果微信公众号juice内联 CSS data-tool标记0 调整直接显示知乎同上 mjx-container→data-eeimgLaTeX 图占位公式自动渲染推特 / 微博 / 小红书modern-screenshot把 iframe 渲染成 2× PNG → ClipboardItem直接粘到推文下载.html单文件双击打开任意分享下载.png高 DPI 截图任意分享另外Deck 模式20 套 PPT skill与 Hyperframes 视频帧10 套帧脚本是仓库截图展示的两条特色交付线前者支持 ← / → 切页、演讲者备注与打印 PDF后者符合heygen-com/hyperframes的帧脚本规范可直送 Remotion 渲染 mp4。当前进度与模块状态README 自述早期但能用识别 agent → 选 skill → SSE 流式渲染 → sandboxed iframe 预览 → 一键导出这条闭环已经跑通。模块状态如下模块状态Agent 自动识别9 个 CLI✅ 稳定Skill 注册表 picker75 个 skill✅ 稳定SSE 流式渲染✅ 稳定Sandboxed iframe 预览✅ 稳定一键复制到公众号 / 推特 / 知乎 /.html/.png✅ 稳定CSV / Excel / JSON / SQL 格式自动识别✅ 稳定多模板对比同一份生成 4 张选 1 张落地 进行中Hyperframes →.mp4一键交给 Remotion 渲视频 进行中浏览器扩展选中网页 → 转 HTML 模板⏳ 计划中历史记录 / 版本对比 / IndexedDB 存档⏳ 计划中Skill 市场install github-repo⏳ 计划中值得注意/api/convert的请求体还支持editFromHtmleditFromContentnext/src/app/api/convert/route.ts当任务已有生成结果时走最小化差异编辑——要求 agent 仅根据新旧内容差异替换文字/数据节点保留原 HTML 的 head、字体、配色、布局与动效既省输出 token 又防止跨轮次创意漂移。这属于 README 未展开、但从源码结构可见的进阶能力。贡献指南面积小、影响大贡献入口按你想加的东西对号入座完整门槛见 CONTRIBUTING.zh-CN.md新 skill在 next/src/lib/templates/skills/ 加一个文件夹带SKILL.mdexample.html可选assets/和references/。pnpm -F html-anything/next dev重启后 picker 自动发现。SKILL.mdfrontmatter 必须设mode·scenario·surface·preview·design_system——抄一个邻居改就行新 coding-agent CLI 适配在 next/src/lib/agents/argv.ts 加一个分支覆盖识别用的 binary 名字、argv 拼装、stdin/stdout 协议、流式 parser。检测路径走 next/src/app/api/agents/spawn 走 next/src/app/api/convert/新平台导出在 next/src/lib/export/ 加一个模块放在wechat.ts/image.ts/clipboard.ts隔壁并在导出菜单里加按钮打磨某个SKILL.md加强硬约束CJK 字体栈、8 px 基线、对比度 ≥ 4.5、必须用真实数据加五维自检换更合适的调色板。最高杠杆的贡献往往就是一个文件夹、一份 Markdown、或者一段 PR-sized adapter。如果本机跑出问题提 issue 时附上用的哪个 agent CLI 输入内容这类 issue 推进最快。依赖与渊源这个 repo 借鉴的外部项目及其对应落点详见 README.zh-CN.md 的 References 章节agent 识别层、DESIGN.md设计 system schema、SKILL.md协议来自nexu-io/open-designdaemon-and-runtime 架构一个特权进程 spawn 各家 CLI、JSON-line 做线协议、每 CLI 一个薄 adapter来自multica-ai/multica反 AI-slop 设计哲学对比度 ≥ 4.5 / 8 px 基线 / 必须用真实数据来自alchaincyf/huashu-design这些硬约束直接写进了每一个SKILL.md公众号 / 知乎复制端到端兼容性参考alchaincyf/huashu-md-html与mdnice/markdown-nicejuice内联 CSS 链路驱动 next/src/lib/export/wechat.tsiframe → 高 DPI PNG 截图路径用modern-screenshot复刻在 next/src/lib/export/image.tsdeck-guizang-editorial与deck-swiss-internationalvendor 自op7418/guizang-ppt-skilldoc-kami-parchment来自tw93/kamideck-open-slide-canvas来自1weiho/open-slide整个frame-*/vfx-*/mockup-*/social-*家族遵循heygen-com/hyperframes的帧脚本 schema输出可直接交给 Remotion 渲染.mp4。每一个 vendor 进来的 upstream skill 都在next/src/lib/templates/skills/skill/里保留了原始 LICENSE 和作者署名。许可证项目采用 Apache-2.0 开源协议见 LICENSEvendor 进来的第三方作品保留原始 LICENSE 与署名——每个next/src/lib/templates/skills/skill/文件夹里若存在LICENSE/README.md以它为准。赞分享AI 应用人工智能AI AgentAI 写作媒体生成【免费下载链接】html-anything✨ The agentic HTML editor — your local AI agent writes the HTML, you ship it. 75 Skills × 9 Surfaces (magazine · deck · poster · XHS / tweet · prototype · data report · Hyperframes) ️ Sandboxed preview · 1-click to WeChat / X / Zhihu / HTML / PNG Zero API key — Claude Code / Cursor / Codex / Gemini / Copilot / OpenCode / Qwen / Aider.项目地址https://gitcode.com/gh_mirrors/ht/html-anything点击查看免费下载相关推荐html-anything CLI 完全指南用本地 AI Agent 将 Markdown 一键转换为精美 HTMLhtml anything CLI 完全指南用本地 AI Agent 将 Markdown 一键转换为精美 HTML html anything 是一个 agAI 应用人工智能AI AgentAI 写作媒体生成html-anything 中的 prototype-web 技能用 Agent 一键生成可点击的 SaaS 产品落地页原型html anything 中的 prototype web 技能用 Agent 一键生成可点击的 SaaS 产品落地页原型 prototype web 是AI 应用人工智能AI AgentAI 写作媒体生成html-anything Twitter 分享卡技能模板用本地 AI Agent 一键生成可直接配推文的 16:9 金句卡html anything Twitter 分享卡技能模板用本地 AI Agent 一键生成可直接配推文的 16:9 金句卡 html anything 是一AI 应用人工智能AI AgentAI 写作媒体生成上一篇0.2秒决定用户去留INP指标如何重构页面交互体验下一篇Harper性能监控可视化图表与仪表板实现创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
