先扩真实场景，词条自然长出来。

适合谁

有作品、服务、简历或项目想展示，但不知道网站由哪些部分组成的人。

走完得到

能让 AI 帮你做出一个能打开、能分享、能继续维护的静态网站。

个人网站是最适合入门的第一个场景：它会把页面、组件、响应式、域名、DNS、部署这些基础词自然串起来。

1. STEP 01

   先说清网站负责什么

   不要先问 AI 写代码，先让它帮你把网站目标、读者和必须有的页面砍清楚。

   需求最小可行产品用户故事

   可以这样问 AI

   「我想做一个个人网站，用来展示【身份/作品/服务】。请先帮我整理 MVP：必须有哪些页面、每页解决什么问题、哪些内容可以以后再补。」

   常见坑一开始就追求炫酷动效，结果首页很漂亮，但读者不知道你是谁、能提供什么。
2. STEP 02

   把页面和组件拆出来

   把首页、作品页、关于页、联系方式拆成页面，再把导航、卡片、按钮拆成组件。

   页面路由组件响应式设计

   可以这样问 AI

   「请把这个个人网站拆成页面和组件：每个页面放什么内容，哪些组件可以复用，手机端应该怎么排版。」

   常见坑把所有东西堆在一个页面里，后面想改导航、加作品、换布局都会很乱。
3. STEP 03

   准备可发布的静态站

   个人网站多数不需要后端，先用静态站跑通发布，比一上来接数据库更稳。

   静态网站Git仓库GitHub

   可以这样问 AI

   「我的个人网站没有登录和数据库。请判断它是否适合做成静态站，并告诉我代码仓库、提交和部署之间是什么关系。」

   常见坑明明只是展示页，却提前上数据库和后台，维护成本立刻变高。
4. STEP 04

   绑定域名并开启 HTTPS

   网站能打开只是第一步，真正可分享还需要域名、DNS 记录和 HTTPS。

   域名DNSDNS 记录HTTPS

   可以这样问 AI

   「我买了域名【域名】并准备部署到【平台】。请用小白能懂的话说明 DNS 记录该怎么配、HTTPS 为什么需要、配置后怎么验证。」

   常见坑只改了平台里的域名，没改 DNS；或者 DNS 生效需要时间，却误以为部署失败。
5. STEP 05

   上线后做一次验收

   上线不是结束，要检查首页、移动端、链接、加载速度和部署日志。

   部署Cloudflare Pages查看日志验收标准

   可以这样问 AI

   「我的个人网站已经上线。请给我一份上线验收清单：页面是否可访问、移动端是否正常、链接是否可点、日志里要看什么。」

   常见坑只在自己电脑上看过，没用手机、无痕窗口和外部网络确认。

适合谁

想做 AI 助手、客服、写作工具或知识问答，但不知道 AI 产品由哪些部件组成的人。

走完得到

能把一个 AI 聊天想法拆成前端、后端、模型调用、消息存储和上线配置。

AI 聊天工具不是只有一个输入框。它会把 Prompt、上下文、API、流式输出、消息系统、数据库和环境变量一起拉出来。

1. STEP 01

   定义 AI 的角色和边界

   先决定 AI 是客服、教练、写作助手还是项目顾问，再写系统提示词和上下文策略。

   Prompt系统提示词上下文上下文窗口

   可以这样问 AI

   「我要做一个【用途】AI 聊天工具。请帮我设计系统提示词、用户输入格式、上下文里应该放什么，以及哪些事情 AI 不能做。」

   常见坑只写一句“你是一个有用的助手”，产品就会没有稳定人格，也无法控制回答边界。
2. STEP 02

   打通前端和 AI 接口

   前端负责输入和展示，后端负责接收请求、调用模型 API、返回结果。

   接口接口地址请求体响应JSONREST API

   可以这样问 AI

   「请帮我设计 AI 聊天接口：前端提交什么字段，后端怎么调用模型，返回 JSON 应该长什么样。」

   常见坑把 API Key 放进前端代码，会直接泄露密钥和账单风险。
