Chati.dev

Design System

The UX Coordinator orchestrates three sub-agents (Brand Architect, UX Researcher, Component Engineer) to produce a complete design system with tokens, components, icons, and brandbook.

Design Chaos

Design decisions are scattered across files, Figma comments, and developer memory. Colors get hardcoded, spacing is inconsistent, every new component reinvents the wheel. The design system exists in theory but never in practice.

How Chati.dev solves this

Design System Structure

The UX Coordinator delegates to Brand Architect (tokens, brandbook), UX Researcher (user flows, information architecture), and Component Engineer (component specs, icons, accessibility). All outputs feed into a unified ux-specification.md.

Design system within ux-specification.md: UX Agent generates all sections, Dev Agent consumes them during implementation.

Design System Sections

Four sections within the UX specification that define every visual decision. The Dev agent consumes these directly during implementation.

01

Design Tokens

4-tier token system that encodes every visual decision into reusable values.

  • Primitive tokens: raw values (colors, sizes, fonts)
  • Semantic tokens: contextual meaning (primary, danger, spacing-lg)
  • Component tokens: component-specific overrides
  • Utility tokens: one-off helpers and escape hatches
02

Component Spec

Detailed specification for each UI component, ready for implementation.

  • Variant definitions and visual states
  • Interactive states (hover, focus, disabled, loading)
  • Anatomy breakdown with props interface
  • Accessibility requirements (ARIA, keyboard, screen reader)
03

Icon System

Structured approach to iconography that scales with your application.

  • Library selection criteria and recommendations
  • Size scale with optical adjustments
  • Usage guidelines and placement rules
04

Tokenization Audit

Mandatory coverage check ensuring every visual value is tokenized. No hardcoded colors, sizes, or fonts allowed.

  • Color token coverage (light and dark modes)
  • Typography and spacing token coverage
  • Shadow and icon token mapping verification

Component Hierarchy

Components follow atomic design principles, building complexity from simple primitives to full page sections.

Atoms

Basic building blocks: buttons, inputs, labels, icons. Single responsibility, fully tokenized.

Button, Input, Badge, Icon

Molecules

Combinations of atoms forming functional units: form fields, search bars, card headers.

FormField, SearchBar, NavItem

Organisms

Complex sections composed of molecules: navigation, hero sections, data tables.

Header, HeroSection, DataTable

Pipeline Integration

The UX agent produces ux-specification.md with Section 4: Design System. The Dev agent consumes tokens and component specs during implementation, ensuring every UI element follows the established system.

UX Agent→Design Tokens→Dev Agent→Consistent UI