From zero to a full website with Initium: a walkthrough

This is the full path from an empty folder to a deployed marketing site built with Initium: a Next.js app, a style preset, real strategy files, installed blocks, and an AI coding agent that assembles the page without wrecking it. Every command below is the actual command, in the order you run it.

Most walkthroughs of this kind cover the mechanics: scaffold, install, deploy. The mechanics are the easy half. The steps that decide whether the result looks designed are the ones in the middle, where you give the agent a visual direction and a page strategy before it writes any code. Those get the most attention here.

What you need before starting

Three things:

• Node and a package manager. Examples use npx; swap in pnpm dlx, yarn dlx, or bunx --bun if that's your setup.
• An AI coding agent, if you want one assembling the page. Claude Code, Cursor, Codex, and Windsurf all work with the same files; the AI workflow docs have per-tool notes.
• An INITIUM_LICENSE_KEY if you want pro blocks and the skill pack. Everything up through step 4 works without one: the style preset, base styles, DESIGN.md, and STRATEGY.md are free.

Step 1: scaffold the app and initialize shadcn

Start with a Next.js app and initialize shadcn in it:

npx create-next-app@latest my-site
cd my-site
npx shadcn@latest init

init creates components.json, the file that tells the shadcn CLI how your project is wired: style, Tailwind config, path aliases. New projects default to a base-* style, which is what Initium's current components are built for. If you're adding Initium to an older project on a radix-* or legacy style, that still works; the registry serves a Radix build for those projects.

Step 2: connect the Initium registry

Add the @initium namespace to components.json:

{
  "registries": {
    "@initium": {
      "url": "https://app.initium.sh/r/styles/{style}/{name}.json",
      "headers": {
        "Authorization": "Bearer ${INITIUM_LICENSE_KEY}"
      }
    }
  }
}

The {style} placeholder is filled in by the shadcn CLI from your project's style setting, so the registry serves components that match your project's component library. Keep the authorization header even if you're starting free: free installs ignore it, and pro installs start working the moment the key exists in your environment.

Verify the wiring with a free item:

npx shadcn@latest add @initium/initium-styles

If that lands, the registry is configured. If a pro item later fails with an authorization error, the problem is the license key, not the setup.

Step 3: install a style preset before any blocks

Order matters here. Blocks reference utility classes from the style layer (wrapper, tagline, heading-xl, paragraph), so the styles have to exist before the first block installs.

Open the Style Builder, pick colors, fonts, type scale, radius, button and form styles, and copy the generated install command:

npx shadcn@latest add "https://app.initium.sh/r/preset?code=..."

The preset is a one-time export into your CSS, not a runtime dependency. After installing you own the tokens and can edit them directly. The point of choosing them in the builder first is coherence: every value is picked against every other value, which is exactly what an agent improvising CSS variables per component never gives you.

Step 4: export DESIGN.md and STRATEGY.md

This is the step that most zero-to-deployed guides skip, and it's the one that determines whether the finished page reads as designed or generated.

From the Style Builder, export DESIGN.md. From the Strategy Builder, export STRATEGY.md. Put both in the project root:

DESIGN.md
STRATEGY.md

DESIGN.md captures the visual rules: the preset you chose, typography and spacing decisions, what the agent may and may not restyle. STRATEGY.md captures what the page has to communicate: audience, offer, pain points, real proof, objections, conversion goal, and a suggested section order.

The strategy file forces a useful confrontation before any code exists: what proof do you actually have? If the honest answer is "none yet", the answer goes in the file, and the page gets built without fake logos and invented testimonials. An agent left to improvise fills silence with fabricated proof; an agent reading STRATEGY.md knows the proof budget is zero and structures around it. The SaaS landing page structure post covers what that structure looks like when sections are missing their usual ingredients.

You don't have to commit either file. Treat them as working inputs the agent reads at the start of every session.

Step 5: install the skill pack

With a license key, install the Initium agent skill:

npx shadcn@latest add @initium/initium-agent

This lands in .agents/skills/initium/, with SKILL.md as the entrypoint and workflow references alongside it. Where DESIGN.md says what the site looks like and STRATEGY.md says what it argues, the skill says how the agent should work: plan first, write copy against the strategy, choose blocks to fit the argument, implement, then QA. If your tool discovers project skills automatically, it picks the skill up on its own; if not, one line in your prompt pointing at SKILL.md does it. The agent skills post covers how that loading mechanism works.

Step 6: install blocks

Browse the Blocks browser, pick sections that fit the structure in STRATEGY.md, and install them by name:

npx shadcn@latest add @initium/hero-section-1

The CLI writes the source into your project, dependencies included. From that moment the block is your code: no wrapper package, no upstream to break you, nothing to eject from later.

You can install blocks yourself or let the agent do it during the build. Installing a first block manually is worth it once, to confirm the pro path works end to end.

Step 7: brief the agent and build the page

Start a fresh chat so the agent reads current files rather than stale context. The opening brief is short:

Read DESIGN.md and STRATEGY.md from the project root.
Follow .agents/skills/initium/SKILL.md before changing UI code.
Build the landing page for the primary offer in STRATEGY.md.
Use installed Initium blocks for major sections and keep the style preset intact.
Ask before filling in missing proof or claims.

Then work one page or section at a time. Narrow tasks keep the agent inside the constraints; "build the whole site" invites it to improvise in the gaps. The order of the previous six steps is what makes this step boring, in the good sense: the agent is assembling from a fixed palette, a fixed argument, and a fixed workflow, so its choices are selection rather than invention.

When you revise, revise against the files. "Make the hero tighter per the headline rules in the skill" gets a better edit than "make it pop", because the agent has a rule to check its output against.

Step 8: QA and deploy

Before shipping, sweep for the usual failure points: every claim on the page traces to something real in STRATEGY.md, headlines fit their blocks at mobile widths, dark mode holds if your preset defines it, and metadata exists for every route.

Deployment is standard Next.js: push to a Git host, connect the repo to your hosting platform, add INITIUM_LICENSE_KEY to the environment if any build step needs it, and go live. Nothing about Initium changes this part, which is the point. The output is a plain Next.js app that deploys anywhere Next.js deploys.

One post-launch habit worth keeping: when the offer, audience, or proof changes, regenerate STRATEGY.md; when the visual direction changes, regenerate DESIGN.md; then start a fresh agent session. The files are only a source of truth while they're true.

Where the time actually goes

Counting commands, the whole path is roughly ten of them. The real work is in step 4, deciding what the site argues, and that work exists whether or not you do it deliberately. Skip it and the agent does it for you, badly, at generation time. Do it first and every downstream step gets easier to judge, because there's something concrete to judge against.

If you want to walk this path with the docs open, getting started covers the same setup with per-step troubleshooting, and the free tier (style presets, base styles, both strategy files) is enough to feel whether the workflow fits before a license key enters the picture.