Landing pages,
written by Claude.

A typed content schema, a brief from your team, and a Claude pipeline. The same components that power your hand-crafted pages render any new variant — fresh copy, matched icons, on-theme UI mockups. Marketing ships new pages in a day instead of a week.

Get one builtRead the story →

Slots, filling in.

content.industry.ts·typed · validated
Hero pill0/24
Hero headline0/50
Hero subtitle0/120
Stats heading0/50
Stat 1 label0/60
Feature title0/32
All slots within budget

Live preview · simplified

Why we built it.

A client had one beautifully designed industry landing page and a list of five more they wanted to ship. Each new page was supposed to follow the same structure — hero, stats, editorial quote, product tabs, omnichannel grid, feature cards, FAQ — but with bespoke copy for each industry. Without a system, that's a fresh week of copywriting + dev cycles per page.

We built them a Claude-powered page generator. We extracted every line of copy from the original page into a typed content schema — nineteen slots, each with a length budget. We wrote a brief template their team fills out, and a writing-rules doc Claude reads alongside it. The same React components render every industry; only the data file changes.

The marketing team writes a brief in twenty minutes. Claude reads brief + schema + rules, emits a fully typed content file. Build pipeline checks every length budget. We wired Stencil into their icon library too — Claude picks industry-appropriate icons and re-themes the embedded UI mockups on the page. The result renders against the same design system as everything else — no AI-generated layouts, no design drift. From brief to live, about a day.

The first page took a week. Page two took a day. Page three took a brief.

What's inside.

01Every page slot, typed.

We start by extracting every editable line of copy from the existing page into a IndustryContent type. Hero, stats, quote, tabs, FAQs — nineteen named slots with length budgets attached. The TypeScript compiler keeps every variant honest; the Zod validators keep them within budget.

The schema is the spec. New pages can't miss a section, can't over-write a budget, can't introduce a layout the design system doesn't already support. The /industry/[slug] route just looks up the matching content file and renders.

content-schema.ts·19 slots · typed
type IndustryContent = {
meta: { title: string; description: string };
hero: { pill: string; headline: Word[]; subtitle: string };
stats: { value: string; label: string }[]; // 4
quote: { body: string; highlight: string };
tabs: { title: string; body: string }[]; // 3
cards: { title: string; body: string }[]; // 6
faq: { q: string; a: string }[]; // 5–8
};
 
// Length budgets enforced at build time via Zod
tsc + zod · clean

02Brief in. Content file out.

The team fills a short brief — industry, audience, pain points, SEO keywords, tone notes, stats with sources. Claude reads the brief plus a writing-rules doc (character budgets, voice, the “don't invent statistics” rule) and emits a fully typed content file in one pass.

The file ends up in the repo as src/data/industries/{slug}.ts. The team can edit it line by line if they want to override Claude's phrasing — it's just data.

Brief → Claude → file·—
B
Brief

Industry: retail e-commerce. Audience: store managers. Pain: lost sales from out-of-stocks and slow staff onboarding. Tone: practical.

C
Claude
export const retail: IndustryContent = {
meta: {
title: "Retail AI Agents | Stop Losing Sales",
description: "Help store teams answer customer questions…"
},
hero: {
pill: "Retail",
headline: ["Sales", "you", { italic: "won't", text: true }, "miss"],
subtitle: "Help every store manager…"
},
// …17 more slots, all typed, all within budget
};

03One component tree, every variant.

The same React components that render the original page render every new industry. No duplicated layouts, no industry-specific overrides, no “temporary” copy-pastes that drift over time. Add a new industry → add a content file → it's live. Adjust the design once → every industry inherits it.

04Visuals match the content.

Stencil is wired into the design system's icon library and the small UI mockups embedded on the page. When Claude generates a new variant, it picks industry-appropriate icons from the library and re-themes the embedded mockups — labels, sample data, badges all swap to match the new context. The structure is identical; the content speaks the right language.

Nothing leaves the design system. Icons come from the existing set, mockups use existing components — Claude just chooses which icon and what label fits each variant. No AI-generated images, no design drift, no surprises in review.

Icon library · matched·industry · healthcare
Now draftingHealthcareRetailInternal comms
Schedule
Triage
Outcomes
Care
Mockups + graphics auto-themed

05Validated at build, not in review.

Length budgets are enforced via Zod schemas in the build pipeline. Over a budget? Build fails with the exact slot and overshoot. Missing a section? Build fails. The QA pass that used to be “does this fit on a card” is now pnpm build.

The team can iterate on the brief without ever seeing a broken page. Claude over-wrote? Trim the brief, re-run, ship.

Under the hood.

Eight pieces that make the system safe for non-developers.

  • Typed content schemaNineteen slots, each with character budgets, item counts, and content rules. The TypeScript type is the contract; Claude can't miss a field or invent a new one.
  • Build-time validationZod validators run in the build pipeline. Over-budget copy fails the build with the slot name and the overshoot. No broken layouts in review.
  • Brief templateA short Markdown form the team fills per industry — keywords, audience, stats with sources, tone notes. Claude reads this plus the writing rules to write the page.
  • Writing rules docVoice, character budgets, accessibility rules, the "don't invent statistics" rule. Versioned alongside the codebase so Claude's output stays consistent over time.
  • Icon library bindingStencil knows your design system's full icon set. Each slot that takes an icon gets a Claude-picked match from the existing library — never a one-off SVG, never an AI-generated graphic.
  • UI mockup themingThe small UI mockups baked into the page (sample dashboards, fake feeds, stat cards) accept a content prop. Claude swaps their labels and sample data to match the new variant — same components, themed copy.
  • Dynamic [slug] route/industry/[slug] resolves to the matching content file. Adding a new industry is a content file + an image folder — no new route code.
  • Image placeholder workflowEach new industry ships with placeholder images and a README listing exactly what real assets the design team needs to drop in. Page goes live with placeholders; assets swap in later without touching code.
19
typed slots per page
1 day
per new page (was: 1 week)
1
design system, every industry
0
layout shifts between variants

A few questions.

Anything else: hello@practa.ai.

Two inputs. The team fills out a short brief — industry, audience, pain points, SEO keywords, tone notes. We pair that with a writing-rules doc covering character budgets, voice, and the "don't invent stats" rule. Claude reads both, plus the typed schema, and emits a content file. The output is just data — every line maps back to a slot the design system already renders.

Length budgets are enforced at build time, not eyeballed. Each slot in the schema has a Zod validator with a max-character constraint. If Claude over-writes, the build fails with the exact slot and overshoot. The team iterates on the brief, not on the layout.

The output is a typed TS file. Open it, edit a line, save. The design system renders the change immediately. Claude is a starting point — most pages get a couple of human edits to taste before merging.

Got a content-heavy site that needs to scale to many similar pages? hello@practa.ai — we'll scope it.

More cases

WebplowBulk Webflow CMS image compression.Read →NockSlack → Notion task automation.Read →Letter GeneratorBranded letters, from any Claude chat.Read →

Many similar pages. One Stencil.

Industry pages, location pages, product variants, services — anywhere your site needs to scale to many structurally-similar pages. We build the schema, the pipeline, and the brief template. Your team writes a brief; Claude writes the page — copy, icons, mockups and all.

hello@practa.aiBack home
PractaBackGet one built