Start here.

What this template does

Paste any company URL. The app extracts the brand's palette, typography, voice, and design tokens — and packages them as a kit you can browse, share, and export.

Recent kits show up on the home page. Open one to see colors, fonts, logos, and a generated design.md.

Drop these files into Lovable or your AI agent to use their brand.

Optional: Firecrawl connector

Extraction works without it. Adding Firecrawl gives you better results on JavaScript-heavy sites and richer brand data.

Pricing — mostly free

Firecrawl gives every new account 500 free credits on sign-up, no card required. One brand extraction typically uses 1–5 credits, so casual use rarely leaves the free tier. If you do run out, their Hobby plan starts at $16/mo for 3,000 credits — only needed for heavy or commercial use.

Connecting it

If you remixed this template, Lovable may have already linked Firecrawl. If you're not sure, paste this into the Lovable chat:

Connect the Firecrawl connector to this project so URL extraction can use it for JS-heavy sites.

Lovable will open the connector picker. Pick an existing Firecrawl connection or create one. No code changes needed.

When you're done with this guide

Once you've got your bearings, you can remove the Start Here button and this page. Paste this into the Lovable chat:

Remove the "Start Here" button from the navbar and delete the /start-here route. Also delete src/components/start-here-button.tsx and src/routes/start-here.tsx. Keep everything else as-is.

You can always restore it later by asking Lovable to add a Start Here page back.