Playbooks

Stop evaluating. Start shipping.

Assembled stacks for common builds, the rules that decide close calls, and an honest list of what to avoid.

Stack recipes

Play 01

Step 1

Lock the design language before writing UI

Pull a DESIGN.md from Refero Styles (free) matching the editorial mood you want, and a token set from 21st.dev community themes. Paste the :root/.dark variables into index.css. Every shadcn component re-skins at once with zero component edits. Highest-leverage 20 minutes on the page.

Play 02

Step 2

Generate the architecture, not the pages

Feed the magazine description to Relume's AI sitemap generator on the free tier. You get the full page-and-section hierarchy — issues, features, departments, contributors, archive, submissions — in seconds. Paste it into Lovable as the build spec. Knowing what pages should exist is the hardest part of AI site building, and this step is free.

Play 03

Step 3

Pick the CMS before you build the front end

This is the most consequential decision on the page for a publication and the hardest to reverse. Sanity gives you 20 free seats where Storyblok and Prismic give one — a two-person editorial team is free on one and instantly paid on the other. Payload if you want it MIT and in your own repo. Contentful's free-to-paid step is a $300/mo cliff with nothing in between.

Play 04

Step 4

Steal structure from real publications

Land-book (filter: blog/editorial) and Mobbin for full flows. Screenshot 4-6 pages into Lovable with "match this layout, type scale and density." Mobbin earns its ~$12/mo because real shipped apps contain the empty, error and loading states AI builders always skip.

Play 05

Step 5

Buy exactly one component source

For a magazine that is Tailwind Plus ($299 once) — marketing and article page markup is where default shadcn output is weakest. If that is too much, Landingfolio at $59 lifetime gives real Tailwind/React code plus an MCP server. Do not buy three; you will use one.

Play 06

Step 6

Solve the image pipeline early

A magazine is images, and transformation billing is the hidden cost — Cloudflare Images and Vercel charge per unique width×quality×format, so a wide 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 genuinely unconditional zero-egress store.

Play 07

Step 7

Generate covers with a model that can spell

Ideogram 4.0 is the only generator that reliably renders legible headline type inside an image, with bounding-box layout control to reserve space for the masthead and Layerize Text to pull type onto its own editable layer. API is $0.03–$0.10/image — cheap enough to script batch cover variants. Free tier makes generations public, so pay before you touch an unreleased cover.

Play 08

Step 8

Add motion where it tells a story

GSAP + ScrollTrigger is now entirely free including every plugin — that is the tool for scrolled features and pinned photo sequences (~49 kB gz). Motion for page transitions. Skip Lenis: hijacked scroll fights readers on long text, which is your entire product.

Play 09

Step 9

Ingest the archive

Firecrawl turns the existing site into clean markdown or schema-constrained JSON — the fastest path to migrating back issues into Supabase. Free tier is 1,000 credits; a typical archive fits inside $16/mo. Pair with repomix when you need to hand the whole codebase to a model in one shot.

Play 10

Step 10

Put a reviewer between the agent and production

This is the step people skip and regret. Gitleaks (free) for leaked keys, Socket.dev for malicious dependencies, CodeRabbit or Greptile as a PR reviewer. AI writes plausible code with missing auth checks and unbounded endpoints — something has to look at it, and it does not have to be you.

Play 11

Step 11

Make the agent remember the design system

planning-with-files writes the plan to disk so it survives /clear; claude-mem auto-captures each session. Together they stop the "why did Claude just re-invent the button component" problem. Add a house-style skill from anthropics/skills so editorial voice is enforced, not re-explained.

Play 12

Step 12

Watch the meter — both of them

claude-hud shows context fill, real token counts and cost in the status line. On the hosting side, set a hard spend cap on day one: Railway, Netlify and Vercel all ship real caps that take services offline, but AWS and Firebase Blaze still have none. That asymmetry is where the horror stories come from.

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.

The graveyard

Things that died or changed name since most lists were written. Firebase Studio is sunsetting (no new signups since June 2026, full shutdown March 2027). Windsurf is now Devin Desktop. Gemini CLI was retired for Antigravity CLI. Roo Code archived; the fork is ZooCode. Continue.dev was acqui-hired by Cursor and its hosted platform deleted. Create.xyz is now Anything; Databutton is now Riff; Frontend Masters is now Master.dev; Freepik rebranded to Magnific; Stack Auth is Hexclave; ElectricSQL is Electric at electric.ax. Sora's API sunsets 24 September 2026. Highlight.io hosted shut down Feb 2026 (self-host only). vibe-kanban and Relay.app are shutting down. Lucia and Divjoy are deprecated but still listed for sale. Udio has disabled downloads entirely.