Saved Components

Save reusable components and full-page designs from the Explorer Canvas. Browse them in the Studio's Source Panel and reuse them across your organisation.

Features

Feature	Description
Generate from imported Figma	Click any imported component in the Studio Source Panel and choose Generate code. Claude produces canonical TSX + a token-driven edit schema using your design system.
Save from Explorer	Click "Add to Library" on any Explorer variant to save it as a reusable component or full page.
Form editor with live preview	Generated components open in an inspector drawer with token pickers, variant toggles, and a debounced live preview. Edits are deterministic — no AI roundtrip per change.
Component / Page types	Choose whether a saved variant is a component (reusable UI element) or a full page design.
Auto-sync to layout.md	Saving a generated component regenerates Section 5 of layout.md with the canonical TSX, so Cursor / CLI / MCP consumers always see the latest version.
Metadata	Add name, category, description, and tags to each saved variant for easy discovery.
Browse in Source Panel	The "Saved" tab in the Studio Source Panel shows all saved components and pages, grouped by category.
Filter by type	Toggle between All, Components, and Pages to find what you need quickly.
Organisation-scoped	Saved components belong to an organisation. All team members can view and use them.

How to Use

1. Generate Variants

Use the Explorer to generate component variants from your design system. Describe what you need, attach reference images, and iterate until the result looks right.

2. Save to Library

Click Add to Libraryon any variant card. Choose whether it's a component or full page, add a name, category, description, and tags, then save.

3. Browse Saved Components

Open the Saved tab in the Studio Source Panel. Components and pages are grouped by category. Use the filter pills to show All, Components only, or Pages only. Click any item to copy its code.

Save from Explorer

The Explorer generates component variants from your extracted design system. When you find a variant worth keeping, click Add to Library. Fill in the name, type (component or page), category, and tags, then save. The variant's code is stored with your design tokens already applied.

Saving from the Explorer is the fastest way to build your library. Generate multiple variants, pick the best ones, and save them with meaningful categories and tags.

Generate from an imported Figma component

After pushing a design system from the Figma plugin, every imported component appears in the Studio Source Panel's Components tab with a thumbnail. Click a row to open the inspector drawer, then click Generate code from this component.

Claude produces canonical TSX using only your design system tokens and a JSON edit schema that powers the form editor. The result is saved as a Component in your library, linked by name to the imported component, with source: "figma".

From the form editor you can swap any token, toggle variants (Size / State / Variant etc.), edit text content, and watch the live preview update in <100ms. Most edits are deterministic string mutations on the saved TSX — only Regenerate calls the AI again. Saving auto-syncs Section 5 of layout.md so your downstream coding agents (Cursor, Claude Code) see the latest canonical implementation.

A Refine with AI chat input sits below the form. Type a one-line instruction like "make the corners smaller" or "use the brand colour for the title"and Claude returns an updated TSX + schema as a draft you can preview, then Save or Reset. It's the recovery path when the form pickers can't express the change you want.

When you generate a component that visually contains another component you've already saved (e.g. a Notification with a Button inside), the AI is shown your existing components and is asked to match their tokens, structure, and variant prop names. Your exported codebase will then import { Button } rather than re-implement a slightly-different one.

Credits:Generate code and Refine with AI each cost one credit per call. Failed calls are refunded automatically. If you set a personal Anthropic API key in Settings → API Keys, calls use your key directly and don't deduct from your Layout credit balance.

Related: codebase-scanned components

Saved components live in the Studio library and come from the Explorer. Separately, the Codebase Scanner reads components already in your repository (React exports, Storybook stories). Both sources are merged into the Components view on the Design System page, so you see saved variants and production components side by side.

Tips

Components saved from the Explorer already have design tokens applied, so you rarely need to edit the token references manually.
Use categories to group related components (Cards, Navigation, Forms, etc.) so the Saved tab stays navigable as your library grows.
Separate components from full-page designs using the type toggle when saving. This makes filtering easier later.
All team members in your organisation share the same library. Agree on a naming convention early to avoid duplicates.