design-system-analyzer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Design System Analyzer

设计系统分析器

Analyze websites via ChromeDevTools to extract deep CSS logic (keyframes, transitions, tokens) and generate comprehensive Design System System Prompts.

通过ChromeDevTools分析网站，提取深层CSS逻辑（keyframes、transitions、tokens）并生成完整的设计系统提示词。

Critical Rules

核心规则

MUST output the final prompt using EXACTLY the structure in
```
references/design-system-template.md
```
MUST limit extraction data to prevent context overflow (see analysis-guide.md for limits)
MUST fill ALL template placeholders with extracted or observed values
NEVER skip sections - use "Not observed" if data unavailable

必须严格按照
```
references/design-system-template.md
```
中的结构输出最终提示词
必须限制提取的数据量，避免上下文溢出（详见analysis-guide.md中的限制说明）
必须用提取或观察到的值填充所有模板占位符
绝对不能跳过任何章节——若数据不可用，填写“未观测到”

Best Practice: Use Your Own Chrome

最佳实践：使用本地Chrome浏览器

For the best experience (no CAPTCHAs, shared login cookies), advise the user to run Chrome with:

chrome.exe --remote-debugging-port=9222

(See references/setup-guide.md for details)

为获得最佳体验（无验证码、共享登录Cookie），建议用户通过以下命令启动Chrome：

chrome.exe --remote-debugging-port=9222

（详情请查看**references/setup-guide.md**）

Workflow Overview

工作流程概览

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

IMPORTANT: Do NOT take screenshots. Screenshots consume excessive context and are unnecessary - all visual data is extracted from CSS.

[1. 导航] → [2. 反机器人检测] → [3. 深度提取] → [4. 合成模板]

重要提示：请勿截取屏幕截图。截图会占用过多上下文且无必要——所有视觉数据均可从CSS中提取。

Step 1: Navigate & Anti-Bot Check

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

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

Immediately check for bot challenges:

javascript

() => {
  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';
}

IF CHALLENGE_DETECTED:

PAUSE all actions.
Tell the user: "Bot protection detected. Please manually solve the CAPTCHA in the browser, then confirm here."
Wait for user confirmation before proceeding.

mcp__chrome-devtools__navigate_page (url: "<目标网址>")

立即检测机器人验证挑战：

javascript

() => {
  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';
}

若检测到CHALLENGE_DETECTED:

暂停所有操作。
告知用户：“检测到反机器人验证，请在浏览器中手动完成验证码验证，然后在此确认。”
等待用户确认后再继续。

Step 2: Deep CSS Extraction

步骤2：深度CSS提取

Run the extraction scripts from

references/analysis-guide.md

in order:

Order	Script	Purpose	Max Items
1	CSS Variables & Tokens	Colors, spacing, typography variables	50 tokens
2	Animation & Keyframes	@keyframes, animation usage, transitions	10 KF, 15 trans
3	Interaction States	:hover, :focus, :active rules	15 rules
4	Typography	Font stacks from key elements	7 elements
5	Layout & Spacing	Border radius, gaps, shadows	5 each
6	Tech Stack	Framework detection	-

IMPORTANT: Each script has built-in limits. Do NOT modify to extract more data.

按顺序运行

references/analysis-guide.md

中的提取脚本：

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

重要提示：每个脚本都有内置限制，请勿修改以提取更多数据。

Step 3: Synthesize to Template

步骤3：合成模板

MANDATORY: Generate output using EXACTLY the template structure from

references/design-system-template.md

强制要求：严格按照

references/design-system-template.md

中的模板结构生成输出。

Template Mapping Table

模板映射表

Extracted Data	Template Section	Notes
`tokens.colors`	`Design Token System > Colors`	Format as table
`tokens.spacing`	`Spacing, Radius & Borders`	Include radius values
`tokens.typography`	`Typography`	Include font stacks
Typography script	`Typography > Font Stacks, Type Scale`	Computed styles
`keyframes`	`Animation & Motion > Key Animations`	Full keyframe definitions
`animationUsage`	`Animation & Motion > Timing`	Duration, easing
`transitions`	`Animation & Motion > Timing`	Common patterns
`interactions`	`Component Styling > State Transitions`	Hover/focus effects
Layout sampler	`Layout Principles`	Spacing system
Tech stack	`Implementation Notes`	Tailwind/CSS notes

提取的数据	模板章节	说明
`tokens.colors`	`设计令牌系统 > 颜色`	以表格格式呈现
`tokens.spacing`	`间距、圆角与边框`	包含圆角值
`tokens.typography`	`排版`	包含字体栈
排版脚本	`排版 > 字体栈、字号层级`	计算后的样式
`keyframes`	`动画与动效 > 关键动画`	完整的关键帧定义
`animationUsage`	`动画与动效 > 时序`	时长、缓动效果
`transitions`	`动画与动效 > 时序`	常见模式
`interactions`	`组件样式 > 状态过渡`	悬停/聚焦效果
布局采样	`布局原则`	间距系统
技术栈	`实现说明`	Tailwind/CSS相关说明

Output Format Checklist

输出格式检查清单

Before outputting, verify ALL these sections are present:

```
<role>
```
block (copy exactly from template)
```
<design-system>
```
wrapper
```
## Design Philosophy
```
with Core Principles, Vibe, Historical Context
```
## Design Token System
```
with Colors table, Typography, Spacing
```
## Component Styling Principles
```
with Buttons, Cards, Form Inputs
```
## Layout Principles
```
with Spacing System, Grid, Responsive
```
## The "Signature" Factor
```
with 3 mandatory elements
```
## Animation & Motion
```
with Philosophy, Timing, Key Animations
```
## Accessibility Constraints
```
```
## Anti-Patterns
```
with Visual and Interaction no-nos
```
## Implementation Notes
```
with tech-specific guidance
```
## Aesthetic Checklist
```
with 4 verification items
Closing
```
</design-system>
```

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

```
<role>
```
块（严格复制模板内容）
```
<design-system>
```
包裹标签
```
## 设计理念
```
包含核心原则、风格基调、历史背景
```
## 设计令牌系统
```
包含颜色表格、排版、间距
```
## 组件样式原则
```
包含按钮、卡片、表单输入框
```
## 布局原则
```
包含间距系统、网格、响应式设计
```
## “标志性”要素
```
包含3个必填元素
```
## 动画与动效
```
包含设计理念、时序、关键动画
```
## 无障碍约束
```
```
## 反模式
```
包含视觉与交互禁忌
```
## 实现说明
```
包含技术特定指导
```
## 美学检查清单
```
包含4个验证项
结尾的
```
</design-system>
```
标签

Resources

资源

references/design-system-template.md: The REQUIRED output template
references/analysis-guide.md: Deep extraction scripts with context limits
references/setup-guide.md: Guide for reusing user's Chrome

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