Kit Gallery

The Kit Gallery is a public catalogue of design-system kits. Import a kit into Layout Studio with one click, install it straight into your AI agent from the CLI, or publish one of your own projects so others can build on it.

Open the Gallery

Browsing kits

The gallery at layout.design/gallery lists every public kit. Search by name, filter by tag, and sort by Featured, Top (most imported), or New. Each card shows the kit's name, description, tags, and import count.

Open any kit to see three tabs:

Live Preview— a brand-faithful showcase (palette, typography, spacing, and components) rendered with the kit's own tokens, so Linear looks like Linear.
Tokens — the full W3C DTCG token set with colour swatches, type scale, spacing bars, radius samples, and shadows.
layout.md — the generated context file an AI agent consumes.

Importing a kit

Into Layout Studio

On any kit page, click Import to Studio. The kit becomes a new project in your current organisation with its tokens, layout.md, and (for rich kits) fonts, branding assets, and context documents already in place. Edit it like any other project.

Into your AI agent (CLI)

Run the install command shown on the kit page:

npx @layoutdesign/context install <kit-slug>

This writes the kit into a local .layout/ directory and wires up the MCP server for Claude Code, Cursor, Windsurf, and the others. See the CLI guide for details.

Rich kits are imported in full by Studio users. CLI users always receive the minimal bundle (tokens + layout.md), which is all an AI coding agent needs for on-brand output.

Publishing your own kit

Open a project in the Studio and click Share in the top bar to open the Share to Gallery dialog. Fill in:

Field	What it does
Name & Description	Shown on the gallery card. Click "Generate with AI" to draft a description and tags from your design system.
Tags	Comma-separated, up to 12. Used for filtering and search.
Licence	MIT, CC-BY-4.0, or a custom licence you paste in. Sets the terms others import under.
What's included	Tokens are always included. Optionally bundle fonts, branding assets, and context documents — adding any of these makes it a "rich" kit.
Visibility	Public (listed in the gallery) or Unlisted (reachable only by direct link).

On publish, a bespoke Live Preview is generated for your kit (Claude writes a brand-faithful showcase tuned to your tokens, roughly 60 seconds). The kit goes live with a uniform template first; the bespoke showcase replaces it as soon as it lands. Some submissions are published immediately; others are queued for a quick review by the Layout team before they appear in the gallery.

Want a kit that doesn't exist yet? The Wishlist lets anyone request a brand by URL and upvote existing requests, so we know which kits to build next.

Starter kits

Three starter kits — linear-lite, stripe-lite, and notion-lite — ship with the CLI and are also available in the gallery. Use them to try the workflow end to end before extracting your own design system.