Source: https://www.vibevibe.cn/Advanced/
第三章：PRD与文档驱动开发
一定要把 Key 保存到环境变量.env 文件中.
归档参考文档：将这些 API 的关键文档（如请求格式、示例代码、返回码）整理好，归档在项目中（比如 docs/api-reference.md）。这样下次你需要 AI 写相关功能时，直接把这份文档喂给它，它就能精准地写出调用代码，而不是编造一个不存在的接口。
解决浏览器缓存的两个大招：一是强制刷新（按住 Shift + Ctrl + R）；二是打开 F12 开发者工具，在 Network 选项卡里勾选 "Disable cache"，只要开发者工具开着，浏览器就不敢偷懒。
关于HTML，CSS， Components的形象描述：
- CSS (层叠样式表)：如果说 HTML 是网页的骨架（素颜），那 CSS 就是化妆品。它决定了按钮是圆角还是直角，背景是渐变还是纯色。
- 组件 (Component)：现代网页不是画出来的，而是搭出来的。导航栏、按钮、输入框，这些都是预先做好的乐高积木。你不需要每次都手写一个“带圆角、有阴影、鼠标悬停变色的红色按钮”，而是直接拿来一个叫做
的积木就能用。
第七章：数据持久化与数据库
检查数据库设计的妙招：让 ChatGPT 帮你设计好表结构，然后把生成的代码发给 Claude 或 Deepseek，问它：“作为一个资深数据库架构师，请批判一下这个设计有什么潜在的性能隐患或逻辑漏洞？” 通常经过两轮这样的“左右互搏”，你就能得到一个非常健壮的数据库模型。
什么是prisma？我的理解是这个工具汇是不同query languages的“服务端server”，通过自定义的语法可以新建或改变（CRUD)数据库。---
第八章：功能测试流程与自动化脚本
测试工具：playwrght，一个自动化浏览器控制工具，具有可视化UI。
总结：指定文件路径，给口令prompt让测试工具来测试。如果是简单的功能测试，则可以上手直接自己点击测试。---
第十章：Git与跨平台协作
Linux 和 macOS 系统对文件名大小写是敏感的，而 Windows 不敏感。在 Windows 眼里，Button.tsx 和 button.tsx 是同一个文件，但在 Mac 眼里它们是两个完全不同的文件。Mac和linux用的是正斜杠/ 但Windows相反。
---
第十四章：安全防护与SEO数据统计
为防止未授权访问的疏漏，在Next.js中，需要在根目录放一个middleware.ts文件，可以让AI写一段逻辑，prompt:“拦截所有以 /admin 开头的路径。如果用户没有登录（缺少 Session），或者用户角色不是 admin，直接踢回登录页。”
SEO，为了让搜索软件能够搜到应用网页，需要设置一些文件：
- Metadata (元数据)：你学会了在 Next.js 的
layout.tsx里配置metadata对象。你填上了清晰的title（标题）和description（简介），告诉爬虫你是谁。 - Sitemap (站点地图)：你让 AI 帮你生成了一个
sitemap.xml。这就像是给爬虫的一张地图，告诉它你网站里有哪些页面，哪些是最新的。 - Robots.txt：这是给爬虫看的，告诉它哪些能爬，哪些不能爬。
opengraph-image.png，Next.js就会自动把它作为社交分享卡片。
统计，除了Google Analytics，还可以用1Panel中的Umami搭建一个轻量级，开源的统计系统。