Backpack · Site Builder · Storyblok

Backbase

From a Figma link to a Site Builder page, built from Backpack. Checked by tools, approved by humans.

Stakeholder update · 2 November 2026

The idea

Figma link in, page out

Skills for Claude Code, a CLI called bb, and Chaperone guardrails.

Agents

make the judgment calls

Tools

do every check and every write

Humans

approve every write

The insight

Mostly content, not code

10 of 14 sections need no new code: reused, composed or global.

3 wrap a Backpack component locally.

1 needs a person's call. 0 need new React.

The vocabulary

Six buckets

Reuse

No new code

One blok or preset.

Compose

No new code

Existing bloks, nested.

Wrap

Local Storyblok version

Backpack's React, for Storyblok.

Create

New code

New React from Backpack parts.

Global

No new code

Header and footer.

Unsure

A question

It asks you.

How it works today

Empty folder to plan

  1. bb

    Check the machine

    bb doctor
  2. bb

    Make the project

    bb create
  3. Agent

    Read the frame

    sections.json
  4. bb

    Load the catalog

    bb catalog
  5. Agent

    Classify

    plan.json
  6. bb

    Validate

    bb plan validate
  7. You

    Gate 1

    bb plan show

In an existing project, /backbase:analyze starts at Read.

Guardrails

Built to be trusted

Asks before it writes

Nothing goes to Storyblok without your yes.

Can't invent bloks

bb rejects any blok your project doesn't have.

Says when it doesn't know

A confidence per section, and questions, not guesses.

Never publishes

Pages and the theme go in as drafts.

Gate 1

A one-minute plan

#SectionBucketConfidenceQuestion
1HeaderGlobalhighWhich header does this site use?
2Package heroComposemediumIs the price live data?
6Fan stackWrapmediumBuild it locally?
13Live the languageUnsurelowGradient text?

Nothing is written yet. You confirm or correct it.

After Gate 1

Plan to draft page

  1. bb

    Plan the space

    bb space plan
  2. You

    Gate 2

    bb space sync
  3. Agent

    Compose

    bb story scaffold
  4. Agent

    Refine

    bb page measure
  5. You

    Push a draft

    bb story push
  6. Agent

    Build the gaps

    /backbase:component
  7. Agent

    Send it upstream

    /backbase:upstream

/backbase:edit changes a page that's already in the space.

Gate 2

The frame's palette as theme

Every write, listed

Before and after. The sync never deletes.

Re-themed, not repainted

bb sets the space's theme, not each colour.

A draft in Settings

Colours show in preview. You publish.

One failure doesn't stop it

The theme is written even if a component fails.

Close Settings in Storyblok before you sync.

Let's run it

Live demo

claude · an empty folder
> /backbase:new https://www.figma.com/design/…?node-id=… my-site

✓ Check the machine (bb doctor)
✓ Make my-site from the boilerplate (bb create)
✓ Read the Figma frame into sections.json
✓ Load the project catalog
✓ Classify sections into plan.json
◌ Show Gate 1 plan for review

Watch for the questions it asks instead of guessing.

Where we are

In beta: all but the proof

  1. 0

    Check the machine

  2. 1

    Make the project

  3. 2

    Read the design

  4. 3

    Classify and ask

  5. Gate 1

  6. 4

    Sync the space

  7. Gate 2

  8. 5

    Compose

  9. 6

    Refine

  10. 7

    Build the gaps

  11. 8

    Prove it

  12. Gate 3

Beta: built, being testedLater

Available today · beta

What we have

The plugin

Eight commands, frame to draft.

bb doctor

Says exactly what to fix.

bb create

A new project, committed.

The boilerplate

On Backpack 4.11.

The bb CLI

Checks every write first.

Evals

An answer key per change.

Upstream guardrails

Chaperone and sb-mig, agent-ready.

Space presets

Reused, read-only.

The main case

Mostly changes to live sites

SessionWhat a person approves
New page on a live siteThe plan and the draft
Change a pageThe image plan and the diff
One change, many pagesThe batch of diffs
Bring a project in lineThe pull request

Today, /backbase:edit changes one page, as a draft.

What's next

Now, next, later

Now

  • Frame to draft page, in beta
  • Edit a page, new images too
  • Gaps built locally, sent upstream

Next

  • bb adopt and audits for live sites
  • More reference frames, beyond ILS

Later

  • Provenance and a fidelity score
  • One change across many pages
  • Codex, Cursor and Backpack Studio

Why it matters

Faster pages, less custom code

Faster from design to page

A reviewed plan in minutes, not days.

Reuse by default

Custom code only for a real gap.

Gaps flow back to Backpack

Issues and draft PRs, after your yes.

Safe by default

Checks, drafts and reviewed diffs.

Meet Chaperone

Every project, the Backpack way

Deterministic checks

Structure, naming and imports, where lint stops.

In every project

bb create and bb doctor set it up.

Rules like these

  • ✓Only one file imports @storyblok/react
  • ✓Every custom blok is in the component map
  • ✓Known issues can only shrink

Want to try it?

Try the beta

  1. 1claude plugin marketplace add ef-global/backbase
  2. 2claude plugin install backbase@backbase
  3. 3/backbase:new <your Figma frame link> my-site

An early beta. You need ef-global access, a GitHub Packages token and Figma. Thegetting started guide has every step.

What we'd like from you

Help us make it reliable

Real frames

The messier, the better.

A space to learn from

Read-only, and busy.

Pilot developers

To run the whole flow on real work.

Thank you. The Backbase site has everything from today.