Vibe Coding Starter Guide: from Design to Production Code with Agentic AI in Cursor

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 looks like everybody else's AI-coded design. 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.

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 2-step workflow that transforms any design into production-ready code:

  1. Step 1: Generate a structured JSONC design brief
  2. Step 2: Generate the code with a one-shot prompt in Cursor

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.

Preparing the Design

Before we write any code, we need a design mockup to work from. This workflow starts from one image of a design mockup. This means that it'll work with any design you throw at it.

Option A: Generate with AI

You can use ChatGPT or Gemini to generate design concepts. The key is being specific about the style, colors, and components you want. You can add custom instructions on style, colors, layout and content and attach the prompt as context.

Option B: Use an image as input

Most commonly, you'll have a mockup that you would like to code up. Options: use Mobbin (https://mobbin.com/) for entire flows, get a design from Dribbble (https://dribbble.com/), or take a screenshot of an app that you like. Attach it as the context for the prompt, and specify the style, colors, layout and content.

What Makes a Good Reference Design?

  • 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. We'll now take the design mockup and convert it into a structured JSONC design brief.

Step 1: Generate the Design Brief

The design needs to be converted into something the AI coding agent can use. Through much experimentation, converting the design to a JSONC format (JSON with Comments) gives the most accurate results.

Here's a template prompt you can use:

This is a dashboard of a modern fintech app called Mevolut.

Thoroughly analyze the UI in this screenshot and describe it in as much detail as you can to hand over from a UI designer to a developer. The brief should cover both light and dark mode and contain responsive breakpoints matching Tailwind CSS defaults.
Output characteristics as structured JSONC.

For colors, extract a rough palette and only detail accents and complex media. The goal is to use only 2 palettes: primary and secondary similar to Tailwind colors. Alongside these 2, you can define any number of grays and accent colors for more complex UI (gradients, shadows, SVGs, etc.).

End with a prompt explaining how to implement the UI for a developer, but don't mention any tech specs; only a brief of the UI to be implemented and the token rules + usage. Output the prompt as a Markdown code block.

The only part you need to change is the first line. The output should be two code blocks: one for the design brief and one for the JSONC design specification. Make note of both as you'll need them in Step 2.

Step 2: Generate the Code

With the design brief in hand, it's now time to generate the code in Cursor. The prompt should specify responsive design, dark mode support, no magic strings, and design system usage.

Here's the prompt template:

Your task is to implement a new route on /dashboard, following the design + development brief below. Implement thoroughly, in a step-by-step manner, and use built-in, standard Tailwind CSS design tokens instead of hardcoding values.

For colors and font families, use the defined values present in
@tailwind.config.js, e.g. 'bg-primary-500' etc. instead of the hardcoded primary/secondary values in the JSON brief. For one-off colors/grays etc. the JSON values are acceptable.

**Requirements**

- responsive (full width bg with centered content on larger screens)
- theme aware components with light and dark mode support (you can toggle with @ThemeSwitch.tsx; make sure to include that in the menu bar)
  - update @data/config/colors.js to match the colors in the design brief
  - *important* make sure to include light and dark mode colors by using Tailwind's dark mode classes (dark:)
  - all components must adapt to theme changes
- *do not use* magic strings, hex values, or px values. Replace all with Tailwind classes if possible.
- split reusable or complex parts of the UI into components so the code is maintainable and easy to understand.
- if any sample data is generated, place it in a separate file to keep the code clean.

**Note**

- the app is already running a dev server at port 6006

**Assignment brief**

<paste design brief from Step 1 here>

**Design specification**

<paste JSONC design specification from Step 1 here>

Replace the design brief and JSONC design specification with the actual content from Step 1.

The Result: Why This Actually Works

AI is capable of doing incredible things. The better the context, the better the output. This workflow works because we provide the AI with good, structured context and a starting codebase that prevents it from going off the rails.

Why This Code Is Production-Ready

  1. The dashboard is fully responsive out of the box.
  2. It's themeable, flexible, and supports both light and dark mode.

The generated code uses proper design tokens, well-structured components, and logical file organization.

Wrapping Up and Next Steps

This workflow is a great way to get started with AI coding. When done, you can deploy the codebase to any provider (e.g. Vercel): push to GitHub, sign up with "Log in with GitHub", select the repo and click "Deploy".

The secret isn't any one tool or prompt. It's the combination of good inputs (design + brief) with a solid foundation (starter kit), plus the rules and setup that come with it.

Common Mistakes to Avoid

  • Skipping (or weakening) Step 1's JSONC design brief — vague instructions lead to wrong spacing/hierarchy.
  • Letting AI generate the entire codebase — use a starter kit with design system, SEO, and AI rules.
  • Magic strings — prefer Tailwind tokens and design-system primitives.
  • Treating responsive + dark mode as optional — require and verify them from the start.
  • Not modularizing early — split reusable UI into components and keep sample data in separate files.

Resources

  • Starter Kit on GitHub: Free, ready to clone
  • Dribbble (https://dribbble.com/): Design inspiration
  • Cursor: the IDE used for agentic AI coding
  • Claude Code: the CLI used for agentic AI coding