Skip to content
Primio Docs

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

Section titled “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

Section titled “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

Section titled “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

Section titled “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

Section titled “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.

See Design Library for the full catalog of available styles.

Use the Gradient Builder

Section titled “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

Section titled “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

Section titled “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.

Quick reference: design prompt checklist

Section titled “Quick reference: design prompt checklist”

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

ElementWhat to specify
ColorsBackground, text, accent, borders, card surfaces
TypographyHeading size vs body size, font weight, letter spacing
LayoutBottom nav, drawer, tabs, cards, lists, grids
SpacingCompact vs airy, padding amounts, margins between elements
ThemeDark or light (specify once, early)
IconsOutlined, filled, or rounded style
AnimationsSubtle, none, or playful transitions
ImageryPlaceholder 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

Section titled “Next steps”