Kaakati Design-to-Code Translator
Routes to the design-system-architect agent for comprehensive design-to-code translation.
What It Does
The design-system-architect agent follows its 6-step protocol to:
- Audit current tokens — Reads existing design token definitions
- Analyze component inventory — Maps existing components across platforms
- Define/verify token architecture — Ensures all required tokens exist
- Establish grid system — Validates layout foundations
- Produce component spec matrix — Documents 30+ components with variants, props, a11y
- Cross-reference quality — Validates WCAG 2.2, motion, dark mode, touch targets
Translation Workflow
Reference references/translation-workflow.md for the detailed methodology:
- Input: Design spec (Figma link, screenshots, written spec, or existing components to audit)
- Token extraction: Colors, typography, spacing, shadows, transitions
- Component decomposition: Break UI into atomic design levels
- Code generation: Platform-specific implementation (Phlex, React, React Native)
- Responsive layer: Breakpoint-aware layouts
- Accessibility layer: ARIA, keyboard, focus management
- Output: Production-ready components with design tokens
When to Use
- Translating a Figma design into code across platforms
- Building a new design system from scratch
- Auditing an existing design system for completeness
- Ensuring cross-platform visual consistency
- Generating a design system specification document
Full References
references/translation-workflow.md— Detailed translation methodology