Using with Lovable

Lovable builds React + Tailwind apps from prompts. Like Bolt, it works in an in-browser sandbox and reads files from the project tree.

Drop DESIGN.md into the project

Open your Lovable project's files panel, create DESIGN.md at the root, paste contents:

designdrop add stripe
# copy resulting DESIGN.md into Lovable

The next prompt can reference the file. Lovable's agent surfaces relevant project files when responding so you don't need to re-paste on every turn.

Anchor the agent

Use DESIGN.md as the source of truth for visual decisions. Quote the
Colors, Typography, and Patterns sections before generating components.

You can also add this to Lovable's "Project knowledge" surface so it persists across chats — that way every future prompt starts grounded.

Tailwind theme

Lovable ships Tailwind v3 by default (as of writing). Use the CSS export rather than the Tailwind v4 @theme block:

designdrop add stripe --all

That gives you tokens.css which you can paste into src/index.css:

:root {
  --color-primary: #635bff;
  /* ... */
}
 
@layer utilities {
  .bg-primary { background: var(--color-primary); }
  .text-primary { color: var(--color-primary); }
  /* ... */
}

When Lovable upgrades to Tailwind v4 you can swap to the @theme flow.

Workflow

The "two-pass" pattern works here too:

1. First prompt: generate the feature with rough styling.
2. Second prompt: "Refactor to use tokens from DESIGN.md instead of hardcoded values."

The second pass is consistently faster than chasing perfect output on the first try.