Design-first

Build your front end with Lovable

Describe the site you want and watch it design itself — then apply it to the template.

Best for: Non-coders and founders who want a beautiful, opinionated design fast, in the browser.

The prompt

Copy this, fill in the [bracketed] parts, and paste it into Lovable.

You are designing the front end for a business that runs on the Orgalized backend. Design ONLY the look, feel, and marketing/dashboard UI — do not add any data fetching, authentication, or API calls (a separate Next.js template already handles all backend communication securely).

Business: [YOUR BUSINESS NAME] — [one line on what you do].
Brand: [primary color], [mood: e.g. warm & trustworthy / bold & modern]. Mobile-first.

Design these screens as clean, reusable components:
1. Marketing home (hero, value props, services, testimonials, footer)
2. A services/offer page
3. A contact page
4. A signed-in dashboard shell (sidebar + top bar + content area placeholder)

Use a neutral, token-friendly palette (semantic color names, not hardcoded hex) so it can be re-themed. Output self-contained components with no API logic — leave any place that needs data as a clearly labeled placeholder like {/* data comes from the template's lib/api */}.

How to do it

Fork the template first
Get the free BringTheFront template onto GitHub (see the Setup Guide). This is where your finished site lives — Lovable designs the look, the template already knows how to talk to the backend.
Design in Lovable
Paste the prompt above, filling in your brand. Iterate in the browser until the look is right. Lovable is best used purely for the visual design — screens, components, palette.
Hand the design to a code tool
Copy the components Lovable produced. Open your forked template in Cursor or Claude (see those guides) and ask it to apply Lovable's design onto the template's pages — updating site.config.ts, the palette, and the marketing copy in lib/content/*, while keeping every import from lib/api intact.
Verify and ship
Run pnpm verify, then push to GitHub and deploy on Vercel. Point your domain and you are live.

Watch out for

Lovable is design-first: it shines at the look, not at wiring a specific backend. Do not let it invent its own API calls — those go through the template's lib/api, which it should never touch.
Ask for a semantic/token palette (not hardcoded colors) so the design drops cleanly into the template's theme system and passes the contrast check.

Ready to bring your front?

Create your backend first, then use Lovable to build the front that connects to it.

Start free →Read the Setup Guide

You are designing the front end for a business that runs on the Orgalized backend. Design ONLY the look, feel, and marketing/dashboard UI — do not add any data fetching, authentication, or API calls (a separate Next.js template already handles all backend communication securely). Business: [YOUR BUSINESS NAME] — [one line on what you do]. Brand: [primary color], [mood: e.g. warm & trustworthy / bold & modern]. Mobile-first. Design these screens as clean, reusable components: 1. Marketing home (hero, value props, services, testimonials, footer) 2. A services/offer page 3. A contact page 4. A signed-in dashboard shell (sidebar + top bar + content area placeholder) Use a neutral, token-friendly palette (semantic color names, not hardcoded hex) so it can be re-themed. Output self-contained components with no API logic — leave any place that needs data as a clearly labeled placeholder like {/* data comes from the template's lib/api */}.

How to do it

Fork the template first

Get the free BringTheFront template onto GitHub (see the Setup Guide). This is where your finished site lives — Lovable designs the look, the template already knows how to talk to the backend.

Design in Lovable

Paste the prompt above, filling in your brand. Iterate in the browser until the look is right. Lovable is best used purely for the visual design — screens, components, palette.

Hand the design to a code tool

Copy the components Lovable produced. Open your forked template in Cursor or Claude (see those guides) and ask it to apply Lovable's design onto the template's pages — updating site.config.ts, the palette, and the marketing copy in lib/content/*, while keeping every import from lib/api intact.

Verify and ship

Run pnpm verify, then push to GitHub and deploy on Vercel. Point your domain and you are live.

Watch out for

Lovable is design-first: it shines at the look, not at wiring a specific backend. Do not let it invent its own API calls — those go through the template's lib/api, which it should never touch.

Ask for a semantic/token palette (not hardcoded colors) so the design drops cleanly into the template's theme system and passes the contrast check.