website to design system

The problem

Reverse-engineering a website's visual identity manually is tedious and error-prone. Developers often struggle to extract consistent design tokens, spacing scales, and component logic from computed styles and disparate CSS files.

What it does

• Analyzes live URLs to extract computed styles for colors, typography, spacing, and layout.
• Clusters raw CSS values into a deduplicated, semantic design token set.
• Generates a portable DESIGN.md file containing the visual system's specifications.
• Produces copy-paste ready CSS custom properties and Tailwind CSS v4 @theme blocks.
• Documents component recipes and responsive behavior based on observed site patterns.

Frameworks & tools

Node.js, Playwright, Tailwind CSS v4, and CSS Custom Properties.

Why this beats prompting it yourself

Standard LLM prompts often hallucinate design values or provide generic style guides. This skill follows a rigorous clustering method to ensure every token is grounded in actual browser-rendered evidence rather than guesswork.

Use cases

• Audit a competitor's site to understand their visual language and spacing logic.
• Migrate a legacy frontend to a modern Tailwind CSS v4 utility-first system.
• Onboard new developers to a project by documenting an existing undocumented UI.
• Create a consistent theme for a new sub-project based on a main corporate site.

Known limitations

Requires Node.js and Playwright for automated extraction; otherwise relies on manual browser inspection data provided by the user. Does not bypass bot protection or authenticated areas.