---
title: "Quickstart"
description: "Create a brand, author your first rules, and serve them to an AI coding tool over MCP in a few minutes."
label: "Quickstart"
date: "2026-10-05"
---

This walkthrough takes you from a new account to an AI tool that generates UI on your brand. It covers the happy path. Links in each step go deeper where you need it.

<Steps>

<Step>
### Create your organization

Sign up and create an organization. This is the workspace that holds your brands, teammates, and billing. You can rename it later in settings.
</Step>

<Step>
### Create a brand

Inside your organization, create a brand. A brand is your design language plus ruleset, and it is the source of truth served to your AI tools.

New brands start on the default theme (an oklch neutral palette with near-black primary and Geist fonts). The setup guide on the brand overview walks you through your first rules, importing your styles, and connecting a tool.
</Step>

<Step>
### Set your styles

Keep the default styles to get started, or import your own: from Figma variables, by scanning a website, or by pasting a CSS theme or a preset code from a theme builder. See [Importing styles](/docs/styles/importing-styles) for every path.

<Callout type="info">
You do not have to finish your styles before connecting a tool. You can refine color, typography, spacing, and the rest at any time, and changes flow to your tools automatically.
</Callout>
</Step>

<Step>
### Author a rule or two

Add a rule or two so your AI tools have explicit guidance to follow. The fastest start is **Add starter rules**, which offers curated packs; the **Agent-ready starter rules** pack is a good first one, and it also switches on the Sizing and Layout pages. A rule has text, a Guidance marker (Do, Don't, Caution, or Info), and an Importance (Required, Recommended, or Optional), and it lives in a named group.

For example, you might add a required rule that says to use the brand primary color for primary actions. See [Writing rules](/docs/rules/writing-rules) for the composer.
</Step>

<Step>
### Connect an AI tool

Your organization's first brand comes with a project called Default, so you can connect straight away. For another app, or a later brand, create a project (the sidebar footer has **New project**). Then click **Connect** in the workspace top bar, or use the **Connect your agent** step of the setup guide, and pick your tool: Claude, Codex, Cursor, Figma Make, VS Code, v0, Lovable, or a custom MCP connection. It shows the exact steps for that tool, and most connect by signing in, with no key to copy.

For the details, see [Connect an AI tool](/docs/connect/overview).
</Step>

<Step>
### Confirm your rules are being served

Back in your tool, ask it to build a piece of UI. The result should reflect your brand styles and honor the rules you authored. If it does, your brand is serving over MCP and you are set.
</Step>

</Steps>

Once you are moving, **⌘K** opens the [command menu](/docs/workspace/command-menu), which jumps to any page, component, token, or rule from the keyboard.

## Where to next

<Cards>
  <Card title="Connect an AI tool" href="/docs/connect/overview">More on connection keys and supported tools.</Card>
  <Card title="Writing rules" href="/docs/rules/writing-rules">Author clear rules with the composer.</Card>
</Cards>