用途：从指定网站逆向还原其设计系统，输出一份可视化 HTML 设计文档（design_pattern.html），用于参考或复用其设计令牌与组件样式。
主要能力：Python 预处理脚本先做 HTML 清洗（移除 svg、path、script、noscript、iframe、style 标签及 base64 数据，仅保留结构标签与 CSS 类），再提取外部 CSS 中的 :root 变量、@font-face 与关键全局类，并检测 Tailwind 等工具类框架的间距、排版模式。随后分析颜色（品牌、黑白灰等分类）、字体（字族、字号、字重、行高、字距）、间距（基于 4px 单位）、容器宽度，并整理按钮、卡片、表单、导航等组件目录，以及图片、图标、动画、栅格与断点。
使用方式：进入技能目录下的 tools 文件夹，首次安装依赖后运行脚本。 cd .agents/skills/design-system-extractor/tools/ pip install -r requirements.txt python design_system_extractor.py <URL> 也可直接执行 pip install requests beautifulsoup4。脚本返回 JSON，再据此生成 HTML 文档。
适用场景：需要快速了解或复刻某网站设计规范、整理设计令牌与组件样式时。
限制：依赖 Python 3.x、requests、beautifulsoup4；对重度压缩且无 CSS 映射的站点只能依据数值模式与行业默认值推断；要求严格基于抓取数据，不得虚构颜色或字体，缺失信息以“Default”标注；生成文档需注入站点真实图片 URL，避免空占位符。版本 2.0.0，最后更新 2026-03-19。