website to design system
by nowrich
Extracts design tokens and components from live URLs into a DESIGN.md with Tailwind v4 and CSS variables.
Secure checkout via Stripe
Works with the AI tools you already use
See it in action
You say
Extract the design system from https://stripe.com and save it to DESIGN.md. Focus on their typography and color palette for Tailwind v4.
Your agent does
Extracted design tokens from Stripe. Generated DESIGN.md featuring:
- 12 semantic color tokens (e.g., --color-action-primary)
- Typography scale (5 levels) with oklch() support
- Tailwind CSS v4 @theme block
- Spacing scale derived from container gutters.
What you get
About this skill
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.
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
Creator
22 skills on Agensi
Frequently Asked Questions
Popular in Branding & Design
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.
professional svg logo builder
Hand-authored, production-ready SVG logos verified across dark mode and favicon scales.
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
nex-brand-identity
Generate professional design tokens, brand guides, and social templates with a signature hex-grid aesthetic.