格子 AI 编程入门
第 10 章

实用技巧和常见陷阱

这一章是你做完实战之后回来看的"进阶手册"。用了前面几章的方法之后，回头读这一章，很多细节你会更有体会。

这一章是你做完实战之后回来看的"进阶手册"。用了前面几章的方法之后，回头读这一章，很多细节你会更有体会。

技巧篇

1. 把 AI 当成一个实习生，不是一个专家

最好的心态：AI 是一个非常聪明但经验不足的实习生。它能写很多代码，但需要你给它方向，检查它的工作。

2. 用"角色扮演"激发 AI 的特定能力

在提示词开头加一句角色设定，效果明显不同。

你是一个有 10 年前端经验的网页设计师。请帮我...
你是一个擅长用户体验的产品经理。请帮我评估这个页面的可用性问题...
你是一个耐心的编程老师。请用新手能懂的语言解释这段代码...

3. 分步上——大需求拆成小需求

不要一次说"帮我做一个完整的电商网站"。拆开：

第一步：做一个商品列表页面，展示 5 个商品
第二步：给每个商品加"加入购物车"按钮
第三步：做一个购物车区域，显示已选商品和总价

每步确认能用，再做下一步。

4. "再给我两个方案"

AI 给的第一个方案不一定是最优的。如果你不满意，直接说：

这个方案不太好，请给我两个不同的实现思路。

你会惊讶于 AI 方案的多样性。

5. 写提示词时加上"不要..."

限定边界比描述目标更容易出好结果。

不要用外部库，只使用纯 HTML/CSS/JavaScript
不要使用 alert 弹窗，用页面内提示
不要把 CSS 写在行内，统一放在 <style> 标签里
不要省略任何代码

6. 让 AI 解释它自己的代码

当你看到一段不懂的代码，复制发给 AI：

请用新人能理解的方式，逐段解释以下代码在做什么：
（粘贴代码）

这是最好的学习方式——在你实际用到的代码上学习，而不是在抽象的教科书上。

陷阱篇

陷阱 1：一次性要求太多

新手常见错误：发一段 500 字的超长需求，里面塞了 8 个功能。

结果：AI 写的代码 BUG 百出，你不知道从哪开始修。

正确做法：先要一个能跑的最小版本，然后逐次加功能（见第 8 章）。

陷阱 2：AI 说"我来优化一下"结果改坏了

有时你已经有了一版能用的代码，让 AI"优化"或"重构"一下，结果它大改结构，引入新 BUG。

防护：优化之前，先保存当前版本。优化后不行，立刻回退。

陷阱 3：复制代码时漏掉了括号或引号

HTML/CSS/JavaScript 对符号极度敏感。少一个 <、多一个 }，整个页面可能崩掉。

防护：复制 AI 代码时，用"全选"（Ctrl+A / Cmd+A），不要手动拖动选择。

陷阱 4：AI 写了需要服务器才能跑的代码

有时 AI 会给你包含 import、require、fetch('/api/...') 的代码，这些需要额外安装东西才能运行。

防护：在你的提示词里加一句"所有代码写在一个 HTML 文件里，不需要安装任何东西，双击就能在浏览器打开"。

陷阱 5：跟 AI 在一个对话里做太多项目

一个对话做两个完全不同的项目（比如待办事项做到一半突然开始做个人主页），AI 会混淆上下文。

正确做法：一个项目 = 一个对话窗口。做新项目就开新对话。

陷阱 6：忽视安全问题

这是新手不太会注意但对进阶很重要的点。如果你的网页要真正放到网上用，涉及到：

这些场景下 AI 写的代码可能不安全。作为一步：做纯个人使用的小工具（不涉及别人访问），安全风险极低。如果你以后要做多人使用的工具，把安全作为一个专题去学习。

一个完整的"好提示词"模板

综合以上，以后你想让 AI 做项目，可以用这个模板：

角色：你是一个有经验的网页开发者。
任务：帮我做一个 XX（描述功能）。
技术约束：
- 所有代码写在一个 HTML 文件里
- 只使用纯 HTML/CSS/JavaScript，不引入外部库
- 不需要服务器，双击就能在浏览器打开
- 数据存在浏览器本地（localStorage）
设计要求：
- （描述你想要的风格）
边界情况：
- 考虑用户输入空内容的情况
- 考虑手机上的显示效果
输出要求：
- 给我完整代码，不要省略
- 代码里用中文写注释，标明每个部分是干什么的

照这个模板填好你的需求，成功率会明显提高。

本章小结

技巧：

陷阱：

← 上一章 下一章：下一步 →