design-extract
活跃·★ 3.0k·MIT·更新于 2026-05-28
★ 宝藏工具★ 开发者工具★ API 集成
一个通过无头浏览器抓取网站、提取实时DOM计算样式并生成多种设计资产的工具。
designlang 是一款独特的工具，它通过无头浏览器抓取任何网站，从实时 DOM 中提取全面的计算样式、布局模式、动效语言、组件结构和品牌声音。它能生成超过 17 种不同的输出文件，包括 AI 优化的 Markdown、Tailwind 配置、React 主题和 Figma 变量，从而实现对网站视觉 DNA 的精确捕获和转换。用户可以利用它进行设计系统评分、将代码库与实时网站进行漂移检查，以及对多个 URL 或品牌进行视觉比较。
#accessibility#agent-skill#人工智能#chrome-extension#Claude Code 插件#命令行工具#CSS#Cursor
01
功能特性
01全面样式提取，包括布局模式、动效语言、组件结构和品牌声音。
02生成超过 17 种多样化的输出文件（例如，AI 优化 Markdown、Tailwind 配置、Figma 变量、W3C 设计令牌）。
03高级设计分析，包括响应式行为捕获、交互状态记录和 WCAG 可访问性评分。
04赋能 AI 的语义提取，用于页面意图、区域角色、视觉 DNA 和组件库检测。
05设计系统操作，如代码库与实时网站的漂移检查、两URL视觉差异对比、多品牌比较和实时站点令牌同步。
02
兼容性
iOS
iOS SwiftUI
已通过文档验证
Android
Android Compose
已通过文档验证
Flutter
Flutter
已通过文档验证
WordPress
WordPress 主题
已通过文档验证
Tailwind CSS
Tailwind 配置
已通过文档验证
React
React 主题
已通过文档验证
03
快速开始
1
$ npx designlang <url>
04
使用场景
↳通过从实时网站提取完整设计资产，自动化设计系统的创建和维护。
↳通过漂移检查、视觉差异对比和多品牌比较，监控并确保项目或品牌之间的设计一致性。
↳通过向大型语言模型（LLMs）提供结构化的设计数据和提示包，加速 AI 驱动的前端开发以实现逼真的网站重建。
05
同类工具
相关搜索
评论
登录后发表评论
- JJustice Davis2026年5月14日
Good for design engineers doing competitive analysis or design system audits.
- Jordan Rivera2026年5月12日
Extract complete design systems from any website with one command is impressive.
- RReese Clark2026年4月19日
Semantic extraction goes beyond raw CSS to understand design intent.
- CCorey White2026年4月7日
DTCG token output means you can immediately use the extracted design in your own system.