Free · Dashboard BuilderGet yours→

Build guide · The next step after your PRD

You have a PRD. Here’s how to ship it.

Seven AI coding tools, one decision matrix, exact first prompts for each. Pick one, paste the prompt, watch your dashboard build itself. Most people get to a working prototype in 1–5 hours.

30-second pick

Which tool fits you?

Don’t agonize — any of these will get you to a working dashboard. Pick the one whose vibe matches yours and move.

  • Best for non-coders

    Lovable · Bolt · v0

  • "I want to learn"

    Cursor

  • Serious multi-file work

    Claude Code

  • ChatGPT users

    Codex CLI

  • Full-stack from a browser

    Replit Agent

The deep dive

Pick one. Run the prompt.

Each section below has the exact cost, install steps, and first-prompt-to-paste so you can start in under 10 minutes.

Claude Code

Recommended

Anthropic's official CLI — runs in your terminal, edits files directly.

Claude Code docs
Best for
Serious multi-file projects. The model that follows long PRDs without losing the plot.
Cost
Pro plan $20/mo or API pay-as-you-go (~$3–10 for a small dashboard)
Install (3 steps)
  1. Install Node.js 18+ if you don't have it (nodejs.org)
  2. In your terminal: npm install -g @anthropic-ai/claude-code
  3. Run: claude — log in with your Claude Pro account or paste an API key

First prompt to paste

Read the PRD at PRD.md. Build a Next.js 14 app that implements every panel in the spec. Use Tailwind for styling, mock data where the PRD says 'wire real data with a sprint.' Keep components under 200 lines, prefer named exports. Commit when each panel is done. Start with the Dashboard panel.

What to expect

Claude reads your PRD end-to-end, scaffolds the project, writes each component, runs the dev server, and shows you what's broken before fixing it. Average dashboard: 3–5 hours of mostly watching it work.

Common gotchas

  • Drop the PRD into the project root as PRD.md so Claude can read it without you pasting
  • If it gets stuck on a tricky panel, type 'show me what you've tried' — it'll explain its reasoning
  • Use /clear between major phases (e.g., after backend → before frontend) to keep context fresh

Cursor

Visual IDE with AI built in. Looks and feels like VS Code but with a chat sidebar.

Get Cursor
Best for
Visual learners. People who want to SEE the code being written and intervene mid-flow.
Cost
Pro $20/mo (recommended) or free tier with limited fast requests
Install (3 steps)
  1. Download from cursor.com — installer for Mac, Windows, Linux
  2. Open it, sign up, choose Claude Sonnet or GPT-4 as your default model
  3. File → Open Folder → pick where you want your dashboard project

First prompt to paste

Drop the PRD into the project folder, then in the Cursor chat sidebar paste: 'Use this PRD to build the entire dashboard. Use Next.js 14 App Router, Tailwind, and shadcn/ui components. Show me the file structure first, then start with the layout, then build each panel one at a time.'

What to expect

You watch each file get written in real time. Tab-complete picks up your style. The Composer mode (⌘ I) handles multi-file edits in one shot.

Common gotchas

  • Turn on 'Auto-run' in settings so Cursor can install packages without confirming each time
  • The AGENTS.md or .cursorrules file at project root tells it your conventions — write a short one
  • If it loops on the same fix, switch the model (Sonnet ↔ GPT-4) and retry — they fail differently

OpenAI Codex CLI

ChatGPT-flavored coding agent that runs in your terminal.

Codex CLI on GitHub
Best for
People already in the OpenAI ecosystem. Familiar voice if you've been ChatGPT-ing your life.
Cost
ChatGPT Plus $20/mo OR API pay-as-you-go — Codex CLI usage counts against your plan
Install (3 steps)
  1. Install Node.js 18+ if you don't have it
  2. npm install -g @openai/codex
  3. Run: codex — log in with your ChatGPT account

First prompt to paste

Same as Claude Code: 'Read PRD.md and build a Next.js 14 dashboard implementing every panel. Tailwind, shadcn/ui, mock data. Show me the plan first, then execute.'

What to expect

Similar feel to Claude Code but slightly more cautious — it'll ask you to confirm before destructive operations more often. Output quality is comparable.

Common gotchas

  • If you have ChatGPT Plus already, this is essentially free to try
  • It shines on debugging existing code more than greenfield builds — pair it with v0 (below) for the initial scaffold
  • Use 'codex review' against your generated code before you ship — solid second-opinion mode

v0 (Vercel)

Browser-based UI generator. Type a description, get a working component.

Try v0
Best for
Designing the UI first. Great for visualizing panels before deciding the backend.
Cost
Free tier (limited generations) · Premium $20/mo for unlimited
Install (3 steps)
  1. Go to v0.dev — sign in with your Vercel or GitHub account
  2. No install — runs in the browser
  3. Optional: install the Vercel CLI to deploy directly from v0

First prompt to paste

