Play 4: Break Down Features & Build

At this point, I switch from high-level strategic work (often with ChatGPT) to in-the-code implementation with a tool that has full codebase context, like Cursor. The goal is to move from user stories to the smallest possible working feature that proves the story can be accomplished.

The key is to resist the urge to build the whole story at once. Instead, you break the story down into individual capabilities, write a tight spec for each one, and then let the AI do the heavy lifting.

The Play-by-Play: From Story to Shipped Feature

Here's the loop I run for every feature, from the project submission form to the vibe button.

Step 1: Map a Story to a Spec (20 mins)

Pick your highest-priority user story and identify the single most important capability required to fulfill it.

For the maker-shares-project story, the core capability was a project submission form. I didn't worry about the dashboard, the analytics, or anything else. Just the form.

Then, I wrote a focused spec for just that one capability. This spec is the brief for your AI.

• Outcome: What does success look like for the user?
• Data Model: What are the exact data structures involved?
• Implementation Constraints: What tech and patterns must be used?
• Acceptance Criteria: How will we know it's done?

Step 2: Prompt the Minimal Feature (30 mins)

Now, you give the spec to your AI and ask for the minimal implementation. Your prompt should be specific, constrained, and clear.

Here's a prompt based on the one I used for the submission form:

"Implement the project submission feature according to the spec.

• Tech: Use a Next.js Server Component containing a Client Component for the form, which calls a Server Action.
• Data: Use this exact Project type from app/src/server/db/projects.ts for the data model and Zod for validation on the Server Action.
• Constraint: Keep the total lines of code for the form component under 200 lines.
• Goal: Fulfill the maker-shares-project user story by creating a low-friction, high-honesty submission experience."

This prompt works because it gives the AI clear guardrails. It knows the tech, the data shape, the size limit, and the user-centric goal.

Step 3: Test and Refine (10 mins)

The AI's first pass will be fast, but it won't be perfect. Your job is to act as the senior engineer. Test the feature against the acceptance criteria from your spec.

I found a few issues with the first pass of the submission form:

• The error handling was too generic.
• It didn't save a draft if you navigated away.
• The success message was unclear.

I then used specific, targeted prompts to fix these issues: "Add local storage draft-saving to the form." or "Improve the error messages to be more user-friendly."

Step 4: Document and Repeat

Once the feature is working and clean, document your learnings in your development history and move on to the next capability for that user story, or the next user story in your priority list.

This iterative loop—Spec > Prompt > Refine > Repeat—is the engine of vibe-coding. It lets you move incredibly fast while maintaining high quality, because you're always building on a solid, verified foundation.

With the core features built, the next step is to step back and look at the whole experience.

Next: Iterate on the UX