Vibe Coding Starter Guide: From Design to production Code in minutes

Every time you try to get AI to build a UI, it looks... let's say, less than ideal.
We've all been there, the purple design of doom and slop code that just doesn't work.

Until now.

But by the end of this tutorial, you'll learn how to make a good-looking, responsive user interface for pretty much any design you throw at it.
Not only that, you'll have it powered by high-quality, maintainable code.

If video is your jam, here's the full tutorial on YouTube:

I'll share everything you need to reproduce this: the prompts, the workflow, the code.
Let's dive in! 🏊‍♂️

What You'll Learn

This tutorial covers a 3-step workflow that transforms any design into production-ready code:

1. Step 1: Generate a structured JSONC design brief
2. Step 2: Bootstrap codebase (the part nobody tells you)
3. Step 3: Generate the Code with a 1-shot prompt in Cursor

Plus, you'll get a free starter kit with all the rules you need to skip the painful setup and start shipping immediately.

The magic isn't in any single step. It's in the combination. Each step builds on the previous one to give AI the context it needs to produce genuinely good output.

Step 1: Get Your Design

Before we write any code, we need a design to work from. You have a few options:

Option A: Generate with AI

You can use ChatGPT or Google Gemini to generate design concepts. I've written design prompts in the past that work well for this—the key is being specific about the style, colors, and components you want.

Here's a template prompt you can use:

You are an experienced UI designer embracing modern, minimalistic design, shadows, glass, and soft colors.

Your role is to create a professional, beautiful mockup that is ready for delivery based on these requirements:

{{requirements}}
## 1. Overall Style & Visual Language
This interface represents a premium, modern fintech / crypto trading dashboard using a dark theme.
The visual language combines **soft neumorphism**, and **luxury Web3 aesthetics**.

Core characteristics:
- Warm gold/orange accent highlights
- Monochromatic color palette with minimalistic effects and shadows
- Card-based layout with depth and subtle backgrounds
- Minimal borders, separation via shadows or light backgrounds

Target perception:
- Secure
- Professional
- High-end / institutional-grade
- Optimized for experienced traders

---

## 2. Layout Structure

### Global Layout
- Desktop-first dashboard
- Output proportions: 3:2
- Three main regions:
  1. Top navigation bar (horizontal)
  2. Left sidebar navigation (vertical)
  3. Main content area (multi-column grid of cards)

Spacing is generous, prioritizing clarity and visual breathing room.

---

## 3. Top Navigation Bar
- Height: 72px
- Left:
  - Brand logo text "Mevolut"
  - Stylized "M"
  - Gold/orange accent
- Center:
  - Navigation links: Dashboard, Security, Referral, Trading Fees, API management
- Right:
  - Order link
  - Primary CTA: “Deposit” (gold pill button)
  - User avatar (circular)
  - Theme toggle (moon icon)

Typography:
- Clean sans-serif
- Medium weight
- White primary text, muted gray inactive states

---

## 4. Left Sidebar Navigation
- Width: 240px
- Background: near-black
- Vertical navigation items with icons:
  - Dashboard (active)
  - Security
  - Referral
  - Trading Fees
  - API management
- Bottom-aligned:
  - Settings

Active item:
- Subtle background highlight
- Slight background tint
- Rounded container

Icons:
- Outline style
- Gold accent on active state

---

## 5. Main Content Area

### 5.1 User Overview Card
- Large rounded card at top
- Left:
  - Circular avatar
  - Greeting text (“Hello…”)
  - User name
- Inline info blocks:
  - UID (copy icon)
  - Identity verification status
  - Security level
  - Time zone
  - Last login timestamp
- Right:
  - “Hide info” toggle

Style:
- Subtle inner shadows

---

### 5.2 Deposit / Buy Card
- Medium-sized card
- Title text explaining deposit options
- Two action rows:
  - Deposit (dollars or crypto)
  - Buy stocks (local currency)
- Each row:
  - Icon
  - Label
  - Arrow action button (gold accent)

---

### 5.3 Total Asset Card
- Displays USD balance and USD equivalent
- Large, faded Dollar symbol watermark in background
- Action tabs:
  - Buy stocks
  - Deposit
  - Withdraw
- Numeric values are large

---

### 5.4 VIP Level Card
- Shows current VIP level
- Spot and futures fee rates
- Progress bar for token holdings
- “View more” link

Progress bar:
- Rounded
- Dark background track

---

### 5.5 Current Holdings Table
- Card containing a table layout
- Columns:
  - Coin (icon + name)
  - Price
  - 24h Change
  - 4h Trend (sparkline)
  - Actions (Deposit, Withdraw, Trade)

Sparklines:
- Green for positive trend
- Red for negative trend

Hover:
- Subtle background highlight per row

---

### 5.6 Affiliate Program Card
- Promotional card
- Gold coin illustration
- Short description and CTA button (“Apply now”)

---

### 5.7 Information / News Card
- Vertical list of announcements
- Headline + timestamp
- “View more” link at top

---

## 6. Color Palette
- Primary background: deep charcoal / black
- Card surfaces: slightly lighter
- Accent color: warm gold
- Text hierarchy:
  - White (primary)
  - Muted gray (secondary)
  - Dark gray (disabled)
