AI Coding

Vibe Coding Tips (Practical Summary)

1. Use an AI-Friendly Stack

• Use technologies familiar to LLMs: modern, widely-documented tools work best.

• Recommended stack:

• Next.js with App Router (AI models are familiar with it)

• TypeScript (type safety improves LLM performance)

• tRPC (typed APIs help avoid ambiguity)

• Prisma for ORM (well-documented, AI-friendly)

• NextAuth for auth (don’t let AI improvise auth)

• Supabase (managed Postgres, simple for LLMs)

• TailwindCSS (AI can inline design)

• Framer Motion (easy animation + polish)

2. Start Outside the IDE

• Think before coding: Record thoughts using SuperWhisper (voice-to-text).

• Use GPT-4 (O1 Pro / O3-based models) to:

• Create BRDs (business reqs)

• Create PRDs (product reqs)

• Generate a task list

• Prompt tip: Force the model to “think” by referencing frameworks (Porter’s 5 Forces, Blue Ocean, etc.). This deepens reasoning and results in richer outputs.

3. Use a Markdown Task File

• Create a .md checklist for tasks: each task should be 1 story point.

• Use this magic prompt:

"Create a detailed markdown checklist of one-story-point tasks based on the PRD."

• The file becomes the LLM’s to-do list during development.

4. Start with Storybook

• Use Storybook for UI design/test before touching the real code.

• Helps visualize components across states (empty, filled, error).

• Works great with AI-generated components to catch issues early.

5. Use Rubrics to Get Better Outputs

• Define evaluation rubrics (e.g., UX categories like color, spacing, font).

• Grade outputs A–F with examples.

• Prompt: “Aim for an ‘A’ in all categories.”

• This helps AI reason more deeply and produce higher-quality designs or ideas.

6. Paste Your Codebase into LLMs

• Tools: RepoMix, PasteMax (open source).

• Copy significant parts of your project and paste into LLMs with large context windows.

• Helps the model “understand” your code better than loading files ad hoc in IDE.

7. Organize Cursor Rules

• Optimize cursor.json rules to:

• Control formatting/style

• Set guardrails (e.g., “always run build and commit after change”)

• Condense to save context space.

• Use Gemini/O1 to help write/refine them.

8. Add an Update Log File

• Keep a running changelog (e.g., cursor-update.md) updated by the AI.

• After every AI change, prompt it to log what was done and why.

9. “It Sucks, Make It Pop” (ISMIP)

• Design feedback tip: Ask the AI to improve visuals if something feels off.

• Use models like SONNET to iterate and polish components.

10. Don’t Let AI Auto-Debug – Make It Think

• When debugging, do NOT ask the AI to fix the bug.

• Prompt: “Give me 5–7 potential reasons why this is broken. Do NOT write code.”

• Once you approve a reason, then ask for a fix.

• Great with thinking models like SONNET.