How I AIA designer’s guide to AI: Why this designer switched to Cursor | Joel Unger
CHAPTERS
- 0:00 – 0:36
How AI shifts a designer’s job from execution to problem-solving
Joel reflects on initial anxiety about AI replacing designers and reframes AI as an accelerator for getting ideas out of your head faster. He emphasizes that design is largely thinking and decision-making, with tools like Figma representing only a small slice of the work. AI helps designers get to the “gnarly parts” of problems sooner.
- •Fear of job displacement vs. discovering AI’s real limitations
- •AI as an accelerator for expressing and testing ideas
- •Design work is mostly problem framing and decision-making, not just tool usage
- •Getting to complex interaction problems faster with AI support
- 0:36 – 2:36
Show context: Joel’s role at Atlassian and what this episode will demonstrate
Claire introduces the show and frames Joel as a designer-engineer hybrid who prototypes in Cursor to create interactive specs for engineering teams. The episode will cover product prototyping, brand assets, and illustration workflows using AI.
- •Joel’s background: design leadership at Atlassian across major products
- •Core thesis: designers increasingly will code (with AI help)
- •Cursor-enabled prototypes as interactive specs for engineers
- •Preview of demos: product UI, motion/brand assets, and illustration
- 2:36 – 4:44
What’s changing in Trello: from Kanban boards to a personal productivity system
Joel explains Trello’s pivot toward being a “personal productivity powerhouse,” including quick capture into an inbox from multiple sources and a Planner feature for scheduling. He highlights the design challenge: multiple surfaces (Inbox, Planner, Boards) living side-by-side with tactile drag-and-drop interactions.
- •New capture workflows: Slack, email, voice, notes → Trello inbox
- •Planner introduces time-blocking alongside task capture
- •Multiple surfaces coexist; no single “center” panel anymore
- •Design principle: tactile, drag-and-drop interactions across surfaces
- 4:44 – 5:58
Why Figma specs broke down for complex, responsive panel behavior
Joel describes starting traditionally in Figma, exploring many layout variations and creating pixel-based specs. After beta feedback, users wanted richer control—especially resizing and custom layouts across different screen setups—revealing Figma’s limitations in simulating real drag-resize behavior.
- •Figma used to explore responsive, configurable panel layouts
- •Tedious pixel/width spec process still communicates intent
- •Beta feedback demanded more control: resizing and customization
- •Real-world constraints: ultrawide monitors, narrow docks, side-by-side windows
- •Figma falls short for testing nuanced drag/responsive edge cases
- 5:58 – 7:14
Prototyping the resizable three-panel system in Cursor from a Figma screenshot
Joel moves into Cursor, pastes a Figma image, and prompts it to build a three-panel UI with a toolbar to toggle panels. He highlights the low-friction nature of prompting (even with imperfect spelling) and the importance of having the right libraries and enough technical understanding to set up the environment.
- •Workflow: set up dev environment → paste Figma image → prompt UI build
- •Prototype request: three-panel system + toolbar to toggle panels
- •“No rules” prompting: spelling/format is flexible
- •Leverage existing UI libraries to accelerate outcomes
- •Designer benefit: exploring interactions that are hard to model in design tools
- 7:14 – 7:41
Using the code prototype to discover responsive edge cases and make better UX decisions
With a live prototype, Joel can test extreme interaction scenarios (e.g., dragging panels across the screen, collapsing behavior, breakpoints). This surfaces nuanced behaviors he wouldn’t encounter in static mockups and turns exploration into concrete design decisions.
- •Rapid UX testing via real interactions, not static frames
- •Exploring edge cases: three panels open, drag all the way left, etc.
- •Making decisions about min-widths, stacking constraints, and collapse rules
- •Prototyping reveals constraints and behaviors earlier than handoff
- •AI-enabled iteration speeds up discovery of “unknown unknowns”
- 7:41 – 8:53
From prototype to production: communicating requirements engineers can implement
Joel explains engineers can’t ship the prototype code as-is due to quality, testing, and enterprise requirements. However, the prototype becomes a shared artifact that accelerates alignment: he records Loom walkthroughs to show exact behaviors and constraints, which engineers then implement robustly.
- •Prototype code isn’t production-ready (tests, quality, scale requirements)
- •Prototype jumpstarts a more precise engineering conversation
- •Key specs clarified: min widths, stacking, breakpoints, collapse-to-edge rules
- •Loom demos make behavior instantly understandable
- •Engineers refine and catch additional edge cases during implementation
- 8:53 – 10:41
How Joel used ChatGPT voice mode to prep for the podcast (and its limitations)
Joel describes pasting the run-of-show into ChatGPT and using voice mode for live practice. He notes shortcomings: missing certain points, context window constraints, and less charm than a human host.
- •Quick prep workflow: run sheet → ChatGPT → voice mode rehearsal
- •Benefit: live feedback and fast iteration on talking points
- •Limitations: missed items (e.g., lightning round), short context window
- •AI is helpful but not a full substitute for a human conversational dynamic
- 10:41 – 11:35
Time savings as leverage: using AI to spend more time on high-value thinking
Claire and Joel discuss who benefits from this approach and how it changes the allocation of time. Joel reiterates that AI increases the proportion of time spent on deep problem-solving rather than execution inside design tools.
- •Primary benefit: designer time reclaimed
- •AI increases speed to meaningful exploration and decision-making
- •Reinforces idea: tooling is a small fraction; thinking is the real work
- •Faster iteration enables earlier access to the hardest product questions
- 11:35 – 14:14
Last-minute brand emergency: recreating an animated logo hover without After Effects
A late request to swap logos reveals Trello has a unique animated hover Easter egg—and it’s an old animated GIF with unclear source files. Joel uses Cursor to convert the available SVG into an animated SVG, guiding it with descriptions and minor precision tweaks like timing and pixel alignment.
- •Crunch scenario: code freeze approaching + last-minute logo replacement
- •Discovery: logo animation is a legacy GIF with unknown source assets
- •New approach: animate from SVG directly using Cursor
- •Prompting behavior: describe the motion; AI generates complex math/animation logic
- •Human polish still required: timing (ms), pixel-perfect adjustments
- 14:14 – 14:55
Creative exploration with Midjourney: masked variations and “logo in a swamp” experiments
Joel explains a powerful Midjourney technique: using a black-and-white mask/image input to generate diverse variations. This supports playful exploration and fast ideation by combining constrained structure with imaginative prompts.
- •Technique: black-and-white image/mask as structure for generations
- •Prompt-driven exploration for wild variations (e.g., logo as island/swamp)
- •Useful for quick ideation and broad visual discovery
- •Complements, rather than replaces, intentional design craft
- 14:55 – 17:15
Designing Taco the Trello husky: using Midjourney as a mood board for style decisions
Joel shares how he tried to recreate Trello’s husky mascot “Taco” style with Midjourney prompts, finding results imperfect but valuable. The output becomes a mood board to help the team define a consistent style guide (fur, eyebrows, paws, etc.) before doing final human illustration work.
- •Goal: test how closely Midjourney can match an established mascot style
- •Prompts target specific traits: collar color, fur color, eyes, cartoon clip-art style
- •Outputs are “mid” for consistency—but useful as exploratory references
- •Used to drive team alignment on a Taco style guide (details and consistency)
- •AI supports early-stage exploration; final assets still need designer craft
- 17:15 – 20:55
Bigger takeaway: AI expands designer value—plus lightning round tool picks and tactics
Joel returns to the mindset shift: AI doesn’t replace designers; it amplifies their ability to explore and articulate ideas quickly. In the lightning round he recommends Cursor, notes AI struggles with simple responsive checks without browser visibility, and shares his humorous approach to getting Cursor unstuck.
- •Mindset: AI accelerates idea expression; designers still provide direction
- •Designers can focus more on interaction, motion, and higher-order craft
- •Top tool recommendation: Cursor (with a developer buddy to set up)
- •Current gap: responsive debugging is hard when AI can’t “see” the browser
- •Prompting behavior: iterative back-and-forth (including ‘negging’ Cursor)
