website design style extractor
by nowrich
Extracts production-ready design tokens and component styles from any live URL into Tailwind, SCSS, or JSON.
Secure checkout via Stripe
Works with the AI tools you already use
See it in action
You say
Inspect https://example.com and extract the design system. I need the output as a Tailwind config file.
Your agent does
I've inspected the site.
Primary Palette:
- brand-blue: #0055ff
- surface-gray: #f9fafb
Typography:
- Sans: 'Inter', system-ui
- Base size: 16px/1.5
Tailwind Config: module.exports = { theme: { extend: { colors: { brand: { 500: '#0055ff' }, surface: '#f9fafb', }, fontFamily: { sans: ['Inter', 'sans-serif'] } } } }
What you get
About this skill
The problem
Manually inspecting a website to replicate its design system is tedious and error-prone. Developers waste hours digging through the Chrome DevTools computed styles tab to map out colors, spacing scales, and typography rules for new projects.
What it does
- Extracts live computed styles including CSS variables, font families, and spacing scales.
- Maps component anatomy for buttons, cards, and forms across desktop and mobile viewports.
- Normalizes raw hex codes and pixel values into semantic design tokens.
- Identifies interactive states like hover, focus, and disabled for key UI elements.
- Generates production-ready configurations for Tailwind, SCSS, or JSON.
Frameworks & tools
Works with CSS Variables, SCSS, Tailwind CSS, and JSON design tokens. Requires Claude in Chrome for live DOM inspection.
Why this beats prompting it yourself
Standard LLM prompts rely on screenshots or limited HTML snippets, leading to "hallucinated" hex codes and guessed margins. This skill performs systematic multi-instance sampling and cross-references computed styles to ensure every token is backed by actual browser data.
Use cases
- Bootstrapping a Tailwind config based on an existing brand site.
- Creating a consistent design system for a new sub-project or landing page.
- Auditing a site's typography and color contrast for accessibility compliance.
- Documenting legacy site styles for a modern framework migration.
Known limitations
Requires Claude in Chrome to inspect live pages. Cannot bypass authentication, paywalls, or bot protection services.
How to install
Drop the file into your AI Agent. Works with Claude, Cursor, ChatGPT, and 20+ more.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
30-day refund
Not a fit? Get your money back
Trust & safety
Security scanned
Verified clean today
- 30-day refund guarantee
- One-time purchase, yours forever
- Secure checkout via Stripe
Frequently Asked Questions
Popular in Branding & Design
website to design system
Extracts design tokens and components from live URLs into a DESIGN.md with Tailwind v4 and CSS variables.
Figma to Frontend UI Specification Agent
Transforms Figma designs, screenshots, wireframes, prototypes, or written UI descriptions into precise frontend implementation specifications covering layout, spacing, typography, design tokens, components, responsive behavior, interaction states, animations, accessibility, assets, developer notes, QA criteria, and implementation risks.
Design System MD — Brand-Quality UI via DESIGN.md
Apply world-class design systems to any UI project in one step using getdesign.md CLI
Design Md Evidence Extractor Pro
Turn a user-approved website into a provenance-backed DESIGN.md pack that separates measured tokens, inferred roles, conflicts, and unresolved gaps.