Studio Docs

Design-First Quickstart: From Figma (or Mockup / Description) to a Rendered Page

This Quickstart is the fastest path from a design to a live Studio-rendered page. The decompose-design skill reads your design, plans the Sections + Content Types + Template, and chains the individual skills to build them. One prompt does the whole flow.

Do It With a Skill

This quickstart is the skill route. decompose-design turns a Figma frame, screenshot, mock or written description into a build sheet, then chains the skills that build it.

curl -fsSL https://studio-documentation.contentstackapps.com/install.sh | sh

What You’ll Have at the End

  • A working React app with the Studio SDK wired in.
  • The Content Types + Global Fields your design needs, provisioned on your stack.
  • Every atomic component (<Heading>, <Image>, <Button>, etc.) and Layer-2 container (<Card>, <Section>) from your design, registered in Studio.
  • One or more Sections composed on the canvas, ready to drop.
  • One Connected Template with a URL pattern, connecting to a Content Type.
  • The page rendering with real content at a preview URL.

Prerequisites

  • A design in a shape the skill can read:
    • Figma URL (public or shared with you).
    • Screenshot or PDF mockup (image URL or local file).
    • A short description doc (paste-in text, even a bulleted list of “hero + 3 cards + newsletter footer” works).
  • A React app. Studio installs alongside. It doesn’t replace your app. If you don’t have one, use npm create vite@latest my-app -- --template react-ts.
  • A Contentstack stack with an API key + delivery token + preview token. Steps: Prerequisites.
  • Claude Code / Cursor / Windsurf installed with the Studio skill pack:
    curl -fsSL https://studio-documentation.contentstackapps.com/install.sh | sh

Step 0: Wire the SDK, Also With Skills

decompose-design registers components and authors compositions against your app, so the Studio SDK has to be in place before it runs. Setting that up is itself skill-driven. Four prompts, no hand-written wiring:

  1. ”Install Studio in this project.” Runs install-studio: installs @contentstack/studio-react, Live Preview and the Delivery SDK, and wires studioSdk.init at the app shell. It asks for your stack credentials and validates them before writing anything. It adds no routes: the two route mounts are separate skills, below.
  2. ”Set up the canvas route.” Runs setup-section-preview: mounts <StudioCanvas /> on its own route and sets the matching Canvas URL in the Studio project. Required on every project, and needed before a Section can be authored on the canvas.
  3. ”Wire the catch-all template route.” Runs setup-template-preview-routes: mounts <StudioComponent /> on a wildcard route so every visitor URL resolves through Studio, and handles site chrome and 404s while it’s there. This is what makes the finished page render at its own URL. Run it after the canvas route, not before: a catch-all matches /canvas like any other URL, so with nothing owning that path Studio’s section iframe renders your 404 instead of the canvas.
  4. ”Verify the Studio install.” Runs verify-setup: a layered smoke test across the Delivery SDK, Live Preview and the canvas route. Clear anything it reports before moving on.

At the end of those four you have the SDKs installed, init wired, both routes mounted, and Studio’s canvas loading with the Basic and Layout palette categories visible.

Prefer to do it by hand and see each piece? Quickstart 1: Set up Studio in your app walks the same ground manually: the SDK install, the init wiring, the catch-all route, and the /canvas route with its Canvas URL.

Step 1: Hand the design to decompose-design

Open Claude Code / Cursor / Windsurf in your React app repo. Paste this prompt, substituting your design:

“Decompose this design and build the end-to-end page: <YOUR_DESIGN_URL_OR_PASTE>. Target content type: blog_post (or your CT name). URL pattern: /blog/{{entry.slug}}. Use the decompose-design skill: emit a build sheet first, then chain build-section per Section and build-connected-template to assemble the Template.”

Press Enter. Read on while the skill runs.

Step 2: Review the Build Sheet

The skill parses your design and emits a build sheet listing everything it plans to build. Skim it before approving. A typical build sheet contains:

  • Decisions made: governance choices (which props are content-bound, which are exposed for per-Template override).
  • Components table: every atomic component the page uses (<Heading>, <Image>, <Button>, etc.), the Layer-1 primitives.
  • Layer-2 containers: Cards, Section wrappers, layout components identified in the design.
  • Per-Section drop-tree + bind tables: one entry per Section, showing the tree of components + which CMS field each prop binds to.
  • Template assembly: the order Sections appear on the Template + the URL pattern.
  • Proposed schema: any new Content Type fields the design implies but the CT doesn’t have yet.
  • Unmapped fields: anything in the design the skill couldn’t confidently map (e.g., a “featured badge” that doesn’t correspond to any CT field). Address these manually.

If the build sheet looks wrong: interrupt the skill and iterate. Example: “Redo: the Card Grid should be 3-column not 2-column, and the Testimonial section binds to the customer_stories reference field, not testimonials.” The skill re-reads the design and emits a new plan.

Step 3: Approve + Watch the Chained Skills Run

Once the build sheet looks right, respond ”yes proceed” (or whatever the skill prompt asks for).

The skill now chains:

  1. provision-studio-stack: creates any Global Fields + new Content Type fields the build sheet identified. Idempotent: skips existing.
  2. register-component (per new component): adds registerComponent({...}) calls for every atomic + Layer-2 the design needs. Reads your existing registration file so no duplicates.
  3. build-section (per Section): authors each Section as a composition entry on your stack with the right bindings + exposed props.
  4. build-connected-template: assembles the Template with URL pattern + Section list.
  5. Publish to the target environment.

Watch the terminal output. Each sub-skill logs what it’s doing and any failures.

Common failures:

  • CT field named in a binding doesn’t exist: a schema mismatch. The skill pauses. Add the field via Contentstack UI or re-run with the corrected CT model, then resume.
  • Component named in a Section doesn’t exist in the palette: the skill couldn’t infer the component from the design well enough. Register it manually via register-component, then resume.
  • Ambiguous binding: skill asks a clarifying question. Answer briefly, it continues.

Step 4: Verify the Page Renders

Open your React app in a browser at the URL pattern the skill used (e.g., http://localhost:3000/blog/hello-world).

You should see the page render with:

  • The Sections from the build sheet in order.
  • Real content pulled from a seeded / existing entry.
  • No placeholder / lorem ipsum.

If the page is empty, run the verify-setup skill. It runs 7 layered checks in order: the SDK bootstraps, the composition entry exists, the entry is published, the page renders, and every binding resolves. The skill reports which layer failed.

Step 5: Take Over the Canvas (optional)

The skill scaffolded a working page. From here, marketing / power authors take over in the Studio Canvas:

  • Rearrange Sections in the Layers panel.
  • Override exposed props per-Template.
  • Deploy to production when ready.

Full flow: Author your first page or Compose a seasonal landing page in 15 minutes.

What Just Happened

  • One prompt produces a full working page in Studio.
  • The decompose-design skill orchestrated 4+ sub-skills that individually took ~30 min each to run by hand. Total elapsed time: ~15-20 minutes of skill runtime.
  • Every artifact is inspectable: the build sheet is committed to your repo, the composition entries live in Contentstack, the registered components are in src/register-components.ts.

Next

  • Author flow: show your marketing team compose-seasonal-landing-page. They can iterate on the page you just built without touching code.
  • Add more Sections: run decompose-design again with a different design, or use build-section directly for one-off additions.
  • Migrate an existing hand-coded page: if you have hand-coded pages you want to convert, see Migrate hand-coded pages.
  • Full manual reference: the five numbered Quickstarts (Quickstart 1 to 5) cover every step this skill automates. Read them when you want to understand what the skill did under the hood.

Full-Detail References