Design-first Quickstart: from Figma (or mockup / description) to a rendered page

Time: ~30 minutes from install to first authored page. Prereq: you have a design in hand (Figma URL, screenshot, PDF, wireframe, or a short description doc), a React app, and a Contentstack stack. Next: any of the full Quickstarts for deeper reference.

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.

• 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.

• [ ] 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:

  1

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

The decompose-design skill authors compositions and registers components against your app. Your app has to have the Studio SDK wired first. The skill doesn't install SDKs.

Run Quickstart 1: Setup from install to first authored page (~10-15 min). You'll end with:

• The three SDKs installed (@contentstack/studio-react, Live Preview, Delivery).
• contentstack/initialize.ts bootstrapping the SDK.
• A catch-all route rendering <StudioComponent />.
• Studio's canvas iframe loading in app.contentstack.com: you'll see an empty canvas but the palette shows Basic + Layout categories.

Once Quickstart 1's Verify checklist passes, come back here.

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

"Decompose this design and build the 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.

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.

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.

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.

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.

• 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 manually. Total elapsed time: ~15-20 minutes of skill runtime.
• Every artefact 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.

• Author flow: show your marketing team compose-seasonal-landing-page. They can iterate on the page you 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.

• decompose-design skill: every option + edge case.
• From designs to Sections: the three-layer structure (atomic / Layer-2 / Section).
• Agent idempotency: how the chained skills stay safe when re-run.
• verify-setup skill: the 7-layer diagnostic if the page isn't rendering.