Objective
Upon completing this lab, you will be able to:
- Experience the process of generating a web application from a natural language prompt using a tool of your choice.
- Critically evaluate the output of an AI coding assistant by interrogating its capabilities and limitations.
- Understand the challenges of iterating on AI-generated code by adding complex new features like security and governance.
- Reflect on the role of vibe coding in the modern prototyping lifecycle, connecting it to concepts from the playbook like the DIMASI Cube and the "Duct Tape that Floats" philosophy.
Tools/Resources Needed
- A computer with a stable internet connection.
- A modern web browser (e.g., Chrome, Firefox, Safari).
- A simple text editor (e.g., VS Code, Notepad, TextEdit) to save and view
.html files.
- An AI Vibe Coding tool of your choice (see Step 0).
Description of Assignment
The process of vibe coding dramatically accelerates the journey from a concept sketched on a napkin to an interactive prototype that can be tested and validated, as discussed in Chapter 8: This MVP Doesn’t Dunk. This lab is designed as an exploration. You will see firsthand how an initial "vibe" is translated into code, interrogate the AI about its own creation, and attempt to iterate on the design by adding new, more complex requirements.
Step 0: Choose Your Tool
The landscape of AI-powered development tools is evolving at an incredible pace. For this exercise, your first task is to research and select a tool for vibe coding. You can use a general-purpose Large Language Model (LLM) or a specialized coding platform.
Some options include:
- Direct LLMs: Gemini, Claude, ChatGPT, DeepSeek, Grok, Qwen
- Specialized Platforms: bolt.new, Replit, Poe, AirTable, base44, Lovable, Bubble, Dify.ai, floot, https://build.cloudflare.dev/, cursor,
Your choice of tool will influence the entire experience. Part of this lab is discovering the strengths and limitations of the platform you choose.