Stop evaluating. Start shipping.
A build order that holds whatever you're making — app, site, tool or agent. Each step says what the decision is, then how to bend it to your project. Plus the rules that settle close calls, and an honest list of what to avoid.
The build order
Not a recipe for one kind of product. Each step is a decision every build hits, in the order it hits — skip the ones your project doesn't have.
Lock the design language before writing UI
DESIGN.md from Refero Styles (free) matching the mood you want, and a token set from 21st.dev community themes. Paste the :root/.dark variables into your global stylesheet. Every shadcn component re-skins at once with zero component edits.Swap the mood words for yours — "clinical and dense" for a dashboard, "warm and roomy" for a marketplace. The step is the same whatever you're building.
Generate the architecture, not the pages
Name the nouns your product actually has (orders, patients, lessons, listings) in the description; the generator mirrors them straight back as routes.
Decide where content and data live before the front end
Ask one question: will someone who can't open the repo need to change this? Yes → CMS. No → skip the CMS entirely and put it in the database.
Steal structure from products that already work
Filter by the closest category to your build — SaaS, fintech, booking, social — rather than by what looks pretty.
Buy exactly one component source, if any
Skip this if your product is mostly authenticated screens; shadcn plus a token set covers internal UI fine.
Solve the media pipeline before you have media
srcset across AVIF and WebP multiplies billable renders. Bunny Optimizer ($9.50/mo flat) and ImageKit (bandwidth-only) make variant count free. R2 is the one unconditional zero-egress store.If users upload the images, compress client-side before the file ever leaves the browser — that single step usually matters more than the CDN choice.
Generate the imagery you can't buy
Not every product needs generated art. If yours doesn't, spend this step on real screenshots of your own app instead — they convert better.
Add motion only where it explains something
Rule of thumb: animate a change of state (added, removed, loading), never decoration. Dashboards want almost none of this.
Get your existing content or data in
Starting from zero instead? Use this step to seed realistic demo rows — an empty app is impossible to design against.
Put a reviewer between the agent and production
Applies to every build, at every size. If you store anything belonging to another human, treat it as mandatory.
Make the agent remember your decisions
/clear; claude-mem auto-captures each session. Together they stop the "why did the agent re-invent the button component" problem.Write your own house rules into that file — naming, tone, which libraries are banned — so they're enforced rather than re-explained every session.
Watch the meter — both of them
Anything you expose publicly — an API route, an AI feature — needs a per-user rate limit too, not just a billing cap.
Close calls, decided
Tailwind v3 or v4? | This gates everything. Tremor's current components require v4 while its npm package is broken on v4; HeroUI v3 requires v4; animated libraries moved keyframes from tailwind.config.js to CSS @theme. Check first, then filter this list. |
Radix or Base UI? | shadcn/ui switched its default primitive layer to Base UI in July 2026. Radix is not deprecated and both ship for every component, but new components may arrive Base UI-flavored, and running both doubles your primitive bundle. Pick one and pass the flag consistently. |
One design system, not two | MUI, Ant Design and HeroUI are replacements for shadcn/ui, not additions. Ant Design additionally collides with Tailwind's Preflight reset. Choosing one means leaving shadcn — valid, just not Lovable-friendly. |
Can you work locally? | The two design tools that write shadcn-aware React into your project — Pencil and Superdesign — both need a local checkout via GitHub sync. Neither can touch a browser-only editor. Same for most of the code review and security aisle. |
Where is your spend cap? | Egress spread across hosts is enormous: Deno Deploy $0.50/GB, Vercel/Render ~$0.15/GB, Fly $0.02/GB, Bunny $0.01/GB, Cloudflare and Hetzner effectively $0. Railway, Netlify and Vercel ship hard caps that take you offline; AWS and Firebase Blaze do not. Set the cap before you launch, not after. |
Does the free tier pause? | Supabase, Appwrite and Nhost all pause free projects after ~1 week idle; MongoDB M0 after ~60 days; Instant DB is nearly alone in never pausing. For a side project you revisit monthly, that single behaviour decides which backend you should be on. |
Merchant of record or gateway? | For solo builders selling globally this is the whole ballgame — an MoR handles VAT and sales tax as the seller of record, a gateway leaves it on you. Stripe Managed Payments charges 3.5% on top of processing (~6.4% all-in), pricier than most independent MoRs. |
Who owns the licence? | Traps on this page: Aceternity's free components have no published open-source licence; Envato is one licence per end product; Webflow templates are single-site; tldraw's SDK is free only with the watermark visible; n8n, Inngest and Restate are not OSI open source. |