Guides / Prompting and shipping

How to Design a Good-Looking App with AI

Get AI to design an app that looks considered, not generic: gather references, set a design language, control spacing, type and colour, and iterate well.

Mythex Team · 2026-09-29 · 7 min read

To get a good-looking app from AI, stop asking it to "make it look nice" and start giving it what a designer would want: two or three references you like, a named design direction, and concrete rules for type, colour and spacing. Then build one screen, fix it until it is right, and have the AI apply the same system everywhere else. Most "AI look" comes from vague prompts producing average answers; specific input produces specific design.

Why AI designs look generic

Ask an AI for "a modern, clean SaaS dashboard" and it will give you the statistical middle of every dashboard it has seen: the same sans-serif font, a purple-to-blue gradient, rounded cards with soft shadows, emoji-like icons in circles, and a centred hero saying "Your workflow, simplified". Nothing is wrong with any single choice. The problem is that none of them were chosen for your product.

Good design is mostly decisions. Your job is to make the handful of decisions that give the app a character, and let the AI do the thousands of small ones consistently.

Step 1: Collect references before you prompt

Spend twenty minutes gathering two to four references — apps or websites whose look suits your product. Good sources are products your audience already uses, design galleries, and the sites of companies in adjacent fields.

For each one, write down what you like in plain words:

• "Lots of white space, content in a narrow column, small grey labels above large numbers."
• "Dense tables with thin dividers, no card shadows, one accent colour for actions."
• "Big serif headings, warm off-white background, photography rather than illustrations."

Then pass those descriptions to the AI, and attach screenshots if your tool accepts images. Take inspiration from the qualities, not the product: copying another company's layout, branding or copy wholesale is both a legal and a credibility risk.

Step 2: Pick a design direction and name it

A direction is a short description of the feel. It gives the AI a filter for every decision it makes. Some that work well:

Put it in the first prompt, along with who the app is for:

Build a booking app for an independent yoga studio. Design direction: calm and minimal, like a printed studio timetable. Warm off-white background, near-black text, one muted sage-green accent for buttons and selected states. A serif for headings, a clean sans-serif for body text. Generous spacing, no gradients, no drop shadows, no emoji. Mobile-first.

Step 3: Set the rules — type, colour and spacing

These three carry most of the visual quality. Being explicit about them is the single biggest improvement you can make.

Typography

• One or two typefaces. A heading face and a body face, or one family in several weights.
• A type scale. A handful of sizes used consistently — for example 14, 16, 20, 28 and 40 px — rather than whatever each component picks.
• Readable body text. Around 16 px on the web, a line height of roughly 1.5, and line length of about 60–75 characters for long text.
• Hierarchy through weight and size, not colour. Headings bolder and larger; secondary text smaller and softer grey.

Colour

• Mostly neutrals. Backgrounds, surfaces, borders and text greys do most of the work.
• One accent colour for actions and selected states. A second only if it has a clear job.
• Semantic colours for success, warning and error — and used only for those.
• Contrast. WCAG 2 asks for a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text. Light grey text on white often fails; ask the AI to check.
• Dark mode, if you want it, designed deliberately rather than inverted.

Spacing and layout

• A spacing scale such as 4, 8, 12, 16, 24, 32, 48, 64 px. Everything snaps to it.
• Alignment. Edges line up; content sits on a grid or in a consistent max-width column.
• Proximity. Related things close together, unrelated things further apart. This one rule fixes most cluttered screens.
• Fewer containers. Not everything needs a card. Borders, dividers and white space often group content more quietly.

A prompt that sets the system up once:

Before building more screens, set up a small design system and use it everywhere: a type scale of 14/16/20/28/40 px, body line height 1.5, a spacing scale of 4/8/12/16/24/32/48 px, neutrals from near-white to near-black, one accent colour (#3F6B5A) for primary actions only, and red only for errors. Buttons, inputs and cards should share one border radius. Check that all text meets WCAG AA contrast.

If you work in a code-aware builder, this usually becomes design tokens — CSS variables or a Tailwind theme — which means later changes happen in one place.

Step 4: Build one screen properly first

Do not generate twelve screens and then try to fix them all. Pick the screen users see most — often the dashboard or the main list — and iterate until it is right. Then:

Use the dashboard as the reference for all other pages: same header, spacing, type sizes, button styles and table style. Update the Settings and Bookings pages to match.

A finished reference screen communicates your taste far better than any adjective.

Step 5: Iterate with specific, small requests

Feedback to an AI works like feedback to a junior designer: specific, one area at a time, and clear about what to keep.

Always add what to keep — "keep all routes, copy and features the same" — so a visual pass does not quietly remove functionality. And check each change on a phone-sized screen before asking for the next; see how to build a mobile-friendly web app for what good looks like on small screens.

Step 6: The details that separate good from generic

Once the structure is right, these small things make an app feel finished:

• Empty states. What a new user sees with no data: a short explanation and one clear action, not a blank table.
• Loading states. Skeletons shaped like the content, not spinners everywhere.
• Error states. Plain-language messages next to the field that caused them.
• Hover, focus and pressed states on every interactive element — focus rings matter for keyboard users.
• Real content. Replace "Lorem ipsum" and "John Doe" with realistic text and data; placeholder content hides layout problems.
• Icons from one set, at one or two sizes, with consistent stroke width.
• Imagery with a purpose. Real photos of your product, place or people beat generic stock. Where you use stock or generated images, keep a consistent style.
• Copy. Short, specific labels ("Book class", not "Submit") do as much for perceived quality as any colour choice.

Common mistakes

• Redesigning everything in one prompt. Big rewrites introduce regressions. Go page by page.
• Too many accent colours. If everything is highlighted, nothing is.
• Centring everything. Centred text is hard to scan beyond a headline; left-align most content.
• Tiny, low-contrast text that looks elegant on a large monitor and is unreadable on a phone in sunlight.
• Decoration over hierarchy. Gradients and shadows cannot fix a screen where the most important action is not obvious.
• Ignoring the landing page. For many products it is the first impression; see how to build a landing page that converts.

For more prompt patterns beyond design, read how to write prompts for AI app builders. If your work is the product — a design or photography portfolio — how to build a portfolio website goes deeper on presentation.

Designing with Mythex

In Mythex you describe the design in chat, see it in the live preview, and check the phone-sized frame before the next change. The docs have short patterns for this: design and UI prompts on naming what to change and what to keep, and redesign your UI for refreshing one page at a time without losing features. Mythex can also search stock photos or generate an image in chat — a hero picture, a background, a share image — and place it in the app when you ask. If a pass goes wrong, revert to the checkpoint from before it. Browse the templates if you would rather start from an existing design and adjust it.