Build With AI, Not Just Around It Vibe Coding Workshop by Helio, Siva & Vilva 

Siva Arunachalam Helio Medeiros Who Are These Guys? Ok... Engineer Managers.... 

What We're Building Split-flap display Characters flipping is optional, but styling should evoke it Real Data Query booking data via mock or real API Auto refresh Refresh data every minute Tech Stack React, Node.js, Optional LLM 

What We're Building 

Reflection Prompt Surprises What surprised you? Frustrations What frustrated you? Successes What did AI do well? Failures Where did it fail? Next Time What would you try differently? 

Great Vibes Start with a Great Plan To vibe well, you need to plan well. Vibe coding isn't code generation without thought—it's co-creation. A strong prompt plan gives structure to the flow. First step? Learn how to build that plan with the AI. 

Workshop Agenda Here's our journey for the next three hours: 15min - Concepts Learn the foundations of Vibe Coding methodology. 15min - Lab 1: Ideation & Spec Partner with AI to generate app concepts and specifications. 15min - Lab 2: Plan & Prompt Develop implementation strategies with AI assistance. 30min - Lab 3: Vibing it Build the application just vibing it 5 30min - Lab 4: Supervising it Build the application with versioned and reviewed and steered steps 10min - Reflection Document insights and optionally share with the group. 5min - Wrap-up & Vision Explore the future of AI-integrated development workflows. 

What is Vibe Coding? Co-creation with AI New way of building software with generative AI Think Together Prompt like you code Iterative Process Reflect and refine 

Vibe Coding vs AI Supervised Development Vibe Coding Let AI flow freely as a collaborative partner. Follow creative intuition Explore unexpected suggestions Build momentum through rapid iteration Ideal for: Ideation, prototyping, and creative problem-solving. AI-Supervised Structure AI interactions with methodical oversight. Prompt with precision Review each AI output thoroughly Guide the AI with explicit instructions Ideal for: Production code, complex systems, and security-critical applications. 

Popular Vibe Coding Tools Cursor: AI-native IDE that can modify multiple files, stage changes, and support chat-first dev. GitHub Copilot Workspace: Plan, prompt, and implement full features via chat. Windsurf Editor: Live IDE with supervised agents that suggest structural changes across files. Aider: Terminal-based AI coding assistant with Git-aware workflows Claude Code: Excellent multi-file reasoning and context window; ideal for guided planning and refactoring. These tools accelerate the vibe coding workflow we'll practice today. 

Lab Structure Create a GitHub Project Work on your own version 30-Minute Labs Focused work sessions Discussion Breaks Share and learn together Create Deliverables spec.md, prompt_plan.md, App 

Converse With LLM Use AI to refine your app idea step-by-step. Answer One Question Build context iteratively as the AI explores your concept deeply. Create Technical Spec Develop a detailed specification document ready for development handoff. Save as spec.md Summarize the conversation into a comprehensive specification document. Lab 1 – Ideation & Spec Creation PROMPT: "Ask me one question at a time so we can develop a thorough, step-by-step spec for this idea. Each question should build on my previous answers, and our end goal is to have a detailed specification I can hand off to a developer. Let’s do this iteratively and dig into every relevant detail. Remember, only one question at a time." PROMPT: "Now that we’ve wrapped up the brainstorming process, can you compile our findings into a comprehensive, developer-ready specification? Include all relevant requirements, architecture choices, data handling details, error handling strategies, and a testing plan so a developer can immediately begin implementation." 

Ideation & Spec Creation PROMPT: "Ask me one question at a time so we can develop a thorough, step-by- step spec for this idea. Each question should build on my previous answers, and our end goal is to have a detailed specification I can hand off to a developer. Let’s do this iteratively and dig into every relevant detail. Remember, only one question at a time." PROMPT: "Now that we’ve wrapped up the brainstorming process, can you compile our findings into a comprehensive, developer-ready specification? Include all relevant requirements, architecture choices, data handling details, error handling strategies, and a testing plan so a developer can immediately begin implementation." 

Reflection Prompt Surprises What surprised you? Frustrations What frustrated you? Successes What did AI do well? Failures Where did it fail? Next Time What would you try differently? 

Lab 2 – Implementation Planning PROMPT: "Draft a detailed, step-by-step blueprint for building this project. Then, once you have a solid plan, break it down into small, iterative chunks. Review the results and ensure that the steps are small enough to be implemented safely, but big enough to move the project forward." PROMPT: "From here, generate a series of prompts for a code-generation LLM that will implement each step. Prioritize best practices and incremental progress, ensuring no big jumps in complexity at any stage. Ensure that each prompt builds on the previous ones and that there is no orphaned code." Compile into prompt_plan.md and todo.md. Transform Your Spec Choose Your Approach Select TDD for test-first development or non-TDD for functionality-first implementation. Generate Prompts Craft strategic prompts for code- generation LLM. Focus on specific, incremental implementations. Planning Documents Convert your specification into actionable steps. Break complex features into manageable chunks. 

Implementation Planning PROMPT: "Draft a detailed, step-by-step blueprint for building this project. Then, once you have a solid plan, break it down into small, iterative chunks. Review the results and ensure that the steps are small enough to be implemented safely, but big enough to move the project forward." PROMPT: "From here, generate a series of prompts for a code-generation LLM that will implement each step. Prioritize best practices and incremental progress, ensuring no big jumps in complexity at any stage. Ensure that each prompt builds on the previous ones and that there is no orphaned code." 

