AgentIndex icon
AgentIndex
ToolsMCP ServersHOTCategoriesTrendingNewBest ListsCompareGuides
Submit Tool
ToolsMCP ServersHOTCategoriesTrendingNewBest ListsCompareGuides
Home/
Dev Tooling/
design-extract
design-extract logo

design-extract

Active·★ 4.3k·MIT·Updated 2026-10-21

designlang (design-extract) crawls any website with a headless browser, extracts every computed style from the live DOM and generates 17+ output files, including an AI-optimised markdown file, a visual HTML preview and a Tailwind config. The README says that unlike other tools it also extracts layout patterns (grids, flexbox, containers), motion language (durations, easings, springs, scroll-linked animations) and component anatomy (slots, variants), not just colours and fonts.

Version 10, the Intent release, adds semantic signals an LLM needs to rebuild a site faithfully rather than restyle a generic scaffold; its first feature is a page-intent classifier that labels a URL as landing, pricing, docs, blog and similar. Usage is a single command, `npx designlang https://stripe.com`, or `--full` to get everything at once. The README is long (about 28,000 characters) with sections for each extraction area. The code is MIT licensed. Extracting another site's design may raise copyright or terms-of-use questions, so treat the output as reference.

Hands-on tested · Tested on 2026-10-10 with designlang 13.3.2.

Setup: macOS, Node via npx, run against https://agentindex.app

Commands run

npx -y [email protected] https://agentindex.app

