网站页面设计风格提取器

功能概述

本SKILL是一个通用的跨行业网站页面设计风格提取工具，能够高保真地分析目标网站页面的设计风格，提取关键设计元素，输出指定页面完整的设计风格指南SKILL技能文档。

更多信息参阅

核心特性

• ✅ 跨行业支持：针对科技、食品、医疗、化工、教育、政府、建筑等行业优化
• ✅ 高保真提取：精确提取色彩、字体、组件、布局等设计元素
• ✅ 优先使用Playwright脚本：内置提取工具，直接获取页面信息
• ✅ 智能行业识别：自动识别行业特征和设计模式
• ✅ 交互效果提取：悬停、点击、焦点、动画效果完整提取
• ✅ 真实点击交互采样：采集按下态（active）与点击后态（clicked）样式变化，避免仅依赖静态CSS规则
• ✅ 完整输出：输出目标页面风格的SKILL文件、验证页面

适用行业

架构说明

工具型SKILL vs 输出目标SKILL

本SKILL（website-style-extractor）是工具型SKILL：
- 包含提取脚本和工具
- 用于提取指定网站页面的页面信息
- 作为通用提取工具存在

输出的结果：目标页面风格SKILL文件：
- 直接包含提取好的风格元素数据
- 不包含提取脚本
- 作为最终设计风格指南SKILL文件使用

目录结构对比

工具型SKILL（本SKILL）：

webpage-style-extractor-py/
  ├── SKILL.md                              # 工具使用说明
  └── scripts/                              # 提取工具（工具型SKILL特有）
      └── extract_page_info.py              # 页面信息提取脚本（含交互采样 + 详细中文注释）

输出目标页面风格SKILL：
最终输出的SKILL应包含以下目录文件：

<site-name>-design/
  ├── SKILL.md                   # 设计风格指南（直接包含风格元素）
  ├── README.md                  # 项目说明
  ├── result_validation.html     # 验证页面
  └── assets/                    # 提取的数据（不含脚本）
      ├── page-info.json         # 页面信息数据
      ├── extraction-summary       # 页面提取信息摘要
      └── page-screenshot.png    # 页面截图

⚠️ 重要警告：必须使用真实数据

🚫 禁止行为

绝对不允许使用通用模板或假设数据！

• ❌ 不要使用通用的科技蓝色（#2563EB）作为主色调
• ❌ 不要假设使用Inter字体
• ❌ 不要使用通用的布局模板
• ❌ 不要猜测颜色值、字体、间距等设计元素

✅ 正确做法

必须使用提取脚本获取真实数据！

1. 运行提取脚本：必须使用页面信息提取脚本获取真实页面信息
2. 验证数据准确性：对比提取结果与原始页面截图
3. 使用真实数据：所有颜色、字体、布局必须来自提取结果
4. 高保真复制：确保输出的SKILL与原始页面完全一致

📋 数据来源要求

所有设计元素必须来自以下来源之一：

1. CSS变量提取：从页面提取的CSS自定义属性
2. 计算样式提取：从实际元素获取的计算样式
3. 颜色频率分析：基于页面实际使用的颜色统计
4. 组件样式提取：从实际组件获取的样式信息

🔍 验证清单

在输出目标页面风格SKILL文件之前，必须验证：

• [ ] 是否运行了页面信息提取脚本？
• [ ] 是否获取了真实的颜色值？
• [ ] 是否获取了真实的字体信息？
• [ ] 是否获取了真实的布局数据？
• [ ] 是否对比了原始页面截图？
• [ ] 是否确认了主色调的准确性？

工作流程

第一步：使用工具型SKILL提取页面信息

目标：高保真获取目标页面的完整设计信息

页面信息提取脚本

脚本位置：webpage-style-extractor-py/scripts/extract_page_info.py

