Part 1: Scoping with AI
Before generating any code, we use AI to help scope and clarify our idea. Here's a powerful prompt formula:
Scoping prompt template
Idea → Scope
I want to build [your idea]. Help me scope this down to a prototype that: 1. Solves ONE specific problem 2. Can be built in under 4 hours 3. Has a clear way to test if it's valuable Ask me clarifying questions, then suggest the minimal feature set.
Part 2: Generating Code Structure
Once scoped, we move to code generation. The key is being specific about technologies and constraints.
Code generation prompt
Scope → Code
Create a [Next.js/React] prototype for [your scoped idea]. Requirements: - Use [Tailwind CSS] for styling - Keep it to [3-5] screens maximum - Include placeholder data, no backend needed - Focus on the core user flow: [describe the flow] Start with the file structure, then build each component.
Part 3: Iterating on the Build
The magic of AI coding agents is rapid iteration. Instead of rewriting code, you describe changes in plain English.
Iteration prompts
Change Request
Change the [button/header/layout] to [new design]. Keep everything else the same.
Add Feature
Add a [feature] to the [component]. It should [behavior description]. Use the existing styling patterns.
Fix Issue
The [component] is [problem description]. Fix it while maintaining the current functionality.
Pro tip: Make small, incremental changes. Big rewrites often break things. Think of it like steering a ship — small adjustments.