Source: Vibe Coding 进阶篇
Chapter 3: PRDs and Documentation-Driven Development
Always make sure to save your keys in an environment variable file (.env).
Archive reference documentation: Organize and archive the key documentation for these APIs (such as request formats, code snippets, and status codes) directly in your project (like docs/api-reference.md). That way, the next time you need AI to build a related feature, you can feed it this document directly, and it will generate precise API calls instead of hallucinating an endpoint that doesn't exist.
Two killer tricks for dealing with browser cache: First is a hard refresh (hold Shift + Ctrl + R); second is opening DevTools (F12) and checking "Disable cache" under the Network tab. As long as DevTools stays open, the browser won't dare slack off.
A vivid way to picture HTML, CSS, and components:
- CSS (Cascading Style Sheets): If HTML is a webpage's skeleton (bare-faced), then CSS is its makeup. It decides whether buttons have rounded or square corners, and whether backgrounds are gradients or solid colors.
- Components: Modern web pages aren't drawn from scratch—they're built. Navbars, buttons, and input fields are all pre-assembled Lego bricks. You don't need to handcraft a "red button with rounded corners, drop shadows, and hover effects" every single time; you just grab a Lego block called
<Button />and you're good to go.
Chapter 7: Data Persistence and Databases
A neat trick for vetting database designs: have ChatGPT design your table schema first, then hand the generated code over to Claude or DeepSeek and ask: "As a senior database architect, please critique this design. What potential performance bottlenecks or logical flaws do you see?" Usually, after a couple of rounds of models battling it out like this, you end up with a rock-solid database schema.
What is Prisma? My take is that this tool acts like a "server" across different query languages, allowing you to create or modify (CRUD) databases through its own custom syntax.
Chapter 8: Functional Testing and Automation Scripts
Testing tool: Playwright, a browser automation control tool with a visual UI.
Takeaway: Specify the file path, hand it a prompt, and let the testing tool run the checks. If it's just a simple feature test, you can always jump right in and click through it yourself.
Chapter 10: Git and Cross-Platform Collaboration
Linux and macOS are case-sensitive when it comes to filenames, while Windows is not. In Windows' eyes, Button.tsx and button.tsx are the exact same file, but on a Mac, they are two completely different files. Mac and Linux also use forward slashes /, whereas Windows does the exact opposite.
Chapter 14: Security and SEO Analytics
To prevent unauthorized access loopholes in Next.js, place a middleware.ts file in your root directory. You can have AI write the logic with a prompt like: "Intercept all paths starting with /admin. If the user isn't logged in (missing session) or their role isn't admin, kick them straight back to the login page."
On the SEO front, to ensure search engines can discover your web app, you need to set up a few files:
- Metadata: You learned how to configure the
metadataobject in Next.js'slayout.tsx. You fill in a cleartitleanddescriptionto tell web crawlers who you are. - Sitemap: You have AI generate a
sitemap.xmlfor you. This acts like a roadmap for crawlers, letting them know what pages exist on your site and which ones are fresh. - Robots.txt: This is written specifically for crawlers, telling them what they can and cannot crawl.
For link preview images, you can have AI configure the Open Graph (OG) protocol: drop an image named opengraph-image.png into Next.js, and it will automatically use it as your social sharing card.
As for analytics, besides Google Analytics, you can also spin up Umami via 1Panel to build a lightweight, open-source analytics system.