Tool guide

Using UIVibes with Lovable

Full-app builder — needs explicit structure boundaries.

Paste workflow

The Lovableworkflow

  1. Open your Lovable project, or start a new one.

  2. Copy the AI Prompt tab and paste it into the Lovable chat.

  3. Add one line telling Lovable exactly where the file goes — e.g. "Create this at src/components/ui/{slug}.tsx."

  4. Review the diff Lovable proposes before accepting — it edits the live project tree, not a scratch file.

Gotchas

Known gotchas

What to watch for once the prompt is in Lovable — none of these block the build, they just save a round trip.

  • Needs explicit project structure context. State the target path if Lovable guesses wrong the first time.
  • Add "Do not wrap in additional containers" if it nests the component inside its own layout wrapper.
  • Works better with the code comments left intact — don't ask it to strip them before writing the file.

Availability

Universal, unless it isn't

universal.md is written to build cold in every supported tool, so it's the only prompt that exists for most components today.

A tool-specific variant only gets added once the universal prompt demonstrably fails in that tool — see the quickstart for what's inside a prompt either way. When a Lovable-specific variant exists for a component, its prompt tab will show it automatically; until then, the universal prompt is the one to paste.

Browse components