How AI Changed Product Design
Plus, my favourite AI buddies
👋 Get weekly insights, tools, and templates to help you build and scale design systems. More: Design Tokens Mastery Course / YouTube / My Linkedin
AI changed product design. Each phase is way faster now:
Research up to 80% quicker
Prototypes can be made in 60 seconds
Code: 55% faster dev
Content: 10x release speed
Testing: 50% less maintenance
Marketing: 50% less time
But speed isn’t the point. Craft is. Clarity is. AI gives you the space and time to go deeper. AI shouldn’t be a shortcut or an excuse to unpolished design.
It should be YOUR FLEX.
Now you can explore five directions in an hour and have time to polish the best one. When designers can build prototypes that feel like the real thing (clickable, coded, content-rich), that’s not a threat. That’s power. So, where can you start? Try tools that supercharge your flow:
Research → faster insights
Design → straight to code
Testing → auto-repair
Launch → auto-pilot
Automate → end-to-end magic
So, what I use daily (read below the image). 👇
My favourite AI buddies 🌟
🔵 Claude (Anthropic)
Use it for:
Deep writing: long-form posts, team rituals, onboarding docs
Research summaries for design systems, accessibility, or tooling
Imaginative work: naming, storytelling, metaphors
Collaborative ideation (feels like a writing partner)
Strengths:
Feels more emotionally attuned, very "human" writing
Great for pasting in audits or docs (Huge 200K tokens context window)
"Projects" feature stores memory across topics and documents (for example, your style of writing)
Claude Sonnet 4 is best for the balance of speed and quality
Reality check:
No image generation
Sometimes slower or less assertive in responses
🧪 Examples:
Ask Claude to rewrite your design system documentation in a friendlier tone
Design tokens and components naming help
Summarize your team's design principles
🔵 Google Gemini
Use it for:
Summarizing product specs or research notes from Google Docs
Integrating AI into Google Workspace (Docs, Gmail, Sheets)
Getting early-stage critique or rephrasing on design rationales
Researching industry trends and product strategy shifts
Strengths:
Huge 1M-token context window (great for full specs + research in one go)
Deep integration with Google tools = no copy-pasting
Great for structured, factual responses
Weaknesses:
Lacks creative intuition
Sometimes too "corporate" in tone
🧪 Examples:
Ask Gemini to extract clear action points
Use it to compare accessibility regulations across different regions
Drop a user research transcript into Docs → get Gemini to cluster key insights
🔵 ChatGPT
Use it for:
Data analysis (numbers, trends, summaries)
Content creation (writing, scripts, blog posts, social captions)
Workflow ideas, explanations
Learning new topics
Image generation (follows the orders best)
Uploading and understanding files (PDFs, Excel, DOCX, images)
Strengths:
Versatile: writing, planning, coding, basic data analysis
File support: understands PDFs, Excel sheets, screenshots, etc.
Has "Actions" and Custom GPTs for recurring tasks
Image generation (via DALL·E and GPT-4o vision)
Personalization with memory for power users
Where it falls short:
Hallucinates or goes off track in longer chats
Sometimes ignores specific formatting or logic instructions
🧪 Examples:
Do the research → ask ChatGPT for analysis → paste findings to Gamma AI
Drop your spreadsheet of token values → change the naming
Paste a PDF with internal guidelines → ask ChatGPT to reformat into Notion page format
Generate icon concepts
🔵 Cursor
Cursor is a local AI-powered code editor, while Replit is a Cloud-based in-browser IDE.
When I use it:
Building prototypes, testing new features
Testing token implementations
Connecting directly to Figma via MCP (game-changer!)
Why it's powerful:
Power users working locally on real projects with GitHub + Figma integration
Fast for devs with existing workflows
Fast prototype-to-code workflow
Connected with your GitHub repos
Reality check:
Not great for beginners learning to code from scratch (then I advise you to start with Lovable or Replit)
🧪 Examples:
Paste a Figma file link → prompt Cursor to generate HTML/CSS/JS for a prototype (walkthrough)
Sync with GitHub and Airtable (walkthrough)
🔵 Lovable
Use it for:
Getting clickable prototypes fast
Iterating on ideas, features
Strengths:
Tailored for product designers — speaks the language of UX, not just raw HTML
Great complement to product design work
Easy to use
Reality check:
Doesn’t “see” the full context, can get lost with multiple prompts
Suggestions can feel generic without precise input (works best with framed prompts)
🧪 Examples:
Create a landing page in minutes
Check community creations
Use it before design reviews → tighten copy, improve form clarity, or prep for dev handoff with cleaner UX
🔵 Replit
When I use it:
Quick prototypes, feature experiments
Collaborative coding with the team
Building and deploying web tools without setup
Strengths:
Zero setup time; you get instant dev environment in the browser
Built-in AI assistant (Ghostwriter) to help write and explain code
Built-in multiplayer mode (edit with others live)
Honest take:
Hard to get it out of the loop when something goes wrong (loses context)
UI can feel cluttered with multiple panes/tabs
🧪 Examples:
Quickly prototype a layout or logic idea without opening a local editor
Build a token visualizer or spacing calculator
🔵 Figma MCP
Use it for:
Connecting UI prototypes directly to real data or code
Handing over working prototypes to devs
Testing AI product ideas in realistic interfaces
Strengths:
Bridges design and dev using AI agents
Works well with Cursor and Replit
Knows your Figma Variables/Design tokens
Easy setup
Reality check:
Still emerging; not every workflow is stable yet
🔵 Runway ML
When I use it:
Animating icons
Quick concept animations/videos for presentations
Perfect for:
Testing creative direction
Generating video from text or images
Creating motion graphics
Reality check:
Some creations can be different from your prompt/image you add
Can get expensive
Enjoy exploring. ✌️
— If you enjoyed this post, please tap the Like button below 💛 Thank you.
🎤 New podcast episode
💎 Community Gems
Introducing Fusion - the first AI agent that can build and edit enterprise-scale applications autonomously
☑︎ Connects to any codebase, regardless of size or complexity
☑︎ Learns and uses your design systems, APIs, and MCP servers
☑︎ Figma-like precision editing
☑︎ Agentic pull requests you can work with just like a human
🔗 Link
Deep Dive into Uber’s Design Systems | Figma
In this interview Jay chats with Ian who leads design systems for Uber. You will learn how Ian creates new design system components, specs components for developer handoff and more.
🔗 Link
Fantastic resource!!!Thank you!!