核心功能：
- ✅ 所有基础功能（颜色、字体、组件、布局）
- ✅ 悬停效果提取：自动识别 :hover 伪类样式变化
- ✅ 点击效果提取：自动识别 :active 伪类样式变化
- ✅ 真实点击采样：对元素执行按下/抬起操作，捕获真实点击过程中的样式变化
- ✅ 焦点效果提取：自动识别 :focus 和 :focus-visible 样式
- ✅ 动画效果提取：提取 @keyframes 动画定义
- ✅ 过渡效果提取：提取 transition 属性
- ✅ 模拟交互：实际触发悬停与点击事件，捕获真实样式变化
- ✅ 安全点击模式：自动阻止默认跳转，降低采集中断风险
- ✅ 详细中文注释：代码内提供流程、方法和关键逻辑说明，便于二次维护

执行步骤：
前置条件：
- 必须安装python。
- windows系统使用cmd终端操作，并设置默认为utf8编码set PYTHONIOENCODING=utf-8
- linux/mac系统使用bash终端操作

1. 安装依赖

pip install playwright==1.58.0
playwright install chromium

#验证chromium安装成功，则输出chrome路径
python -c "from playwright.sync_api import sync_playwright; p = sync_playwright().start(); print(p.chromium.executable_path)"

2. 运行页面信息获取脚本

# **必须** ：运行页面信息提取脚本，提取页面信息（包含交互效果）到目标目录
python webpage-style-extractor-py/scripts/extract_page_info.py --url https://target-site.com --output_dir /output/path/<site-name>-design

额外说明：
如果系统存在uv环境，则可以执行以下命令安装依赖以及执行页面信息提取脚本（无需单独安装python，使用uv工具即可）：

uv venv 
.venv\Scripts\activate
uv pip install playwright==1.58.0
playwright install chromium

#验证chromium安装成功，则输出chrome路径
python -c "from playwright.sync_api import sync_playwright; p = sync_playwright().start(); print(p.chromium.executable_path)"

#  **必须** ：运行页面信息提取脚本获取页面信息，必须的步骤
uv run webpage-style-extractor-py/scripts/extract_page_info.py --url https://target-site.com --output_dir /output/path/<site-name>-design

3. 查看目标页面提取摘要

提取脚本会在输出目录下/output/path/<site-name>-design/的assets目录里生成提取的页面信息：
- assets/page-info.json：完整的页面信息数据（包含交互效果）
- assets/page-screenshot.png：页面截图
- assets/extraction-summary.txt：提取摘要报告

脚本功能说明

extract_page_info.py 能够提取：

第二步：行业特征识别与设计风格分析

目标：识别页面所属行业，分析行业特定的设计特征

2.1 行业特征识别

根据页面内容和设计风格，自动识别网站页面所属行业：

科技行业特征：
- 品牌色：蓝色、紫色、渐变色
- 字体：Inter、SF Pro、Roboto等现代字体
- 元素：代码块、图表、动效、3D效果
- 布局：卡片式、网格布局、大量留白

食品行业特征：
- 品牌色：橙色、红色、黄色、绿色
- 字体：圆润字体、手写体
- 元素：高清食物图片、价格标签、评分
- 布局：大图展示、卡片式、网格布局

医疗行业特征：
- 品牌色：蓝色、绿色、白色
- 字体：专业字体、清晰易读
- 元素：医疗图标、信任徽章、医生照片
- 布局：信息层级清晰、专业感强

化工行业特征：
- 品牌色：蓝色、灰色、工业色
- 字体：技术字体、规范字体
- 元素：化学结构图、安全标识、技术参数
- 布局：表格展示、参数列表

教育行业特征：
- 品牌色：蓝色、绿色、橙色
- 字体：友好字体、易读字体
- 元素：课程卡片、教师照片、进度条
- 布局：卡片式、列表式、网格布局

政府行业特征：
- 品牌色：红色、蓝色、金色
- 字体：宋体、黑体、规范字体
- 元素：国徽、政府标识、新闻列表
- 布局：规范布局、信息层级清晰

