How to describe the design you want: prompts for UI and branding

How do you describe the design you want to AI?

To describe the design you want to AI, turn taste into decisions: three words for the feel, colors as hex codes, a named font, clear spacing and shapes, and RTL rules. 'I want it premium and modern' means something different to everyone. 'Calm, premium, comfortable; light beige background #F7F3EC, dark green primary #0F5132, IBM Plex Sans Arabic, generous spacing and softly rounded corners' gives the agent something it can execute literally.

You do not need to be a designer. You need some vocabulary and an orderly method: a design system first, then screens one by one, then a review. This article gives you all three with ready prompts.

AI cannot read your taste; it reads your words. Make the words precise.

Simple design vocabulary for non-designers

These are the most useful words when asking for interface changes. Use them in Arabic or English; the model understands both.

The design system prompt: your brand in one message

Before editing any screen, lock in the design system: colors, fonts, spacing and shapes. With a clear system, every new page the agent builds stays consistent automatically. If you have a logo, get its exact hex codes from your brand file or designer.

A note on fonts: popular free Arabic fonts such as IBM Plex Sans Arabic, Noto Kufi Arabic, Tajawal and Cairo are designed for screens and pair well with English. Pick one Arabic font and a matching English one, and never mix more than two.

Choosing colors if you have no brand yet

• One primary color for buttons and links, repeated on every page.
• An accent color for highlights only (a discount badge, an icon), never for long text.
• Neutrals for backgrounds and text: white or light beige, and dark grey text instead of pure black.
• Status colors: green for success, red for errors, yellow for warnings, consistent across the app.

If you plan seasonal campaigns such as National Day or Ramadan, ask for campaign colors on temporary banners and pages, and keep the core design system unchanged.

RTL and Arabic rules you should state

Many tools build in English first and then flip the direction, leaving details that make an app feel foreign to Arabic readers. State these rules explicitly:

• Directional icons (back and next arrows, an animated cart) mirror in Arabic; logos, play icons and clocks do not.
• No letter-spacing on Arabic text; it breaks the joined letters.
• No italics for Arabic; use a heavier weight for emphasis.
• Arabic needs slightly larger text and taller line height than English to read comfortably.
• Numbers, phone numbers and prices keep the right order inside Arabic sentences.
• Email and card-number fields stay left-to-right even inside an Arabic interface.

For the common mistakes in depth, read Arabic-first UX: RTL mistakes.

Screen-by-screen prompts: goal first, then order

After the system, refine key screens one at a time. A format that works: the screen's goal, element order from the top, what should stand out, and what to remove.

1. 1
   Home page

   'Goal: visitors start an order within seconds. From the top: a hero with an image, a short headline and an Order now button, then categories as horizontal cards, then best sellers. Remove the scrolling text ticker.'

2. 2
   Product page

   'Photos first at full width, then name and price in large type, then options as buttons rather than a dropdown, then an Add to cart button pinned to the bottom on mobile.'

3. 3
   Checkout

   'One step where possible: address, payment method with mada, Apple Pay and Tabby icons, summary and pay button. No distracting links.'

4. 4
   Admin dashboard

   'Four number cards at the top (today's orders, sales, in preparation, cancelled), then a table of recent orders. Calm colors; red only for alerts.'

References and images: use them without copying

Visual references save a lot of words, but 'make it like that app' alone leaves the agent guessing what exactly you liked. Name the thing you liked, and do not ask to copy another brand's identity.

Do not forget image style; it is part of the brand like color. Say what you want: real product photos on plain backgrounds, simple illustrations, or photos of people that suit your audience's culture. Ask the agent for clear image slots with alt text so you can swap in your real photos later without the design changing.

If you have a paper sketch or a screenshot of a rough design, you can turn it into a precise description or use it as a reference; see from screenshot or hand sketch to a working app.

A design review checklist before launch

• Every screen tested on a real phone in Arabic and English.
• Enough contrast for grey text and buttons, especially in sunlight.
• Dark mode does not hide a logo or icon.
• Buttons are large enough to tap, and forms show clear error messages.
• Images are compressed and load fast on mobile data.
• The same colors, fonts and shapes on every page, with no random exceptions.

You can ask the agent to do this review: 'Check every page against the design system and list any differences before changing anything.' For accessibility standards, see accessibility for Arabic apps.

Frequently asked questions

Terms in this article