- Status colors:
  - Green for positive
  - Red for negative

---

## 7. Effects & Interaction
- Rounded corners throughout (sm)

# Design tokens:
{
  // Global theme definition
  "theme": {
    "mode": "dark",
    "style": [
      "soft-neumorphism",
      "premium-fintech"
    ]
  },

  // Layout measurements and structure
  "layout": {
    "type": "desktop-dashboard",
    "grid": "three-column",
    "sidebarWidth": 240,
    "topbarHeight": 68,
    "contentPadding": 24
  },

  // Color system
  "colors": {
    "background": "#0B0D10",        // Main app background
    "primaryAccent": "#F5A623",     // Gold/orange highlight
    "secondaryAccent": "#FFB547",
    "textPrimary": "#FFFFFF",
    "textSecondary": "#B0B3B8",
    "textMuted": "#6B6F76",
    "success": "#22C55E",
    "danger": "#EF4444"
  },

  // Typography scale
  "typography": {
    "fontFamily": "SF Pro, system-ui, sans-serif",
    "weights": {
      "heading": 600,
      "body": 400,
      "numeric": 500
    },
    "sizes": {
      "h1": 24,
      "h2": 20,
      "h3": 16,
      "body": 14,
      "caption": 12
    }
  },

  // Core UI components
  "components": {
    "card": {
      "borderRadius": 16,
      "shadow": "0 20px 40px rgba(0,0,0,0.4)",
      "border": "none",
      "background": "#14171C",
    },

    "button": {
      "primary": {
        "textColor": "#0B0D10",
        "borderRadius": 999,
      },
      "secondary": {
        "background": "transparent",
        "textColor": "#F5A623"
      }
    },

    "sidebar": {
      "background": "#0E1014",
      "itemRadius": 12,
      "iconStyle": "outline"
    },

    "table": {
      "rowHeight": 56,
      "divider": "subtle",
      "hoverHighlight": true,
      "sparkline": {
        "positiveColor": "#22C55E",
        "negativeColor": "#EF4444"
      }
    },

    "progressBar": {
      "height": 6,
      "radius": 999,
      "fillColor": "#22C55E",
      "backgroundColor": "#2A2E35"
    }
  },

  // Icon system
  "icons": {
    "style": "outline",
    "size": 18,
    "colorInactive": "#6B6F76",
    "colorActive": "#F5A623"
  }
}
{{/requirements}}

You can add custom instructions on style, colors, layout and content and attach the prompt as context.

For example:

Use the attached specification as a template to generate a design brief.

Your task is to write a new specification for a fintech app called "Roobin Mood".
Rewrite it based on the following requirements:
- Style: Skeumorphic, modern, deep shadows, glass, soft colors.
- Colors: Green accents, black background, white text.
- Layout: 3-column layout, with a sidebar on the left and a main content area on the right.
- Content: A dashboard with a sidebar navigation and a main content area.
- Components
  - A line chart showing account balances
  - A table showing past transactions
  - A card showing the latest news
  - A card showing total gains/losses

<paste design-brief from above>

To check if this looks right, you can try to generate an image based on the new specification and iterate on it until you're happy with the result. This way you don't code up a design that doesn't look right.

Option B: Use an image as input

Most commonly, you'll have a mockup that you either got from your designer or have found on the internet.
There are a few options here:

• Use Mobbin for entire flows
• Get a design from Dribbble
• Take a screenshot of an app that you like

Attach it as the context for the prompt, and then make sure to specify the style, colors, layout and content in the prompt as shown above.

Let's just go to Dribbble for this tutorial to keep it short.

1. Go to dribbble.com
2. Search for something like "Fintech dashboard" or whatever you're building
3. Pick a design you like

I'll go with this one:

What Makes a Good Reference Design?

Look for designs that have:

• Clear visual hierarchy — Headers, cards, sections are obvious
• Consistent spacing — Not chaotic or random
• A defined color palette — Usually 2-3 main colors
• Real UI elements — Charts, tables, cards, navigation

The better the reference, the better the output.

Step 2: Generate the Design Brief

This is where the secret sauce comes in.

Through much experimentation, I've found that converting the design to a JSONC format (JSON with Comments) gives the most accurate results. This structured format helps AI understand exactly what to build.

The Design Brief Prompt

Paste your design image into ChatGPT and use this prompt:

TODO: add prompt

I use ChatGPT's image analysis model because it's really good at extracting design details. I'm using GPT 5.1 with thinking, but anything above GPT 5 should work fine. You can also try Gemini.

Understanding the Prompt

The prompt has four key sections:

1. Context — What you're building (this is the only part you change)
2. JSONC Output — Asks for a detailed design specification in JSONC format
3. Color Handling — How to extract and name colors semantically
4. Developer Brief — A plain-language overview of the implementation

Example Output

The result is a fairly long and detailed specification. You don't need to read every line—just copy the entire output (JSONC + brief) for the next step.

The JSONC will include things like:

• Color palette with semantic names (primary, secondary, accent)
• Component breakdown (cards, charts, navigation)
• Spacing and typography specifications
• Layout structure and grid system
• Responsive behavior hints

