<— back
AI-Organized Design System
From screenshots to a living, interactive design system
This demonstrates a new approach to design system creation and management:
1. Automated analysis of Identity guide PDF
2. Generation of design tokens as needed
3. Edit and updates through prompting or visual examples
Process:
Claude analyzes the visual language and generates both design system specification (in Markdown) and an interactive HTML showcase. The result is a fully documented system covering colors, typography, spacing, elevation, icons, and 20+ UI components.
All derived from reference material and rendered as a live, browsable interface.
The workflow is modular and iterative: as the project evolves, you feed updated references and the design system regenerates.
If loading: Wait 30 seconds
↑ Interactable design system
Process
5-10 reference screenshots


→
2. Claude analyzes
Claude UX/UI skill:
Reads the visual language, colors, fonts, spacing, elevation, icons
Generaters: Design system and HTML prototype
→
3. Living design system
Eeasy to read design system and generative library