<— 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

Contact

© Anders Filtenborg 2025

—> About