AgentIndex icon
AgentIndex
工具MCP 服务HOT分类热门最新选型清单对比指南
提交工具
工具MCP 服务HOT分类热门最新选型清单对比
首页/
开发者工具/
design-extract
design-extract logo

design-extract

活跃·★ 4.3k·MIT·更新于 2026-10-21

designlang(design-extract)用无头浏览器抓取任意网站,从线上 DOM 中提取每一个计算样式,并生成 17 个以上的输出文件,包括面向 AI 优化的 markdown 文件、可视化 HTML 预览和 Tailwind 配置。README 说它与其他工具不同,不只提取颜色和字体,还提取布局模式(网格、flexbox、容器)、动效语言(时长、缓动、弹簧、滚动联动动画)和组件结构(插槽、变体)。

第 10 版(Intent 版本)加入了 LLM 要想忠实地重建网站、而不是给通用脚手架换个样式所需的语义信号;第一个功能是页面意图分类器,把 URL 标成落地页、价格页、文档、博客等。使用方式是一条命令 `npx designlang https://stripe.com`,或加 `--full` 一次得到全部内容。README 很长(约 2.8 万字符),按各个提取领域分节。代码采用 MIT 许可证。提取他人网站的设计可能涉及版权或使用条款问题,应当把输出仅作为参考。

已实际试用 · 2026-10-10 使用 designlang 13.3.2 试用。

环境: macOS,通过 npx 运行,目标页面为 https://agentindex.app

执行的命令

npx -y [email protected] https://agentindex.app
© 2026 AgentIndex.app|由十年 iOS 开发者构建。
按场景挑选关于我们联系我们广告合作隐私政策使用条款QYSGitHub请作者喝咖啡 ☕

按分类浏览

MCP 服务器代码助手工作流自动化RAG / 知识库多智能体浏览器自动化大模型基础设施开发者工具可观测性

与 Anthropic, OpenAI 或 Microsoft 无关。

指南

