How I AIA designer’s guide to AI: Why this designer switched to Cursor | Joel Unger
Claire Vo and Joel Unger on designer uses Cursor and Midjourney to prototype, animate, explore.
In this episode of How I AI, featuring Claire Vo and Joel Unger, A designer’s guide to AI: Why this designer switched to Cursor | Joel Unger explores designer uses Cursor and Midjourney to prototype, animate, explore Design director Joel Unger (Atlassian/Trello) shares how AI shifted his workflow from static specs toward interactive prototypes and rapid asset iteration.
At a glance
WHAT IT’S REALLY ABOUT
Designer uses Cursor and Midjourney to prototype, animate, explore
- Design director Joel Unger (Atlassian/Trello) shares how AI shifted his workflow from static specs toward interactive prototypes and rapid asset iteration.
- He demonstrates using Cursor to turn Figma concepts into working UI prototypes (e.g., resizable, draggable multi-panel layouts) that enable clearer engineering conversations.
- He also shows a time-sensitive brand update: recreating an animated logo by converting an old animated GIF into an animated SVG with AI-assisted code.
- Finally, he uses Midjourney as an exploratory “mood board” generator to help a team converge on a consistent illustration style for Trello’s mascot, reinforcing that AI accelerates thinking and iteration rather than replacing design judgment.
IDEAS WORTH REMEMBERING
5 ideasAI makes interaction design testable earlier than static mockups.
Unger found Figma insufficient for exploring real drag/resize behaviors; Cursor-enabled prototypes let him stress-test edge cases (min widths, breakpoints, collapsed states) quickly and concretely.
Designers can use code prototypes as “interactive specs,” not production code.
He emphasizes engineers still need enterprise-quality code (tests, scalability), but prototypes accelerate shared understanding and unblock decisions about behavior and constraints.
The biggest time savings is reclaiming time for problem-solving.
Unger frames Figma as “maybe 10% of the job,” with most value in thinking; AI speeds the “get ideas out of your head” phase so designers can focus on gnarlier problems sooner.
AI-assisted asset work can rescue last-minute deadlines.
When a logo swap revealed an old animated GIF, he used Cursor plus an SVG source to recreate the motion as an animated SVG, avoiding a manual After Effects rebuild.
Midjourney is strongest as exploration input, not final brand output.
For Trello’s mascot Taco, he used image prompting to generate variations that serve as a mood board, helping the team decide on concrete style-guide attributes (fur, brows, paws) before final illustration.
WORDS WORTH SAVING
5 quotesFigma is maybe ten percent of the job, and a lot of the rest of it is just thinking about the problems.
— Joel Unger
With AI, you can get right into the gnarly parts of the problems right away.
— Joel Unger
I knew that they couldn't actually use this code... [but] it got the conversation started.
— Joel Unger
All I had to do was describe it, say, 'Dance the little animation up and down.'
— Joel Unger
It’s more like a mood board... take it the next step, actually get out your tablet pen and draw it for real.
— Joel Unger
QUESTIONS ANSWERED IN THIS EPISODE
5 questionsIn your three-panel Trello prototype, what specific libraries or components in Cursor made drag/resize feasible, and what would you choose today if starting from scratch?
Design director Joel Unger (Atlassian/Trello) shares how AI shifted his workflow from static specs toward interactive prototypes and rapid asset iteration.
What were the key behavioral rules you discovered only after prototyping (e.g., min-width stacking, collapse thresholds), and how did those rules change the final product implementation?
He demonstrates using Cursor to turn Figma concepts into working UI prototypes (e.g., resizable, draggable multi-panel layouts) that enable clearer engineering conversations.
How do you decide which parts of a prototype must be “code-realistic” versus what can remain a lo-fi simulation, so you don’t over-invest in non-production code?
He also shows a time-sensitive brand update: recreating an animated logo by converting an old animated GIF into an animated SVG with AI-assisted code.
For the animated SVG logo: what was the step-by-step workflow (inputs, tools to measure GIF timing, iteration loop), and how did you validate it matched the original interaction?
Finally, he uses Midjourney as an exploratory “mood board” generator to help a team converge on a consistent illustration style for Trello’s mascot, reinforcing that AI accelerates thinking and iteration rather than replacing design judgment.
Where did Cursor struggle most during the logo animation task—math, alignment, easing, timing—and what prompt patterns actually improved results?
Chapter Breakdown
Designing with AI: anxiety, limits, and why thinking matters most
Joel frames AI as an accelerator rather than a replacement for designers, emphasizing that prompts and product thinking drive outcomes. He argues that design tools like Figma are a small portion of the job compared to problem-solving, and AI helps teams get to the “gnarly” parts faster.
What Trello is building now: inbox capture + Planner + multi-surface productivity
Joel explains Trello’s shift from classic Kanban boards toward a personal productivity system. New surfaces like Inbox capture and Planner must work together in a tactile, drag-and-drop way, creating new layout and interaction challenges.
Why Figma hit a wall: responsive panel systems and real resize behavior
Joel describes iterating in Figma with many layout variations, but finding it insufficient for modeling real-world resizing and responsiveness. Beta feedback revealed users wanted precise control over panel sizes across diverse screen setups.
Switching to Cursor: image-to-prototype for a 3-panel interactive layout
Joel shows how he moved from a Figma concept into Cursor to generate a working interactive prototype. By pasting an image and describing the desired behavior, he could rapidly get a functional panel system with toggles and resizing.
Discovering UX edge cases through real interaction, not static mocks
With a working prototype, Joel can explore nuanced responsive behaviors that are hard to anticipate in Figma. Testing drag-to-extremes and unusual layouts surfaces constraints and breakpoints that need explicit design decisions.
From prototype to production: how designers and engineers collaborate with AI artifacts
Joel clarifies that the Cursor-generated code isn’t production-ready, but it becomes a powerful communication tool. He uses Loom videos and the prototype to align on behaviors, while engineers implement with tests and enterprise-grade quality.
AI for podcast prep: voice-mode rehearsal and its limitations
Joel shares a lightweight, practical use of AI: rehearsing the run-of-show using ChatGPT voice mode. He notes shortcomings like missing lightning-round prompts and limited context windows, reinforcing that AI is helpful but imperfect.
Time saved for higher-value design work: focusing on thinking over execution
Joel returns to the theme that AI buys back time for the most valuable part of design—problem framing and decision-making. AI reduces time spent on repetitive production steps, enabling deeper exploration of complex interactions.
Last-minute brand animation rescue: rebuilding an animated logo with Cursor + SVG
Facing a time-critical logo update and discovering the existing animation was an old GIF, Joel uses Cursor to generate an animated SVG alternative. He supplies vector art, asks for clipping and bar motion, and fine-tunes timing and pixel alignment.
Midjourney for exploration: image masks, logo variations, and style experimentation
Joel explains how he uses Midjourney as an ideation engine, especially with black-and-white masks to generate variations. It’s positioned as a creative exploration tool rather than a final-asset generator.
Building a ‘Taco’ mood board: character consistency, style guides, and team alignment
Joel applies Midjourney to explore Trello’s husky mascot Taco, aiming to test how consistent the model can be and to generate a reference set. The output becomes a mood board to help the team decide on canonical character details and a consistent style guide.
How AI is changing design identity: more leverage, not less value
Joel reflects on how AI changes his perception of design work: it amplifies creative and strategic value rather than diminishing it. The tools accelerate output, but the designer’s judgment, taste, and intent remain central.
Lightning round: top tool, where AI struggles, and how to unstick Cursor
In quick Q&A, Joel recommends Cursor as the must-know tool for product designers, with the caveat of a learning curve and the benefit of partnering with a developer to set up. He notes AI still struggles with simple responsive debugging without browser visibility and jokes about his (slightly adversarial) prompting style when models get stuck.
EVERY SPOKEN WORD
Install uListen for AI-powered chat & search across the full episode — Get Full Transcript
Get more out of YouTube videos.
High quality summaries for YouTube videos. Accurate transcripts to search & find moments. Powered by ChatGPT & Claude AI.
Add to Chrome