建筑行业特征：
- 品牌色：灰色、黑色、蓝色
- 字体：现代字体、专业字体
- 元素：建筑效果图、项目卡片、团队照片
- 布局：大图展示、项目列表、网格布局

2.2 设计风格系统分析

根据提取的数据，分析以下设计元素：

色彩系统分析：
- 主色调：提取使用频率最高的颜色
- 辅助色：提取次要颜色
- 文字颜色：提取标题、正文、链接颜色
- 强调色：提取CTA按钮、高亮颜色
- 渐变色：提取所有渐变效果
- 功能色：提取成功、错误、警告状态色

排版系统分析：
- 字体家族：提取主字体、辅助字体
- 字号层级：提取H1-H6、正文、辅助文字字号
- 字重：提取不同文本类型的字重
- 行高：提取不同文本类型的行高
- 段落间距：提取段落间距规律

组件样式分析：
- 卡片组件：背景、边框、圆角、阴影、内边距
- 按钮组件：尺寸、颜色、圆角、悬停状态
- 表单组件：输入框、选择器样式
- 导航组件：导航栏、标签页样式
- 标签组件：徽章、标签样式

布局与间距分析：
- 网格系统：列数、列宽、槽宽
- 断点设置：响应式断点
- 间距系统：外边距、内边距规律
- 容器宽度：最大宽度、居中方式

特效与交互分析：
- 过渡效果：动画时长、缓动函数
- 悬停效果：颜色变化、阴影变化
- 点击效果：按压状态
- 滚动效果：视差、渐入动画
- 交互效果：悬停样式变化、点击样式变化、焦点样式变化
- 动画效果：@keyframes 动画定义、动画属性
- 过渡效果：transition 属性、时长、缓动函数

第三步：反思与验证

目标：确保分析结果准确可靠

验证清单：

1. 一致性检查
   - [ ] 提取的颜色值是否与页面实际颜色一致？
   - [ ] 字体信息是否准确反映了页面使用的字体？
   - [ ] 布局描述是否与页面结构匹配？
   - [ ] 组件样式是否完整覆盖了主要组件？

2. 真实性检查
   - [ ] 所有分析内容是否基于实际页面元素？
   - [ ] 是否存在编造或推测的设计元素？
   - [ ] 颜色值、字体名称是否从实际CSS中提取？

3. 行业特征检查
   - [ ] 是否识别了网站页面所属行业？
   - [ ] 是否提取了行业特有的设计元素？
   - [ ] 是否符合行业设计规范？

4. 完整性检查
   - [ ] 是否遗漏了重要的设计元素？
   - [ ] 是否分析了所有主要组件？
   - [ ] 响应式设计是否被充分考虑？

验证方法：
1. 对比截图与分析结果，确认视觉一致性
2. 检查提取的JSON数据文件，验证样式提取的准确性
3. 如发现不一致，重新分析相关部分

第四步：输出目标页面风格SKILL文件

目标：输出结构化的目标SKILL文件，直接包含风格元素数据

重要原则：
- 输出的SKILL直接包含提取好的风格元素
- 不包含提取脚本（脚本仅在工具型SKILL中）
- 所有数据已固化，可直接使用

输出SKILL目录结构

<site-name>-design/               # 输出的SKILL目录名，要与SKILL.md中的name一致。
  ├── SKILL.md                    # 必需：设计风格指南（直接包含风格元素）
  ├── README.md                   # 项目说明文档
  ├── result_validation.html      # 验证页面（必需）
  └── assets/                     # 资源目录（提取的数据）
      ├── page-info.json          # 页面信息数据
      ├── extraction-summary        # 页面提取信息摘要
      └── page-screenshot.png     # 页面截图

注意：输出的目标SKILL不包含scripts目录，因为所有数据已经提取完成。并确保最终输出SKILL包含以上目录结构中所有文件，不得缺失。

输出的目标SKILL.md 内容模板

