Open Design System Format
Hand your design system to an agent
Why it exists
AI agents generate UI that looks plausible and quietly ignores your design system: the wrong spacing scale, invented color roles, components that never existed. The rules and tokens that would fix that sit in Figma files and scattered docs no agent can read. ODSF packs all of it into one bundle an agent can actually open and follow.
About this project
A bundle format that packs a design system, its tokens, components, behaviors, rules, and runnable examples, into one portable set of markdown, HTML, and CSS that an AI agent can read and actually adhere to. Tokens are defined once and surface twice, as agent-readable frontmatter and as synchronized CSS variables, while components ship self-rendering HTML examples agents copy from instead of guessing at defaults. It builds on Google's Open Knowledge Format and Google Labs' design.md, stays zero-dependency and free of lock-in, and includes Claude, Primer, and Geist as reference bundles.
Features
One portable bundle of markdown, HTML and CSS, no SDK
Tokens defined once, surfaced as agent frontmatter and CSS variables
Components ship runnable HTML examples agents copy from
Built on Open Knowledge Format and design.md, with zero lock-in
Single-file viewer and a Node.js conformance validator
Tech Stack