详情

首页手游攻略 html-anything 怎么安装?Codex/Claude Code 本地 HTML 编辑器教程

html-anything 怎么安装?Codex/Claude Code 本地 HTML 编辑器教程

佚名 2026-07-28 19:00:02

装 html-anything 之前先搞清楚:它不是那种云端的网页生成工具,是调用你本地 AI Agent 的本地 HTML 编辑器。核心前提不是再额外买模型额度,而是你电脑上已经能跑 Claude Code、Codex、Cursor Agent、Gemini CLI 这类命令行工具,而且至少有一个已经登好号能用了。

先准备三件事

  • 电脑上得装了 Git,用来拉取项目代码。
  • 电脑上得装了 pnpm,毕竟官方的快速上手教程就是用 pnpm 装依赖、启动 Next 应用的。
  • 至少有一个 coding-agent 命令行工具已经登好号了,比如 Claude Code 或者 Codex;不然就算能打开页面,生成内容的时候也找不到可用的执行工具。

大家最常踩的坑不是安装命令报错,而是装完之后页面顶部的 agent 列表空空的。碰到这种情况先别瞎改 html-anything 的配置,先回终端确认下对应的命令行工具是不是在 PATH 里、能不能单独正常运行。

GitHub README 中的 Quickstart 安装命令区域

按官方 Quickstart 安装

找个你打算放项目的文件夹,执行下面这几行命令:

git clone https://github.com/nexu-io/html-anything
cd html-anything
pnpm install
pnpm -F @html-anything/next dev

启动成功之后,用浏览器打开本地地址就行,一般是 http://localhost:3000。要是这个端口被占了,Next 会提示你能用的新端口,一切以终端里实际打印出来的地址为准。

这里给大家两个小排查思路:要是 pnpm install 卡在下载依赖不动,大概率是网络或者 npm 包源的问题;要是 pnpm -F @html-anything/next dev 报找不到 workspace 包,基本都是你没在仓库根目录执行命令。别跑到 next/ 子目录里瞎敲命令,先退回项目根目录再说。

Codex 和 Claude Code 怎么接上

html-anything 启动的时候会自动扫描常用路径里的 agent 命令行工具。官方 README 里的逻辑是:先检测命令存不存在,再按照各自的 JSON 或者 stream-json 输出格式去调用。对 Codex 来说,关键是你本地的命令能被系统找到;对 Claude Code 来说,关键是你已经登好号,而且命令行能正常响应。

GitHub README 中关于本地 agent、零 API key 和模板数量的说明

现象优先检查不要先做什么
页面能打开但生成不了内容agent CLI 是否已登录不要急着改模板
识别不到 Codex 或 ClaudePATH 是否包含安装目录不要重复克隆仓库
生成到一半卡住不动终端日志和模型额度不要只刷新浏览器
导出的样式有问题是否选错 surface 或 skill不要把所有 CSS 手动重写

第一次跑通用一个小样本

别一上来就扔一整篇完整报告进去测试。先输个200字左右的需求说明,选个文章或者卡片模板,按快捷键生成,看看右边的预览会不会实时更新,再试一下HTML下载功能。能把这一整套小流程跑通,就说明安装、agent调用、预览和导出基本都没问题了。

没问题了再去做正式内容。这篇安装教程真正的终点不是“把项目启动起来”,而是你能把一段可验证的内容转成HTML,而且出问题的时候知道该从agent、路径、依赖还是模板这几个方向去排查。

点击查看更多
推荐专题
热门阅读