From Napkin Sketch to Deployed App: The AI-Powered Development Workflow

The Claim: 2 Hours from Idea to Live URL

This is not a marketing claim. This is a documented workflow. Not every feature takes 2 hours — complex features with external integrations or large data models take longer. But a well-scoped feature (3-5 user stories, 2-4 screens) consistently completes in 1.5-3 hours with the workflow described here.

Here is the complete process, broken down by step with realistic time estimates.

Step 1: Napkin Sketch (5 min)

Do not open a computer yet. Take a piece of paper or a whiteboard and write down:

• The core object (what data does this feature work with?)
• The main actions (create, read, update, delete? or something domain-specific?)
• The actors (who uses this? any different roles?)

For our example: a link shortener. Core object: link (original URL, short code, click count). Actions: create, list, delete, view analytics. Actor: authenticated user (their own links).

Step 2: User Stories with Acceptance Criteria (15 min)

Write 4-5 stories covering the main actions. For each, write 3 Given/When/Then criteria:

Story 1: As a user, I want to shorten a URL so that I can share a compact link.

• Given valid URL entered and "Shorten" clicked, when URL is valid format, then a short link like /s/abc123 is generated and shown
• Given the input is empty, when I click Shorten, then "URL is required" error appears
• Given I successfully shorten a URL, then a copy button appears next to the short link

Story 2: As a user, I want to see all my shortened links so that I can manage them.

• Given I have created links, when I view the dashboard, then I see each link with original URL, short code, and click count
• Given I have no links, when I view the dashboard, then I see "No links yet. Shorten your first URL above."

Story 3: As a user, I want to delete a link I no longer need.

• Given a link exists in my list, when I click Delete and confirm, then the link is removed from my list and deactivated

Story 4: As a visitor, I want to be redirected when I visit a short link.

• Given a valid short code in the URL, when a visitor loads /s/[code], then they are redirected to the original URL
• Given an invalid short code, when a visitor loads /s/[bad], then they see a "Link not found" page

Step 3: Story Map (10 min)

Activities: Authenticate → Create Link → Manage Links → Share Links → Track Usage

MVP line: Authenticate + Create + List (the minimum that works end-to-end)

Post-MVP: Click tracking, analytics charts, custom aliases, link expiry

Step 4: Wireframe (10 min)

Open Excalidraw. Draw:

Dashboard page:

• Header: "My Links" + user email top-right + logout
• Shortener form: URL input (full width) + Shorten button
• Result banner: appears after shortening with short URL + copy button
• Links table: Original URL | Short code | Clicks | Created | Delete button

Redirect page: Just a "Loading..." or "Link not found" message (users barely see this)

Step 5: AI Mockup Component (10 min)

Paste to v0.dev:

"Create a link shortener result card: short URL displayed prominently (large, monospace font), Copy button that changes to 'Copied!' for 2 seconds after click, original URL shown below in smaller muted text, click count badge, share icons (Twitter, LinkedIn). Dark theme, amber accent, Tailwind CSS, TypeScript."

Step 6: Assemble Spec Package (10 min)

Combine stories + wireframe description + component from v0.dev + constraints:

TECH: React, TypeScript, Tailwind, Supabase (auth + DB), Vercel (deployment)

DESIGN: [colors from your design system]

STORIES: [paste 4 stories with criteria]

SCREENS: [paste wireframe descriptions]

CONSTRAINTS: Supabase RLS — users see only their own links. Short codes: 6-char alphanumeric, generated server-side. Redirect logic as Vercel Edge Function.

Step 7: Build with Bolt.new (20 min)

Paste complete spec. Bolt generates the app. It will likely:

• Get the UI right (you specified it exactly)
• Get the Supabase integration mostly right
• Miss the Edge Function for redirects (fix separately)

Step 8: Review and Fix (30 min)

Run through all 4 user stories, checking each acceptance criterion. Typical issues:

• Copy button does not reset after 2 seconds (easy targeted fix)
• Table rows do not update after delete without page refresh (add optimistic update)
• Short code collision not handled (add retry logic in creation function)

Use targeted prompts: "The delete action removes the row from the database but the table does not update without refreshing. Add optimistic update — remove the row from local state immediately when delete is confirmed, then confirm with the API."

Step 9: Deploy (5 min)

Push to GitHub. Connect to Vercel. First auto-deployment completes in under 2 minutes. Add environment variables (Supabase URL and anon key). Done.

The Time Breakdown

| Stage | Time |

|---|---|

| Napkin + stories + story map | 30 min |

| Wireframe + AI mockup | 20 min |

| Spec package assembly | 10 min |

| AI generation | 20 min |

| Review + targeted fixes | 30 min |

| Deploy | 5 min |

| Total | ~115 min |

The investment in specification (30 min) saved approximately 60-90 minutes of iteration that a vague-prompt approach would have required.

For the full capstone walkthrough, see the Napkin to Deployed Feature lesson in the Design & Specify series.