Reflection Prompt Surprises What surprised you? Frustrations What frustrated you? Successes What did AI do well? Failures Where did it fail? Next Time What would you try differently? 

Lab 3 – Vibe the build You are now responsible for building this Chrome Extension using the files already present in this workspace. You’ll find everything you need in: - `spec.md` — a complete product specification - `prompt_plan.md` — a step-by-step implementation plan, divided into atomic prompts - `todo.md` — a progress checklist aligned with the plan Your task: - Read and follow `prompt_plan.md` from start to finish - For each step: - Implement the described feature or code change - Write any required tests - Ensure all changes are clean, committed, and test-passing - Check off the corresponding task in `todo.md` - Do **not** stop to ask me anything. Proceed through the plan autonomously. - If anything is unclear, make a best-effort assumption and continue. Use your best engineering judgment, apply best practices, and complete the full implementation. Start now. Feed the Full Plan Set the Rules Ask it to execute all atomic prompts in order, autonomously Trust the Plan No questions, no pauses— just clean, testable code step by step Review the Output Once complete, inspect commits, test results, and repo structure Provide Cursor all 3 documents: spec.md, prompt_plan.md, todo.md 

Vibe Coding - prompt You are now responsible for building this Chrome Extension using the files already present in this workspace. You’ll find everything you need in: - `spec.md` — a complete product specification - `prompt_plan.md` — a step-by-step implementation plan, divided into atomic prompts - `todo.md` — a progress checklist aligned with the plan Your task: - Read and follow `prompt_plan.md` from start to finish - For each step: - Implement the described feature or code change - Write any required tests - Ensure all changes are clean, committed, and test-passing - Check off the corresponding task in `todo.md` - Do **not** stop to ask me anything. Proceed through the plan autonomously. - If anything is unclear, make a best-effort assumption and continue. Use your best engineering judgment, apply best practices, and complete the full implementation. Start now. 

Reflection Prompt Surprises What surprised you? Frustrations What frustrated you? Successes What did AI do well? Failures Where did it fail? Next Time What would you try differently? 

Lab 4 – Supervised CHOP - chat-oriented programming You are helping me complete a project using three files already in this repo: - `spec.md` — full product requirements - `prompt_plan.md` — detailed step-by-step implementation plan - `todo.md` — current checklist tracking what’s done Repeat the following supervised flow: 1. Open `todo.md` and find the first task that is **not completed** (i.e. `[ ]`) 2. Find the matching step in `prompt_plan.md` by using the same ID (e.g. S7-1, S8-2) 3. Implement the code changes exactly as described in the prompt plan 4. Write or update the tests as specified 5. Ensure **all tests pass** 6. If implementation is working and safe, **commit the code** - Use a meaningful commit message with the step ID 7. If the implementation is incomplete, breaks something, or needs review: - Comment clearly in the code - Stage changes, but **do not commit** Repeat this process one task at a time until I tell you to stop. Begin now. Vibe From Plan Drive with Prompts Use one atomic step at a time from prompt_plan.md Track with TODO Check off progress in todo.md, verify tests or outputs Review & Adapt Modify prompts, backtrack, or replan when needed Use Cursor, Aider, or Claude to guide code generation 

Supervised CHOP - prompt You are helping me complete a project using three files already in this repo: - `spec.md` — full product requirements - `prompt_plan.md` — detailed step-by-step implementation plan - `todo.md` — current checklist tracking what’s done Repeat the following supervised flow: 1. Open `todo.md` and find the first task that is **not completed** (i.e. `[ ]`) 2. Find the matching step in `prompt_plan.md` by using the same ID (e.g. S7-1, S8-2) 3. Implement the code changes exactly as described in the prompt plan 4. Write or update the tests as specified 5. Ensure **all tests pass** 6. If implementation is working and safe, **commit the code** - Use a meaningful commit message with the step ID 7. If the implementation is incomplete, breaks something, or needs review: - Comment clearly in the code - Stage changes, but **do not commit** Repeat this process one task at a time until I tell you to stop. Begin now. 

Reflection Prompt Surprises What surprised you? Frustrations What frustrated you? Successes What did AI do well? Failures Where did it fail? Next Time What would you try differently? 

From spec to blueprint, prompt by prompt Build with mocked logic, refine structure Learning by Doing Plug in real tools and reflect on limits Concise and structured prompting Usage as a collaborator at eye-level To guide the vibe Letting the AI flow Less control, more exploration Vibe Coding is Recap: Vibe Coding Workshop Learn to collaborate, not automate Keep the tests passing at all times 

Future Integration Part of development evolution Developing Practices Building new workflows Starting Point Workshop is just the beginning Our Vibe Coding Vision 

No Silver Bullets – Just Right Practice, Right Time When to Vibe Code Prototyping or early exploration phases Low-risk environments with small blast radius Projects that will undergo formal review later When you need to quickly enter flow state When to Supervise Precision and traceability requirements Focus on long-term code quality Collaborative development at scale Need for consistent, reusable components 01 02 

Like any development practice, choose your approach based on context. The right method depends on your specific situation and goals. 

Now it is your time to keep practicing build with AI, vibing or not