C — Moderate risk signals Graded October 16, 2026Several concerns worth a closer look before you install.Based on public adoption and transparency signals as of October 16, 2026. Our opinion, not a code audit or security guarantee.

AI agent skill · Developer tools, Web & browsing

design-extract

Extract any website's complete design system with one command. DTCG tokens, semantic+primitive+composite, MCP server for Claude Code/Cursor/Windsurf, multi-platform emitters (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation, Chrome extension. MIT, Playwright, Node 20+.

Bottom line: Signal-based grade (3/7 points): well starred on GitHub, public source code. This reflects adoption and transparency, not a code review.

Popularity score: 41/100
Rank: #302 of 500
GitHub stars: 4.2k

What it does

design-extract automatically captures a website's complete design system—including DTCG tokens, semantic/primitive/composite components, and CSS—and converts it into multiple platform formats (iOS SwiftUI, Android Compose, Flutter, WordPress, Tailwind v4, Figma variables, shadcn/ui). It runs as an MCP server compatible with Claude Code, Cursor, and Windsurf, plus includes a Chrome extension and CSS health audit with WCAG remediation suggestions.

Who it’s for

Frontend engineers, design systems leads, and AI builders who need to rapidly extract and port design systems across platforms or audit CSS compliance. Best suited for teams integrating design workflows into AI agent pipelines or standardizing component libraries at scale.

Copy-paste setup

Check these steps against the project’s own instructions before running anything.

Verify against the repo README at https://github.com/Manavarya09/design-extract (opens external site) for the latest MCP configuration. Likely installation:

bash

npm install design-extract
# or for Claude Desktop mcpServers config:
# Add to ~/.config/Claude/claude_desktop_config.json:
{
  "mcpServers": {
    "design-extract": {
      "command": "npx",
      "args": ["design-extract"]
    }
  }
}

Requires Node 20+. Chrome extension installable from the repo releases.

Risks

Credential & API key exposure: MCP server may require auth tokens for Figma/design platform APIs; ensure credentials are scoped narrowly and rotated regularly.
Prompt injection via scraped content: Extracted design tokens and CSS could contain malicious input that influences downstream code generation if not validated.
Data exfiltration of proprietary design systems: Scraping websites may capture confidential or licensed design IP; verify legal compliance before extracting third-party sites.
Supply chain trust: 0 weekly npm downloads suggests low production adoption; maintenance and security patches may lag behind popular alternatives.
Playwright browser automation risk: Uses headless Chrome to crawl sites; could be blocked, rate-limited, or misused for unauthorized scraping if not paired with robots.txt/legal review.

How to stay secure

Least-privilege permissions

Limit API credentials: Only grant the tool access to specific design platforms (Figma, etc.) it needs. Use separate login credentials for this tool that don't have admin rights or access to other systems.
Rotate access keys monthly: Treat design platform passwords like you would banking passwords—change them regularly and never reuse them elsewhere.
Restrict output destinations: Control where extracted designs are saved (e.g., one secure folder) rather than allowing the tool to write files anywhere on your system.

Network isolation

Run behind a firewall: Keep the tool on an internal network separated from public internet when possible; if it must access external sites, use a VPN or proxy server.
Block unintended outbound traffic: Configure your network to prevent the tool from sending data anywhere except the design platforms you've approved.
Review robots.txt compliance: Before scraping any website, verify you have legal permission and the site's robots.txt file doesn't forbid automated access (crawling competitors' sites without permission can create legal liability).

Monitoring

Log all extraction activity: Record what websites were scraped, what data was pulled, and when—review these logs weekly for suspicious activity.
Alert on large downloads: Set up notifications if the tool suddenly extracts unusually large amounts of data, which could indicate a mistake or misuse.
Audit generated code before use: Always review the CSS and code the tool produces before deploying it to check for hidden or malicious commands inserted during scraping.

Red flags to watch for

Extracting competitors' or partners' sites without explicit permission: This risks legal disputes over intellectual property theft.
Tool attempting to access credentials or files outside design platforms: Stop execution immediately if it tries to access email, cloud storage, or other sensitive systems.
Sudden spike in network traffic or API usage: Could indicate the tool is being misused to scrape sites at scale or exfiltrate data.
Code generation output containing suspicious patterns: Watch for embedded URLs, encoded commands, or unusual JavaScript that wasn't part of the design system you extracted.

Alternatives

Penpot (opens external site) – Open-source design tool with native API and token export, better for collaborative design system management.
Storybook (opens external site) – Component library and documentation standard; integrates with design tools via plugins but requires manual setup.
Zeroheight (opens external site) – Commercial design system documentation platform with multi-platform component sync.
Figma Tokens plugin (opens external site) – Native Figma integration for token extraction and multi-platform code generation.

Sources

github.com/Manavarya09/design-extract