实际结果

  • 运行 13.7 秒(含下载 27 秒),生成 35 个以上的文件;设计评分 84/100。
  • 它的无障碍检查指出我们橙色(#ff7a00)按钮上的白字对比度只有 2.61:1。我们自己算过确认属实,并改成了深色文字。
  • 部分输出有误或不准:线上页面明明有 canonical 却报告 `canonical: null`;我们自托管了 Geist 字体却显示“Fonts: none detected”;“78% 未使用 CSS”只基于单个页面。

数据截至 2026-10-18。

许可证
MIT
最新发布
v13.3.2 · 2026-09-23
最近提交
2026-10-08
贡献者
8
复刻数
369
未关闭的 issue 和 PR
25
首次发布
2026-04-15
npm 包
designlang 13.3.2 · 544 上周下载

来源:GitHub、npm 和 PyPI 的公开接口。

#accessibility#agent-skill#人工智能#chrome-extension#Claude Code 插件#命令行工具#CSS#Cursor
$ 安装
$ npx designlang <url>
↗ 访问官网★ GitHub
01

功能特性

01全面样式提取,包括布局模式、动效语言、组件结构和品牌声音。
02生成超过 17 种多样化的输出文件(例如,AI 优化 Markdown、Tailwind 配置、Figma 变量、W3C 设计令牌)。
03高级设计分析,包括响应式行为捕获、交互状态记录和 WCAG 可访问性评分。
04赋能 AI 的语义提取,用于页面意图、区域角色、视觉 DNA 和组件库检测。
05设计系统操作,如代码库与实时网站的漂移检查、两URL视觉差异对比、多品牌比较和实时站点令牌同步。
02

为什么选择它

+一条 `npx designlang <url>` 命令就能抓取线上网站,并生成 17 个以上的文件(面向 AI 的 markdown、HTML 预览、Tailwind 配置等)。
+不止颜色和字体:还有布局模式、动效语言和组件结构。
+v10 加入页面意图分类器(落地页、价格页、文档、博客),帮助 LLM 更忠实地重建网站。
+采用 MIT 许可证,最近几天内有更新。
03

权衡点

!它用无头浏览器从线上网站提取设计,结果取决于各个网站的渲染方式,提取其他公司的设计也涉及版权和使用条款问题。
!提取的深度是项目自己的描述,依赖之前请把输出与真实网站对照检查。
!README 很长,有很多功能领域和两次重大版本的说明,不容易看出核心流程。
04

维护状况检查

活跃检查日期: 2026-10-22
最近提交
2026-10-21
近 90 天提交数
68
近 90 天发布数
4
最新发布
v13.3.2 (2026-09-23)
未关闭 issue
24
近期 issue 至少有一条评论的比例
3/4
近 12 周每周提交数
近 12 周每周提交数: 0, 0, 1, 10, 6, 3, 20, 9, 2, 2, 0, 6

最早的一周在左边,最近 4 周为橙色。数据来源:GitHub 提交统计。

状态规则:GitHub 上已归档 = 已归档;最近提交在 90 天内 = 活跃;91 到 365 天 = 放缓;更久 = 停滞。所有数字来自所示日期的 GitHub API。

讨论最多的未关闭 issue

05

兼容性

iOS
iOS SwiftUI
已通过文档验证
Android
Android Compose
已通过文档验证
Flutter
Flutter
已通过文档验证
WordPress
WordPress 主题
已通过文档验证
Tailwind CSS
Tailwind 配置
已通过文档验证
React
React 主题
已通过文档验证
06

快速开始

1
$ npx designlang <url>
07

使用场景

↳通过从实时网站提取完整设计资产,自动化设计系统的创建和维护。
↳通过漂移检查、视觉差异对比和多品牌比较,监控并确保项目或品牌之间的设计一致性。
↳通过向大型语言模型(LLMs)提供结构化的设计数据和提示包,加速 AI 驱动的前端开发以实现逼真的网站重建。
08

同类工具

⚡热门对决:
VSmarkplane★191→VSCodeMCP★110→VSopenaccountants★457→

评论

登录后发表评论

暂无评论,来发表第一条吧

本页内容
01功能特性02为什么选择它03权衡点04维护状况检查05兼容性06快速开始
  • #108 Add `--quiet` / `-q` flag (suppress all non-error output)2 条评论 · 2026-05-16
  • #183 MCP spec conformance: 5 requirement(s) violated (via @hasmcp/mcp-spec-test) — spec 2025-11-251 条评论 · 2026-08-24
  • #182 MCP spec conformance: 10 requirement(s) violated (via @hasmcp/mcp-spec-test) — spec 2026-07-281 条评论 · 2026-08-24
  • #179 Want to add your plugin to awesome-ai-plugins?0 条评论 · 2026-08-22
  • #130 Proposal: vanilla `scroll-reveals` emitter (IntersectionObserver + CSS) to complement the motion emitters0 条评论 · 2026-06-01
  • issue 标题引自 GitHub。请打开链接确认该问题是否仍适用于你使用的版本。

    VS
    1c-mcp
    ★212
    →
    markplane logo
    markplane★ 191
    在你仓库中的项目管理,专为AI协作构建。
    VS对比→
    CodeMCP logo
    CodeMCP★ 110
    CKB 是一个代码知识后端,能将代码库转化为可查询的知识库,帮助开发者理解、分析并安全地修改代码。
    VS对比→
    openaccountants logo
    openaccountants★ 457
    为AI提供的开源税务计算技能,覆盖134个国家的371项技能。
    VS对比→
    1c-mcp logo
    1c-mcp★ 212
    1C:Предприятие 生态系统中 MCP 服务器的精选目录。
    VS对比→
    pad logo
    pad★ 195
    面向AI时代的项目管理工具。
    VS对比→
    adbfriend logo
    adbfriend★ 76
    ADB Friend 是一个小巧的 CLI 工具,帮助您通过 ADB 管理 Android 设备。
    VS对比→
    grainulator logo
    grainulator★ 86
    提出一个问题,获得经过多轮调查、带有类型化主张、矛盾检测和置信度评分的答案。
    VS对比→
    nvim-mcp logo
    nvim-mcp★ 66
    一个MCP服务器,让AI代理无需插件即可直接访问运行中的Neovim会话。
    VS对比→
    查看全部替代品 →
    07
    使用场景
    08同类工具
    Manavarya09 /
    design-extract
    ↗

    抓取线上网站,提取其设计系统、布局、动效和组件结构

    4.3k369MIT
    最后更新2天前
    状态活跃
    分类开发者工具
    贡献者8
    最新发布v13.3.2
    链接
    文档↗讨论↗问题↗版本↗
    推荐云部署
    Ad

    在 DigitalOcean 上一键部署

    为你的 MCP 服务、Docker 容器与智能体提供即开即用云服务器,新用户立享 $200 免费额度(60天有效)。

    立即领取 $200 免费额度