本文介绍了如何优化AI设计和代码生成器的提示词，以获得更实用、美观的UI设计。文章提出了一个结构化的提示词格式，包含五个关键部分：Context（设计背景）、Description（设计要点）、Platform（目标平台）、Visual style（视觉风格）和UI components to include（UI组件）。通过清晰地定义这些部分，可以引导AI生成更符合需求的设计。

📝 **Context（设计背景）**: 以清晰的语句定义设计内容，帮助AI理解页面或屏幕的目的和范围，避免过于宽泛的描述。

🎯 **Description（设计要点）**: 简明扼要地解释设计中最重要的事项，包括用户目标、内容优先级和交互细节，引导AI关注功能而非仅仅是美观，将重点从输出转移到结果。

📱 **Platform（目标平台）**: 明确指定设备和操作系统，以便与平台规范和约束对齐，例如屏幕尺寸、布局行为和可用的原生组件。例如：iOS 17 / iPhone 14 (390 x 844)，使用Human Interface Guidelines。

🎨 **Visual style（视觉风格）**: 定义设计的基调和感觉，例如专业、平静、值得信赖，并添加可访问性需求（如对比度或可读性）和风格方向（如模块化、卡片式、微妙的渐变）。同时，为AI提供对比度和可访问性指导：确保文本的对比度为4.5:1，并支持深色和浅色模式。

🧩 **UI Components to include（UI组件）**: 详细列出页面上需要包含的UI组件，包括结构（顶部导航、主体部分、页脚）和故事线（用户首先看到什么，应该采取什么行动），并提供占位符文本和示例，以便AI能够准确理解细节。

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 consist 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 (1440x1024), 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.

Written by Nick Babich

---

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.