---
name: <site-name>-design
description: 提取并应用<网站页面名称>的设计风格与配色方案，适用于<行业类型>网站页面设计。包含完整的色彩系统、排版规范、组件样式和布局指南。
meta:
  - "industry: <行业>"
  - "category: <类型>"
---

# <网站页面名称> 设计风格指南

## 概述

<网站页面整体设计风格的简要描述，包括设计定位、视觉特点、行业特征>

**行业定位**：<所属行业>
**设计风格**：<现代/经典/简约/复杂>
**核心特点**：<3-5个核心设计特点>

## 色彩系统

### 主色调

**品牌主色**：`#XXXXXX` (RGB: R, G, B)
- 用于：<应用场景>
- 传达：<情感含义>
- 行业特征：<是否符合行业色彩规范>

### 辅助色

**次要颜色**：
- `#XXXXXX` - <颜色名称>，用于<应用场景>
- `#XXXXXX` - <颜色名称>，用于<应用场景>

### 文字颜色

**文本色系**：
- 标题：`#XXXXXX` - <应用场景>
- 正文：`#XXXXXX` - <应用场景>
- 辅助文本：`#XXXXXX` - <应用场景>
- 链接：`#XXXXXX` - <应用场景>

### 强调色与功能色

**强调色**：
- CTA按钮：`#XXXXXX`
- 高亮：`#XXXXXX`

**功能色**：
- 成功：`#10B981`
- 错误：`#EF4444`
- 警告：`#F59E0B`
- 信息：`#3B82F6`

### 渐变色

<渐变效果的详细描述，包括渐变方向、颜色值>

## 排版系统

### 字体家族

**主字体**：<字体名称>
- CSS: `font-family: <字体栈>;`
- 后备字体：<后备字体>

**辅助字体**：<字体名称>
- 用于：<应用场景>

### 字号层级

| 层级 | 字号 | 行高 | 字重 | 应用场景 |
|------|------|------|------|----------|
| H1 | 48px | 1.2 | 700 | 页面主标题 |
| H2 | 36px | 1.25 | 700 | 区块标题 |
| H3 | 24px | 1.3 | 600 | 小节标题 |
| H4 | 20px | 1.4 | 600 | 卡片标题 |
| 正文 | 16px | 1.6 | 400 | 段落文本 |
| 小字 | 14px | 1.5 | 400 | 辅助信息 |

### 字重与行高

**字重规范**：
- 粗体（700）：标题、强调
- 中等（500）：副标题、按钮
- 常规（400）：正文、描述

**行高规范**：
- 标题：1.2-1.3
- 正文：1.6-1.8
- 紧凑文本：1.4-1.5

## 组件样式

### 卡片组件

