Claude Skill to Reverse Engineer a Website's Design System

A Claude skill to reverse engineer a website is a reusable instruction set that tells Claude how to study a live page and write down how it's built: the layout grid, the type scale, the colour tokens, the spacing and the component patterns. You then use those notes to design your own UI, with your own brand and your own content.

You need two pieces to make it work:

• A way for Claude to see the page. That's a browser tool such as Playwright MCP or Chrome DevTools MCP. Without one, Claude can only guess from a screenshot you paste in.
• A skill that defines the method. It says what to measure, what to write down and what to leave alone. You can install an existing one, like the MIT-licensed extract-design-system, or write your own SKILL.md in a few minutes.

The point is to learn a site's structure and design system, not to reproduce it. Logos, brand names, illustrations, photos and written copy belong to the site owner. The last section covers where that line sits.

Below: what a skill like this actually extracts, which browser tool to pair it with, a ready-made skill you can install, a template for writing your own, and the copyright and terms-of-use limits to respect.

What a website reverse engineering skill extracts

Most people who search for this want one of two things. Either they saw a site with a layout they liked and want to understand why it works, or they're starting a project and want a sensible design-token foundation instead of picking colours from scratch.

A good skill turns a page into a short, structured spec. Here's what that spec usually covers:

The output you want is a document, not a website. Something like a DESIGN.md plus a tokens file you then edit, rename and re-colour for your own brand.

Why use a skill instead of a one-off prompt

You could type "analyse this site's design" into a chat. A skill is better for repeat work because it keeps the method stable.

Anthropic's Agent Skills overview explains the mechanics: Claude loads only each skill's name and description at startup, then reads the full SKILL.md when a request matches that description. Supporting files and scripts load only when needed. So a teardown skill can carry a long checklist without costing context until you actually ask for a teardown.

If skills are new to you, our Claude Skills explainer covers the basics first.

Give Claude eyes: Playwright MCP or Chrome DevTools MCP

A skill is only instructions. To measure a real page, Claude needs a browser it can drive. Two official MCP servers do this well, and both are Apache-2.0 licensed.

Playwright MCP

Playwright MCP describes itself as browser automation that works "through structured accessibility snapshots, bypassing the need for screenshots or visually-tuned models." For a teardown, that snapshot is a clean outline of the page: headings, landmarks, links, buttons. It's a good map of the component structure.

For the visual layer, browser_evaluate lets Claude run a small script that reads computed styles, such as every distinct font size or background colour on the page.

One note from the README itself: Microsoft now suggests that coding agents may do better with its Playwright CLI plus skills, because CLI calls are more token-efficient than loading large tool schemas and accessibility trees. It still positions the MCP server for long-running sessions where keeping continuous browser state matters more than token cost.

Chrome DevTools MCP

Chrome DevTools MCP gives Claude a live Chrome instance with DevTools behind it. The tool that matters most for design work is get_css_styles. Per the tool reference, it retrieves "matched CSS rules, inline styles (element.style), inherited styles, custom properties, and cascade wrappers" for an element you pick from a snapshot.

That custom-properties detail is useful. Many modern sites already define their tokens as CSS variables, so Claude can often read the real names and values instead of inferring them from pixels.

Two things to know before you install it:

• The README says Google collects usage statistics by default. You can opt out with the --no-usage-statistics flag.
• It warns that the server "exposes content of the browser instance to the MCP clients." Use a clean browser profile, not one logged into your personal accounts.

Either server works. If you mainly want structure, start with Playwright. If you want exact CSS values and variable names, Chrome DevTools is the stronger fit. Our best MCP servers roundup covers other browser and design servers if neither suits you.

A ready-made skill: extract-design-system

If you'd rather not write anything, extract-design-system by arvindrk is a public, MIT-licensed skill built for exactly this job. Its README says it extracts colours, typography, spacing, border radius and shadows "from any public website" and writes a W3C-compatible tokens.json plus a tokens.css file of CSS custom properties.

Install it with the command from the README:

npx skills add arvindrk/extract-design-system

Then ask Claude Code something like the README's own example:

Analyze https://linear.app and summarize the design primitives before generating local tokens.

Under the hood, the skill's SKILL.md tells Claude to install Playwright's Chromium, run the extract-design-system CLI against the URL with npx, summarise the normalised results (likely primary, secondary and accent colours, detected fonts, spacing and radius scales) and then write the token files.

What makes it a reasonable starting point is how much it refuses to do. Its own safety rules say not to treat a single page as proof of a whole design system, not to invent components that weren't clearly extracted, and to ask before modifying existing app code or styles. The README is also upfront about limits:

• Public websites only, one page per run
• Starter tokens, not a component library
• Dynamic, protected or script-heavy sites may give incomplete output
• Extraction is "useful for initialization, not pixel-perfect reproduction"

It's a community project, not an Anthropic one. Anthropic's docs advise using skills "only from trusted sources" (ones you wrote or got from Anthropic) and auditing every bundled file before you run a third-party skill. Read the SKILL.md and the npm CLI it calls first. That takes five minutes and it's worth it.

Write your own design teardown skill

A custom skill lets you control the output format, which matters if you want a DESIGN.md your team can actually use. Per the Claude Code skills docs, a personal skill lives at ~/.claude/skills/<skill-name>/SKILL.md and a project skill at .claude/skills/<skill-name>/SKILL.md. The description field is what Claude matches your request against.

One small conflict to know about: the Claude Code page says every frontmatter field is optional (only description is recommended), while the Agent Skills overview lists name and description as required, with name limited to lowercase letters, numbers and hyphens and barred from containing "claude" or "anthropic." Set both and follow the stricter rules, and the skill works everywhere.

