Making an Internal Design System “AI-Ready”
1. Background and Challenge
During the integration of former Yahoo’s SAYA and former LINE’s LandPress UI, standardizing the design system and improving development efficiency became necessary. Beyond documentation for humans, the need emerged for a standardized design system that AI can also understand correctly.
2. Three-Layer Structure
- Layer 1 (Quality Standards): Brand guidelines, accessibility, UX patterns, and other enduring quality axes that remain unchanged even as technology evolves.
- Layer 2 (Quality Definition): Structures libraries, component specifications, and usage rules (Dos & Don'ts) as knowledge data that AI can reference.
- Layer 3 (Delivery Mechanisms): Flexible means of delivering knowledge to AI models, including MCP, Figma Code Connect, Agent Skill, and DESIGN.md.
3. Results and Future Direction
- Validation of a workflow that generates code from Figma designs confirmed an approximately 80% reduction in markup effort.
- The next goal is an “AI Native” development environment where humans design the decision criteria and AI handles implementation at high speed.
