Skip to content
Oday Bakkour
Back to projects
opensource2026

AgentDS

A free catalog of agent-ready DESIGN.md files — machine-readable design tokens plus human-readable rationale — so any coding agent builds UI that follows a real design system

CORE TECHNOLOGIES
Next.jsReactTypeScriptTailwind CSSDesign TokensPublic API
AgentDS

AgentDS — Agent-Ready Design Systems

AgentDS is a free, curated catalog of agent-ready DESIGN.md files — machine-readable design tokens paired with human-readable rationale — extracted from real design systems and famous product sites. Hand one file to any coding agent and it builds UI that follows the system instead of inventing generic defaults, with previews and a public fetch API on every entry.

Your coding agent is a brilliant engineer with no taste. Hand it a design system.

The Problem

Coding agents ship functional UI, but left to their own devices they invent palettes, type scales, and spacing on the fly — the result reads as templated defaults. AgentDS gives the agent exact, provenance-backed tokens to reference instead, so the output is on-system from the first render.

Two Paths

Official Systems

Generated directly from real open-source token packages — Carbon, Material 3, Primer, Fluent 2, Cloudscape, and more. Every entry is provenance-pinned with package@version, an extraction date, and a lint report, so the tokens are traceable back to their upstream source.

Brand Looks

Independent analyses of the publicly observable visual language of famous product sites — captured from public CSS, normalized to the same token schema, and clearly disclaimed as unaffiliated with the named makers.

How It Works

  • Pick a system: Browse Official Systems extracted from real token packages, or Brand Looks analyzing famous product sites.
  • Give it to your agent: Copy the DESIGN.md into your repo, fetch it from the API, or install the skill — every agent reads the same file.
  • Ship on-system UI: The agent references real tokens instead of inventing values — exact palettes, type scales, spacing, and component defaults.

Distribution

Three ways to consume a system: drop the DESIGN.md straight into a repo, pull it from the public fetch API, or install it as a skill with one command.

install-skill.sh
npx skills add System-Desgin/AgentDS --skill design-systems

AgentDS is also listed on the official skills.sh registry, so it can be installed straight from there across any supported agent.

Works With Any Agent

One schema, read the same way by Claude Code, Cursor, Kiro, Windsurf, Codex, OpenCode, and Pi — no per-tool adapters.

Licensing

Code is Apache-2.0; catalog content is CC BY 4.0 with per-entry upstream notices. Brand Looks are independent analyses of publicly observable design patterns, not affiliated with or endorsed by the named makers, and all trademarks belong to their owners.

AgentDS — Agent-Ready Design Systems (DESIGN.md Catalog) | Oday Bakkour