描述异常
"点了按钮没反应"
第 13 章
实用技巧、常见陷阱与下一步
最后一章是"回来后看"的手册——提示词模板、调试流程、常见坑、学完后的方向。
提示词通用模板
以后让 WorkBuddy 做项目,照这个模板填:
📋 标准提示词模板
角色:你是一个有经验的前端开发者。任务:帮我做一个 XX(描述功能)。
技术约束:所有代码写在一个 HTML 文件里,只使用纯 HTML/CSS/JS,不需要安装任何东西,数据存 localStorage。
设计要求:(描述想要的风格)
边界情况:考虑输入为空、手机上的显示效果。
输出要求:给我完整代码,不要省略,代码里加中文注释。
遇到报错怎么办:调试三步法
👀
第 1 步
→
🔍
第 2 步
F12 看报错
复制红色文字
复制红色文字
→
🤖
第 3 步
发给 WorkBuddy
"描述+报错+代码
请诊断并修复"
"描述+报错+代码
请诊断并修复"
F12 打开开发者工具,点 Console 标签,红色的就是报错。你不用理解报错是什么意思——复制给 WorkBuddy 就行。
六个常见陷阱
| 陷阱 | 表现 | 对策 |
|---|---|---|
| 一次要太多 | 提 8 个功能,代码全是 bug | 先要最小版本,逐个加功能 |
| 复制漏符号 | 少一个 < 或多一个 } | 全选复制(Ctrl+A),不要手动拖动 |
| AI 优化改坏 | 说"优化一下"结果全乱了 | 优化前先保存当前版本 |
| 代码需要服务器 | 有 import/require 跑不起来 | 提示词里加"纯 HTML,双击运行" |
| 一个窗口多项目 | AI 混淆上下文 | 新项目开新对话窗口 |
| 忽视安全问题 | Key 写前端、密码明文 | 敏感信息只放后端 |
学完之后往哪走
学习路径
🛠️
方向一
做更多小工具
倒计时/番茄钟/记账本
倒计时/番茄钟/记账本
或
📚
方向二
系统学编程
freeCodeCamp / MDN
freeCodeCamp / MDN
或
🚀
方向三
把项目部署推广
Vercel / 微信小程序
Vercel / 微信小程序
方向一:继续做小工具(推荐)
每做一个新工具,你对需求描述、迭代、调试就更熟练。推荐项目清单:倒计时器 → 随机点名器 → 番茄钟 → 个人记账本 → 每日习惯打卡。
方向二:系统学一点编程基础
当你发现有些概念反复出现但不理解("数组""回调函数""异步"),就是系统学习的好时机。推荐 freeCodeCamp(免费交互式教程)和 MDN Web Docs(技术参考)。学编程和用 AI 不矛盾——你可以随时让 AI 解释不懂的地方。
方向三:把项目做深、推广
部署更多项目到公网,分享给朋友用。考虑学微信小程序(第 10-12 章的技术积累完全够你入门)。
最后的话
你学这门课之前,可能觉得编程是另一个世界的事——需要数学好、英语好、会"计算机思维"。
现在你知道:AI 时代的编程,核心技能不是记忆语法,而是想清楚你要什么,然后说清楚。
AI 负责"怎么写",你负责"做什么"和"对不对"。这个分工,恰好是每个人最擅长的那一半。
本章小结
| 要点 | 说明 |
|---|---|
| 提示词模板 | 角色+任务+约束+设计+边界+输出,六要素 |
| 调试三步法 | 描述异常 → F12看报错 → 发给WorkBuddy |
| 六个陷阱 | 对照上表,提前避开 |
| 三个方向 | 做更多工具 / 系统学编程 / 推广项目 |