用途：从可访问的网站（公开 URL 或本地 localhost）逆向还原一套设计系统，产出可复用的设计令牌与截图参考。
主要能力：分两遍执行。第一遍用 web_fetch 抓取并解析样式表，获取声明的值（媒体查询断点、关键帧动画、带回退的自定义属性等）；第二遍用有头 Playwright 浏览站点、与元素交互、提取计算样式，并按真实设备分辨率截图。脚本会从约 800 个采样元素提取 CSS 自定义属性与计算颜色，采集 h1-h6、p、a、button 等语义元素的排版信息，测量间距、圆角、阴影与边框，在 4 个断点（Mobile iPhone 15 393×659 3x、Tablet iPad Pro 11 834×1194 2x、Desktop 1440×900 2x、Wide 1920×1080 2x）截图每个页面，隔离并截图 17 种常见组件，捕获悬停与聚焦状态，在 iPhone 视口点击汉堡类按钮测试移动导航，并通过 prefers-color-scheme 模拟与开关嗅探检测深色模式。
使用方式：需先安装 Playwright（npx playwright install chromium）并具备 web_fetch 工具。运行：node scripts/extract.mjs <url> [outDir] [subpage1,subpage2,...]，例如 node scripts/extract.mjs https://example.com ./my-tokens "/about,/pricing,/docs"。输出目录含 screenshots/pages、screenshots/components 与 raw/（colors.json、colors-dark.json、typography.json、spacing.json、components.json）。随后人工整理为 tokens.json，可选通过 pi-penpot 生成 Penpot 项目，或映射为带 CSS 自定义属性的 Tailwind 配置。
适用场景：需要快速了解某站点设计规范、为迁移或重建准备令牌、为设计工具播种基础样式时。
限制：脚本以有头模式运行，需人工观察以处理 Cookie 横幅、登录墙与弹窗；提取结果需人工去重与归类，避免过度提取；深色模式、Penpot 与 Tailwind 步骤均为可选，且依赖相应工具；具体收费、平台支持范围与效果资料暂未提供。