Media
4 items
Description
Extracts website layout & geometry for AI Vibe Coding. Capture the Vibe of any website and feed it to your LLM. The Skeletonizer is a lightweight browser script that distills a website into a clean, token-efficient JSON structure. It strips away the noise (scripts, SVGs, base64 images) but keeps the structure, classes, styling, and interactive elements. 🚀 Why use this? When you want an AI to "recreate this design", pasting raw HTML is terrible: ❌ Too many tokens: Raw HTML is bloated. ❌ Confusing for AI: Minified JS and SVG paths distract the model. ✅ Skeletonizer JSON: Provides exactly what the LLM needs: Layout, Colors, Fonts, Spacing, and Component Hierarchy. 📦 Installation Go to any website you admire (e.g., Apple, Stripe, Linear). Open the Console (F12 -> Console). Paste the script (if not using bookmarklet). A .json file will automatically download. 🤖 How to Prompt the AI (Example) Upload the JSON file to ChatGPT/Claude and use this prompt: "I have attached a JSON skeleton of a website design I like. Please analyze the 'DESIGN VIBE' and the structure. Recreate a similar landing page for my project [Project Name] using Tailwind CSS and React. Maintain the same spacing, typography hierarchy, and color balance." ✨ Features - Semantic Analysis - Captures id, class, and HTML tags. - Interactive Detection - Automatically flags <button>, <a>, and inputs. - Style Extraction - Grabs computed styles (Flexbox, Grid, Colors) but ignores defaults. - Privacy Friendly - Runs entirely in your browser. No data sent to servers.