What we saw

  • Ran in 13.7 seconds (27 seconds including the download) and produced more than 35 files; design score 84/100.
  • Its accessibility check flagged white text on our orange (#ff7a00) buttons at 2.61:1. We verified the ratio ourselves and fixed it by switching to dark text.
  • Some output was wrong or odd: it reported `canonical: null` although the live pages have a canonical tag, "Fonts: none detected" although we self-host Geist, and "78% unused CSS" (it only looks at one page).

Data as of 2026-10-18.

License
MIT
Latest release
v13.3.2 · 2026-09-23
Last commit
2026-10-08
Contributors
8
Forks
369
Open issues and PRs
25
First published
2026-04-15
npm package
designlang 13.3.2 · 544 downloads last week

Source: GitHub, npm and PyPI public APIs.

#accessibility#agent-skill#ai#chrome-extension#claude-code-plugin#cli#css#cursor
$ Install
$ npx designlang <url>
↗ Visit site★ GitHub
01

Features

01Comprehensive style extraction, including layout patterns, motion language, component anatomy, and brand voice.
02Generates over 17 diverse output files (e.g., AI-optimized markdown, Tailwind config, Figma variables, W3C design tokens).
03Advanced design analysis, including responsive behavior capture, interaction states, and WCAG accessibility scoring.
04AI-powered semantic extraction for page intent, section roles, visual DNA, and component library detection.
05Design system operations like drift-checking, visual diffing, multi-brand comparison, and live site token syncing.
02

Why choose it

+One `npx designlang <url>` command crawls a live site and produces 17+ files (markdown for AI, HTML preview, Tailwind config and more).
+Goes beyond colours and fonts: layout patterns, motion language and component anatomy.
+v10 adds a page-intent classifier (landing, pricing, docs, blog) to help an LLM rebuild a site faithfully.
+MIT licensed and updated within the last few days.
03

Trade-offs

!It extracts design from live sites with a headless browser, so results depend on how each site renders, and extracting another company's design raises copyright and terms-of-use questions.
!Its extraction depth is described by the project itself; check outputs against the real site before relying on them.
!The README is very long, with many feature areas and two major release write-ups, which makes it hard to see the core workflow.
04

Maintenance check

ActiveChecked: 2026-10-17
Last commit
2026-10-08
Commits, last 90 days
61
Releases, last 90 days
4
Latest release
v13.3.2 (2026-09-23)
Open issues
25
Recent issues with at least one comment
1/4
Commits per week, last 12 weeks
Commits per week, last 12 weeks: 0, 0, 0, 1, 10, 6, 3, 20, 9, 2, 2, 0

Oldest week on the left; the latest four weeks are orange. Source: GitHub commit activity.

Status rule: archived on GitHub = Archived; last commit within 90 days = Active; 91 to 365 days = Slowing; older = Stale. All figures come from the GitHub API on the date shown.

Most discussed open issues

  • #183 MCP spec conformance: 5 requirement(s) violated (via @hasmcp/mcp-spec-test) — spec 2025-11-250 comments · 2026-08-24
  • #182 MCP spec conformance: 10 requirement(s) violated (via @hasmcp/mcp-spec-test) — spec 2026-07-280 comments · 2026-08-24
  • #179 Want to add your plugin to awesome-ai-plugins?0 comments · 2026-08-22
  • #130 Proposal: vanilla `scroll-reveals` emitter (IntersectionObserver + CSS) to complement the motion emitters0 comments · 2026-06-01
  • #111 Add `--only <emitters>` and `--skip <emitters>` flags to extract0 comments · 2026-05-16

Issue titles are quoted from GitHub. Open the link to check whether a problem still applies to the version you use.

05

Compatibility

iOS
iOS SwiftUI
Verified via docs
Android
Android Compose
Verified via docs
Flutter
Flutter
Verified via docs
WordPress
WordPress Theme
Verified via docs
Tailwind CSS
Tailwind Config
Verified via docs
React
React Theme
Verified via docs
06

Quick start

1
$ npx designlang <url>
07

Use cases

↳Automate design system creation and maintenance by extracting complete design assets from live websites.
↳Monitor and ensure design consistency across projects or brands through drift-checking, visual diffing, and multi-brand comparisons.
↳Accelerate AI-powered frontend development by feeding LLMs structured design data and prompt packs for faithful site reconstruction.
08

Alternatives

⚡Top VS:
VSmarkplane★191→VSCodeMCP★110→VSopenaccountants★456→VS1c-mcp★210→
markplane logo
markplane★ 191
AI-native, markdown-first project management. Your repo is the project manager.
VSCompare→
CodeMCP logo
CodeMCP★ 110
Code intelligence for AI assistants - MCP server, CLI, and HTTP API with symbol navigation, impact analysis, and architecture mapping
VSCompare→
openaccountants logo
openaccountants★ 456
Open-source tax skills for AI — 371 skills across 134 countries. Upload to any LLM or connect via MCP. Quality-tiered Q1–Q5.
VSCompare→
1c-mcp logo
1c-mcp★ 210
Curated list of MCP servers for 1C:Enterprise ecosystem | Каталог MCP-серверов для экосистемы 1С:Предприятие
VSCompare→
pad logo
pad★ 195
Project Management for the agent era
VSCompare→
adbfriend logo
adbfriend★ 76
Android ADB CLI tool including integrated MCP Server with common adb actions used during development
VSCompare→
grainulator logo
grainulator★ 86
Research that compiles.
VSCompare→
nvim-mcp logo
nvim-mcp★ 65
MCP server that connects AI agents to your running Neovim instance via msgpack-RPC — no plugins required.
VSCompare→
See all alternatives →

Comments

Log in to leave a comment

No comments yet. Be the first!

On this page
01Features02Why choose it03Trade-offs04Maintenance check05Compatibility06Quick start07Use cases08Alternatives
Manavarya09 /
design-extract
↗

Crawls a live site and extracts its design system, layout, motion and component structure

4.3k369MIT
Last commit2d ago
StatusActive
CategoryDev Tooling
Contributors8
Latest releasev13.3.2
Links
Documentation↗Discussion↗Issues↗Releases↗
Cloud Infrastructure
Ad

Deploy on DigitalOcean

Host your MCP servers, Docker containers, and AI agents with $200 free credit over 60 days.

Claim $200 Free Credit
© 2026 AgentIndex.app|Built by a 10-year iOS Developer.
Best by use caseAboutContactAdvertisePrivacy PolicyTerms of UseQYSGitHubBuy me a coffee ☕

Browse by Category

MCP ServersCode AssistantWorkflow AutomationRAG / Knowledge BaseMulti-AgentBrowser AutomationLLM InfraDev ToolingObservability

Not affiliated with Anthropic, OpenAI or Microsoft.