Contexxt

by Ruben Vaalt

One source of truth for your tokens, components and rules.

4.8(6)2Side projectsDesignArtificial Intelligence

Visit website

Freemium

Discuss

Contexxt is the AI-ready context layer for your design system. Centralize your design principles, components, documentation, patterns, and product knowledge in one place so AI agents and teams always work with the same source of truth. Build faster, stay consistent, and create better digital products with confidence.

Features

The contract

Turns your design system into one machine-readable contract: tokens, components and rules.
Imports tokens straight from Figma (variables or styles, no publishing needed) and from Tokens Studio / W3C DTCG JSON.
Organizes tokens by collection and category, with light and dark themes.
Captures component APIs: props, allowed variants, forbidden props, lifecycle status and docs.
Never stores your source code, only the derived contract.

Served to your AI tools

A remote MCP endpoint feeds the contract to Claude Code, Cursor and Copilot, so agents ask for a token instead of inventing one.
Generates editor rule files (CLAUDE.md, Cursor, Copilot) automatically.

Enforcement (the part nobody else does)

Checks the generated code against the contract on every pull request.
Blocks the merge on hardcoded colors, off-scale spacing, unknown variants and deprecated components.
Works on GitHub, GitLab (native Code Quality report), Bitbucket and Azure.

Insights from your real code

Adoption analytics: token and component coverage, most-used and unused.
Off-contract drift: values used in your code that aren't in the contract, measured from the repo scan.

Stay in sync

Scheduled Figma re-sync keeps the contract fresh, with a staleness signal when it drifts.
Docs with live token blocks that update when Figma changes.
Export tokens as CSS variables, JSON or TypeScript when a pipeline needs plain files.

Use Cases

Ship AI-generated UI that's actually on-system. Point Cursor, Claude Code or Copilot at the contract over MCP and get code that uses your tokens and components instead of inventing hex values.
Stop design drift before it merges. A CI gate checks every pull request against the contract and blocks hardcoded colors, off-scale spacing and unknown variants.
Keep Figma and code in sync. Tokens flow from Figma (or Tokens Studio) into the contract automatically, with a staleness signal when they diverge.
Onboard developers instantly. New team members inherit the rules through their editor and CI, without reading a 40-page style guide.
Govern a growing design system. Track component health, mark things stable or deprecated, and turn a deprecation into a rule that fails the build.
Migrate a codebase onto the design system. See exactly which values in your code are off-contract, measured from the real repo, and fix them with confidence.
Prove adoption to stakeholders. Coverage, most-used and unused tokens and components, straight from your codebase.
Keep documentation honest. Live token blocks read from the same contract, so docs update when Figma changes instead of rotting.
Enforce consistency across many repos and teams. One contract per system, served and checked everywhere: GitHub, GitLab, Bitbucket, Azure.
For agencies: deliver consistent UI per client. A contract per client design system means AI and CI keep every handoff on-brand.

Premium Products

StarterKitProStarterKitPro is your 90% done SaaS starter kit - all in Next.js

ReachdBecome the #1 business recommended by ChatGPT and Google AI

HandbookHubEmployee handbook builder

AIGROWGet your business recommended by ChatGPT and Gemini

Features

The contract

Turns your design system into one machine-readable contract: tokens, components and rules.
Imports tokens straight from Figma (variables or styles, no publishing needed) and from Tokens Studio / W3C DTCG JSON.
Organizes tokens by collection and category, with light and dark themes.
Captures component APIs: props, allowed variants, forbidden props, lifecycle status and docs.
Never stores your source code, only the derived contract.

Served to your AI tools

A remote MCP endpoint feeds the contract to Claude Code, Cursor and Copilot, so agents ask for a token instead of inventing one.
Generates editor rule files (CLAUDE.md, Cursor, Copilot) automatically.

Enforcement (the part nobody else does)

Checks the generated code against the contract on every pull request.
Blocks the merge on hardcoded colors, off-scale spacing, unknown variants and deprecated components.
Works on GitHub, GitLab (native Code Quality report), Bitbucket and Azure.

Insights from your real code

Adoption analytics: token and component coverage, most-used and unused.
Off-contract drift: values used in your code that aren't in the contract, measured from the repo scan.

Stay in sync

Scheduled Figma re-sync keeps the contract fresh, with a staleness signal when it drifts.
Docs with live token blocks that update when Figma changes.
Export tokens as CSS variables, JSON or TypeScript when a pipeline needs plain files.

Use Cases

Ship AI-generated UI that's actually on-system. Point Cursor, Claude Code or Copilot at the contract over MCP and get code that uses your tokens and components instead of inventing hex values.
Stop design drift before it merges. A CI gate checks every pull request against the contract and blocks hardcoded colors, off-scale spacing and unknown variants.
Keep Figma and code in sync. Tokens flow from Figma (or Tokens Studio) into the contract automatically, with a staleness signal when they diverge.
Onboard developers instantly. New team members inherit the rules through their editor and CI, without reading a 40-page style guide.
Govern a growing design system. Track component health, mark things stable or deprecated, and turn a deprecation into a rule that fails the build.
Migrate a codebase onto the design system. See exactly which values in your code are off-contract, measured from the real repo, and fix them with confidence.
Prove adoption to stakeholders. Coverage, most-used and unused tokens and components, straight from your codebase.
Keep documentation honest. Live token blocks read from the same contract, so docs update when Figma changes instead of rotting.
Enforce consistency across many repos and teams. One contract per system, served and checked everywhere: GitHub, GitLab, Bitbucket, Azure.
For agencies: deliver consistent UI per client. A contract per client design system means AI and CI keep every handoff on-brand.

Comments

Ruben VaaltMaker

Hey Fazier! 👋 I'm Ruben, the creator of Contexxt. Over the past few years, I've watched AI become an incredible tool for designers and developers. But I kept running into the same problem: AI only knows what you tell it. Every new chat starts from scratch, design decisions get lost, and generated work quickly becomes inconsistent. We already have design systems, documentation, Figma files, Notion pages, and countless guidelines. The problem isn't a lack of information, it's that none of it is structured in a way AI can truly understand and use. That's why I built Contexxt. Contexxt turns your design system, documentation, components, UX principles, and product knowledge into one AI-ready source of truth. Instead of rewriting prompts or explaining the same rules over and over, your AI agents already understand how your team designs and builds products. This is only the beginning. I'm actively building Contexxt based on real user feedback, and I'd genuinely love to hear what you think. If you have questions, feature requests, or think I'm missing something, let me know in the comments. I'll be here all day! Thanks for checking out Contexxt! 🚀

PZERO AI

Building PZERO, saving you money - pzero.studio

Serving the design-system contract over MCP so agents ask for a token instead of inventing hex is the useful cut. If you ever need cheaper AI for the business, PZERO is at pzero.studio

Contexxt

Features

Use Cases

Premium Products

Contexxt

Features

Use Cases

Comments

Premium Products

Social Links

Makers

Sponsors

Last Week's Best

Comments