Uicuts

Annotate any web page: inspect elements, extract colors & fonts, attach notes, and copy structured Markdown for AI coding agents.

Transform any website into actionable design specs and structured documentation with Uicuts – the ultimate web annotation tool for developers, designers, and AI-powered workflows. ✨ Key Features 🎨 Visual Element Inspector - Hover over any element to see detailed information - Instantly extract fonts, colors, spacing, and sizing - Get computed styles in real-time - See the full CSS property panel 📝 Smart Annotation System - Add context-aware notes to any element - Visual markers stay pinned to specific elements - Organize observations and ideas directly on the page - Perfect for design reviews and developer handoffs 🎯 Design Token Extraction - Extract color palettes with a single click - Get font families, weights, and sizes automatically - Copy CSS values directly to your clipboard - Build design systems from existing websites 📋 AI-Ready Markdown Export - Generate structured Markdown documentation - Include element details, styles, and annotations - Optimized for AI coding agents (Cursor, Kiro, Aider, etc.) - Perfect for prompt engineering and automated workflows ⌨️ Keyboard Shortcuts - Quick access with Cmd+Shift+X (Mac) or Ctrl+Shift+X (Windows/Linux) - Navigate efficiently without mouse - Streamline your workflow 🎯 Perfect For - Developers: Inspect production sites, reverse-engineer designs, extract styles - Designers: Analyze competitor sites, document design patterns, create specs - Product Teams: Annotate mockups, provide feedback, track changes - AI Workflows: Generate structured documentation for coding agents - QA Engineers: Document bugs visually, create reproduction steps - Content Creators: Research and document web design trends 🚀 How It Works 1. Activate: Click the extension icon or use the keyboard shortcut 2. Inspect: Hover over elements to see detailed information 3. Annotate: Click elements to add notes and observations 4. Extract: Copy colors, fonts, and styles with one click 5. Export: Generate Markdown documentation for your AI tools 🔒 Privacy & Security - No data collection or tracking - No external server communication - All processing happens locally in your browser - No account or login required - Open source friendly 💡 Use Cases Design Handoff: Annotate designs with implementation notes for developers Competitive Analysis: Document competitor websites systematically Design System Building: Extract tokens from existing sites Bug Reporting: Create detailed visual bug reports with context Learning: Study how top websites are built AI Prompt Engineering: Generate structured specs for coding agents 🎓 Great for Teams - Share consistent documentation formats - Standardize design review processes - Bridge the gap between design and development - Accelerate AI-assisted development workflows Start transforming websites into actionable documentation today with Uicuts!