Component.lol
Extract design tokens from any website
44 followers
Extract design tokens from any website
44 followers
🎨 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.
Chime - Remember Everything
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?
Chime - Remember Everything
@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 tool seems like it was created by someone who really gets the challenges faced by both developers and designers. I’m excited to see how it can streamline onboarding and documentation for product teams.
Chime - Remember Everything
@emma_campbell3 It's great to hear you see its potential for team onboarding - that's exactly the kind of real-world problem I'm hoping to solve! 🎯 Can't wait to learn about how you use it for this use case
When I saw you showing this on LinkedIn I was mind blown. Well done Derrick, this is superb!
Chime - Remember Everything
@christopher_adebayo Thank you, Christopher
As someone that's just getting into web/app design, this is especially useful to me. Ideally I can use this tool to quickly understand how other designers/developers are building their sites and to help me build my own projects. Very cool extension, congrats on the launch!
Chime - Remember Everything
@smjburton Thanks so much Scott.
Well done Derrick 💎
Congrats on the launch.