Skip to content
AI Primer
workflow

AIandDesign packages 22 component families for coding agents

AIandDesign says its AI-built system documents 22 component families with synchronized JSX, tokens, accessibility, and testing guidance. A separate library offers 2,000 model-readable DESIGN.md files.

3 min read
AIandDesign packages 22 component families for coding agents
AIandDesign packages 22 component families for coding agents

TL;DR

  • AIandDesign’s v1.2 puts 22 documented UI families in a searchable specification with interactive production controls and synchronized JSX, according to AIandDesign’s version 1.2 post.
  • Coding agents get a machine-readable manifest, complete component contracts, and six approved starting templates, while AIandDesign’s update says a blocking validator rejects several kinds of off-system code.
  • A separate, free reference corpus offers more than 2,000 model-readable DESIGN.md files with real product style decisions, as AdhamDannaway’s post describes.

AIandDesign’s open-source account maps a system from tokens through CI and production products. Refero’s agent guide takes the other route, turning existing sites into context files for coding tools.

22 component families

AIandDesign calls the project a shared operational source of truth for designers, developers, and agents, rather than separate Figma, Storybook, and code artifacts that can drift, according to AIandDesign’s version 1.2 post. Its earlier open-source release counted 30 exported React components and primitives, two public hooks, and more than 50 semantic and structural tokens in AIandDesign’s release announcement.

The current specification includes:

  • Searchable pages across 22 documented families
  • Production components with interactive controls
  • URL-shareable configurations with synchronized JSX
  • Anatomy, measurements, tokens, states, and accessibility details
  • Implementation, API, testing, and usage guidance
  • Figma-equivalent construction and resizing specifications
  • Guidance on foundations, patterns, content, and governance
  • Downloadable, validated design-token JSON

Agent contracts and CI

The consequential layer is policy. AIandDesign’s update says agents can inspect the manifest and full component contracts, but their generated changes pass through constraints.

The validator blocks:

  • Raw colors
  • Arbitrary styling
  • Internal package imports
  • Local copies of shared primitives

Any exception needs a justification, an owner, and an expiry date. The propagation path has seven stages: canonical source, generated contracts, validation, reviewed release, consumer update, product CI, and deployment. AIandDesign also says daily checks find stale consumers, while Renovate proposes later dependency updates for product-level validation.

DESIGN.md reference library

Refero Styles packages a different kind of agent input: real product references expressed as DESIGN.md files. AdhamDannaway shared the free library in a post about its 2,000 files.

Each reference supplies colors, typography, spacing, and components alongside a DESIGN.md that can be pasted into Cursor, Codex, Claude Code, v0, or Lovable, according to Refero’s official documentation. Its curated agent page begins with 24 examples selected from more than 1,200 matching styles, while the broader library homepage advertises 2,000-plus systems.

Further reading

Discussion across the web

Where this story is being discussed, in original context.

On X· 1 thread
22 component families1 post
Share on X