Part of Agency Platform — the AI-native agency platform

AP Composition

The design system that lets AI agents maintain design quality across every project. Governed tokens, production components, real Figma sync. Built for Astro.

Get Started See the system

AI agents need design guardrails

Without a governed design system, AI-generated interfaces drift. AP Composition gives agents the same tokens, components, and quality gates that human designers use — so the output is consistent whether a person or an agent built it.

Design systems should enforce, not suggest

Most design systems are documentation. AP Composition is enforcement. Pre-guardrail hooks block non-compliant output. Token derivation is verified. Figma-to-code parity is tracked, not hoped for.

One system, every delivery lane

Astro today, WordPress and Duda when you need them. One set of tokens and components across every platform your agency delivers on. No per-project reinvention.

Components

8 components from @ap/composition-ui. These are live renders, not mockups.

Button
Primary
Secondary
Ghost
Danger
import { Button } from '@ap/composition-ui'
Badge
Default
Success
Warning
Error
Info
import { Badge } from '@ap/composition-ui'
Card
Default card
Content container with border.
Elevated card
Content container with shadow.
import { Card } from '@ap/composition-ui'

Also available: Dialog, Panel, Table, Tabs, Toast. Full catalog →

Tokens

CSS custom properties from packages/ui/src/tokens/. Every value below is live.

Color — Primary

--color-primary-{100..900}

Color — Neutral

--color-neutral-{100..900}

Color — Semantic

--color-success / warning / error / info

Spacing

--space-2 (8px)
--space-4 (16px)
--space-8 (32px)
--space-16 (64px)

Typography

--text-xs (0.75rem) --text-sm (0.875rem) --text-base (1rem) --text-lg (1.125rem) --text-xl (1.25rem) --text-2xl (1.5rem)

Radii

sm
md
lg
xl
full

Full token reference →

Usage

Import tokens and components. That's it.

Astro page
---
import { Button } from '@ap/composition-ui';
import { Card } from '@ap/composition-ui';
---
<Card variant="elevated">
  <h3>Project status</h3>
  <p>3 tasks remaining</p>
  <Button variant="primary">View</Button>
</Card>
Renders as

Project status

3 tasks remaining

View

Figma

Design-to-code token flow. The Figma file is real and connected.

Figma file
AP Composition — 12 pages (Foundations, Tokens, Typography, Color, Components, Patterns, Review Boards, Handoff)
API access
Verified — file readable via Figma REST API
Token sync
python3 scripts/sync_design_tokens.py --source figma — executes and validates
Current limitation
Automated Variables pull requires Figma Enterprise. Manual token extraction works today.

Full Figma integration details →

Status

What's real, what's in progress, what's planned.

Proven

  • 8 React components (Button, Badge, Card, Dialog, Panel, Table, Tabs, Toast)
  • Design tokens (color, spacing, typography, radii, shadows)
  • Astro integration via @astrojs/react
  • Cloudflare Pages deployment
  • Figma API access (12-page file)
  • Token sync script

In progress

  • Automated Figma Variables sync
  • Dark mode token switching
  • Component interactive documentation
  • More component variants

Planned

  • WordPress adapter
  • Pipeline automation
  • Quality gate integration
  • npm package publishing

Get started with AP Composition.

Install the package, import tokens and components, build with a governed design system.

Get Started Developer Guide