Web Developer Helper Suite

Measure, Annotate, Extract web data & Optimize local projects for AI/LLM context generation.

Your daily assistant for web developers: simplify complex work with just a few clicks. Web Developer Helper Suite is the all-in-one toolkit designed for those working with AI (ChatGPT, Claude, Gemini). Analyze web pages, create professional annotations, and optimize projects for LLM models with a single click. ⚡ WHY INSTALL IT? ✅ Optimize Projects for AI in 1 Click Convert React, Vue, Node, PHP projects into a format perfect for ChatGPT/Claude. Save up to 95% of tokens using Skeleton Mode and Smart Delta Diff. ✅ Annotate UI Bugs without Photoshop Draw arrows, rectangles, and notes directly on the live website. Screenshots ready for UI/UX reviews instantly. ✅ 100% Privacy: Everything Offline Zero uploads. Zero cloud. Your files stay on your computer. No data shared. Ever. ✅ Advanced Measurement Tools Smart rulers for pixels, centimeters, and inches. CSS style picker. Automatic layout report generation. 🔥 KEY FEATURES Vibe Project Manager (Offline App) 3 Optimization Modes: None: Full content (ideal for small projects) Smart Minification: Removes comments/whitespace (medium projects) Skeleton Mode: Only class/function structures (huge projects, 10M+ tokens) Core Functions: Smart Delta Diff: Compares old vs new code and generates a Git-style Unified Diff. Provide AI only with the changes, not the whole project. ZIP & Folder Support: Drag & drop React, Vue, Node, HTML, PHP... Flexible Export: Copy to clipboard or download reports as TXT, Markdown (.MD), or PDF. Live Token Counter: Real-time estimation of AI token costs with color indicators (Green/Yellow/Red). Visual Progress Bar: Tracks the entire generation process in two phases (file reading 0→50%, worker optimization 50→100%) with a shimmer animation during the data transfer phase. Stop Button: Interrupt the process at any point. The worker is terminated cleanly and reinitialized for the next run. On-Page Tools (Visual) Smart Ruler: Measure distances (px / cm / inches) Annotator v2: Draw vector arrows, circles, rectangles, text. Includes layer management. Web Extractor: Copy CSS, clean text, or HTML structure with one click. Multilingual & Themes Interface in English/Italian. Dark/Light mode support. 📌 REAL WORLD USE CASES 🎯 Scenario 1: Resume a project in a new AI chat Upload the project, apply Skeleton Mode, copy the context → ChatGPT/Claude understands the architecture immediately without wasting tokens. 🎯 Scenario 2: Report a graphic bug Use Annotator to draw red arrows on the site → Screenshot ready for the team in seconds. 🎯 Scenario 3: Update code without waste Use Smart Delta Diff: the AI sees only the modified lines (+/-), not the entire project. 🎯 Scenario 4: Export your context in multiple formats Generate the project context and export it as TXT for simplicity, Markdown for structured documentation, or PDF for professional sharing — all with a single click. 🔒 PRIVACY & SECURITY ✅ 100% Offline: All files (ZIP, code) are processed in the browser using Web Workers. No data ever leaves your computer. ✅ Zero Ads: No tracking, no user data collection. ✅ Open to Review: Verifiable source code. ⚙️ TECHNICAL NOTE (Measurements) The measurement tools (Ruler, Picker) operate in CSS pixels (96 DPI standard). Centimeter and inch conversions are estimates. For absolute precision across different screens, use the Monitor Calibration feature in the extension menu. ⚠️ Disclaimer: This tool is for web development/UI assistance. Do not use for precision engineering or physical measurements. 🚀 GET STARTED NOW Install Web Developer Helper Suite and take your AI projects to the next level. No subscription. No cloud. Just powerful tools. Offline forever.