Back to PortfolioDesign Cortex
An open-source, MCP-native tool that turns a Figma design system into an AI-readable knowledge base.
Agents that query Figma at runtime are slow, expensive, and unpredictable. Design Cortex does a one-time extraction into a structured markdown knowledge base, so the agent reads local files instead of hitting Figma mid-task. Figma stays the source of truth, the knowledge base is the interface between your design system and the agent. MCP-agnostic, no infrastructure, MIT licensed.
Introduction
Design Cortex is an open-source tool I built that extracts a Figma design system into portable markdown documentation that AI agents can read directly. The idea is simple: stop making agents query Figma live during every task, and give them a fast, local source of truth instead.
It runs entirely through MCP, so there are no API keys, no Python, and no external services to stand up. Point it at your design system once and you get a structured knowledge base that any agent can consume.
Impact
Flat token cost - agents load only the files they need, not the entire system on every task
Zero infrastructure - no API keys, no Python, no external services
MCP-agnostic - works with official, desktop, console, or custom Figma MCP
Incremental refresh diffs by component key and never overwrites manual edits
Goals
- Make a design system consumable by AI agents without live Figma access
- Keep token costs predictable as the system and the number of tasks grow
- Stay portable - plain markdown plus a JSON table of contents, no lock-in
- Keep Figma as the source of truth while the knowledge base stays a derived artifact
The Problem
Most AI design workflows have agents querying Figma on every task. That gets slow, expensive, and unreliable fast, especially at scale where a single request can pull far more than the agent actually needs.
The fix is to decouple extraction from consumption. Pull the system once, structure it well, and let agents reference it locally for as long as it stays fresh.
How It Works
Four skills run in sequence, each with one job:
ds-extract - crawls Figma, caches the raw data, and produces a gap report.
ds-write - converts that cache into a full markdown knowledge base.
ds-refresh - re-extracts and updates only the components that changed.
ds-validate - checks completeness, references, and freshness.
Configuration lives in a single .ds-kb-config.json file, so the whole pipeline is reproducible.
Output Structure
The output is a two-tier knowledge base. Agents load a top-level index.json table of contents, then a component index.md, then only the specific variant files they need. That layering is what keeps token usage flat.
kb-output/ index.json - table of contents tokens/ - color, typography, spacing patterns/ - composition and accessibility rules components/ - atoms, molecules, organisms _review/ - components needing classification
Why It Matters
Design Cortex treats the knowledge base as a derived artifact, not a second source of truth. Figma stays canonical, the knowledge base is regenerated from it, and the refresh step keeps the two in sync without clobbering anything a human edited by hand.
Because it is MCP-agnostic and dependency-free, it drops into any agent setup - Cursor, Claude Code, or anything else that speaks MCP. Released under MIT so the community can build on it.
