How I AIA designer’s guide to AI: Why this designer switched to Cursor | Joel Unger
CHAPTERS
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.
- •Initial fear of AI replacing design work, followed by recognizing its limitations
- •AI speed comes from translating a designer’s intent (prompts/thoughts) into artifacts faster
- •Figma is “maybe 10%” of the job; the rest is deciding what to build and why
- •AI enables faster iteration on complex problem areas, not just mock-making
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.
- •Pivot from boards to a broader “personal productivity powerhouse”
- •Quick capture into an Inbox from Slack, email, voice, notes, etc.
- •Planner adds time-blocking so tasks can be scheduled, not just listed
- •Design principle: tactile drag-and-drop across Inbox, Planner, and Boards
- •UI challenge: multiple surfaces visible side-by-side with no single “center” view
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.
- •Figma exploration produced many specs/variants but was tedious and static
- •Beta users liked the panel concept but demanded resizing and finer control
- •Real usage contexts: ultrawide monitors, narrow windows, docked browsers
- •Static pixel specs don’t reveal edge cases in dynamic drag/resize behaviors
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.
- •Set up a dev environment/libraries first to enable fast prototyping
- •Paste a Figma screenshot into Cursor chat as the starting point
- •Prompt: build a three-panel system with a toolbar to toggle panels
- •AI interprets intent even with imperfect input (e.g., spelling)
- •Designer still needs enough technical literacy to choose viable libraries/tools
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.
- •Interactive prototypes reveal “nuanced, responsive design choices”
- •Drag-and-drop enables nearly any layout, exposing unexpected scenarios
- •Questions emerge only through testing (e.g., dragging to extremes with 3 panels)
- •Helps define min widths, stacking rules, collapse behaviors, breakpoints
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.
- •Prototype code isn’t directly shippable (needs tests, quality, scalability)
- •Prototype accelerates shared understanding and design-dev alignment
- •Communicate behaviors via Loom instead of abstract written descriptions
- •Engineers refine edge cases the designer may miss
- •Outcome: the behavior makes it into the product, with production adjustments
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.
- •Paste run sheet topics into ChatGPT and rehearse in voice mode
- •AI provides live feedback and helps organize thoughts quickly
- •Limitations: missed some points, no lightning-round question
- •Context window too short; overall less charming than a human host
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.
- •Primary benefit: saving the designer’s time
- •AI reduces busywork and accelerates getting ideas out of your head
- •More time for systems thinking, UX reasoning, and tradeoff decisions
- •Faster path into the hardest parts of product design problems
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.
- •Urgent request: replace logos before launch/code freeze; Trello has animated logo Easter egg
- •Legacy asset was an animated GIF with unknown source files
- •Use SVG as the new base and ask Cursor to generate animation logic
- •Determine animation duration by analyzing the GIF with an online tool
- •Final work: iterative pixel-perfect and timing tweaks; deliver live animated SVGs
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.
- •Use image masks (black-and-white inputs) to guide generation
- •Prompt-driven variations (e.g., brand/scene mashups) for exploration
- •Useful for rapid breadth: many directions quickly, low friction
- •Output is often a starting point, not a shippable deliverable
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.
- •Taco is Trello’s husky mascot used in onboarding/empty states
- •Attempt to match illustration style via detailed prompts (fur, eyes, collar, etc.)
- •Result is “not perfect,” but valuable as a mood board/reference
- •Helps teams decide standards: eyebrows, paw colors, ear details, fur “floofiness”
- •Enables a future loop: define style guide → re-prompt for better consistency
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.
- •Early job-replacement anxiety shifts to recognizing AI as leverage
- •Designer value increases through faster expression of intent and exploration
- •AI enables designers to operate more in motion/interaction/brand territory
- •Human judgment still required: constraints, coherence, and product decisions
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.
- •#1 tool recommendation: Cursor (best with dev help for setup; big speed gains)
- •AI weakness: responsive issues are hard because the model can’t see the browser state
- •Workaround today: send screenshots at various sizes to convey breakpoints
- •Unstuck technique: iterative back-and-forth; admits to “negging” the tool
- •Observation: models react to user sentiment in thinking mode; prompting style matters