```css
.card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 24px;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

按钮组件

主按钮：

.btn-primary {
  background: #2563EB;
  color: #FFFFFF;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 500;
}

.btn-primary:hover {
  background: #1D4ED8;
}

次要按钮：

.btn-secondary {
  background: transparent;
  color: #475569;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 12px 24px;
}

表单组件

<输入框、选择器、复选框的样式>

导航组件

<导航栏、标签页、面包屑的样式>

其他组件

<标签、列表、模态框等组件样式>

布局与间距

网格系统

桌面端：12列，列宽自适应，槽宽24px
平板端：8列，槽宽16px
移动端：4列，槽宽12px

断点设置

• 移动端：< 640px
• 平板端：640px - 1023px
• 桌面端：≥ 1024px
• 大屏：≥ 1280px

间距系统（基于8px网格）

容器设置

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 640px) {
  .container {
    padding: 0 16px;
  }
}

特效与交互

过渡效果

/* 默认过渡 */
transition: all 0.2s ease-in-out;

/* 快速过渡 */
transition: all 0.15s ease;

/* 慢速过渡 */
transition: all 0.3s ease-in-out;

悬停效果

• 按钮：背景色加深10%，向上偏移-2px
• 卡片：阴影增强，轻微缩放(1.02)
• 链接：下划线淡入

点击效果

• 按钮：向下偏移1px，背景色再加深5%
• 卡片：轻微缩放(0.98)

行业特色设计

<行业>特有元素

<根据识别的行业，列出行业特有的设计元素>

行业色彩规范：
<行业常用的色彩规范>

行业组件：
<行业特有的组件样式>

行业布局特点：
<行业特有的布局方式>

使用建议

适用场景

• ✅ <适用场景1>
• ✅ <适用场景2>
• ✅ <适用场景3>

避免场景

• ❌ <避免场景1>
• ❌ <避免场景2>

最佳实践

1. <最佳实践1>
2. <最佳实践2>
3. <最佳实践3>

CSS变量参考

:root {
  /* 颜色 */
  --color-primary: #2563EB;
  --color-secondary: #64748B;
  --color-text-primary: #1E293B;
  --color-text-secondary: #475569;

  /* 间距 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* 圆角 */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* 阴影 */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);

  /* 过渡 */
  --transition-base: 0.2s ease-in-out;
}

设计原则总结

1. <原则1>：<说明>
2. <原则2>：<说明>
3. <原则3>：<说明>

最后更新时间：<日期>
版本：1.0.0
行业：<所属行业>

`SKILL.md` 的 `frontmatter.name` 字段格式强约束（仅适用于 `SKILL.md`）：
- 必须使用 kebab-case（仅小写字母、数字、连字符 `-`）
- 不允许空格和大写字母
- 必须与输出目录名完全一致（例如目录是 `bestblogs-design`，则 `name` 也必须是 `bestblogs-design`）

### 第五步：输出验证页面

**目标**：创建HTML验证页面，展示提取的设计风格

**要求**：
- 必须生成 `result_validation.html` 文件
- 包含所有提取的设计元素
- 可直接在浏览器中打开验证
- 包含色彩系统、排版系统、组件样式的实际展示

**验证页面结构**：
1. 导航栏
2. Hero区域
3. 色彩系统展示
4. 排版系统展示
5. 组件样式展示
6. 布局与间距展示
7. 行业特色元素展示
8. 底部区域

## 输出要求

### 格式规范

1. **目录结构**：严格遵循Anthropic SKILL格式
2. **文件命名**：使用小写字母和连字符
3. **frontmatter**：
   - `name`：这是 `SKILL.md` 的 `frontmatter.name` 要求，使用 `<site-name>-design` 格式，且必须满足：
     - kebab-case only
     - No spaces or capitals
     - Should match folder name
   - `description`：不超过200字符，包含行业信息
   - `meta`：包含行业标签
4. **内容结构**：严格遵循模板结构
5. **语言**：使用中文编写，保持专业术语的准确性

### 内容要求

1. **准确性**：所有设计参数必须基于实际页面分析，不得编造
2. **完整性**：覆盖色彩、排版、组件、布局、交互等主要方面
3. **行业性**：识别并突出行业特征
4. **实用性**：提供具体的数值、代码示例，便于直接应用
5. **可读性**：使用清晰的层级结构和表格呈现信息

## 使用示例

### 示例1：科技行业网站页面

**用户输入**：

提取 https://examples.dev 的设计风格

**执行流程**：
1. 使用SKILL内置脚本提取页面信息
2. 识别为科技行业
3. 分析科技行业特征（品牌蓝、现代字体、卡片布局）
4. 生成完整的设计风格指南
5. 创建验证页面

### 示例2：食品行业网站页面

**用户输入**：

提取 https://food-example.com 的设计风格

**执行流程**：
1. 使用SKILL内置脚本提取页面信息
2. 识别为食品行业
3. 分析食品行业特征（暖色调、圆角、高清图片）
4. 生成设计风格指南
5. 创建验证页面

## 注意事项

### 分析边界
- 仅分析公开可见的设计元素
- 不分析需要登录才能访问的内容
- 尊重网站页面的版权和知识产权

### 技术限制
- 对于重度依赖JavaScript渲染的网站页面，需要等待动态内容加载
- 某些CSS变量和计算值需要额外分析
- 响应式设计需要在多个断点下分析

### 质量保证
- 使用SKILL内置的提取脚本获取数据
- 始终进行反思验证步骤
- 对比截图与分析结果
- 如发现不一致，及时修正
- **必须生成验证页面** `result_validation.html`

## 工具依赖

### 工具型SKILL（本SKILL）的内置工具

**页面提取脚本**：
- 位置：`webpage-style-extractor-py/scripts/extract_page_info.py`
- 功能：提取CSS变量、颜色、字体、组件、布局、设计令牌、交互效果（含真实点击采样）
- 用途：提取任意网站页面的页面信息
- 注释：脚本包含详细中文注释，便于阅读与二次开发

**使用方法**：
```bash
cd webpage-style-extractor-py/scripts
pip install playwright==1.58.0
playwright install chromium
python extract_page_info.py --url https://target-site.com --output_dir /output/path/<site-name>-design

