design-extract

一键提取网站完整设计系统，支持多种平台和工具。

MCP设计与多媒体开源

查看来源 →

形态: MCP
传输协议: stdio
是否开源: 是
GitHub Stars: ★ 3.3k
收录来源: mcp-github
仓库: github.com/Manavarya09/design-extract

能力说明

design-extract 是一个 MCP 服务器，通过一条命令即可从任何网站提取完整的 UI 设计系统。它能够生成 DTCG 令牌、语义+基本+复合组件，并支持多平台输出（如 iOS SwiftUI、Android Compose、Flutter 和 WordPress）。此外，它还提供 Tailwind v4 配置、Figma 变量、shadcn/ui、CSS 健康审计、WCAG 修复等功能。该工具适用于需要快速获取网站设计系统的开发者和设计师。

能力点

▪提取网站的完整设计系统
▪生成 DTCG 令牌
▪支持多平台输出
▪提供 Tailwind v4 配置
▪生成 Figma 变量
▪进行 CSS 健康审计

适用场景

快速提取网站的设计系统生成多平台的设计代码进行 CSS 健康检查生成 Figma 设计变量

接入方式

依赖：Node 20+

npx designlang <URL>

以上信息由 AI 基于公开资料整理，可能存在偏差，以来源为准。

常见问题

如何安装和使用 design-extract？

使用 npx designlang <URL> 命令即可安装并运行。

design-extract 支持哪些平台？

支持 iOS SwiftUI、Android Compose、Flutter 和 WordPress 等。

相关 Skill

video-shotcraft

AI 视频技能，用于制作电影级产品宣传视频。

Agent SkillAI 视频动态设计

manim_skill

为 Manim 提供创建 3Blue1Brown 风格动画的 Agent 技能。

drawio-skill

从自然语言生成 draw.io 图表，支持多种预设和导出格式。

ui-ux-pro-max-skill-cn

为 AI 编码助手提供专业级 UI/UX 设计智能。

claude-skill-aso-appstore-screenshots

生成高质量的App Store截图，提升应用下载率。

palmier-pro

为AI构建的macOS视频编辑器，支持生成和编辑视频。