design-extract

概述

design-extract 是一个强大的MCP服务器，可以直接从实时网站中读取设计系统，提取DTCG标记、Tailwind配置、Figma变量等。它超越了基本的设计提取，能够捕获布局模式、跨断点的响应式行为、交互状态、WCAG对比度分数和组件解剖结构。该服务器每次运行输出17个以上的文件，并能生成iOS SwiftUI、Android Compose和Flutter等多平台的代码。

试试问 AI

装完之后，这里有 7 个你可以让 AI 做的事：

• extract_design

  Extract design system from a website including colors, typography, spacing, components and more

  试试:Extract the design system from stripe.com试试:Get the design tokens and components from example.com
• clone_design

  Generate a working Next.js starter from extracted design

  试试:Clone the design from stripe.com into a Next.js project试试:Create a Next.js app with the design system from vercel.com
• grade_design

  Generate a shareable design report card with quality ratings

  试试:Grade the design quality of stripe.com试试:Create a design report card for vercel.com
• battle_designs

  Compare two designs head-to-head with detailed grading

  试试:Compare stripe.com and vercel.com designs试试:Battle the design systems of example.com and test.com
• remix_design

  Restyle a website in a different design vocabulary

  试试:Remix stripe.com in cyberpunk style试试:Apply brutalist design vocabulary to example.com
• extract_brand

  Create a comprehensive brand guidelines document

  试试:Extract full brand guidelines for stripe.com试试:Generate a brand book for vercel.com
• sync_design

  Update local design tokens from a live website

  试试:Sync design tokens from staging.example.com试试:Update local tokens with live site changes
• apply_design

  Apply extracted design directly to a project

  试试:Apply stripe.com design to my project试试:Write extracted tokens to my React app
• pack_design

  Bundle all outputs into a polished design system directory

  试试:Pack the extracted design from stripe.com试试:Create a complete design system package for example.com
• theme_swap

  Recolor the extracted design around a new brand primary

  试试:Swap to primary color #ff4800 for stripe.com试试:Apply new color palette to example.com design
• check_drift

  Detect design drift between local tokens and live site

  试试:Check for design drift on example.com试试:Compare local tokens with the live site
• lint_design

  Lint design tokens for issues and best practices

  试试:Lint the design tokens in my project试试:Check token files for issues

可对比工具

安装

# 全局安装
npm i -g designlang

# 作为代理技能安装
npx skills add Manavarya09/design-extract

# 直接运行MCP服务器
designlang mcp

{
  "mcpServers": {
    "design-extract": {
      "command": "npx",
      "args": ["designlang", "mcp"]
    }
  }
}

FAQ

它可以提取哪些设计系统？

design-extract可以从任何网站中提取DTCG标记、Tailwind配置、Figma变量、CSS自定义属性、组件解剖结构、运动标记、品牌声音等。

可以从需要认证的网站提取吗？

是的，它支持通过cookie(--cookie, --cookie-file)和自定义头(--header)进行身份验证，可以从受保护的页面中提取。

它支持哪些平台的代码生成？

它支持多个平台，包括iOS SwiftUI、Android Compose、Flutter、WordPress和通用web实现。

Hacker News 讨论

开发者社区最近的相关讨论。

• Extract any website's design system as AI-ready tokens (Claude plugin and CLI)▲ 2
  帖子 by manavarya09 · 2026-04-16

design-extract 对比