A guide to AI design stack
The playbook to transform your ideas into polished, working products—fast.
Hey there! This is a 🔒 subscriber-only edition of AI First Designer (by ADPList) 🔒, to help designers transition into successful AI-First builders. Members get access to proven strategies, frameworks, and playbooks. For more: Unlock your career as an AI-First Designer | Get free 1:1 mentorship
Hi AI-First friends,
If there’s one thing that’s changed how I think, create, and build — it’s AI.
The last few years have completely redefined what it means to bring an idea to life. We’ve moved past the era where design meant opening Figma, structuring wireframes, and pushing pixels. Now, ideas move at the speed of prompts.
I’ve realized something simple but powerful: AI has blurred the line between ideation, design, and development.
The old stack (Notion for notes, Figma for design, Webflow for build) isn’t enough anymore. It was built for a world where humans handled every detail. Today, the workflow is conversational, dynamic, and fast. You can literally go from a text prompt to a working product in hours.
And that’s what this newsletter is about: the AI-first design stack that’s quietly reshaping how we create.
In this stack, every tool has a new role:
ChatGPT helps me think, structure, and design with clarity.
Lovable (or similar AI design studios) turns words into interactive prototypes.
Figma still holds its throne for fine-tuning details.
Supabase powers the logic behind the interface.
And AI APIs like OpenAI or Claude add the intelligence layer that makes everything come alive.
In this piece, I’ll walk you through the full workflow we use, from the moment an idea sparks to the point it becomes a live, functional product.
We’ll cover:
How to use ChatGPT as your strategic co-creator
How to prototype interfaces in real time with Lovable or Galileo
How Figma still anchors precision and consistency
How Supabase powers the backend without friction
How to layer intelligence using models like GPT or Claude
And finally, how to test, refine, and iterate faster than ever before
By the end, you’ll have a complete map of the modern AI design stack.
So let’s start at the very beginning — where every product begins, and every idea finds its form: vision and strategy.
Guide #1: Vision & strategy with ChatGPT
Every product begins as a thought, an intuition that something should exist.
But the hardest part isn’t execution. It’s clarity.
Before a single pixel is drawn or a prototype generated, we start by defining the why, the who, and the how.
That’s where ChatGPT becomes indispensable. It’s not just a productivity assistant, it’s the thinking partner that helps shape the foundation of any idea before it becomes real.
Why start here?
Most projects fail because they start in the wrong place — inside a design file.
Pretty screens with broken logic are the fastest way to burn time and lose direction.
The smarter way is to start with reasoning, not visuals.
ChatGPT helps us deconstruct an idea by asking questions we might not think to ask ourselves:
Who exactly is this product for?
What core problem does it solve?
What makes it feel uniquely alive or magical?
This phase transforms vague ideas into structured product narratives. It gives us the clarity that every other tool in the stack will depend on.
How we use it
Once we have a broad vision, we use ChatGPT to break it into layers of logic and flow.
1. Define the Problem Space
Prompt example:
“Imagining you are weaving the narrative of a digital journaling app that I am building. Map out the five core user needs it should address, and the emotional triggers behind each. Define the core user needs for a digital journaling app. Requirements: – Identify 5 essential user needs the journaling app should address. – For each need, explain the underlying emotional trigger that motivates it. – Consider both functional requirements (features) and emotional requirements (feelings, motivations). – Output: clear mapping of user needs paired with their emotional drivers, creating a foundation for user-centered design decisions."
This step ensures the foundation is human, not technical.
2. Map the User Flow
Prompt example:
Map the user flow for creating a first entry. Requirements: – List out each step a user takes to log their initial entry, with specific attention to: - Decision points (e.g. data input, entry format selection) - Confirmation dialogs/actions (submission, success states, prompts) - Potential failure states (validation errors, connectivity issues, incomplete input) – Present the flow in ordered steps, from start to finish. – Output: clear, end-to-end flow covering user actions, system responses, and error handling for entry logging.
It’s not about generating screens. It’s about visualizing how people think and move through the product.
3. Create Interaction Scenarios
Prompt example:
You are a UX onboarding expert focused on increasing conversion rates. Requirements: – Suggest 3 actionable techniques to minimize onboarding friction, tailored for a digital product. – Each method should foster a more personalized experience for the user. – Output: concise, practical strategies with examples or implementation hints for each approach.
These interactions later become design blueprints when we move into Lovable or Figma.
Why does this phase matter?
Starting with ChatGPT ensures that everything downstream — from UI design to backend schema — is built on a clear narrative.
When logic comes first, design decisions are easier, content feels more intentional, and the final product has internal consistency.
We treat this phase as the ideation engine that drives the rest of the workflow.
It’s where every assumption is tested, every flow is reasoned out, and every feature earns its place.
Pro tip — Don’t just use it, converse with it
The magic of ChatGPT lies in its iterative nature.
Instead of one-shot prompts, we hold conversations. For example:
“Challenge this assumption. What could go wrong with this flow?”
or
“Turn this logic map into a prompt ready for a prototyping tool.”
Each iteration sharpens clarity. Each exchange moves the idea closer to something executable.
From thought to structure
By the end of this phase, we have:
A complete user journey
Defined problem statements
A set of validated assumptions
Early draft copy for onboarding, errors, and empty states
In other words, the blueprint for a product that’s ready to come alive visually.
Guide #2: Rapid prototyping with Lovable
Once the vision and flow are defined, the next step is bringing structure to life — transforming text-based reasoning into visual form.
This is where Lovable, and other AI prototyping tools like Galileo or Uizard, redefine what design speed truly means.
They eliminate the traditional gap between ideation and execution. With a single prompt, it’s now possible to generate entire responsive interfaces — complete with navigation, layouts, and interactivity — within minutes.
We no longer design screens one by one. We design systems that respond to language.
Why it matters?
Traditional prototyping relied heavily on manual iteration — moving boxes, adjusting alignments, and crafting pixel-perfect mockups before testing anything real.
AI prototyping reverses that process. It enables instant visualization of logic and intent.
The goal isn’t perfection. It’s translation — transforming reasoning into something tangible enough to test, refine, and evolve.
By combining the structured outputs from ChatGPT with Lovable’s interface generation, we can see how flows behave as real products far earlier in the process.
Core UX & UI
1. Generate the First Draft UI
Prompt example:
Create a dashboard app. Requirements: – Components: sidebar with 5 menu items, top navigation bar with search input and user avatar. – Main section showing 3 KPI cards side-by-side and an activity log below them. – Responsive layout with mobile-first design, sidebar collapses or hides on small screens. – Interactive elements include search functionality and clickable avatar menu. – Output: clean, modern dashboard UI with clear visual hierarchy and smooth transitions.
In less than a minute, Lovable produces a working layout — not static images, but clickable prototypes ready for feedback.
2. Visualize Complex Flows
Prompt example:
Design a journaling app onboarding flow. Requirements: – Flow: Welcome screen, voice input setup, then guided first journal entry creation. – Each step features clear instructions, progress indicators, and visually engaging layouts. – Voice input setup includes permission prompt and a short test recording. – After onboarding, user lands on the main journal dashboard. – Output: seamless, friendly onboarding with smooth transitions and intuitive UX.
This helps validate whether the earlier logic makes sense visually, highlighting friction points before any manual refinement begins.
3. Connect Screens into Journeys
Prompt example:
Enhance the dashboard with entry creation and navigation features. Requirements: – Add a button or link on the dashboard to open a new entry form. – After form submission, display a success modal with confirmation and next steps. – Include navigation breadcrumbs throughout for easy page tracking. – All components should follow modern UX patterns and maintain visual consistency. – Output: intuitive dashboard experience with seamless entry creation flow and clear navigation cues.
Instead of isolated screens, Lovable produces connected experiences —just like users actually navigate a product.
Integrating ChatGPT and Lovable
The most powerful workflow combines ChatGPT for logic and Lovable for execution.
This process looks like this: