Code-first

Build your front end with Claude / Claude Code

Point Claude at your forked template and tell it to reskin the whole thing.

Best for: Anyone who wants the tool to work directly in the real repo — the smoothest path.

The prompt

Copy this, fill in the [bracketed] parts, and paste it into Claude / Claude Code.

This repository is the BringTheFront template — a Next.js 15 App Router front end that connects to the Orgalized backend through a secure server-side proxy in lib/api. NEVER call the backend directly from the browser and never move anything out of lib/api or middleware.ts — that layer keeps our credentials safe.

Reskin this template for my business:
- Business: [YOUR BUSINESS] — [what you do].
- Brand: primary color [color], tone [e.g. friendly & professional]. Mobile-first.

Do all of this:
1. Update site.config.ts (name, tagline, description, brandPalette, nav).
2. Rewrite the marketing copy in lib/content/* (marketing, services, faq, industries) for my business — real, specific copy, no lorem ipsum.
3. Restyle the marketing pages and dashboard shell to match my brand, using ONLY the semantic tokens (content-*, surface-*, action-*) — no hardcoded colors.
4. Leave every import from lib/api and the auth/middleware exactly as-is.

When finished, run pnpm verify and fix anything it flags. Show me a summary of what you changed.

How to do it

Fork + open
Fork BringTheFront (Setup Guide), then open it with Claude Code in your terminal, or point Claude at the repo.
Prompt it
Paste the prompt above with your business details. Claude edits site.config.ts, the copy in lib/content/*, and the styling in place.
Review the diff
Claude shows what it changed. Ask for tweaks in plain language until it looks right.
Verify + deploy
It runs pnpm verify for you; once green, push and deploy on Vercel.

Watch out for

This is the most direct path because Claude works in the real repo — no copy-paste between a design tool and the template.
If you ever see it reaching for lib/api or adding a raw fetch to the backend, stop it: that is the one boundary. Presentation and copy only.

Ready to bring your front?

Create your backend first, then use Claude / Claude Code to build the front that connects to it.

Start free →Read the Setup Guide

This repository is the BringTheFront template — a Next.js 15 App Router front end that connects to the Orgalized backend through a secure server-side proxy in lib/api. NEVER call the backend directly from the browser and never move anything out of lib/api or middleware.ts — that layer keeps our credentials safe. Reskin this template for my business: - Business: [YOUR BUSINESS] — [what you do]. - Brand: primary color [color], tone [e.g. friendly & professional]. Mobile-first. Do all of this: 1. Update site.config.ts (name, tagline, description, brandPalette, nav). 2. Rewrite the marketing copy in lib/content/* (marketing, services, faq, industries) for my business — real, specific copy, no lorem ipsum. 3. Restyle the marketing pages and dashboard shell to match my brand, using ONLY the semantic tokens (content-*, surface-*, action-*) — no hardcoded colors. 4. Leave every import from lib/api and the auth/middleware exactly as-is. When finished, run pnpm verify and fix anything it flags. Show me a summary of what you changed.

How to do it

Fork + open

Fork BringTheFront (Setup Guide), then open it with Claude Code in your terminal, or point Claude at the repo.

Prompt it

Paste the prompt above with your business details. Claude edits site.config.ts, the copy in lib/content/*, and the styling in place.

Review the diff

Claude shows what it changed. Ask for tweaks in plain language until it looks right.

Verify + deploy

It runs pnpm verify for you; once green, push and deploy on Vercel.