←Back/Design/Cursor
BeginnerDesign

How to Rapidly Prototype and Visually Iterate on a UI with Cursor AI

Turn a PRD into a clearly labeled local prototype, test the critical path with mock data, repair visual defects from screenshots, and improve the design with concrete references and accessibility constraints.

How to Rapidly Prototype and Visually Iterate on a UI with Cursor AI

Source episode · 35:00

How I AI: A Beginner's Guide to Coding with AI—Build Your First Project Hub

with Claire Vo

Claire asks Cursor to build a clickable task-scheduler prototype from her PRD, runs it locally with mock behavior, uses a screenshot to fix unreadable text, and gives the homepage a more personal visual direction.

Read the full episodeWatch on YouTubeListen on SpotifyListen on Apple

Before you start

What you need

  • A reviewed PRD with one critical user journey
  • A local prototype directory and route convention
  • Realistic synthetic data
  • A target viewport and design references
  • The project’s local run and check commands

What you’ll make

A clickable local prototype that communicates the intended journey, handles the key states, and is easy to revise without implying production readiness.

Tools used

Step by step

The workflow

Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.

4 steps

Step01

Generate a Prototype from a PRD

Give Cursor the reviewed PRD and ask for one local clickable route using synthetic data. Explicitly exclude real authentication, persistence, notifications, payments, and external services.

Example prompt
Using this PRD, create a local clickable prototype under [path] for the critical journey [journey]. Use realistic synthetic data and simulated actions. Clearly label what is mocked. Do not add real authentication, a database, external APIs, notifications, payments, or deployment. Preserve the existing app outside this route.
Step02

Test and Identify Visual Bugs

Run the app and complete the critical path. Check default, empty, loading, error, validation, and success states, and note any behavior that looks real but is only simulated.

Step03

Fix Bugs Using Screenshots

Capture a screenshot of each visual defect, identify the route, viewport, component, and expected behavior, and ask Cursor for the smallest fix.

Example prompt
At [route] and [viewport], this screenshot shows [component] with [defect]. Fix the contrast and state styling using existing tokens. Preserve other layouts, add or update the focused test, and verify the nearby mobile and desktop widths.

Using screenshots to point out visual bugs is often faster and more precise than trying to describe the problem or find the specific line of CSS code yourself.

Step04

Improve the Design with 'Vibe' Prompts

Replace vague “make it prettier” feedback with a design brief naming the desired character, references, brand assets, typography, spacing, interaction details, and patterns to avoid. Recheck accessibility and the critical path.

Example prompt
Refine this prototype so it feels [qualities] and fits [brand or references]. Use [assets and tokens], [type direction], and [spacing or density]. Avoid generic purple gradients, excessive glass effects, and decorative motion. Preserve the working journey, keyboard access, contrast, reduced-motion behavior, and narrow-screen layout.

What good looks like

  • The critical path can be completed with synthetic data.
  • The UI clearly labels simulated actions and missing back-end behavior.
  • Text, focus states, contrast, and layout work at the target viewport.
  • The diff stays inside the prototype and shared primitives it legitimately needs.

Build your next product with ChatPRD

Turn an idea into a PRD, user stories, and a plan.

Try ChatPRD free

After the steps

Runbook notes

How to recover when the loop fails and where human judgment helps.

Recover

If it goes sideways

The model builds authentication, persistence, or production infrastructure
Restate that the artifact is a local interaction prototype and replace back-end behavior with explicit simulation.
A simulated save or submission looks like a real successful transaction
Label mock actions and confirmation states, and do not connect external services or real user data.
A screenshot fix repairs one viewport but breaks another
Describe the affected component and state, then test nearby mobile and desktop widths after the change.
A vague style prompt produces generic gradients or off-brand decoration
Provide references, tokens, qualities to preserve, patterns to avoid, and accessibility requirements.

Keep building

Related workflows

Create an Automated Workout Tracker with a Simple Claude Voice Note
beginnerPersonalClaude

Create an Automated Workout Tracker with a Simple Claude Voice Note

Log your workouts effortlessly without ever opening a spreadsheet. This workflow uses the Claude mobile app to parse a simple voice note and automatically update your workout tracking spreadsheet in the background.

Open
How to Rebuild Your Gmail Inbox Inside Claude to Manage Email
advancedOperationsClaude

How to Rebuild Your Gmail Inbox Inside Claude to Manage Email

Create a custom email management interface within Claude to read, triage, and draft replies without opening the Gmail tab. This workflow helps you reclaim focus and compound your learnings by training your AI on every interaction.

Open
Automate Client Proposals and Onboarding with a Claude 'Pipeline Operator'
intermediateSalesClaude

Automate Client Proposals and Onboarding with a Claude 'Pipeline Operator'

Build a fully automated system in Claude to generate personalized, interactive HTML proposals and client onboarding materials, saving hours on administrative work and creating a high-touch experience.

Open

Start shipping
better products.

Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.

Start building freeRequest a demo
Free to start
No credit card
SOC 2 certified
Enterprise ready