Skip to content
## AgentDS

## agent-ready design systems

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

AgentDS is a free catalog of DESIGN.md files — machine-readable design tokens plus human-readable rationale — extracted from real design systems and famous product sites. One file, and any agent builds UI that follows the system instead of generic defaults.

npx skills add System-Desgin/AgentDS --skill design-systems
listed on skills.sh →

## two paths

Official Systems

Generated from real open-source token packages — Carbon, Material 3, Primer, Fluent 2, Cloudscape and more. Provenance-pinned: package@version, extraction date, and a lint report on every entry.

browse official →

Brand Looks

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

browse brand looks →

## most fetched

full catalog →

Carbon

IBM · official system

IBM's open-source design system — precise, functional, and built for enterprise at scale.

enterprise-dashboarddata-densesaas-product

Ant Design

Ant Group · official system

Ant Group's enterprise UI system — a vivid blue, crisp neutrals, and dense, data-rich layouts.

enterprise-dashboarddata-densesaas-product

Apple

Apple Inc. · brand look

Apple's observed web look: vast white and near-black sections, product-hero photography, blue pill CTAs, and hairline gray precision.

marketing-sitee-commercemobile-first

Atlassian Design System

Atlassian · official system

Atlassian's design system — the confident brand blue, calm neutrals, and dense-but-friendly patterns behind Jira, Confluence, and Trello.

saas-productenterprise-dashboarddata-dense

Amplify UI

AWS · official system

AWS's design system for Amplify app front-ends — teal-led, pragmatic neutrals, and rounded-but-sober controls.

saas-productdev-toolsmobile-first

Arco Design

ByteDance · official system

ByteDance's enterprise design system — vivid arcoblue on cool neutrals, tight geometric density for admin platforms.

enterprise-dashboarddata-densesaas-product

## how it works

  1. 01

    Pick a system

    Browse Official Systems extracted from real token packages, or Brand Looks — independent analyses of famous product sites.

  2. 02

    Give it to your agent

    Copy the DESIGN.md into your repo, fetch it from the API, or install the skill. Every agent — Claude Code, Cursor, Kiro, Windsurf, Codex, OpenCode, Pi — reads the same file.

  3. 03

    Ship on-system UI

    Your agent references real tokens instead of inventing values: exact palettes, type scales, spacing, and component defaults.