SearchBook a call

DESIGN ENGINEERING / Source

Design Extractor

A credit-based service that turns a website into DESIGN.md, with web, Chrome, and Model Context Protocol interfaces.

What it is

Design Extractor turns a public website address into a structured DESIGN.md for artificial intelligence (AI) coding agents. Unlike a static catalog, it runs a fresh extraction on the rendered page you supply. Its featured examples include Airbnb, IKEA, Notion, Railway, Shopify, and Stripe.

The service positions DESIGN.md as the design counterpart to README.md and AGENTS.md: plain text that people and agents can read, edit, and enforce. Among the DESIGN.md generators reviewed in this field guide, it is the one with a documented Model Context Protocol (MCP) server. An agent can request an extraction itself, instead of receiving a downloaded file or a catalog entry.

First principles

Moving extraction into an agent’s tool set changes who checks the result. When a person runs an extractor and pastes the file into a project, they see it first. When an agent calls the extractor during a session, the output can flow straight into generated code without anyone reading it.

The extraction has the same limits as any address-based generator. It works from one rendered page, and its documented output pairs tokens in YAML frontmatter with rationale in the Markdown body. Nothing in that documented format says which tokens were measured and which were inferred.

Put together, an agent-callable extractor raises the stakes on fidelity. The more automatic the path from extraction to code, the more the output needs a stated method and confidence. Pricing follows from the same mechanics: each extraction is fresh work on a live page, so each one is charged in credits.

Who is behind it

Design Extractor is attributed in its footer to Magentix Studio. The site lists info@design-extractor.com, privacy, terms, refunds, and imprint pages, and a 2026 copyright. The fetched homepage named no individual founder, GitHub repository, or social profile. Attribution beyond Magentix Studio is UNVERIFIED.

This is a small-studio product with a clear operating surface. The research did not establish its team size, extraction method, or support capacity.

Format and how an agent consumes it

The documented output combines YAML tokens and Markdown rationale. The docs use this example:

---
name: DevFocus Dark
colors:
  primary: "#2665fd"
  secondary: "#475569"
  surface: "#0b1326"
typography:
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
rounded:
  md: 8px
---

The body then supplies Overview, Colors, Typography, Layout & Spacing, Elevation & Depth, Shapes, Components, and Do’s and Don’ts. The example continues with concrete component guidance:

## Components
- **Buttons**: Rounded (8px), primary uses brand blue fill
- **Inputs**: 1px border, subtle surface-variant background
- **Cards**: No elevation, relies on border and background contrast

This is format documentation, not a verified live extraction. The service did not expose a real generated Stripe file during the research, so output fidelity is UNVERIFIED.

Agents have three routes. A person can paste an address into the web form. A Chrome extension can extract the open tab. Or an MCP client can connect to https://www.design-extractor.com/api/mcp with OAuth 2.1 or a dx_... application programming interface (API) key. The Codex setup is:

codex mcp add design-extractor --url https://www.design-extractor.com/api/mcp

The documented tools are get_pricing, get_credits, extract_design, get_extraction, and list_my_extractions. An agent can therefore request an extraction during a working session, instead of asking a person to copy a file between tools.

Pricing and access

The service sells non-expiring credits. A lite extraction costs 6 credits and a pro extraction costs 10. Starter contains 50 credits, Plus 110 with a 10% credit bonus, and Max 300 with a 20% bonus. The site says this covers up to 8 lite or 5 pro extractions for Starter; 18 or 11 for Plus; and 50 or 30 for Max. Paddle processes payment, and tax is calculated at checkout.

Exact dollar prices are UNVERIFIED. The static page showed loading placeholders, so price data was not available. The functional difference between lite and pro is also UNVERIFIED beyond their credit cost.

What works

The MCP surface is unusually concrete. It publishes an address, authentication choices, per-tool install instructions, and the actual tool names. The web form, extension, and MCP cover both human and agent workflows. The eight-section document structure is a usable shared vocabulary.

The credit model is also simple: no subscription, and credits never expire, so users can evaluate the tool without an ongoing commitment.

What does not

The most important unknown is quality. The public material shows a template, not a verifiable extraction of a known site. There is no free tier, and prices appear only through client-side scripts. Team and operator details are limited.

Any agent using this must treat a DESIGN.md result as an interpreted artifact until a fidelity method is published. “Pro” should not be presumed more accurate just because it costs more; that difference is UNVERIFIED.

What we take from it

Velofy could propose an MCP design with a small, explicit tool set such as extract, retrieve, and list, plus OAuth and API-key access and one-line setup. These are proposals only. Velofy has not shipped an MCP server, npm package, or extractor.

The improvement is transparency: show real extraction examples, explain the input evidence and method, and show prices without client-side checkout. A tool that supplies design context should make the confidence of that context inspectable.

Source ↗

← All design-engineering entries