🎨 Component.lol is a powerful design system analysis tool that helps developers and designers understand and replicate web design patterns. With just one click, you can extract complete design tokens and UI components from any website.
Subscribe
Sign in
Key Features of this extension:
✨ Color System Analysis
• Extract complete color palettes from any webpage
• Detect gradients and color relationships
• Export colors in multiple formats
📝 Typography Scanner
• Analyze font families and weights
• Map text hierarchies and styles
• Catalog font sizes and line heights
🔲 Component Detection
• Capture button styles
• Extract spacing, color and padding values
🖼️ Asset Management
• Collect and organize UI and video assets
• Extract icons and SVGs
• Sort assets by type and size
Don't forget to share your thoughts on this too!
Token extraction is a powerful tool but how can you make sure it promotes learning rather than just cloning? Do you provide any educational context or ethical guidelines?
@harper_young Certainly. For v1, the focus is on effectively fetching the styles on the websites (cloning). For v2, more focus will be on how this can be used well, mood board creation, a Figma integration and more. Watch this space. Thanks for teh question too
This is an exciting concept. Does the tool identify and categorize atomic design structures like atoms, molecules and organisms when it extracts components?
@grace_phillips1 Currently, the focus is on the most basic tokens; Colors, Typography, Buttons and Assets. For subsequent versions, more focus will be on these structures. I also believe this will be of more help to designers and developers.