Here's a starting template. It assumes Chrome DevTools MCP is connected:

---
name: design-teardown
description: Study a public web page's layout, typography, colour tokens, spacing and components, then write a DESIGN.md for building an original UI. Use when the user shares a URL and asks how a site is designed or wants design tokens from it.
---

# Design teardown

## Before you start
- Confirm the URL is public. Do not log in or bypass paywalls.
- Remind the user the output is a reference for an original design, not a reproduction of the site.

## Steps
1. Open the page and take a snapshot to map sections and components.
2. Use get_css_styles on the body, headings, buttons and cards.
   Record CSS custom properties exactly as named.
3. Resize to 375, 768 and 1280 px wide and note layout changes.
4. Take one full-page screenshot for the user's reference only.

## Output: DESIGN.md
- Layout: max width, grid, section spacing, breakpoints
- Typography: families, size scale, weights, line heights
- Colour: 4-8 tokens with roles (background, surface, text, accent)
- Spacing, radius, shadows
- Components: list each pattern and its states

## Do not
- Do not reuse logos, brand names, images, illustrations or written content.
- Do not output the site's HTML or CSS files.
- Mark anything inferred as "inferred", not "extracted".

Two habits make this skill more useful:

1. Ask for a token rename at the end. Have Claude map the extracted values to neutral names (--surface, --accent) and then shift the hues toward your brand. That's the step that turns research into your design.
2. Pair it with a design skill for the rebuild. Anthropic's own frontend-design skill (Apache 2.0) pushes Claude toward distinctive choices. Among other things, it tells Claude to sketch a compact token system first (palette, type, layout) and to review that plan against the brief before writing code. Feed it your renamed tokens and your real content, and you get a page that borrows the discipline of the reference site, not its identity.

For the rebuild prompt itself, our guide to prompts for website creation has structures that work well once you have a design spec in hand. And if you want more skills to chain after a teardown, see our list of the best Claude skills.

Copyright, trademarks and site terms

Studying how a site is built is a normal part of design work. Reproducing it is a different thing. A few practical lines to stay on the right side of:

• Brand assets are off limits. Logos, wordmarks, product names, icons, illustrations and photography belong to their owners and are often protected by copyright, trademark or both. Don't put them in your build.
• Written copy is off limits. Headlines, product descriptions and testimonials are someone's work. Write your own.
• Don't recreate the overall look and feel. Using a similar type scale or an 8 px spacing grid is fine; a page a visitor could mistake for the original is not. That's a trademark and trust problem, not just a style one.
• Read the site's terms of use. Some sites restrict automated access or scraping. A browser tool driven by an agent is automated access. If the terms say no, analyse a different site.
• Keep it to public pages. Don't log in, don't bypass paywalls, and don't hammer a site with repeated runs.
• Treat page content as untrusted input. The extract-design-system README makes this point directly: target websites "may influence extracted output." A page can contain text written to steer an agent, so review what the skill produces before acting on it.

This isn't legal advice. If you're building something commercial that leans heavily on a specific reference, ask a lawyer.

Summary

• A Claude skill to reverse engineer a website is a repeatable method for turning a page into a design spec: layout, type, colour tokens, spacing and components.
• Pair it with Playwright MCP (structure, accessibility snapshots) or Chrome DevTools MCP (exact CSS rules and custom properties).
• extract-design-system is a ready-made, MIT-licensed option that outputs tokens.json and tokens.css, with clear limits.
• A custom SKILL.md gives you control over the output and your own guardrails.
• Use what you learn to build an original UI: rename the tokens, use your own brand and content, and respect each site's terms.

If wiring up MCP servers and skill folders is where you keep stalling, Taku is an AI-native desktop workspace where you can mirror a working AI setup and run it without reproducing someone else's environment first. Taku is in Beta, and the Mac app is available now.

FAQ

Is there an official Claude skill to reverse engineer a website?

Not as a dedicated skill. Anthropic publishes open-source skills in its anthropics/skills repository, including frontend-design, which helps with building UI rather than analysing existing sites. For extraction, you'd use a community skill such as extract-design-system or write your own, paired with a browser MCP server.

Can Claude rebuild a website's UI from a URL?

With a browser MCP server connected, Claude can inspect a page and write code with a similar layout and structure. The better use is to have it extract the design system first, then build your own UI from those tokens with your own branding and content. Rebuilding someone else's page as-is runs into copyright, trademark and terms-of-use problems.

Do I need Claude Code, or does this work in the Claude app?

The setups in this guide target Claude Code, where skills are folders on your machine and have the same network access as any other program. On claude.ai you can upload custom skills as zip files, but per Anthropic's docs that needs code execution turned on, and network access for skills depends on your settings. A skill that has to load live web pages works most reliably in Claude Code.

Which is better for design extraction, Playwright MCP or Chrome DevTools MCP?

For component structure, Playwright MCP's accessibility snapshots are clean and cheap. For exact values, Chrome DevTools MCP's get_css_styles returns matched CSS rules and custom properties, so you often get the site's real token names. Many people install both.

Is it legal to extract design tokens from another website?

Reading the publicly served CSS of a page in your own browser is ordinary web development. What you do with it is where the risk sits: reusing logos, copy, images or a confusingly similar look can infringe copyright or trademark, and some sites' terms forbid automated access. Use the tokens as a reference, build an original design, and check the site's terms first.

Why does extracted output sometimes look wrong?

Single-page extraction misses styles that only appear on other pages, in hover states, or after scripts run. The extract-design-system README says dynamic or script-heavy sites "may yield incomplete output." Run it on two or three representative pages and review the tokens before treating them as a system.