How I AIHow to use Cursor for interactive prototypes, sound design, and data visualization
CHAPTERS
Meet Elizabeth Lin: using Cursor as a creative design tool (not just coding)
Claire introduces Elizabeth Lin, a designer who uses Cursor to explore aesthetics, interactivity, and polish in prototypes. Elizabeth frames Cursor as a creative playground that brings back the joy of early web-making while still supporting “serious” design outcomes.
- •Cursor can be used by designers primarily for design exploration, with code as a by-product
- •Elizabeth’s approach emphasizes creativity, surprise, and rapid iteration
- •The episode will cover visual styles, interactive/sound prototypes, and improving an “ugly” dashboard
- •Reframing AI tools as creative collaborators rather than purely engineering tools
Demo setup: turning a blank homepage into an aesthetic exploration sandbox
Elizabeth shows a simple homepage with minimal styling and explains why she often starts from a basic scaffold. She uses Cursor to first generate a menu of aesthetic directions rather than deciding on a style upfront.
- •Starting with a simple page lowers the barrier to prototyping and iteration
- •Prompting Cursor to list design movements builds vocabulary and options
- •The model provides descriptive attributes (e.g., colors, motifs, effects) that help designers articulate intent
- •Conversation-first prompting helps users learn the model’s “design language”
Prompting for style ideas: extracting movements and design language from Cursor
Elizabeth runs a prompt asking which design aesthetics Cursor can implement and gets back a list with descriptions. Claire highlights how useful it is to receive concrete adjectives and components that can be reused in later prompts.
- •Use meta-prompts to discover what the model is “comfortable” implementing
- •Descriptions (like “neon,” “glitch,” “dystopian”) become reusable prompt building blocks
- •The tool tends to be strongest in internet-popular aesthetics (e.g., vaporwave)
- •Iterative dialogue helps clarify ambiguous style labels (e.g., what “cyberpunk” implies)
Style execution: brutalist + Y2K redesign and the ‘happy accidents’ of AI CSS
They pick two contrasting styles—brutalist and Y2K—and apply them to the homepage. The output includes unexpected elements like typing animations and extra hover/glow effects, illustrating how AI can generate ideas a designer might not reach for manually.
- •Combining aesthetics can produce surprising, playful results
- •AI frequently adds hover states, glow, and motion as default “flair”
- •Unexpected UI behaviors (typing cursor, terminal vibes) can inspire further iteration
- •The workflow favors generating first, then applying designer judgment to refine
Iteration workflow: restore checkpoints, rerun prompts, compare outcomes
Elizabeth demonstrates sending the same prompt again and getting a dramatically different design. She explains her habit of restoring checkpoints often to avoid getting stuck in an unwanted direction, while saving screenshots to preserve promising iterations.
- •Rerunning the same prompt can yield notably different designs
- •Use “Restore Checkpoint” early and often to avoid compounding unwanted changes
- •Screenshot good states so you can recover specific effects later
- •Iteration strategy: generate variations quickly, then choose and refine
One-prompt interactive prototype: building a playable piano with sound
Elizabeth shows a working digital piano prototype—something difficult to replicate in typical design tools—highlighting sound, interactivity, and parameter controls. The example demonstrates how Cursor enables designers to prototype experiences (not just screens).
- •Sound + interaction is a major advantage of code-based prototypes over Figma-style tools
- •A single prompt can generate functional prototypes (with some luck/variance)
- •Controls like waveform selection showcase deeper interaction possibilities
- •This kind of prototype supports joy/brand moments via sound and motion
Speeding up creation with Cursor Rules: reusable prototype scaffolding
Elizabeth creates a new piano prototype in an “old Mac OS” style and reveals her lightweight Cursor Rule for cloning a template folder and adding it to a homepage. The rule reduces setup friction so she can focus on design and behavior.
- •Start new chats to avoid unintended context bleed
- •Cursor Rules can automate repo chores (folders/files/homepage links)
- •Simple rules often outperform overly complex rule sets for daily use
- •Templates turn Cursor into a rapid prototyping playground
Behind the scenes mindset: understand enough to iterate without overengineering
Claire asks whether Elizabeth inspects how the prototype works. Elizabeth explains she wants a baseline understanding (libraries used, adjustable parameters) to extend possibilities, without getting bogged down in implementation details.
- •Baseline technical understanding helps guide better prompts and extensions
- •Ask “what library is this using?” and “what options can I tweak?” to expand capability
- •Focus on outcomes/experience first; deep dives only when needed
- •This approach fits designers who prefer visual/interactive feedback loops
From playful to practical: adopting Cursor inside real design teams
Elizabeth shifts from fun demos to how this fits into team workflows. She argues practical adoption requires upfront investment—bringing a design system or components into code so designers can reuse them in prototypes consistently.
- •Team use cases require design system alignment and reusable coded components
- •Upfront migration effort is similar to past tooling shifts (e.g., Sketch → Figma libraries)
- •A subset of components in code can unlock broad prototyping leverage
- •Designers can spend more time on delight (sound/motion/interaction) vs. boilerplate UI
Dashboard makeover, part 1: targeted prompting to fix an ‘ugly’ finance UI
Elizabeth opens an AI-generated personal finance dashboard and critiques common issues (shadows, chaotic color, weak typography, awkward hierarchy). She starts improving it with short, specific prompts (e.g., remove drop shadows; modernize; reference Robinhood/Cash App/Stripe).
- •AI-first UIs often overuse drop shadows, inconsistent colors, and poor typography
- •Short prompts can be more effective than long “laundry lists”
- •Product references act as shorthand for established visual norms
- •Set up project-specific context (“Let’s work on the finance dashboard”) when repos have multiple prototypes
Dashboard makeover, part 2: iterate one constraint at a time (layout, spacing, color)
Elizabeth continues with small, focused corrections—like fixing a background that doesn’t fill the viewport—rather than requesting many changes at once. Claire notes that this mirrors good design critique: isolate one or two fixes per iteration to avoid model forgetfulness.
- •Models often miss items at the end of long requests; constrain scope per turn
- •Work from most distracting issues first (e.g., background/structure)
- •Gradual refinement builds stability and reduces regressions
- •Conversational iteration beats one-shot “perfect design” prompting
Teaching ‘taste’ with references: Edward Tufte, Apple-level layout, and prompt hygiene
Elizabeth shows how named references (Edward Tufte principles; “a top designer at Apple would approve”) steer the model toward cleaner visuals and better grids. She also shares prompt-tracking habits and the idea of having Cursor generate reusable notes/rules when an output works well.
- •Named references compress complex principles into a few words (e.g., Tufte)
- •Aspirational prompts can trigger better composition and grid discipline
- •Keep a prompt library/document of what worked for reuse
- •When an output is great, ask Cursor to describe the “rule” so you can recreate it later
Data-driven prototypes with real data: building UIs powered by Notion databases
Elizabeth highlights where Cursor shines most: prototypes backed by real data. She demonstrates a Notion-powered personal “Goodreads-like” bookshelf, emphasizing how quickly a designer can create a functional UI layer on top of a lightweight database.
- •Real-data prototyping is a strong fit for Cursor-based workflows
- •Notion can act as a convenient source-of-truth database for personal apps
- •A simple prototype can evolve into analytics (reading patterns, ratings, authors)
- •Designers can ship personal tools quickly without heavy backend setup
Lightning round: what to keep manual, how to stay creative, and dealing with stubborn AI
Elizabeth shares what she still prefers doing by hand (playful graphic design tasks) and how designers can avoid homogenized AI outputs by broadening inspirations beyond standard UI kits. She also offers a practical reset tactic: if the model won’t listen (especially on animations), restart rather than digging deeper.
- •Some creative joy comes from manual making (posters, playful edits)
- •To avoid sameness, feed unconventional inspirations (music videos, art, niche references)
- •Overreliance on standard kits can reduce originality even if it improves baseline quality
- •When iteration stalls—especially with overly dramatic animations—restart and try a new path
