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.

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.