| Extract color, typography, spacing, and surface tokens |
Foundation Layer: Design Tokens |
| Classify components into atoms, molecules, organisms, templates, pages |
Component Classification Framework |
| Identify the smallest functional UI building blocks |
Atom Recognition |
| Recognize composite components that combine 2-3 atoms |
Molecule Recognition |
| Identify complex interface sections |
Organism Recognition |
| Distinguish layout structures from real implementations |
Templates vs Pages |
| Assess design system quality and maturity |
Design System Analysis Best Practices |
| Extract design tokens and components from any source |
Source-Specific Recognition |
| Compare to industry-leading design systems |
Reference Design Systems |
| Validate against W3C DTCG and atomic design standards |
Standards & Specifications |
| Validate analysis completeness |
Validation Checklist |
| Understand the recognition framework |
Conclusion |