Identity Forge

Give Bolt a design system

Bolt (bolt.new) runs a full WebContainer with a terminal, so it's the easiest web builder to hand a design system: run one shadcn command in-editor and paste the DESIGN.md as the brief.

Updated July 13, 2026

Why Bolt needs a design system

Bolt scaffolds whole apps from a prompt, but each new screen can introduce fresh styling decisions. Because Bolt runs npm in the browser, you can install the same token set you would use locally and give it written rules for later generations.

The kit you'll install

Ambient Sage

After Work Chill

Double tap on a widget to edit settings

Save SettingsLearn more

Plus Jakarta Sans · 28 semantic tokens · light + dark

Ambient Sage rendered from its real tokens: the system Bolt installs and builds against.

Install it in Bolt

  1. 1

    Make sure the project uses shadcn/ui

    Bolt's React + Tailwind starters work well. If the project isn't shadcn-initialized yet, run npx shadcn@latest init in Bolt's terminal first.

  2. 2

    Add the kit's tokens

    Run the kit's registry command right in Bolt's terminal. It writes the kit's CSS variables (all 28 semantic roles, light + dark) into your theme.

    npx shadcn add https://identityforge.io/r/ambient-sage.json
  3. 3

    Paste the DESIGN.md as the brief

    Open the kit's page in the gallery (e.g. /kits/ambient-sage), copy its DESIGN.md, and paste it into Bolt's chat with an instruction to follow it for everything it builds.

  4. 4

    Prompt against the system

    Now build normally: Bolt uses your installed tokens and follows the DESIGN.md.

    Build a landing page using only the theme's design tokens
and the DESIGN.md rules: don't add new colors or fonts.

The CLI runs in Bolt too

The Identity Forge CLI works in Bolt's terminal. Run npx --yes --package=https://identityforge.io/downloads/identityforge-0.3.0.tgz identityforge apply ambient-sage to write DESIGN.md and a tokens file into the project. This keeps the brief in the repository instead of only in chat.

One command, the whole system

The registry item at https://identityforge.io/r/<slug>.json carries every semantic role, so Bolt doesn't improvise the values a loose palette would leave undefined: muted text, borders, hover states, dark mode, chart series. That's what keeps a Bolt app looking designed instead of assembled. See semantic color tokens explained.

The same pattern applies to v0 and Lovable. For coding agents like Claude Code and Cursor, start at the pillar guide.

FAQ

How do I give Bolt a design system?

In Bolt's terminal run `npx shadcn add https://identityforge.io/r/<slug>.json` to install the kit's tokens, then paste the kit's DESIGN.md into the chat as the brief Bolt should follow. Bolt then builds every screen against your tokens and rules.

Can I run the Identity Forge CLI in Bolt?

Yes. Bolt is a StackBlitz WebContainer with a real terminal, so `npx --yes --package=https://identityforge.io/downloads/identityforge-0.3.0.tgz identityforge apply <slug>` works and writes DESIGN.md plus a tokens file into the project.

What if the project isn't using shadcn?

Run `npx shadcn@latest init` first, or paste the kit's exported CSS variables into your global stylesheet manually. The semantic token names are identical either way.

All guides