Workflows
Prompts that get useful results out of the server. All of these assume you've installed the MCP.
Set up a project
The one most people want first:
Set up Bezel in this project.
Set up this project to use my Bezel project named Acme Design System.
Configure Bezel Kit in this repo and generate my variables.css.
Use the Bezel MCP to set up this project with my Bezel project <uuid> at version 1.4.0.
Or the slash form: /mcp__bezel__setup-project, or /mcp__bezel__setup-project "Acme Design System".
This runs the setup-project prompt. The agent lists your Bezel projects by name and ID and asks which one to use (or resolves the one you named and confirms it). It then checks what the repo already has and completes only the missing Quick Start steps: installing @bezel-labs/bezel-kit with your package manager, writing bezel.json via npx bezel init --project <id>, writing design-tokens.json, adding the tokens script and the dev/build prefixes (it shows the diff and asks first), proposing the variables.css import in your entry file (asks first), and mentioning live preview as optional. It runs the build so variables.css exists, prints a checklist of what it did, skipped, and couldn't do, and tells you to use sync-project from now on. The manual version is the Quick Start.
Keep your tokens in sync
Once a repo has bezel-kit and bezel.json, refreshing tokens is one prompt:
Update my design tokens.
Sync my Bezel tokens.
Pull the latest tokens from Bezel.
Or /mcp__bezel__sync-project. The agent reads projectId and version from bezel.json without asking (no version means latest), fetches the file with get-design-tokens-file, writes design-tokens.json verbatim, and runs bezel build.
To re-link the repo to a different project, name it. The agent resolves it, confirms, and updates bezel.json:
Update my <app name> project to use my Bezel project named Acme Design System.
Switch this repo to Bezel project <name or uuid>.
Or /mcp__bezel__sync-project "Acme Design System".
If the repo isn't set up yet, sync-project stops with "This repo isn't set up for Bezel yet. I'll walk you through the setup first — once that's done, run sync-project again to pull your tokens." and hands off to setup-project.
Pin a published version
By default the sync pulls your current working tokens ("version": "latest"). To track a published release instead, name the version:
Update my tokens to version 1.4.0.
Or /mcp__bezel__sync-project "Acme Design System" 1.4.0. The agent writes version to bezel.json and every later sync pulls that release until you change it. Asking for a version that hasn't been published returns the list of versions that have.
Build a component with real tokens
Build a pricing card component. Use the Bezel MCP to look up our card and spacing tokens first, and reference the CSS variables by name, and don't invent values.
The "look up first" part matters. Without it an assistant will happily produce plausible-looking hex codes that aren't yours. Told to check, it calls get-token-bundle with the card intent and builds from what comes back.
Bundles exist for theming-setup, button, card, input, form, auth-page, and dashboard-shell.
Work with themes
What contexts does my Acme project have? Show me every semantic color token that changes between default and dark.
The agent reads your context groups, then queries tokens per context. Useful for spotting a token you meant to override in dark mode but never did.
Set up a framework
Generate a Tailwind v4 theme config from my Acme tokens.
Also handles shadcn/ui and Mantine. Ask for a specific version, since Tailwind v3 and v4 differ, and so do shadcn v0 and v2.
Check accessibility before you ship
Check the contrast of our semantic text color on our surface color. If it fails AA, suggest the nearest passing value from our palette.
Contrast math is deterministic here: the server computes the ratio and grade rather than the model estimating it. Pair it with design-review for a broader pass:
Review this login form against our design system. Here's the markup and the token paths I used.
Recall earlier decisions
Search our Bezel chat history for anything about the neutral ramp.
Handy when you're picking up a project after a few weeks, or inheriting someone else's.
Getting better answers
Name the project. With several projects, say which one. The agent resolves the name to an ID once and reuses it. In a repo with projectId in bezel.json, you don't have to: the agent reads it from there.
Say "use the Bezel MCP." Most assistants will reach for the tools on their own once connected, but saying it removes the doubt, especially in a long conversation where it's drifted back to guessing.
Ask for token paths in the output. "Cite the token path for each value you use" keeps the result traceable, and makes it obvious when something was invented.
Don't ask for the whole project in chat. Anything you actually need is faster through the manifest and a targeted query. See Manifest first. The full file belongs on disk, which is what sync-project is for.