用 AI 创建并发布自己的网站

教程主线：让 AI 写出代码 → 在本机跑起来 → 免费托管发布 → 拿到一个可分享的链接。

一、Agent 客户端

1.1 三种形态怎么选

客户端大致分三种形态：

选择原则很朴素：你平时在哪写东西，就用那个形态——不写代码用桌面应用，装了 VS Code 的装插件，只玩命令行的选 CLI。三者可共用同一套配置，不必维护三份。

本文只走最省事的桌面客户端这条路，下面以 NewMax 为例；另外两种形态不在本文展开。

1.2 装 NewMax 桌面客户端

到下载页挑对应系统的安装包，下载后双击安装，选项保持默认即可。装完打开，能看到主界面就算装好了。

想用 Codex？ 另见专文 Codex 从下载到对话，本文不再重复展开。

1.3 NewMax 能做什么

它的定位是「本地优先的 AI Agent 客户端」：每个工作区绑定一个本地文件夹，读取你的文件、调用工具、编排多步任务，尽量把数据留在你自己的电脑里。

1.4 配好 API Key

这一步最容易翻车。因为「客户端」和「模型服务」是两回事：客户端只是外壳，真正的智力来自你 Key 指向的那个服务商。

在填任何配置之前，先决定 Key 从哪来。两条路：

如果你打算用官方订阅、但不懂怎么付款，可以在群里联系群主帮忙代充值，比自己摸索快得多。想自己动手的，网络和付款分两步解决：

① 网络问题（只有走官方订阅才需要）

• 机场：congyu
• 代理客户端（Clash 系）：clash-verge-rev 下载页

② 付款问题（下面两个是公开视频教程，仅供参考）

• 低价订阅：菲律宾区低价订阅思路
• 国内银行卡订阅：不用代充、不买虚拟卡，用国内银行卡订上

这两条路只说明「有人这么走通了」，不代表适合所有人：跨区订阅等操作存在掉订阅甚至封号的可能，建议先用小额试。教程仅供参考，如果你有更稳的方法，欢迎联系我们，我们随时更新这份文档。

结论（推荐用法）：对国内大多数人来说，第三方中转 + CC-Switch / NewMax 是最省事的一条路——不用科学上网、不用境外卡，把自定义厂商指向一个中转服务（推荐：sshzyu），填好 Base URL 和 Key 就能用。下面 1.5 讲这套配置怎么落地。

把 Key 填进 NewMax

1. 打开 NewMax，点左侧栏的「设置」。
2. 进「模型」，点右侧的「自定义供应商」。
3. 填 API Base URL。
4. 选 API 格式：服务商兼容 OpenAI 接口就选「OpenAI 格式」，Claude 原生接口选「Anthropic 格式」。
5. 填 API 密钥：把控制台里创建的那把 Key 粘进去（Key 通常只在创建时完整显示一次，记得存好）。
6. 点「+ 添加模型」手填模型 ID，或点「从服务商拉取模型列表」自动拉取。
7. 点「测试连接并激活」——测通才算配好。
8. 回到对话，在输入框右侧的模型选择器里按「提供商 → 模型」选中它。

1.5 怎么确认配成功了

1. 打开 NewMax
2. 在输入框右侧的模型选择器里确认已选中刚配好的模型（提供商 → 模型）
3. 发一条测试消息（如「你好，你是什么模型」），能正常回复就算通了

排查顺序：失败时不要先怀疑模型，按「Key 是否有效 → Base URL 是否写对 → 网络是否可达」三件套查。Base URL 多一个斜杠、少一段版本路径，都会直接失败。

二、AGENTS.md

AI 每次开工前，对你的项目一无所知：它不知道你用什么包管理器、测试怎么跑、哪些目录不能碰。这些如果每次都要你口头交代一遍，既费口舌，它也记不住。AGENTS.md 就是解决这件事的文件——一份放在项目根目录、专门写给 AI 看的说明书。

2.1 为什么要有 AGENTS.md

AGENTS.md 是一个开放格式，一句话概括它的定位：它是「给 AI 看的 README」。README 写给人类看（项目是什么、怎么上手、怎么贡献），AGENTS.md 写给 Agent 看（构建命令、代码约定、禁区）——两者分工明确，互不挤占。

它值得单独存在，有三个理由：

1. 给 Agent 一个固定的「看说明书」的位置。 这个文件每次开工自动加载，不用你反复交代。
2. 把口头规矩变成文件。 「测试用 pnpm test」写进去就长期生效，也不会因为换了个会话就丢失。
3. 跨工具通用。 它不是某一家专有格式：Codex、Cursor、Gemini CLI、Aider、Zed 等一批工具都认这个文件名，一份规则喂给多个客户端，不必各写一遍。

有的工具另有自己的习惯文件名（例如 Claude Code 读 CLAUDE.md）。内容与 AGENTS.md 同源，要么两边保持同步，要么在 CLAUDE.md 里写一行「规则见 AGENTS.md」，避免两份规则各写一遍、日久失同步。

2.2 怎么用 AGENTS.md 规范边界

