Project Story
Inspiration
Designers and developers spend an unreasonable amount of time just understanding existing websites.
Inspecting elements, digging through DevTools, translating CSS to Tailwind, checking accessibility, extracting colors and assets — all before real work even starts.
I wanted a tool that doesn’t just show raw code, but understands design intent and lets you act on it instantly.
That idea became Lens.
What it does
Lens is an AI-powered design intelligence Chrome extension that lets you inspect, extract, and transform any website in real time.
With Lens, you can:
- Hover over any element to instantly see fonts, spacing, colors, and layout
- Translate raw CSS into Tailwind utility classes
- Check WCAG contrast accessibility automatically
- Explore CSS variables tied to any element
- Extract global color palettes, images, SVGs, videos, and Lottie animations
- Attach AI directly to UI elements and apply design changes live on the page
Lens turns any website into a living design system.
How we built it
Lens is built as a high-performance browser extension that hooks directly into the DOM.
Key technical pieces include:
- Real-time DOM inspection and computed style parsing
- CSS-to-Tailwind translation logic
- Color analysis and accessibility contrast scoring
- Asset discovery pipelines for media and SVG extraction
- An AI action layer that maps prompts to UI transformations instead of text-only responses
Instead of chatting about code, the AI in Lens executes commands that modify the page directly.
Challenges we faced
- Making DOM inspection fast without hurting page performance
- Translating arbitrary CSS into clean, usable Tailwind utilities
- Ensuring accessibility checks were accurate and standards-compliant
- Designing AI outputs as actions, not explanations
- Keeping the UI powerful without overwhelming designers
Balancing speed, accuracy, and usability was the hardest — and most rewarding — part.
What we learned
- Developers want tools that act, not tools that talk
- AI is most powerful when paired with real interfaces, not isolated chats
- Browser extensions are an underrated surface for serious AI tooling
- Great developer tools win by removing friction, not adding features
What’s next
Lens is just the beginning.
Next steps include:
- Design system export
- Team collaboration
- Framework-aware AI actions
- Deeper accessibility tooling
- Turning Lens into a production-ready premium product
Built With
- css
- gemini
- html
- javascript
- react
- tailwind
Log in or sign up for Devpost to join the conversation.