3. STEP 03

   处理聊天体验

   AI 回复通常需要几秒，流式输出、错误提示和加载状态会决定用户是否觉得卡死。

   消息系统流式输出异步报错信息

   可以这样问 AI

   「请告诉我 AI 聊天前端如何实现流式输出、加载中状态、失败重试和消息列表更新。」

   常见坑等完整答案回来才显示，用户会以为页面没反应。
4. STEP 04

   保存历史和配置

   如果要保留对话、用户设置或知识库，就会进入数据库和环境变量世界。

   数据库数据表环境变量.env 文件生产环境变量

   可以这样问 AI

   「这个 AI 聊天工具需要保存聊天历史。请帮我设计最小数据表，以及本地和生产环境分别要配置哪些环境变量。」

   常见坑本地能跑，上线不能跑，常见原因就是生产环境没有配置密钥或数据库地址。
5. STEP 05

   控制成本和滥用

   AI 调用会烧钱，需要知道 token、频率限制、日志和监控。

   Token限流日志监控

   可以这样问 AI

   「请帮我估算这个 AI 聊天工具的调用成本，并设计免费用户的频率限制、日志记录和异常监控策略。」

   常见坑没有限制调用次数，公开后可能被刷爆额度。

适合谁

AI 帮你写了代码，但项目跑不起来、终端一片红、不知道该贴什么给 AI 的人。

走完得到

能把一次报错整理成 AI 可以处理的证据包，而不是只说“又坏了”。

报错急救是零基础用户最该先掌握的能力。它会把报错信息、堆栈追踪、依赖、环境、最小复现和验收串起来。

1. STEP 01

   完整复制报错

   先收集证据：完整终端输出、浏览器控制台、触发动作和相关文件路径。

   报错信息堆栈追踪日志代码上下文

   可以这样问 AI

   「这是完整报错和触发步骤：【粘贴】。请先解释每一段在说什么，再指出最可能的出错文件和原因。」

   常见坑只截图红字最后一行，AI 看不到调用链和真实触发条件。
2. STEP 02

   判断错误类型

   不同报错对应不同处理路线：运行时、编译、类型、构建失败不能混着修。

   运行时错误编译错误类型错误构建失败

   可以这样问 AI

   「请判断这个报错属于运行时错误、编译错误、类型错误还是构建失败，并按可能性排序说明排查路线。」

   常见坑看到红字就乱改代码，结果把原本的小问题扩大成多个问题。
3. STEP 03

   缩小复现范围

   把“整个项目坏了”缩小成一个页面、一个函数、一个输入或一个命令。

   最小复现项目根目录代码上下文

   可以这样问 AI

   「请帮我把这个问题缩小成最小复现：需要保留哪些文件、删掉哪些干扰、用哪条命令能稳定触发。」

   常见坑一次把整个项目都交给 AI，它容易在无关文件上浪费修改。
4. STEP 04

   检查环境和依赖

   很多问题不是业务代码错，而是包版本、环境变量、端口或安装状态不对。

   环境依赖依赖冲突包管理器端口占用

   可以这样问 AI

   「请根据这个报错判断是否可能是环境或依赖问题，并列出我应该依次检查的命令。」

   常见坑没有确认依赖安装和端口占用，就反复让 AI 改业务代码。
5. STEP 05

   让 AI 做最小修复和验收

   修复时要求 AI 只改必要文件，并说明如何验证问题真的消失。

   调试提示词验收提示词测试

   可以这样问 AI

   「请给出最小修复方案：只改必要代码，说明为什么这样改，并列出修完后要跑的验证命令。」

   常见坑让 AI 顺手大重构，报错可能没好，旧功能又被改坏。

适合谁

项目在自己电脑能跑，但不知道怎么让别人访问的人。

走完得到

能把一个项目从本地开发推进到真实 URL，并知道上线失败该看哪里。

部署上线会把本地运行、构建、静态站、托管平台、域名、生产环境变量、日志和回滚一次性串起来。

1. STEP 01

   确认项目本地能跑

   上线前先确认安装、启动、端口和本地地址都是正常的。

   安装依赖启动项目开发服务器localhost端口

   可以这样问 AI

   「请根据我的项目技术栈，列出从安装依赖到本地启动的命令，并说明每一步成功时应该看到什么。」

   常见坑本地都没跑通就开始部署，上线失败时根本不知道是哪一层坏了。