参数说明：
- --url：必填，目标页面地址。
- --output_dir：可选，输出目录；未指定时默认输出到当前工作目录下的 output/。

输出的目标SKILL文件

不包含提取工具：
- 输出的目标SKILL已包含提取好的风格元素数据
- 无需再次运行提取脚本
- 直接使用SKILL.md中的设计指南即可

最佳实践

工具型SKILL使用

1. 使用内置脚本：使用工具型SKILL内置的提取脚本获取数据
2. 识别行业特征：根据行业特点优化分析重点
3. 系统化分析：按照工作流程顺序执行，不跳过任何步骤
4. 数据驱动：所有结论基于实际提取的数据，避免主观判断

最终目标SKILL生成

5. 固化数据：将提取的风格元素直接写入SKILL.md
6. 不包含脚本：输出的目标页面风格SKILL不需要包含提取脚本
7. 完整可用：输出的SKILL应可直接使用，无需额外工具

质量保证

8. 反思验证：完成分析后必须进行验证，确保准确性
9. 清晰输出：使用表格、代码块等格式化元素，提高可读性
10. 实用导向：提供可直接使用的代码示例和应用建议
11. 生成验证页面：必须创建 result_validation.html 验证设计风格准确性

行业优化指南

科技行业优化

重点提取：
- 品牌色和渐变色
- 代码块样式
- 图表和数据可视化
- 动效和交互
- 技术文档排版

特殊组件：
- 代码高亮
- API文档
- 技术标签
- 版本号展示

食品行业优化

重点提取：
- 暖色调系统
- 高清图片展示
- 价格和评分组件
- 菜单卡片样式
- 订购按钮

特殊组件：
- 食物卡片
- 评分星级
- 价格标签
- 营养信息

医疗行业优化

重点提取：
- 专业色调（蓝绿色系）
- 信任元素
- 医生信息展示
- 预约按钮
- 医疗图标

特殊组件：
- 医生卡片
- 科室导航
- 预约表单
- 健康提示

化工行业优化

重点提取：
- 工业色调
- 技术参数展示
- 安全标识
- 产品规格
- 技术文档

特殊组件：
- 产品参数表
- 安全标识
- 技术规格
- 化学结构图

教育行业优化

重点提取：
- 柔和色调
- 课程卡片
- 进度展示
- 教师信息
- 学习路径

特殊组件：
- 课程卡片
- 进度条
- 教师卡片
- 学习路径

政府行业优化

重点提取：
- 官方色调
- 规范布局
- 信息层级
- 新闻列表
- 服务导航

特殊组件：
- 新闻列表
- 服务导航
- 政策文件
- 办事指南

建筑行业优化

重点提取：
- 中性色调
- 大图展示
- 项目卡片
- 团队展示
- 技术参数

特殊组件：
- 项目卡片
- 效果图展示
- 团队卡片
- 技术参数