Uicuts

About

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!