Step 3: Generate the Code

Now we head to Cursor (or your AI coding tool of choice).

The Implementation Prompt

Here's the prompt template I use:

TODO: add prompt

This prompt includes requirements like:

• Responsive design — Works on mobile, tablet, and desktop
• Dark mode support — Built-in from the start
• No magic strings — Keeps code quality high
• Design system usage — Uses your existing color/spacing tokens

The Part Nobody Tells You

Here's the thing: when I pasted the prompt in Cursor, I wasn't starting from scratch. I was already in a codebase.

And that is actually the most important secret.

Big AI doesn't want you to know this because they'd rather have you bootstrap things from scratch over and over, using millions of tokens. More tokens = more money for them.

But we've been building codebases for decades. CLI tools are mature. Starter kits exist. You should never start vibe coding from a blank codebase.

Using the Starter Kit

The starter kit includes:

• Pre-configured Tailwind CSS with a design system
• Color configuration that's easy to customize
• Font setup ready to swap
• Component structure that scales
• All the boring config already done

When you use the starter + design brief + implementation prompt, you get code that:

• Is responsive out of the box
• Uses proper design tokens (not hardcoded colors)
• Is themeable with one line change
• Actually looks good

The Result: Why This Actually Works

Let me show you why this method produces genuinely good code.

It's Responsive

The dashboard adapts smoothly from mobile to desktop. The animations, the layout shifts—it all just works.

It Uses a Real Design System

If I open the colors config file and change the primary color from green to red... the entire dashboard updates. One line. That's it.

This is AI that actually works—not slop.

The Code Is Maintainable

Looking at the generated code:

• No hardcoded values
• Uses primary/secondary color tokens
• Components are properly structured
• Files are organized logically

This is code you can actually ship and maintain.

Download the free starter kit

What's in the Starter Kit

vibe-coding-starter/
├── app/                    # Next.js App Router
├── components/             # Component structure
├── lib/                    # Utilities
├── styles/
│   └── colors.ts          # Easy color customization
├── tailwind.config.js     # Pre-configured Tailwind
└── ...                    # All the boring config

How to Use It

1. Clone the repo
2. Install dependencies (npm install or pnpm install)
3. Get your design + generate the brief (Steps 1-2)
4. Open in Cursor and paste the implementation prompt
5. Watch the magic happen

Design style reference

Use this reference to mix and match options when writing your design brief. Copy the terms that match your vision.

Visual Style

Example usage:

Style: Glassmorphism, modern, soft shadows, frosted glass effects, rounded corners

Color Themes

Example usage:

Colors: Dark mode, charcoal background (#0B0D10), gold/orange accent (#F5A623), white primary text, muted gray secondary

Layout Structures

Example usage:

Layout: 3-column layout with collapsible left sidebar (240px), top navigation bar (68px), main content area with card grid

Putting It Together

Here's a complete example combining all elements:

Style: Glassmorphism, modern, soft shadows, premium fintech aesthetic
Colors: Dark mode, near-black background (#0B0D10), gold accent (#F5A623), white/gray text hierarchy
Layout: Left sidebar (240px) + top bar (68px) + main content with bento grid
Components:
  - User greeting card with avatar and account info
  - Total balance card with large numbers and quick actions
  - Portfolio chart (line chart with area fill)
  - Holdings table with sparklines and 24h change
  - VIP status card with progress bar
  - Recent activity feed
  - Promotional banner for referral program

Common Mistakes to Avoid

❌ Don't Start from Scratch

This is the #1 mistake. If you ask AI to "set up a new Next.js project with Tailwind and then build a dashboard," you're wasting tokens and getting inconsistent results.

Use a starter. Always.

❌ Don't Skip the Design Brief

"Just build me a dashboard" is not a good prompt. The JSONC design brief gives AI the structured context it needs to make good decisions about colors, spacing, and component structure.

❌ Don't Use Vague Prompts

Be specific. Include requirements. Reference the design brief. The more context you give, the better the output.

❌ Don't Expect Perfection on First Try

AI is good, but it's not magic. You might need to iterate. The good news is that with a proper starter and design brief, iterations are minor tweaks—not complete rewrites.

Going Further: When You're Ready to Ship

The starter kit is great for learning and prototyping. But when you're ready to ship something real, you'll want more:

• A complete design system with 30+ components
• Blog functionality with MDX and SEO
• Search that actually works
• AI rules and commands to keep Claude/Cursor consistent
• Production-ready code with proper error handling

That's what PageAI is built for.

Wrapping Up

This 3-step workflow transforms AI from "kind of useful" to "actually shipping production code":

1. Get a design — Reference matters
2. Generate a JSONC brief — Structure helps AI understand
3. Use a starter kit — Don't waste tokens on setup

The secret isn't any one tool or prompt—it's the combination of good inputs (design + brief) with a solid foundation (starter kit).

Now go vibe code responsibly. 🎨

Resources

• Starter Kit on GitHub — Free, ready to clone
• PageAI — Complete production-ready codebase
• Dribbble — Design inspiration
• Cursor — AI coding IDE

Happy coding! 🚀