StyleKit

About

StyleKit extracts the complete design system from any website in one click — colors, typography, spacing, border-radius, and shadows — then exports everything as a structured DESIGN.md file ready for AI coding assistants.

🎨 WHAT IT DOES

Open any website, click the StyleKit icon, and instantly see:
• Color palette with hex codes
• Typography (font families, sizes, weights)
• Spacing scale (padding, margin values)
• Border radius values
• Box shadows

Then export as DESIGN.md — a format understood by Claude Code, Cursor, GitHub Copilot, Windsurf, and any AI coding tool.

🛠 BUILT FOR AI-ASSISTED DEVELOPMENT

Drop the generated DESIGN.md into your project root and your AI assistant instantly understands the design system. No more manually copying hex codes or guessing font names.

Works with:
• Claude Code (Anthropic)
• Cursor AI
• GitHub Copilot
• Windsurf
• Any AI tool that reads project files

⚡ KEY FEATURES

• One-click extraction — no configuration needed
• Samples up to 800 DOM elements for accurate results
• Clean DESIGN.md export with Markdown formatting
• Copy individual tokens or export the full file
• Works on any public website
• Dark, minimal UI

🔒 PRIVACY

StyleKit only reads CSS computed styles — colors, fonts, spacing, border-radius, and shadows. It does NOT access, read, download, or process any images, videos, audio files, or other media content. No media elements are selected or analyzed.

No data is sent to external servers. No account required. Runs entirely in your browser.

📘 DOCUMENTATION

Full docs at: https://stylekit.digitaladexpert.de/docs