「规范边界」的意思是：告诉 AI 做什么、怎么做、不许碰什么。一份能用的 AGENTS.md 通常包含四块——项目说明、常用命令、代码规范、注意事项。示例：

# 项目说明
这是一个 Next.js 14 + TypeScript 的电商后台管理系统。

# 常用命令
- 启动开发：pnpm dev
- 跑测试：pnpm test
- 类型检查：pnpm typecheck

# 代码规范
- 使用 TypeScript strict mode
- 组件用 PascalCase 命名
- API 路由放在 src/app/api/ 下

# 注意事项
- 不要修改 src/legacy/ 下的代码
- 数据库 migration 必须通过 drizzle-kit 生成
- 提交前必须跑通 pnpm test

四条写法上的硬规矩：

1. 控制在 200 行以内。 太长的文件，AI 会忽略靠后内容；大项目拆成根目录总则 + 子目录细则，按需加载。
2. 用「跑测试」检验它写够了没有。 标准很朴素：任何人说一句「跑测试」，AI 都能照着做对——做不到，说明命令写得不够具体。
3. 权限的事交给工具，别只写在文档里。 「不要碰 X」写在 AGENTS.md 里只是提醒；真正的硬约束要用客户端的权限配置去卡（例如 Claude Code 的 settings.json），比文档里写「不要」可靠得多。
4. 关键规则要显眼。 用 <important> 之类的标签把最不能违反的几条包裹起来，模型会更重视。

写完怎么验证有效？最直接的办法是故意试一次：让它去改一个你写明了「不许碰」的目录，看它会不会停下来问你。停了，说明规矩生效；没停，说明那条写得不够硬。

三、前端、后端与交互

你不需要会写代码，但需要知道「用户看到的那一层」和「数据存放的那一层」是分开的。这样 AI 出问题时，你能描述清现象。

3.1 前端：用户看到的那一层

前端是用户直接看到和交互的部分——排版、颜色、布局、动效，以及点击按钮、填写表单。三种语言的分工其实很直白：HTML 是结构（骨架）、CSS 是样式（皮肤）、JavaScript 是交互逻辑（大脑）。前端运行在浏览器里，处理轻量交互，把复杂请求交给后端。

3.2 后端：数据与逻辑

后端负责数据处理、业务逻辑、数据库交互和安全控制，工作分三层：接收请求 → 处理逻辑 → 管理数据。常见语言有 Python、Java、Node.js、Go；数据库分关系型（MySQL、PostgreSQL）和非关系型（MongoDB、Redis）。一个必须澄清的误解：「与数据库交互」很重要，但不是后端的唯一任务，它还要负责安全验证、业务规则、接口规范和性能优化。

3.3 它们怎么交互

两者通过 HTTP 请求 + JSON 数据 + API 接口。API 是前后端之间的「合同」，前端只要知道「接口叫什么、要传什么、会返回什么」，两边就能独立开发——这叫前后端分离。一次登录的流程是：用户输入账号密码点登录 → 前端调用 POST https://example.com/api/login → 后端验证并查询数据库 → 返回结果（登录成功 + Token）→ 前端显示欢迎页。后端对数据库的操作统称 CRUD：新增、读取、更新、删除。

// 前端发给后端
{ "username": "holly", "password": "123456" }

// 后端返回
{ "status": "success", "token": "abc123xyz" }

三组容易被忽略的差异：并发上，前端每位用户各有副本、基本不存在并发问题，后端却要同时处理成千上万个请求；缓存上，前端缓存在浏览器，后端缓存在服务器或 CDN；安全上，前端侧重输入验证和身份验证流程，后端更全面（加密传输、访问控制、数据库保护），核心安全实践在后端——在给网站接上用户系统之前，这点值得先想清楚。

四、三种制作方法

前面三章是准备，这一章开始做东西。按你手上有什么，选一条路：

三条路不互斥——不少人先用方法三起个底，再按方法一借某个区块的布局。

4.1 方法一：复刻一个已有网站

适用：你看到一个网站，布局、动效、排版很对味，想把它变成自己的代码。

工具：AI Website Cloner Template（MIT 许可）。它给自己的定位是：给 AI 编码 Agent 一个网址，它把网站复刻成一个干净的 Next.js 应用。

怎么用：把仓库放进一个新目录，用 Agent 打开，然后一条命令：

/clone-website https://example.com

把网址换成你要复刻的目标。跑完之后，再按你的想法提改动。

它内部怎么干（了解流程有助于排查问题）：分五个阶段——

1. 侦察：截图、提取设计 token、模拟滚动与悬停
2. 打底：写字体、颜色、全局样式，下载页面素材
3. 写组件规格：把每个区块的计算样式、状态、内容写成文档
4. 并行构建：每个区块派一个 Agent，各自在独立的 git worktree 里写
5. 组装与质检：合并、接线，再和原站做一次视觉比对

官方示例：仓库自带一张复刻前后的对比图，配套一个完整演示视频。这张图就来自它：

支持哪些客户端：Claude Code（官方推荐）、Codex CLI、OpenCode、Cursor；前置要求是 Node.js 24+。

