Prompting for Design

Good design prompts produce good-looking apps. The AI makes design decisions for anything you don’t specify — so the more visual detail you provide, the closer the result will be to what you want.

Describe colors explicitly

Don’t assume the AI knows your taste. Be specific about every color that matters to you.

Vague:

Use a dark theme

Specific:

Use a dark theme with a near-black background, white text, and electric blue as the accent color for buttons and links. Cards and surfaces should be slightly lighter than the background.

Named colors work well: “navy blue,” “warm orange,” “muted green.” You can also reference apps: “Use the same dark theme as Spotify.” The more precise you are, the less back-and-forth you’ll need.

Specify layout patterns

Name the UI patterns you want rather than leaving the AI to choose.

Use a bottom navigation bar with 4 tabs: Home, Search, Favorites, and Profile. The Home tab shows a vertical scrolling feed of cards. Each card has a cover image on top, a title below, and a subtitle with the date.

Common patterns the AI understands well:

• Bottom navigation with tabs
• Drawer/sidebar navigation
• Tab bar at the top
• Card grids and card lists
• Master-detail layouts (list on left, detail on right)
• Floating action button for primary actions

Reference Flutter widgets

If you know Flutter, mentioning specific widgets gives precise results:

Use a TabBar with 3 tabs at the top. Each tab shows a ListView of ListTile widgets with leading icons, titles, and trailing chevrons.

If you don’t know Flutter, describe what you see instead. The AI translates visual descriptions into the right widgets:

A tabbed interface at the top with three sections. Each section has a scrollable list of rows — each row has an icon on the left, text in the middle, and an arrow on the right.

Both approaches work. Flutter widget names are just more precise.

Describe screens individually

For apps with multiple screens, describe each one separately. This prevents the AI from getting overwhelmed and missing details.

Screen 1 — Login: Email and password fields centered vertically, a “Sign In” button below, and a “Forgot Password?” link. Dark background with the app logo at the top.

Screen 2 — Home: A greeting at the top (“Hello, [name]”), a horizontal scrollable row of category chips, then a 2-column grid of product cards below. Each card shows an image, product name, and price.

Screen 3 — Product Detail: Full-width product image at the top, title and price below, a description paragraph, and an “Add to Cart” button pinned at the bottom.

Send each screen as a separate message for best results. See Advanced Prompting for the full phased approach.

Use the Design Library

The Design Library offers 12 curated visual styles — Glassmorphism, Aurora Gradient, Neumorphism, and more. Each style sets the overall look and feel of your app in one click.

When creating a new project, click the dedicated Design button to browse available styles and click Use this design to apply one as your app’s foundation.

The AI will build on that visual style for all subsequent interactions. You can still override specific details in your prompts.

Note

The Design Library is only available when creating a new project — it’s used as part of your first prompt. It cannot be applied to existing projects through follow-up messages.

See Design Library for the full catalog of available styles.

Use the Gradient Builder

For custom gradient backgrounds, buttons, or overlays:

1. Open the attachments menu → Gradient Builder
2. Design your gradient with the visual editor (choose colors, direction, type)
3. Pick from 20+ presets or build your own
4. The generated Flutter code is sent to the AI as context

See Gradient Builder for full details on all options.

Attach mockup images

If you have a design mockup, wireframe, or screenshot of an app you like, attach it directly to your message.

• Paste an image (Ctrl+V / Cmd+V) or drag and drop onto the chat area
• Describe what you want: “Make my app look like this mockup” or “Use this color scheme and layout”
• The AI interprets the image and applies the design patterns it sees

This works well for:

• Figma/Sketch exports
• Screenshots from apps you admire
• Hand-drawn wireframes (the AI is surprisingly good at interpreting these)
• Color palettes and mood boards

See Attaching Context for all the ways to attach images.

Protect what you like

When iterating on design, explicitly state what should NOT change. Otherwise, the AI may reorganize things you were happy with.

Change the header background to a gradient from dark blue to purple. Don’t change the card layout or bottom navigation.

Update the font to be rounder and more playful. Keep the existing color scheme and spacing exactly as they are.

This is especially important during design refinement, where the AI might “improve” things you already approved.

Caution

If your logo keeps appearing in different sizes or positions across screens, be very specific: “Place the logo in the top-left corner of the AppBar, 32px height, on every screen. Do not change its size or position.”

Quick reference: design prompt checklist

Use this as a mental checklist when writing design-focused prompts:

Element	What to specify
Colors	Background, text, accent, borders, card surfaces
Typography	Heading size vs body size, font weight, letter spacing
Layout	Bottom nav, drawer, tabs, cards, lists, grids
Spacing	Compact vs airy, padding amounts, margins between elements
Theme	Dark or light (specify once, early)
Icons	Outlined, filled, or rounded style
Animations	Subtle, none, or playful transitions
Imagery	Placeholder style, aspect ratios, rounded corners on images

You don’t need to specify all of these every time. Focus on the ones that matter most for the current screen or feature.

Next steps

Advanced prompting

Multi-step workflows for building complex, well-designed apps efficiently.

Design Library

Browse curated visual styles to jumpstart your app’s design.