Bezel for Developers

Design decisions that are ready to implement

Stop translating static specs by hand. Bezel gives you design tokens with real names and values, a preview that runs your own components, and an MCP server so your AI coding tools use the same system you do.

Get Started Read the Docs

Graphic placeholderDesign tokens flowing into codeBezel’s token export on one side and the generated CSS variables in an editor on the other, with a component using them in the live preview.

Design Token Export

Standard tokens, straight into your build

Export a W3C-format design-tokens.json and run Bezel Kit to generate scoped CSS variables. Export names are independent of token paths, so values land under the names your framework expects.

No more hunting through design files for the real value of a color.

Graphic placeholderbezel build outputA terminal running the Bezel Kit build and the resulting variables.css open beside it.

Bezel MCP

Give your coding agent the design system, not a guess

Connect Claude Code, Cursor, or any MCP-aware tool to Bezel and generated UI reaches for your tokens instead of inventing a new blue every prompt.

Agents can query the project manifest, pull tokens by path, or fetch a bundle for a whole component.

Graphic placeholderAI agent using Bezel MCPA coding assistant generating a button component, with the MCP call for the project’s semantic tokens shown alongside the resulting code.

Live Previews

Preview runs your code, so it matches what ships

Point Bezel at your Storybook or a running app and token changes render on your real components in your real framework.

Designers can adjust values and see the effect on production components without opening a pull request.

Graphic placeholderLive preview of a team’s own appThe preview panel showing a real application with the width switcher set to a tablet viewport.

What developers do with Bezel

Kill hardcoded values

Replace scattered hex codes and magic numbers with tokens the whole team owns.

Reduce handoff ambiguity

Get exact names and values instead of reading them off a design file.

Keep AI output on brand

Let coding agents pull the real system so generated UI doesn’t need a second pass.

Fits the way you already build

Bezel produces files and protocols you already know how to use.

Design token export: W3C design-tokens.json with export names that match your framework conventions.
Bezel Kit: An open-source CLI that turns tokens into scoped CSS variables and helper modules.
Bezel MCP: A hosted MCP server for Claude Code, Cursor, and other MCP-aware tools.
Your framework: Tokens are just values. Use them with Tailwind, shadcn/ui, or anything else.

FAQ

Questions from developers

How do I get design tokens from Bezel into my codebase?

Export design-tokens.json from your project and run Bezel Kit, the open-source CLI, to generate scoped CSS variables and supporting modules you can import directly.

Does Bezel work with Tailwind CSS and shadcn/ui?

Yes. Each token has its own export name, independent of its path, so values land under the names your framework expects. Bezel MCP can also emit framework-specific overrides.

Which AI coding tools can connect to Bezel MCP?

Any MCP-aware client, including Claude Code and Cursor. Once connected, the tool can query your tokens, guidelines, and project context while it writes code.

Does Bezel write to my repository?

No. Bezel never commits or opens pull requests. You bring tokens into your codebase by exporting the JSON, and AI tools read the system over MCP.

Same System

Zero Drift Design

Implement the system, not the screenshot

Start a Bezel project, export your tokens, and connect your AI tools in minutes.