← Blog
· design prompts· ai design prompts· design md· claude· cursor· lovable

Design prompts for AI UI: how to brief Claude, Cursor and Lovable

What a design prompt should contain, a template you can reuse, and why a DESIGN.md saves you from repeating the same style instructions in every chat.

November 3, 20264 min read

A design prompt is the part of your prompt that describes how the interface should look. "Build a pricing page" has no design prompt in it, so the AI fills the gap with the same gradient, the same font and the same cards everyone else gets.

What a good design prompt includes

  • Product and audience. What the screen is for and who uses it.

  • Look. Colors as values, fonts by name, radius and spacing as numbers.

  • Layout. The page structure and how dense it should be.

  • Components and states. Buttons, inputs, empty and error states.

  • What to avoid. The defaults you do not want, such as gradients or emoji icons.

A reusable design prompt template

Build a [screen] for [product], used by [audience].
Follow DESIGN.md for colors, type, spacing and components.
Follow PATTERN.md for page structure.
Include: [sections and states].
Avoid: gradients, emoji icons, shadows on cards.

Example

Build a billing settings page for an invoicing app used by small agencies.
Follow DESIGN.md for colors, type, spacing and components.
Follow PATTERN.md for page structure.
Include: current plan, payment method, invoice history table, an empty state for no invoices.
Avoid: gradients, emoji icons, shadows on cards.

Five lines, and none of them describes a color. That is the point.

Why a DESIGN.md beats a longer prompt

A long design prompt has three problems. You retype it in every chat. It drifts as you edit it. And it only exists in one tool. A DESIGN.md is the same design prompt written once, kept in your repository and read by Claude Code, Cursor, Lovable and v0. Your prompts then describe the task, not the style.

Common mistakes

  • Adjectives instead of values. "Clean and modern" fits every product. "#0B0B0F background, 8px radius, Inter 15px" fits yours.

  • Mixing two systems. Pick one source for the look and one for the layout.

  • Describing pixels in chat. If you repeat a rule three times, move it into the file.

  • No list of things to avoid. Models repeat their defaults unless you rule them out.

Where to start

Pick one of the free design system examples for the look and one of the UI layout patterns for the structure, save both in your project, and use the template above. If you work in Cursor, the guide to Cursor rules for UI shows how to load the file automatically.

Frequently asked questions

What is a design prompt?

A design prompt is the part of a prompt that tells an AI tool how the interface should look: colors, fonts, spacing, layout and what to avoid. Without one, the AI falls back on generic defaults.

How long should a design prompt be?

Short, if the look lives in a DESIGN.md. Five lines that name the screen, point to DESIGN.md and PATTERN.md, list the sections and say what to avoid are usually enough.

Do design prompts work in Lovable and v0?

Yes. Paste the DESIGN.md into Lovable's Project Knowledge or attach it to your first prompt in Lovable or v0, then keep each prompt focused on the screen you want.

Where do I get a DESIGN.md for my design prompts?

Start from one of the free design systems on freedesignmd, copy its DESIGN.md and edit the colors and fonts. A DESIGN.md generator for your own brand is planned.