2. STEP 02

   构建发布产物

   很多平台部署前会先 build，构建失败通常会暴露类型、依赖或静态导出问题。

   构建失败静态网站依赖包管理器

   可以这样问 AI

   「我的项目准备上线。请告诉我应该跑哪个 build 命令，成功后会生成什么产物，失败时优先看哪些错误。」

   常见坑只跑 dev 不跑 build，本地看着正常，上线构建时才发现错误。
3. STEP 03

   选择部署平台

   不同项目适合不同平台：静态站、Serverless、长期后端服务不要混在一起。

   托管平台VercelCloudflare Pages无服务器

   可以这样问 AI

   「我的项目是【项目描述】。请帮我判断适合 Vercel、Cloudflare Pages、Railway 还是云服务器，并说明原因。」

   常见坑把需要长期运行后端的项目当静态站部署，结果接口永远访问不到。
4. STEP 04

   配置域名和生产环境变量

   上线环境和本地环境不是一回事，密钥、回调地址、域名都要重新配置。

   域名DNS 记录生产环境变量HTTPS

   可以这样问 AI

   「请帮我列出这个项目上线需要的生产环境变量、域名/DNS 配置和 HTTPS 检查清单。」

   常见坑本地 .env 有密钥，但部署平台没填，线上接口就会报错。
5. STEP 05

   看日志并准备回滚

   上线后要知道哪里看日志，坏了如何回到上一版，而不是在生产环境里盲改。

   查看日志监控回滚灰度发布

   可以这样问 AI

   「请给我一份上线后排查清单：如何看构建日志、运行日志、访问错误，以及出现问题怎么回滚。」

   常见坑没有回滚意识，线上越修越乱。

适合谁

已经有一个项目，想让 Codex、Cursor 或 Claude Code 继续改，但怕 AI 改乱的人。

走完得到

能把项目交给 AI 前先讲清目标、边界、上下文和验收标准。

AI 接手项目不是一句“帮我优化”。它需要项目上下文、代码上下文、任务拆解、版本保护和验收闭环。

1. STEP 01

   让 AI 先读项目

   先让 AI 看 README、目录、技术栈和当前目标，而不是直接开始改。

   编程代理项目上下文README上下文文件

   可以这样问 AI

   「请先阅读这个项目的 README、目录结构和配置文件，复述你理解的项目目标、技术栈、关键目录和常用命令。」

   常见坑没给上下文就让 AI 改，它会猜项目结构，甚至编不存在的文件。
2. STEP 02

   圈定当前任务

   把大目标拆成一次能完成、能验证、能回滚的小任务。

   需求任务拆分提示词代码上下文

   可以这样问 AI

   「我的目标是【目标】。请把它拆成 5-8 个小任务，每个任务写清涉及文件、验收标准和推荐顺序。」

   常见坑一次让 AI 做太多，最后 diff 很大，很难判断哪里出了问题。
3. STEP 03

   建立安全边界

   改前先看 git 状态、开分支或提交存档，让 AI 的改动可追踪。

   Git仓库分支提交差异对比

   可以这样问 AI

   「在开始改之前，请告诉我如何检查 git 状态、创建安全分支/提交存档，并说明后面如何查看 AI 改了什么。」

   常见坑没有提交存档就让 AI 大改，坏了以后不知道怎么退回去。
4. STEP 04

   小步实施并验证

   每完成一个小任务就跑校验，别攒到最后一起发现坏了。

   验收提示词测试验收标准

   可以这样问 AI

   「请按小步骤实现这个任务。每完成一步说明改了什么，并运行对应验证命令，失败就先修失败原因。」

   常见坑只看 AI 说完成，不看验证输出。
5. STEP 05

   收尾审查和交接

   最后让 AI 总结改动、风险、测试结果和下一步，便于你继续推进。

   代码审查提示词拉取请求差异对比

   可以这样问 AI

   「请审查这次改动，列出改了哪些文件、解决了什么、还剩什么风险、跑过哪些验证，以及下一步建议。」

   常见坑没有收尾记录，下一轮 AI 又要重新理解一遍。