Component.lol
Extract design tokens from any website
39 followers
Extract design tokens from any website
39 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.
Free
Launch Team
Framer AI AgentsDesign and publish professional sites with AI
Promoted
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!
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!
@smjburton Thanks so much Scott.
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.
@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!
@christopher_adebayo Thank you, Christopher
Well done Derrick 💎
Congrats on the launch.