Because AI design and code generators quickly take an active part in the design process, it’s essential to understand how to make the most of these tools. If you’ve played with Cursor, Bolt, Lovable, or v0, you know the output is only as good as the input.
Here’s a structured prompt format I use to steer AI toward practical, usable, and beautifully composed UIs. It consists of 5 parts:
- Context (what you want to build)
- Description (things AI should consider; design priority)
- Platform (your target platform)
- Visual style (visual attributes you want to see in design generated by AI)
- UI components to include (list of specific components you want to see on a page/screen)
Quick tip: If you want to see how this prompt format is used to generate real UI, check this tutorial:
https://medium.com/media/0ba1c232d2473477fa73227f8b2d1fb8/href
1. Context
Start with a clear one-liner that defines what you’re designing. This helps the AI understand the purpose and scope of the page/screen before diving into visuals.
✅ Do this when defining context:
- “Design a sleek, informative home screen for a modern investment app.”
- “Create a minimal checkout screen for a food delivery app.”
- “Generate a mobile dashboard UI for tracking fitness progress.”
🚫 Avoid this when defining context:
- “Make a nice UI screen for a healthcare app.”
- “Create a cool homepage for kids’ toys.”
2. Description
Description should be short and to the point explanation of the most important things about this design. Explain what matters most: user goals, content priorities, and interaction details. This will guide AI into right direction so it will focus on function, not just aesthetics.
✅ Do this when writing description:
- “Users should instantly see key portfolio stats, recent changes, and gain confidence through clarity and data hierarchy.”
- “Highlight daily changes and insights while keeping actions like ‘View Portfolio’ easily accessible.”
Quick tip: When explaining what AI should consider when designing a screen/page, try to shift focus from outputs to outcomes. “Help users stay informed about current market trends and offer quick actions so that they can act quickly based on the information they see.”
3. Platform
Specify the device and OS to help align with platform guidelines and constraints like screen size, layout behavior, and native components available on that platform.
✅ Do this:
- “iOS 17 / iPhone 14 (390 x 844), using Human Interface Guidelines”
- “Android Material 3 / Pixel 6 Pro (360 x 800)”
- “Web app in desktop resolution (1440×1024), responsive layout”
🚫 Avoid this:
- “Mobile” (too vague )
4. Visual style
Define the tone and feel. How you want your design be perceived by users? Should it be calming? Corporate? Youthful? Add accessibility needs (like contrast or readability) and style direction (e.g., modular, card-based, subtle gradients).
✅ Do this when describing visual style:
- “Professional, calm, and trustworthy. Use navy, forest green, and soft grays.”
- “Modular card layout with subtle shadows and gradients.”
- “Typography should be elegant and legible at small sizes.”
🚫 Avoid this when describing visual style:
- “Make it beautiful” (beauty is subjective; describe the attributes)
Quick tip: Provide contrast and accessibility guidance for AI: “Ensure 4.5:1 contrast ratio for text. Support both dark and light modes.”
5. UI Components to include
Break down what needs to be on the screen. Think structure (top nav, body section, footer) and storytelling (what the user sees first, what action they should take). Support description with a placeholder copy and samples so AI gets the details right.
✅ Do this when describing components:
- Start from top to bottom. Think about what components to add to the header, body, and footer.
- When describing the UI component, mention specific things such as visual attributes or functional behavior that it should have.
- Provide content and interaction examples—such as content for containers (i.e., content for cards in your UI), placeholder text for form input fields, etc. This will make your design more relevant to the task you’re solving.
How to write better prompts for AI design & code generators was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.