Open the PRD in another tab. In v0 paste: 'Build the [Pipeline] panel from this spec: [paste the panel section]. Use Tailwind, dark theme, dusk navy background.' Repeat for each panel — assemble in your repo.

What to expect

Beautifully designed components with mock data, deployable to Vercel in one click. Limited at full-app scaffolding — pair with Cursor or Claude Code for the assembly.

Common gotchas

  • v0 doesn't do databases, auth, or backend logic well — strictly UI
  • Generated code uses shadcn/ui by default; if your stack is different, ask v0 to use plain Tailwind
  • Download as JSX (don't deploy via v0) so you can integrate into your real codebase

Replit Agent

Browser-based agent that builds AND runs your app in the cloud — no local setup.

Replit
Best for
Non-developers who want to skip the entire 'install Node' / 'open terminal' learning curve.
Cost
Replit Core $20/mo (includes hosting) or free tier with limited build credits
Install (3 steps)
  1. Go to replit.com — sign up
  2. Click 'Create app with Agent'
  3. No local setup ever — everything happens in the browser tab

First prompt to paste

Paste the entire PRD into the agent prompt: 'Build this dashboard. Use Next.js 14, Tailwind, mock data. Deploy when done.' Replit will provision the environment, install dependencies, write code, and host it on a URL you can share immediately.

What to expect

5–15 minutes to a deployed-and-shareable URL. No git, no terminal, no install steps. Slower iteration than Claude Code/Cursor — but zero local setup.

Common gotchas

  • Replit's hosting is fine for prototypes but not production-grade — migrate to Vercel/Render later
  • Agent has a context limit; for big PRDs, build one panel at a time in separate prompts
  • The free tier sleeps the app after inactivity — fine for demos, annoying for daily use

Lovable

AI app builder that talks like a designer — describe the app, watch it build.

Lovable
Best for
Non-coders who want a real app without learning git or the terminal.
Cost
Free tier (5 messages/day) · Pro $20/mo for 100 messages/day
Install (3 steps)
  1. Go to lovable.dev — sign up with email or GitHub
  2. Click 'New project'
  3. No install required — fully browser-based

First prompt to paste

In the chat: 'Build a business dashboard for [your business]. Here's the spec: [paste PRD summary or panel-by-panel].' Lovable assembles a Next.js + Supabase app with auth, panels, and mock data. Connect a domain and you're live.

What to expect

30–60 minutes from prompt to working public URL. Includes auth and a database out of the box. Less control than Cursor or Claude Code but a lot less friction.

Common gotchas

  • Lovable opinionates on stack (Next.js + Supabase) — if your PRD assumes something else, you'll fight it
  • GitHub sync is built-in — flip it on so you can edit in Cursor later if you outgrow Lovable
  • Cost compounds: 100 msgs/day = ~30 panels of iteration. Plan your prompts.

Bolt.new

Browser-based full-stack app builder by StackBlitz — instant preview.

Bolt.new
Best for
Iterating on UI quickly with live preview side-by-side. Great for the prototyping phase.
Cost
Free tier (limited) · Pro $20/mo for higher daily token allowance
Install (3 steps)
  1. Go to bolt.new — sign in with GitHub
  2. Type a description in the prompt box on the homepage
  3. Browser-only, no local setup

First prompt to paste

On bolt.new homepage paste: 'Build a [your business] dashboard with these panels: [list from PRD]. Use Next.js 14 + Tailwind. Make it look like a quiet, calm workspace.' Bolt provisions the project and starts coding immediately.

What to expect

Live preview on the right, code on the left, chat at the bottom. Sub-minute first render. Iterates fast on look-and-feel. Less robust than Claude Code on complex business logic.

Common gotchas

  • Bolt eats tokens fast on long iterations — buy Pro early or you'll hit the wall
  • Export to GitHub when you're happy — don't rely on Bolt's hosting for production
  • Best paired with v0 (UI) and Claude Code (logic). Bolt for the fast prototype loop.

Stuck?

Three ways to get unstuck.

Pick the level of help that fits where you actually are. No wrong answers.

  • Stuck on step 3

    15-min Quick Chat

    Free. Pop on a call, screen-share what's broken, walk away unstuck.

    Book a Quick Chat

  • Building this with a team?

    Run AI Day with your whole team

    Pair the dashboard build with a hands-on AI workshop — your operators learn the AI coding tools while you build the real dashboard together. Solo Power Hour ($297), team workshop, or full-company format. Free DIY playbook also available.

    See AI Day formats

  • Just build it for me

    CentraOps Sprint

    Hand it over. We'll scope, build, deploy, and train one of your operators on the AI coding tools so you own it after. Starts at $2.5k.

    Request a scope

Stay current

These tools change every six weeks.

The AI Blink is a 5-minute weekly briefing on what’s actually working — new tool features, prompt patterns that converted, and the stuff to ignore.

Subscribe to The AI BlinkBack to the Dashboard Builder