A Designer’s Guide to AI: Why Designing in Cursor Lets You Prototype 10x Faster
By: Joel Unger Host: Claire Vo Source: How I AI (ChatPRD) Type: podcast
Summary
How I AI episode with Joel Unger, Design Director at Atlassian (Confluence, Bitbucket, Trello). Three AI workflows for designers: (1) Prototyping interactive UI with Cursor — pasted Figma screenshot into Cursor, generated working resizable three-panel layout for Trello’s personal productivity features; discovered responsive edge cases impossible to find in static mockups; used Loom recordings of interactive prototype for engineer handoff instead of spec docs; feature is now live in product; (2) Recreating animated SVG logo under deadline — original After Effects files lost, 2 days before code freeze; used Cursor to generate SVG animation code from descriptive prompts, analyzed original GIF timing for precision, iterated pixel-by-pixel; (3) Character design exploration with Midjourney — generated variations of Trello mascot Taco the husky as mood board for upcoming design day, treating AI output as brainstorming starting point rather than final assets. Core insight: AI doesn’t replace designer thinking — it frees designers from tedious coding to focus on creative problem-solving at a higher level.
Key Ideas Extracted
- Figma screenshot → interactive prototype: Paste screenshot into Cursor chat with plain English description; generates working HTML/CSS/JS prototype revealing edge cases static mockups can’t show
- Prototype as communication tool: Record Loom of interactive prototype instead of writing spec docs — engineers instantly understand breakpoints, minimum widths, and collapse behavior
- Emergency SVG animation without source files: Cursor can write SVG animation code from descriptive prompts — saved a deadline when After Effects files were lost
- AI output as mood board, not final asset: Midjourney character variations treated as starting point for design team brainstorming, not production-ready deliverables
- Designers expanding into engineering territory: AI bridges the design-engineering gap — designers can now build and feel interactive experiences before production code
- Precision requires human guidance: AI-generated animation needed exact timing (analyzed from original GIF) and pixel-level adjustments via iterative back-and-forth
- Prototype code ≠ production code: Joel was clear that AI-generated prototype code lacks tests and enterprise quality — it’s a communication tool, not a replacement for engineering
Notes
- Published May 12, 2025 on How I AI (ChatPRD). ~9 min read.
- Sponsors: Paragon, WorkOS
- Joel Unger background: Design Director at Atlassian, decade shaping Confluence, Bitbucket, Trello
- Tools: Cursor, Figma, Midjourney, Loom, SVG animation
- Trello feature: New personal productivity mode with inbox, planner, and configurable Kanban panels
- Trello mascot: Taco the husky
- Three companion workflow guides published Jan 8, 2026
Raw Content
Re-scraped from ChatPRD 2026-02-16. Full article content captured in Summary and Key Ideas above.