AI agent workflow

DESIGN.md for Lovable

Lovable can generate full-stack applications from natural language. Natural language can still be underspecified for visual decisions. DESIGN.md gives Lovable a product-specific design memory: information density, page templates, navigation patterns, component rules, and anti-patterns so every generated route feels like it belongs to the same product.

Read the Lovable guideBrowse Lovable entries

Introduce DESIGN.md before the first build

The best time to use DESIGN.md is before Lovable creates the first version. A strong starter prompt: "Build this app using the attached DESIGN.md as the visual source of truth. Follow the typography, color roles, component rules, page density, navigation structure, and anti-patterns. When you create new screens, reuse the same system." Lovable can create multiple product surfaces at once — if the design direction is missing at the first pass, every generated route may need cleanup.

Make handoff and ownership easier

Lovable emphasizes real code and existing engineering workflows, so DESIGN.md is also useful after generation. When the code is synced to GitHub or handed to developers, the file explains why the UI was built a certain way. When a new feature is added, the instruction can be simple: "Use the existing codebase and DESIGN.md." DESIGN.md turns a one-time prompt into a maintainable design system for AI-built software.

Start here

Move from this landing page into deeper DESIGN.md references, examples, and guides.

Browse Lovable entries

Find DESIGN.md files tagged for Lovable in the catalog.

Open

Full Lovable guide

Long-form guide for using DESIGN.md with Lovable.

Open

DESIGN.md templates

Starter templates for Lovable projects.

Open

Frequently asked questions

What is DESIGN.md for Lovable?

DESIGN.md is a product-specific design memory file for Lovable. It defines information density, color roles, component rules, page templates, navigation patterns, and anti-patterns so Lovable-generated applications feel coherent across every route — not like a collection of independently styled screens.

How do I use DESIGN.md with Lovable?

Introduce DESIGN.md in your first Lovable prompt: "Use this DESIGN.md as the visual source of truth. Follow the typography, color roles, component rules, page density, and navigation structure. Reuse the same system on every new screen." For follow-up prompts, reference it again: "Use the existing codebase and DESIGN.md."

What should a Lovable-ready DESIGN.md include?

The app category, target user, primary workflows, information density, page templates for marketing and app surfaces separately, navigation patterns, form behavior, empty and error states, and responsive rules. Include component examples for the most common elements: button variants, card layout, table density, modal tone, and sidebar structure.

Search the catalog

design md for lovablelovable design system promptlovable ai app ui design rules