Oculay

About

"Developer tools are too overwhelming just to check a simple margin or font size..."

Oculay was built for designers, PMs, and developers who find traditional inspector tools too complex for quick design audits.

Oculay provides a clean, Figma-like interface directly in your browser. No more digging through nested CSS properties. With just one click, you can instantly see fonts, colors, spacing, and even production-ready code.

Key Features:
- Figma-Inspired UI: A sleek property panel that organizes information logically, making it accessible for non-engineers like designers and PMs.
- Instant Implementation Audit: Quickly detect discrepancies between your design tools (Figma, Canva, etc.) and the live implementation.
- Code Thief: A powerful feature for developers! Select any element to generate and copy code in formats like Tailwind CSS, React, Vue, Svelte, and Chakra UI.
- Advanced Layout Analysis: Visualize Flexbox/Grid settings, measure distances between elements (Distance Indicator), and inspect the box model with ease.
- Asset Extraction: View and access image and icon details directly from the properties panel.

Perfect For:
- Designers: Who want to verify if the live site matches their design specs perfectly.
- Product Managers: Who need to provide specific, data-driven feedback to developers without getting lost in DevTools.
- Frontend Developers: Who want to analyze UI patterns and instantly turn them into clean, reusable code (e.g., Tailwind).

How to Use
1. Install the extension.
2. Activate the inspector using the shortcut (Default: Alt+Shift+O).
3. Hover over any element to reveal its design DNA instantly.

Technical Highlights:
Built with a lightweight and modern stack for maximum performance:
- Core: React 18, TypeScript, Vite
- Styling: Tailwind CSS
- Supported Export Formats: HTML/CSS, React (Tailwind, Styled-components, Inline), Vue, Svelte, Chakra UI

Bridge the gap between design and development. Elevate your workflow with Oculay.