Design UI Mockups with AI

1. 1

   Define Your Product and User Flows

   UI design starts with understanding what users need to do, not how it will look. Map your core user flows before touching any design tool — this prevents redesigning screens because you missed a critical step.

   ChatGPT Claude

   I'm designing a UI for [describe your product — e.g., 'a mobile app that helps users track their daily water intake and build a hydration habit'] and need to plan the information architecture and user flows before I start designing.
   
   Product details:
   - Product type: [web app / mobile app / dashboard / landing page / SaaS platform]
   - Core user goal: [what is the #1 thing users come to this product to do?]
   - Target user: [describe them — technical level, age range, context of use, device they use most]
   - Key features: [list 5-8 main features or capabilities]
   - Existing products in this space: [name 2-3 competitors or similar apps]
   
   Help me plan:
   
   1. **Core User Flows**: Map out the 3 most important user flows as numbered steps. Format:
      - Flow name: [e.g., 'First-time setup']
      - Steps: [step 1 → step 2 → step 3 → ...]
      - Decision points: [where does the flow branch? What choices does the user make?]
      - Success state: [what does the user see when the flow completes successfully?]
   
   2. **Screen Inventory**: Based on the user flows, list every screen the product needs. Group by section (Onboarding, Main App, Settings, etc.).
   
   3. **Navigation Structure**: What navigation pattern fits this product? (Tab bar, side drawer, top nav, bottom sheet, hub-and-spoke?) Why is this pattern right for my users?
   
   4. **Critical Path**: What is the minimum set of screens needed for a usable MVP? Prioritize the screen list into: must-have / should-have / nice-to-have.
   
   5. **Content Inventory per Screen**: For each must-have screen, list: page title, primary action, secondary actions, data displayed, and user inputs required.

   Copy

   Tip: Map flows on paper or a whiteboard before opening any design software. Digital tools create the illusion of progress — sketching forces you to think about structure. Even rough boxes and arrows for 10 minutes reveal gaps in your logic that look invisible in a polished Figma screen.

2. 2

   Create a Design System Foundation

   A mini design system — even just defining your typography, spacing, and component styles — makes your UI look cohesive and dramatically speeds up the mockup phase. AI can generate the full spec in minutes.

   ChatGPT Claude

   I need to define a basic design system for my [web/mobile] app before I start designing screens. Help me establish the foundational layer.
   
   Product context:
   - Product name: [your product name]
   - Brand personality (3-5 adjectives): [e.g., clean, modern, trustworthy, approachable]
   - Color palette: [paste hex codes if you have them, or say 'suggest a palette for my personality']
   - Primary platform: [web desktop / mobile iOS / mobile Android / responsive web]
   - Design inspiration: [2-3 apps or sites whose UI style you want to emulate]
   
   Generate my design system spec for:
   
   1. **Typography Scale**:
      - Font recommendations (Google Fonts, free for commercial use)
      - Type scale: h1, h2, h3, h4, body-large, body, body-small, caption, label
      - For each: font family, weight, size (px and rem), line height, letter spacing
      - Specify which sizes are for mobile vs. desktop
   
   2. **Spacing System**:
      - Base unit (4px or 8px grid)
      - Named spacing tokens: xs, sm, md, lg, xl, 2xl, 3xl with values
      - Padding standards for: cards, page margins, input fields, buttons
   
   3. **Color System**:
      - Primary, secondary, accent, neutrals (surface, background, border)
      - Semantic colors: success, error, warning, info
      - All with hex codes and defined usage rules
   
   4. **Core Components Spec**:
      Describe exact visual properties for: Button (primary, secondary, ghost), Input field (default, focus, error states), Card, Badge/Tag, Navigation bar
      For each: background color, border, border-radius, padding, font style, hover/active states
   
   5. **Border Radius and Shadow System**:
      - Border radius scale: none, sm, md, lg, full
      - Shadow scale: none, sm (card), md (dropdown), lg (modal)

   Copy

   Tip: Use Tailwind CSS's design system as a reference even if you're not building with Tailwind. Their spacing scale (4/8/12/16/20/24...) and color naming convention (50/100/200/.../900) are industry-standard and give you a shared vocabulary with most developers.

3. 3

   Generate Screen Layouts with AI

   With your flows and design system defined, use AI to generate detailed layout specifications for each key screen. These specs let you build in Figma or Canva without staring at a blank canvas.

   ChatGPT Claude

   I need to design the following key screens for my [product type]. Based on my design system and user flows, generate detailed layout specifications for each screen.
   
   Product context: [brief description]
   Design system reference: [paste key values from Step 2 — colors, fonts, spacing]
   Primary platform: [web 1440px wide / mobile 390px wide]
   
   Design these screens (adjust the list to match your actual screens):
   
   **Screen 1: [e.g., Dashboard / Home Screen]**
   Purpose: [what does the user do here?]
   Key information to display: [list]
   Primary action: [the main CTA]
   
   **Screen 2: [e.g., Onboarding Step 1]**
   Purpose: [what does the user do here?]
   
   **Screen 3: [e.g., Detail/Profile Page]**
   Purpose: [what does the user do here?]
   
   For EACH screen, give me:
   1. **Layout Grid**: Column count, margins, gutters, max content width
   2. **Section Breakdown**: List every section from top to bottom with its purpose and approximate height
   3. **Component List**: Every component on the page (header, nav, card, button, form, etc.) with position and size
   4. **Content Hierarchy**: What does the eye see first/second/third? Why?
   5. **Empty States**: What does the screen look like before the user has any data?
   6. **Responsive Behavior**: What changes between desktop and mobile for this screen?

   Copy

   Tip: Design the most complex screen first. If your dashboard has 8 data widgets, building that screen forces all your component decisions. Every other screen becomes easier after you've established the patterns.

4. 4

   Build Mockups in Figma or Canva

   Translate your specifications into actual visual mockups. Whether you use Figma (more powerful, steeper learning curve) or Canva (faster, less flexible), AI can guide you step by step through building each screen.

   Canva ChatGPT

   I'm building my UI mockups in [Figma / Canva] and need step-by-step guidance to implement the designs I've planned.
   
   I'm using [Figma / Canva] because: [e.g., 'I need developer handoff files' / 'I just need presentation-ready screens']
   My experience level: [beginner / intermediate]
   The screen I'm building first: [describe the screen from Step 3]
   
   Walk me through building this screen from scratch:
   
   1. **Initial Setup**: How should I set up my [Figma / Canva] file? (Canvas size, frame/page naming, layers organization, grid setup)
   
   2. **Building Blocks**: In what order should I build elements? (Background → structural layout → navigation → content sections → interactive elements → details)
   
   3. **Reusable Components**: Which elements should I create as reusable [Figma components / Canva elements]? Walk me through creating one component with states.
   
   4. **Typography Application**: How do I apply my type system consistently? ([Figma styles / Canva text styles])
   
   5. **Specific Technique Questions**:
      - How do I create [specific UI element — e.g., a card with a subtle shadow]?
      - How do I simulate [specific interaction — e.g., a dropdown menu, a tab switching state]?
      - How do I create [specific layout — e.g., a responsive grid of cards]?
   
   6. **Handoff Preparation**: Once screens are done, what do I need to do before sharing with a developer? (Annotate specs, export assets, create a prototype flow)

   Copy

   Tip: In Figma, name every layer descriptively before you have 50 unnamed 'Rectangle' layers. Good naming: 'card/project-tile', 'button/primary/default'. This takes 5 extra seconds per element and saves 10 minutes of hunting when you come back to the file later.

5. 5

   Get Feedback and Validate Your Designs

   Your mockup reflects your assumptions about what users want. Before investing in development, validate the design with real feedback — from users, colleagues, or AI critique.

   ChatGPT Claude

   I've completed my UI mockup and need to critically evaluate it before handoff to development. Please conduct a thorough design review.
   
   My product: [describe in 2-3 sentences]
   Target user: [describe]
   Key screens I've designed: [list them]
   My biggest concerns about the design: [what are you uncertain about?]
   
   Review my design across these dimensions:
   
   1. **Usability Critique**:
      - Are primary actions obvious and easy to find?
      - Is the navigation intuitive for a first-time user?
      - Are there any screens where the user might get confused or lost?
      - What are the 3 most likely user errors and how does the design handle them?
   
   2. **Visual Hierarchy Check**:
      - On each screen, does the most important element have the most visual weight?
      - Is there visual clutter? What could be removed without losing function?
      - Is there consistent use of space to indicate relationships between elements?
   
   3. **Mobile Responsiveness**:
      - List 5 elements that typically break when going from desktop to mobile
      - What needs a complete rethink for mobile vs. just being resized?
   
   4. **Developer Feasibility**:
      - Are there any design elements that are technically complex to build?
      - What UI patterns can I replace with simpler, equally effective alternatives?
      - What third-party component libraries (shadcn, Material UI, Tailwind UI) already have components that match my designs?
   
   5. **Before/After Suggestions**:
      For each major issue you identify, describe specifically what I should change and why.

   Copy

   Tip: Share your mockup with 3 people who match your target user and ask just one question: 'What would you do first on this screen?' Don't explain anything — their answers reveal whether your visual hierarchy is working. If they point somewhere other than your primary CTA, the hierarchy needs fixing.

Recommended Tools for This Scenario

ChatGPT

Freemium

The AI assistant that started the generative AI revolution

• GPT-4o multimodal model with text, vision, and audio
• DALL-E 3 image generation
• Code Interpreter for data analysis and visualization

Get Started →

Claude

Freemium

Anthropic's AI assistant built for thoughtful analysis and safe, nuanced conversations

• 200K token context window for massive document processing
• Artifacts — interactive side-panel for code, docs, and visualizations
• Projects with persistent context and custom instructions

Get Started →

Canva

Freemium

All-in-one visual design platform with AI-powered creative tools

• Drag-and-drop visual editor with 250,000+ templates
• Magic Studio AI suite (text-to-image, Magic Eraser, Magic Expand)
• Background Remover for instant subject isolation

Get Started →