Keep generated UI on brand
Agent-written components can use your design tokens instead of a plausible-looking default theme.
Bezel for AI-Assisted Teams
Give AI coding agents a design system they can actually read
AI agents can write interface code quickly, but they need explicit design context to stay on brand. Bezel exposes your design tokens, guidelines, accessibility rules, and project context through MCP so generated UI starts from the system your team approved.
Bezel MCP
Replace prompt guessing with structured design context
Connect compatible coding agents through MCP and they can query your design tokens, guidelines, and project context while they generate or edit UI.
Bezel MCP tools are shaped for agents: fetch the project manifest, pull tokens by path, or request a bundle for a button, card, dashboard, or product surface.
❯ claude› Which of our tokens should the new dashboard stat card use? Ask the Bezel MCP for a recommendation and cite the token path for each value.⏺ bezel - get-project-manifest (MCP) ⎿ {"projectName":"Bezel Marketing","manifest":{"totalTokenCount":265,"topLevelGroups":["semantic","base"],"groups":{"semantic.color.info":{"path":"semantic.color.info","tokenCount":2,"tokenTypes":["color"],"hasContextOverrides":false,"children":[]},"semantic.color.destructive":{"path":"semantic.color.destructive","tokenCount":2,"tokenTypes":["color"],"hasContextOverrides":false,"children":[]},"semantic.color.success" … +44 lines (ctrl+o to expand)⏺ bezel - get-token-bundle (MCP)(intent: "dashboard-shell") ⎿ {"intent":"dashboard-shell","rationale":"Tokens for dashboard layouts: sidebar colors, accent colors, background/foreground, border, navigation typography, and spacing.","tokenCount":126,"tokens":[{"path":"base.color.neutral.600","type":"color","contexts":{"$root":{"hex":"#a0ada7","alpha":1,"colorSpace":"oklch","components":[0.7355971387930772,0.01688682189570729,166.45041141435854]},"dark":{"alpha":1,"components":[0.47835962278360683,0.00001857682703049302,0],"colorSpace":"oklch","hex":"#5d5d5d"}},"exportNames":["ring","sidebar-ring"] … +125 lines (ctrl+o to expand)⏺ bezel - get-token-by-path (MCP)(tokenPath: "semantic.color.primary.default") ⎿ {"path":"semantic.color.primary.default","type":"color","contexts":{"$root":{"original":"{base.color.vibrant-emerald.500}","resolved":{"hex":"#00e17b","components":[0.7977928911906637,0.20402581473743006,153.32127159192999],"alpha":1,"colorSpace":"oklch"},"aliasChain":["base.color.vibrant-emerald.500"]}},"exportNames":["primary"],"extensions":{"com.bezel.app":{"exportName":["primary"]}}}⏺ From the dashboard-shell bundle: surface --card and --card-foreground (base.color.neutral.background / base.color.neutral.foreground, both with a dark value), label --muted-foreground (base.color.neutral.400), border --border (base.color.neutral.700), corners --radius-lg (base.border.radius.lg, 10px), value size --text-2xl (base.typography.font-size.2xl, 35px), and --primary for the stat value (semantic.color.primary.default → base.color.vibrant-emerald.500, #00e17b). All existing project tokens, nothing invented.
AI Design Agent
Use AI assistance inside the design system workflow
The Bezel design agent lives inside the workflow with context about the project you are changing. Ask for another color direction, challenge a typography decision, or find the right semantic token.
Teams should not have to re-explain the product, brand, audience, and token model every time they need help from AI.
One Source of Truth
Keep humans and AI agents on the same design rules
When values live across code, design files, documentation, and prompt fragments, an AI agent has no reliable source for what the interface should look like.
Bezel gives those decisions a structured home. Update the system once and every developer and every connected agent can work from the current source.
What AI-assisted teams do with Bezel
Vibe code with a real system
Move fast with AI coding tools while keeping every new screen tied to current design rules.
Stop re-explaining the product
Put design context in one place agents can query instead of repeating brand rules in every prompt.
Works with the AI tools you already use
Bezel connects over MCP, the open protocol modern AI coding tools use to retrieve external project context.
- Claude Code
- Connect Bezel MCP and Claude Code can read your tokens and guidelines while it works.
- Cursor
- Add Bezel as an MCP server so generated components use your design system.
- Any MCP-aware tool
- If a tool speaks MCP, it can connect to Bezel.
- Your developers
- The same tokens export for human-written code, so nothing diverges.
FAQ
Questions from AI-assisted teams
Same System
Bezel for the rest of your team
Designers
Bezel gives product designers a guided place to define color, typography, spacing, radius, and accessibility decisions, then see those decisions applied to real components before developers or AI agents build from them..
Bezel for DesignersDesign Engineers
Bezel gives design engineers a shared system for semantic tokens, component previews, exportable artifacts, and AI-readable guidelines, so design decisions keep their meaning from concept to production..
Bezel for Design EngineersDevelopers
AI can generate code quickly.
Bezel for DevelopersEarly access · Space is limited!
Move fast with a design system AI can read
Join Bezel as an early product partner and give human builders and AI coding agents the same structured design context. Join Pro at $7 per month for one year, billed annually, with personalized onboarding and support throughout your first year. As a product partner, your direct feedback will help guide new features and the future of Bezel.
Spots are extremely limited. Acceptance requires a demo and a commitment to sharing ongoing feedback.