←Back/Design/Cursor
IntermediateDesign

How to Iteratively Refine an AI-Generated UI Using Design Principles in Cursor

Refine a generic generated interface by diagnosing hierarchy and interaction problems, translating strong references into explicit design principles, and iterating one controlled layer at a time while preserving content, accessibility, and real behavior.

How to Iteratively Refine an AI-Generated UI Using Design Principles in Cursor

Source episode · 21:00

How I AI: A Designer's Guide to Cursor with Elizabeth Lin – From Y2K Aesthetics to Interactive Pianos

with Claire Vo

Elizabeth starts from a generic personal finance dashboard, asks Cursor to move toward recognizable product qualities and stronger design principles, removes effects she dislikes, records successful visual language for reuse, and iterates the layout into a more coherent interactive product.

Read the full episodeWatch on YouTubeListen on SpotifyListen on Apple

Before you start

What you need

  • A functioning baseline at a clean checkpoint
  • The page purpose, audience, key task, content hierarchy, and target breakpoints
  • Permitted references plus a description of the qualities worth borrowing
  • Design tokens and interaction or accessibility constraints
  • A short critique that ranks the highest impact problems

What you’ll make

A more distinctive and usable interface whose layout, type, color, components, data visualization, states, and motion follow an explainable system rather than a chain of vague make it better prompts.

Tools used

Step by step

The workflow

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

3 steps

Step01

Provide Clear, Specific Feedback and References

Critique the baseline against the page purpose and user task. Identify the highest impact problems in hierarchy, density, grouping, typography, color, chart clarity, interaction, responsiveness, and accessibility, citing the affected component.

Example prompt
Critique this interface for [audience and task]. Rank the five highest impact issues. For each, cite the component, observed problem, violated design principle, user consequence, and a measurable correction. Do not edit code yet or suggest generic polish.
Step02

Iterate with Established Design Principles

Apply changes in controlled layers, such as hierarchy and layout, then typography, color, components, charts, and motion. Translate references into explicit principles and reusable tokens, and compare each layer at the target breakpoints.

Example prompt
Implement only the accepted changes for [layer]. Qualities to borrow from references: [specific qualities]. Preserve content, data values, semantics, interactions, keyboard access, focus, and reduced motion. Use reusable tokens and existing components. Show the diff and before and after screenshots at [breakpoints].
Step03

Use a Psychological Hack for Layout

When the layout still feels wrong, ask Cursor to evaluate it against a named design perspective or respected reviewer, but require concrete reasoning rather than simulated approval. Save successful choices as a short project note, and restart from the clean checkpoint if iterations accumulate contradictory rules.

Example prompt
Review this layout as a rigorous product designer. Do not claim that a named person would approve it. Identify where hierarchy, rhythm, grouping, alignment, density, or task flow still fails, and propose two distinct layouts with tradeoffs. Preserve the data and interaction requirements.

What good looks like

  • The primary task and information hierarchy are clearer at desktop and mobile widths.
  • Changes use reusable tokens and components instead of scattered one off values.
  • Charts and controls retain accurate labels, states, keyboard access, focus, contrast, and reduced motion behavior.
  • The final direction is evaluated against the original goals and references, not only against the previous generated version.

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

Requests such as make it modern cause cosmetic churn without solving the hierarchy
Name the element, observed problem, principle, desired behavior, and acceptance evidence for each change.
Invoking a respected product produces an imitation instead of an original system
Describe qualities such as density, type scale, restraint, or feedback, and keep the project's own tokens, content, and identity.
Multiple broad changes at once make it impossible to tell what improved
Checkpoint, rank issues, change one layer, compare, and keep or restore before continuing.
Visual polish changes chart meaning or creates inaccessible interaction
Lock source values and labels, test tooltips and keyboard alternatives, and verify the data after every chart change.

Keep building

Related workflows

Create a Meta-Workflow to Continuously Improve Your AI Assistant's Performance
advancedPersonalClaude

Create a Meta-Workflow to Continuously Improve Your AI Assistant's Performance

Design a weekly meta-workflow that analyzes your interactions with your AI assistant to make it smarter. This system learns your writing style from edits, suggests new automations for repetitive tasks, and helps you filter valuable AI techniques from hype.

Open
Build a Self-Improving AI Morning Brief to Capture Action Items and Learn Company Jargon
intermediateProductClaudeGranola

Build a Self-Improving AI Morning Brief to Capture Action Items and Learn Company Jargon

Create a daily AI workflow that summarizes yesterday's meetings, identifies urgent tasks, and proactively learns internal company terms it doesn't understand. This keeps your AI assistant's knowledge current and highly relevant to your work.

Open
Automate Your Weekly Planning with an AI-Powered PM Assistant
intermediateProductClaudeNotion+1

Automate Your Weekly Planning with an AI-Powered PM Assistant

Build a recurring AI task that automatically gathers updates from your calendar, Slack, and notes to suggest weekly priorities and prepare you for upcoming meetings. Start every Monday with a clear, comprehensive plan without the manual effort.

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