design-system-analyzer

设计系统分析器

通过 ChromeDevTools 分析网站，提取深层 CSS 逻辑（关键帧、过渡效果、设计令牌），并生成全面的设计系统提示词。

关键规则

1. 必须严格按照 references/design-system-template.md 中的结构输出最终提示词
2. 必须限制提取数据，防止上下文溢出（限制请参阅 analysis-guide.md）
3. 必须使用提取或观察到的值填写所有模板占位符
4. 绝不跳过任何章节——数据不可用时，请使用“未观察到”

最佳实践：使用自己的 Chrome

为获得最佳体验（无需处理 CAPTCHA，共享登录 Cookie），建议用户使用以下命令运行 Chrome： chrome.exe --remote-debugging-port=9222 （详情请参阅 references/setup-guide.md）

---

工作流概览

[1. Navigate] → [2. Anti-Bot Check] → [3. Deep Extraction] → [4. Synthesize to Template]

重要：不要截图。截图会占用过多上下文，而且没有必要——所有视觉数据都从 CSS 中提取。

---

步骤 1：导航与反机器人检查

mcp__chrome-devtools__navigate_page (url: "<target-url>")

立即检查是否遇到机器人验证：

() => {
  const text = document.body.innerText.toLowerCase();
  const title = document.title.toLowerCase();
  if (text.includes('cloudflare') || text.includes('verify you are human') || title.includes('just a moment')) {
    return 'CHALLENGE_DETECTED';
  }
  return 'OK';
}

如果检测到验证挑战：

1. 暂停所有操作。
2. 告知用户：“检测到机器人防护。请在浏览器中手动完成 CAPTCHA，然后在此处确认。”
3. 等待用户确认后再继续。

---

步骤 2：深度 CSS 提取

按照 references/analysis-guide.md 中的顺序运行提取脚本：

顺序	脚本	用途	最大数量
1	CSS 变量与设计令牌	颜色、间距、排版变量	50 个设计令牌
2	动画与关键帧	@keyframes、动画用法、过渡效果	10 个关键帧、15 个过渡效果
3	交互状态	:hover、:focus、:active 规则	15 条规则
4	排版	关键元素的字体栈	7 个元素
5	布局与间距	边框圆角、间隙、阴影	各 5 个
6	技术栈	框架检测	-

重要：每个脚本都内置了限制。不要修改脚本以提取更多数据。

---

步骤 3：整合到模板

必须严格按照 references/design-system-template.md 中的模板结构生成输出。

模板映射表

提取的数据	模板章节	备注
tokens.colors	Design Token System > Colors	格式为表格
tokens.spacing	Spacing, Radius & Borders	包含圆角值
tokens.typography	Typography	包含字体栈
排版脚本	Typography > Font Stacks, Type Scale	计算后的样式
keyframes	Animation & Motion > Key Animations	完整关键帧定义
animationUsage	Animation & Motion > Timing	时长、缓动
transitions	Animation & Motion > Timing	常见模式
interactions	Component Styling > State Transitions	悬停/聚焦效果
布局采样器	Layout Principles	间距系统
技术栈	Implementation Notes	Tailwind/CSS 说明

输出格式检查清单

输出前，请确认以下所有章节均已包含：

• <role> 块（从模板原样复制）
• <design-system> 包装标签
• ## Design Philosophy，包含 Core Principles、Vibe、Historical Context
• ## Design Token System，包含 Colors 表格、Typography、Spacing
• ## Component Styling Principles，包含 Buttons、Cards、Form Inputs
• ## Layout Principles，包含 Spacing System、Grid、Responsive
• ## The "Signature" Factor，包含 3 个必需元素
• ## Animation & Motion，包含 Philosophy、Timing、Key Animations
• ## Accessibility Constraints
• ## Anti-Patterns，包含视觉和交互方面的禁忌
• ## Implementation Notes，包含针对具体技术的指导
• ## Aesthetic Checklist，包含 4 项验证内容
• 闭合标签 </design-system>

---

资源

• references/design-system-template.md：必需的输出模板
• references/analysis-guide.md：带上下文限制的深度提取脚本
• references/setup-guide.md：复用用户 Chrome 的指南