Skip to content
## AgentDS

## source-verified design systems

Real design systems, translated for coding agents.

Use Carbon, Material 3, Primer, Fluent 2, Cloudscape, and more from their published token sources—not a visual guess. AgentDS turns each one into a verified DESIGN.md your agent can follow.

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

42 published files · free API · no account

See what the file controls.

This dashboard is rendered directly from Carbon's published DESIGN.md: its real palette, type scale, spacing, radii, and status roles—not a screenshot theme or a guessed blue.

open live preview →
carbon/DESIGN.md → dashboard
live tokens

## choose a source

source: package@version / repo@commit

Official Systems

Real open-source design systems, distilled from their published tokens. Every entry records provenance, compares its colors with the cited source, passes the official linter, and requires human QA before publication.

browse official →source: public CSS

Brand Looks

Independent, clearly disclaimed analyses of publicly observable product-site patterns. Use them as inspiration for an original visual system.

browse brand looks →

Find the right system for the work.

Start with the interface you are building. Each category combines Official Systems and clearly labeled Brand Looks that fit the same job.

## most fetched

full catalog →

Airbnb

Airbnb, Inc. · brand look

Airbnb's observed web look: white surfaces, near-black type, a coral-to-magenta pill CTA, photo-led rounded cards, and airy touch targets.

travel-consumere-commercemobile-first

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

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

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

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

## how it works

  1. 01

    Pick a system

    Start with an Official System extracted from its published token source. Brand Looks are available when you want observed visual inspiration.

  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 follows source-grounded palettes, type scales, spacing, and component defaults instead of inventing them.