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