AI Tool

Design Extractor

Turn any website into a DESIGN.md your AI coding agent can follow

FBy Fadel KaadanLaunched Oct 26, 2026 UTC1 comment

Overview

Design Extractor turns any website into a DESIGN.md: a Markdown design system with the site's colors, typography, spacing, radii, shadows and component rules, written for AI coding agents like Claude Code, Cursor and Codex.

Paste a URL on the web, grab the page you're on with the Chrome extension, or let your agent run the extraction itself through the MCP server or the Claude Code / Codex plugin.

Values are read from the live site's CSS and checked against screenshots, and the file follows Google's open DESIGN.md spec, so you drop it into your repo and every session builds on it.

Who is it for?

Developers, Indie Hackers, Founders, Designers, Agencies, Freelancers

Problem

AI coding agents build working apps that all look the same. If you want them to match a site you like, or a client's brand, your options are poor. You can paste a screenshot, and the agent guesses colors, fonts and spacing from pixels. You can copy hex codes out of DevTools by hand. Or you can pick from a catalog of 300 famous brands, which won't include the site you actually need. Whichever you choose, the reference is gone when the chat ends, so you start over next session.

Solution

Paste any URL and Design Extractor gives you a DESIGN.md: a structured Markdown design system with the site's colors, typography, spacing, radii, shadows and component rules, written for an agent to read. You drop it into your repo and every future session builds on it. You can also skip the browser entirely. With the MCP server or the Claude Code / Codex plugin, your agent extracts the site, waits for the result and applies the tokens to your codebase in one session. There's also a Chrome extension for grabbing the site you're looking at.

What makes it unique

- Any URL, not a catalog. It extracts the site you actually need, not just famous brands someone has already processed. - Values come from the live site. Tokens are read from the page's CSS and checked against screenshots, so nothing is guessed from pixels. - Built for agents. It follows Google's open DESIGN.md spec, and through the MCP server and plugin your agent can do the whole extract-and-apply loop itself. - Covers the whole site. It extracts the site's key pages, not just the one you paste. - Simple pricing. You buy credit packs once with no subscription, and a public gallery of finished extractions lets you see the output before you pay.

Screenshots

Screenshot 1 of 5

Features

1Paste any URL, get a DESIGN.md

2Colors, typography, spacing, radii, shadows and components

3Values read from the live CSS and checked against screenshots

4Component recipes compared against the original site

5MCP server and Claude Code / Codex plugin

6Chrome extension for the page you're on

7One-time credit packs, no subscription

Discussion (1)

F
Fadel Kaadan
Oct 26, 2026, 12:50 AM UTC
Hey there 👋 I'm Fadel, the builder behind Design Extractor. AI coding agents build working apps that all look the same. Design Extractor fixes that. Paste any public URL and you get a DESIGN.md: a Markdown design system with the site's colors, typography, spacing, radii, shadows and component rules, written for an agent to read. If you build with Claude Code, Cursor or Codex and want your UI to look designed instead of generic, this is for you. It also helps designers and agencies who need to match a reference site or a client's brand quickly. ✍️ Here's how to use it: - On the web: paste a URL, get the DESIGN.md, drop it into your repo. Every future session builds on it, so you don't start over when the chat ends. - From your agent: with the MCP server or the Claude Code / Codex plugin, your agent extracts the site, waits for the result and applies the tokens to your codebase in one session. - In Chrome: the extension grabs the design of the site you're looking at. Why Design Extractor: - Any URL, not a catalog: it extracts the site you actually need, not just famous brands someone has already processed. - Real values, not guesses: tokens are read from the live page's CSS and checked against screenshots, not guessed from pixels. - Built for agents: it follows Google's open DESIGN.md spec. - The whole site: it covers the site's key pages, not just the one you paste. - Simple pricing: one-time credit packs, no subscription. The public gallery shows finished extractions, so you can judge the output before you pay. 🚀 Try it at https://www.design-extractor.com/ I'd love to hear which sites you'd extract first, and what your agent gets wrong about design today. I'll be here answering every comment 🙏