边界提醒（仓库作者自己写明的）：这个工具不允许用于钓鱼、冒充他人，或把别人的设计、logo、文案说成自己的。动手前先确认目标站的服务条款是否允许被抓取或复现——学布局和做法没问题，直接搬走别人的品牌资产不行。

4.2 方法二：先生图，再让 AI 照着做

适用：你有产品、有想法，但手上没有任何视觉素材，也描述不清想要的样子。

思路：先让 AI 生图，把「说不清的感觉」变成一张具体的图；再把这张图交给 Agent，让它按图实现页面。分两步是因为——描述一个界面，比给出一张图难得多。有了图，Agent 的工作就从「猜你要什么」变成「照着做」。

下面是一次完整的走法：从申请生图 Key，到本地看到跑起来的页面。生图仍走前面配好的那个渠道（sshzyu）；还没有账号的，先在站点完成注册与充值。

第 1 步：申请一个生图 Key

进站点的 API 密钥页，点「创建密钥」，厂商选 OpenAI。分组这一步要留意：生图和日常对话用的不是同一个分组，这里要选专门的生图组。

第 2 步：在工作台生成参考图

建好 Key 后进「生图工作室」。工作台会自动认到你刚申请的 Key，你只需要做两件事：选模型、填提示词。

模型选最新的 gpt-image-2.5。提示词用英文把你的设计讲清楚——品牌主题、版式结构、配色倾向，说得越具体，出图越接近预期：

A hero section design for a cultural travel brand.
Large serif headline on the left, coastal photo
on the right, muted teal and amber palette.

（示意，仅演示提示词的结构。）

提交后等生成完成，点结果可以看大图和完整提示词：

第 3 步：把设计图交给 AI 复刻

把这张图直接拖进 AI 客户端的对话输入框，附上复刻要求。指令写清两件事就行：要复刻什么、要改什么。

请你对上图进行 UI 复刻：
1. 补充首屏导航
2. 对背景图进行更换，换成真实 Guang Dong 图片

「补首屏导航」是因为生图结果里的导航本来就不完整；「换背景图」是因为 AI 生成的背景照片容易发糊、带明显生成痕迹，换成真实照片观感好很多。这两条按你的实际情况调整。

第 4 步：本地看效果

等 AI 做完，进本地 dev 环境打开页面：

版式结构、配色和大标题都照着参考图还原了，背景也换成了真实照片。不满意的直接接着对话迭代，比如「导航间距再收紧」「标题字号再大一档」。一次出图、一次复刻、几轮微调，一个像样的首屏就出来了。

顺带一提：设计类 Skill 里已经有专门做这件事的——比如 Taste Skill 带的 image-to-code（先生成参考图 → 再分析 → 再实现前端）。装上它，这条链会更顺。

4.3 方法三：用设计 Skills 直出

适用：想让 AI 一次产出就摆脱「模板味」。

为什么需要它：AI 默认的设计输出很平庸——同样的字体、同样的布局、同样的扁平感。设计类 Skill 的作用，是把「什么叫好」的判据喂给 Agent，让它在动手前先定风格，而不是直接堆组件。

下面四个是目前比较成体系的（都在这篇教程写作时仍在维护）：

安装 prompt 示例：

网址：impeccable.style，帮我安装这个skills到本地全局

案例：

finesse UI

Taste Skill

Impeccable

六张看下来有个共同点：没有一张是「紫色渐变 + emoji 图标 + 卡片套卡片」的模板脸。它们各有明确的风格来源——暗色杂志、奶油纸张、像素字体、圆形主视觉。这正是这些 Skill 想解决的事：让 Agent 在动手前先定风格，而不是直接堆组件。

几条通用提醒（无论走哪条路都用得上）：

1. 让它先提问，再动手。 在提示词结尾加一句「动手前先问我几个需要澄清的问题」，它通常会问四到六个关于风格、字体、章节、动效级别的问题——你的回答会成为整个页面的基础。
2. 问题攒起来一次性发。 自己先浏览一遍，把「感觉不对」的地方列成编号清单一次发过去，比零散地改十次效率高得多。
3. 你比它更懂你要什么。 它改出你不认可的东西时，直接说「这一处不要动」，别因为它顺手「优化」就把方向带偏。

五、发布：交给 Agent 自动化

5.1 两种托管方式，怎么选

纯静态页面、博客、官网这类内容型站点，两种都够用。不想再注册平台就选 GitHub Pages；要自定义域名、想要更完整的构建与缓存配置，就选 Cloudflare Pages。

5.2 怎么让 Agent 帮你部署

• GitHub Pages：GitHub Pages 部署提示词
• Cloudflare Pages：Cloudflare Pages 部署提示词

部署 prompt 示例：

帮我把当前项目部署到 GitHub Pages。
先读 https://ravicc02.github.io/AI4U/prompt/github_page.md ，
按里面的步骤来。需要我提供什么凭证，先告诉我，再开始操作。

要走 Cloudflare Pages，把提示词里的地址换成对应的那一份即可。Agent 读到提示词后，会带着你一步步走完注册、建库、构建、上线。

5.3 部署前要准备的凭证

提示词的第一步永远是「先确认凭证」——Agent 会先问你有没有下面这些，没有就带你申请：