Skeletonizer v6

About

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.