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

一、Agent 客户端

1.1 三种形态怎么选

客户端大致分三种形态：

形态	适合人群	上手难度	新手推荐度
桌面应用	喜欢图形界面，希望装完就用	低	推荐新手首选
VS Code 插件	长期用 VS Code 写代码	中	次选
CLI 命令行	熟悉终端工作流	中	熟悉终端再选

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

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

1.2 装 NewMax 桌面客户端

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

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

1.3 NewMax 能做什么

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

1.4 配好 API Key

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

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

对比项	官方订阅（OpenAI / Anthropic）	第三方中转 + CC-Switch / NewMax
网络	需要科学上网	国内直连
支付	境外银行卡或虚拟卡，按美元付	人民币，一般扫码即可
价格	官方定价	按量计费，通常更便宜
稳定性	官方一手，最稳	取决于中转商，选口碑好的
配置	官网登录后客户端直接可用	填 Base URL + Key（见 1.5）

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

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

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

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

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

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

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

把 Key 填进 NewMax

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

NewMax 设置 → 模型：选「自定义供应商」

自定义供应商表单：填 Base URL、API 格式与密钥

1.5 怎么确认配成功了

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

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

常见现象	重点检查
`401` / `Invalid API Key`	Key 是否复制完整、密钥分组是否正确
点「测试连接并激活」不通过	Base URL 是否多写或漏写版本路径、API 格式（OpenAI / Anthropic）是否选对
连接通过但发消息报错	模型 ID 是否与服务商支持的名称一致、账户额度是否充足

二、AGENTS.md

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

2.1 为什么要有 AGENTS.md

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

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

给 Agent 一个固定的「看说明书」的位置。 这个文件每次开工自动加载，不用你反复交代。
把口头规矩变成文件。 「测试用 pnpm test」写进去就长期生效，也不会因为换了个会话就丢失。
跨工具通用。 它不是某一家专有格式：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

四条写法上的硬规矩：

控制在 200 行以内。 太长的文件，AI 会忽略靠后内容；大项目拆成根目录总则 + 子目录细则，按需加载。
用「跑测试」检验它写够了没有。 标准很朴素：任何人说一句「跑测试」，AI 都能照着做对——做不到，说明命令写得不够具体。
权限的事交给工具，别只写在文档里。 「不要碰 X」写在 AGENTS.md 里只是提醒；真正的硬约束要用客户端的权限配置去卡（例如 Claude Code 的 settings.json），比文档里写「不要」可靠得多。
关键规则要显眼。 用 <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；安全上，前端侧重输入验证和身份验证流程，后端更全面（加密传输、访问控制、数据库保护），核心安全实践在后端——在给网站接上用户系统之前，这点值得先想清楚。

四、三种制作方法

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

你手上的东西	走哪条路
一个想照着做的网站网址	方法一：复刻已有网站
只有想法，还没有任何视觉	方法二：先生图，再让 AI 照着做
想要一眼高级的设计，又描述不出来	方法三：用设计 Skills 直出

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

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

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

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

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

/clone-website https://example.com

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

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

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

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

官方复刻前后对比示例

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

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

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

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

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

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

第 1 步：申请一个生图 Key

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

在 sshzyu 创建密钥，分组选生图组

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

建好 Key 后进「生图工作室」。工作台会自动认到你刚申请的 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 环境打开页面：

本地 dev 里跑出来的复刻效果

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

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

4.3 方法三：用设计 Skills 直出

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

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

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

Skill	它解决什么	官网 / 仓库	许可
Impeccable	官网自述是「The missing design vocabulary for agents」——给 Agent 补上设计语汇。负责从零构建、改造现有界面，并把规范沉淀进 `DESIGN.md` / `PRODUCT.md`；内置对「AI 味」（侧边色条、每节都挂小标题、卡片套卡片）的识别与修正，还会做审计：对比度、排版、视觉层级、动效、无障碍	impeccable.style	—
motion-web	专攻动效，主张「动效即材质」：用真实物理（弹簧阻尼）做手感交互动画，覆盖 Three.js / Canvas 2D / WebGL / CSS，内置 7 个可运行案例与自动化 headless 校验，专门防「假动画」	motion-web 仓库	CC BY-NC 4.0
Taste Skill	自称「给 AI Agent 的反平庸前端框架」——提升 AI 界面的布局、排版、动效与间距；除实现类 Skill 外，还带生图类 Skill（生成参考图 → 分析 → 实现）	Taste Skill 仓库	MIT
finesse UI	自述「绝不廉价的高级界面——品牌惊艳、产品精密、手机原生」。先判定页面属于哪条路线（品牌 / 产品 / 电商 / 手机端），再决定设计语言；带 28 篇设计规则与 22 个示例页	finesse-skill 仓库	MIT

安装 prompt 示例：

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

案例：

finesse UI

finesse UI：暗色艺术印刷品牌首页

finesse UI：精品咖啡品牌首页

finesse UI：创意数字工作室首页

Taste Skill

Taste Skill：摄影胶片主题官网首页

Taste Skill：网页设计师个人作品集首页

Impeccable

Impeccable：概念产品发布首页

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

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

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

五、发布：交给 Agent 自动化

5.1 两种托管方式，怎么选

方式	适合什么	特点
GitHub Pages	开源仓库、个人项目、演示页	免费；和 GitHub 仓库天然一体，push 即构建
Cloudflare Pages	要绑自定义域名、要 CDN 加速的站点	免费额度大；构建 → 托管 → CDN → HTTPS 一条流水线自动化

纯静态页面、博客、官网这类内容型站点，两种都够用。不想再注册平台就选 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 会先问你有没有下面这些，没有就带你申请：

需要什么	用在哪	去哪拿
GitHub 账号 + Personal Access Token	建仓库、推送代码、开 Pages	GitHub → Settings → Developer settings → Personal access tokens
Cloudflare 账号 + API Token	建 Pages 项目、绑定域名	Cloudflare Dashboard → My Profile → API Tokens