Back/Design/Cursor
BeginnerDesignCursor

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

Turn a Product Requirements Document (PRD) into a clickable, interactive prototype using Cursor. Learn how to generate the initial UI and then use text and screenshot-based prompts to quickly fix bugs and improve the design.

From How I AI

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

with Claire Vo

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

Tools Used

Cursor

AI-first code editor

Step-by-Step Guide

1

Generate a Prototype from a PRD

Give the AI agent your PRD and ask it to create a clickable prototype. Crucially, specify that it does *not* need to be fully functional with a database. This keeps the AI focused on building the user interface and front-end interactions.

Prompt:
Great. Use this PRD to create a prototype. Clickable, but does not have to be totally functional, with database, etc. In the prototypes folder. So that I can show a little of how this might work.
2

Test and Identify Visual Bugs

Run your application and click through the new prototype. Look for any visual issues, such as incorrect colors, alignment problems, or unreadable text.

3

Fix Bugs Using Screenshots

Take a screenshot of the visual bug. Drag and drop the image directly into Cursor's chat window and provide a simple, plain-language instruction to fix the issue.

Prompt:
It seems like the fields have gray text. Please fix.
Pro Tip: 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.
4

Improve the Design with 'Vibe' Prompts

Once the prototype is functional, give the AI a more abstract, non-technical prompt to improve the overall look and feel. Ask it to make the design 'prettier and cuter' or to match a certain aesthetic.

Prompt:
I don't like the baseline design of the home page of this app. Please uplevel the design to be prettier and cuter. Rename it to 'CVO Personal Hub' and make it less basic.

Become a 10x PM.
For just $5 / month.

We've made ChatPRD affordable so everyone from engineers to founders to Chief Product Officers can benefit from an AI PM.