The ULTIMATE Vibe Coding Playbook: 10 Tips to Level Up Your AI Coding Workflow

The ULTIMATE Vibe Coding Playbook: 10 Tips to Level Up Your AI Coding Workflow

5.632 Lượt nghe
The ULTIMATE Vibe Coding Playbook: 10 Tips to Level Up Your AI Coding Workflow
Six weeks ago, I shared a clip mentioning Andrej Karpathy's tweet about "vibe coding," possibly the first time the phrase appeared on YouTube. Now, it seems like everyone's talking about it! After using AI for coding almost daily for nearly two years, I've learned a few things about making it work effectively. Forget the hype and frustration. This video dives deep into my Top 10 Vibe Coding Tips – practical, actionable strategies you can use today to get significantly better results from AI coding assistants like Cursor, ChatGPT, Gemini, and others. Stop struggling with inconsistent or unusable code and start truly collaborating with your AI pair programmer. What You'll Learn (My Top 10 Vibe Coding Tips): Tip 1: Choose an AI-Friendly Stack: Why starting with the right tech (Next.js, TypeScript, TRPC, Prisma, Tailwind, etc.) makes a HUGE difference. I'll walk you through my recommended stack and open-source template. Tip 2: Start Outside the IDE: The power of planning before you code. Using speech-to-text (like SuperWhisper) and structured LLM prompts (BRD, PRD, Task Lists) with thinking frameworks. Tip 3: Use Agent Task Markdown Files: How a simple markdown checklist (agent_task.md) becomes a powerful tool for guiding AI agents and tracking progress. Tip 4: Develop with Storybook: Building UI components in isolation using Storybook for better testing, state management, and quality control. Tip 5: Guide AI with Rubrics: Create detailed rubrics (A-F grading) for aspects like UX design to give the AI clear quality targets, especially powerful with "thinking" models. Tip 6: Copy/Paste Your Codebase: Leverage the full context! Using tools like PasteMax to feed large amounts of code into LLMs with big context windows (like Gemini 2M). Tip 7: Organize & Optimize Cursor Rules: How to craft effective Cursor rules for consistent code style and add helpful post-actions like builds and commits. Tip 8: Add a Cursor Update File: Keep track of what your AI assistant has done by prompting it to maintain a simple update log. Tip 9: ISMP - "It Sucks Make it Pop": A simple but effective prompt technique for iterating on design and aesthetics with your AI. Tip 10: Vibe Debugging: A smarter way to debug. Instead of just asking for a fix, have the AI generate hypotheses first without writing code. Why These Tips Matter: These aren't just random tricks; they form a workflow that embraces the "vibe" of AI coding – more conversational, iterative, and context-aware. We'll cover: Specific Tooling: Next.js, TypeScript, TRPC, Prisma, NextAuth, Supabase, Tailwind CSS, Framer Motion, Ingest, Resend, S3, Storybook, PasteMax, Cursor, ChatGPT, Gemini. Prompt Engineering: Crafting effective prompts for planning, task generation, quality control, and debugging. AI Model Interaction: Leveraging "thinking" modes and large context windows. Practical Workflow: Integrating these tips into your daily development process. This is about moving beyond basic code generation and turning your AI assistant into a genuinely productive partner. Learn how to guide it effectively and build better software, faster. Join me as we explore how to truly master vibe coding! Don't forget to like, subscribe, and share this video with other developers looking to level up their AI coding game! Links: NextAI Starter Repo: https://github.com/kleneway/next-ai-starter BRD/PRD/Checklist prompts: https://chatgpt.com/share/67c5ee78-0b94-800d-b467-ceecdbf6ce70 Agent Tasklist example: https://gist.github.com/kleneway/07432638aeaf6210316ebbc32dfbe643 Storybook Link: https://www.storybook.js.org UX Rubric Example: https://github.com/kleneway/pastemax/blob/main/docs/ux-rubric.md PasteMax Open Source Repo: https://github.com/kleneway/pastemax/ Vibe Code vs Prompt Engineering image via Google Trends source: https://x.com/0xgaut Shout out to Ted (tedx_ai) for the debugging tips: https://x.com/tedx_ai Music: Basscode by EmeraldTurtle (aka me) created with Riffusion: https://www.riffusion.com/song/8fa231db-c7b1-437f-831e-a83126bb97fe