本SKILL是一个通用的跨行业网站页面设计风格提取工具，能够高保真地分析目标网站页面的设计风格，提取关键设计元素，输出指定页面完整的设计风格指南SKILL技能文档。
| 行业 | 设计特点 | 重点提取元素 |
|------|----------|-------------|
| 科技 | 现代、简约、科技感 | 品牌色、动效、代码高亮、图表样式 |
| 食品 | 温暖、食欲感、高清图片 | 暖色调、圆角、图片展示、价格标签 |
| 医疗 | 专业、可信、清洁 | 蓝绿色系、专业图标、信任元素 |
| 化工 | 工业、专业、安全 | 工业色调、安全标识、技术参数展示 |
| 教育 | 友好、清晰、易读 | 柔和色调、卡片布局、课程展示 |
| 政府 | 庄重、权威、规范 | 官方色调、规范布局、信息层级 |
| 建筑 | 现代、大气、专业 | 中性色调、大图展示、项目卡片 |
本SKILL（website-style-extractor）是工具型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 # 页面截图
绝对不允许使用通用模板或假设数据！
必须使用提取脚本获取真实数据！
所有设计元素必须来自以下来源之一：
在输出目标页面风格SKILL文件之前，必须验证：
目标：高保真获取目标页面的完整设计信息
脚本位置：webpage-style-extractor-py/scripts/extract_page_info.py
核心功能：
:hover 伪类样式变化
:active 伪类样式变化
:focus 和 :focus-visible 样式
@keyframes 动画定义
transition 属性
执行步骤：
前置条件：
set PYTHONIOENCODING=utf-8
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)"
# **必须** ：运行页面信息提取脚本，提取页面信息（包含交互效果）到目标目录
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
提取脚本会在输出目录下/output/path/的assets目录里生成提取的页面信息：
assets/page-info.json：完整的页面信息数据（包含交互效果）
assets/page-screenshot.png：页面截图
assets/extraction-summary.txt：提取摘要报告
extract_page_info.py 能够提取：
| 类别 | 提取内容 |
|------|----------|
| CSS变量 | 所有CSS自定义属性（--color-, --spacing-等） |
| 颜色系统 | 文本颜色、背景颜色、边框颜色、渐变色、主色调识别 |
| 排版系统 | 字体家族、字号、字重、行高 |
| 组件样式 | 按钮、卡片、输入框、导航组件、链接 |
| 布局信息 | 容器宽度、网格、间距 |
| 设计令牌 | 颜色令牌、间距令牌、圆角令牌、阴影令牌 |
| 交互元素 | 可交互元素列表（按钮、链接、卡片等） |
| 悬停效果 | :hover 伪类样式变化 |
| 点击效果 | :active 伪类样式变化 |
| 焦点效果 | :focus 和 :focus-visible 样式 |
| 动画效果 | @keyframes 动画定义和应用 |
| 过渡效果 | transition 属性详情 |
| 模拟悬停 | 实际触发悬停后的样式变化记录 |
| 模拟点击 | 实际触发点击后，按下态与点击后态样式变化记录 |
| 页面截图 | 完整页面截图 |
目标：识别页面所属行业，分析行业特定的设计特征
根据页面内容和设计风格，自动识别网站页面所属行业：
科技行业特征：
食品行业特征：
医疗行业特征：
化工行业特征：
教育行业特征：
政府行业特征：
建筑行业特征：
根据提取的数据，分析以下设计元素：
色彩系统分析：
排版系统分析：
组件样式分析：
布局与间距分析：
特效与交互分析：
目标：确保分析结果准确可靠
验证清单：
验证方法：
目标：输出结构化的目标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包含以上目录结构中所有文件，不得缺失。
---
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
## 组件样式
### 卡片组件
.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网格）
| 名称 | 值 | 应用场景 |
|------|-----|----------|
| xs | 4px | 紧凑间距 |
| sm | 8px | 小间距 |
| md | 16px | 标准间距 |
| lg | 24px | 大间距 |
| xl | 32px | 区块间距 |
| 2xl | 48px | 大区块间距 |
### 容器设置
.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）：
-）
bestblogs-design，则 name 也必须是 bestblogs-design）
目标：创建HTML验证页面，展示提取的设计风格
要求：
result_validation.html 文件
验证页面结构：
name：这是 SKILL.md 的 frontmatter.name 要求，使用 -design description：不超过200字符，包含行业信息
meta：包含行业标签
用户输入：
提取 https://examples.dev 的设计风格
执行流程：
用户输入：
提取 https://food-example.com 的设计风格
执行流程：
result_validation.html
页面提取脚本：
webpage-style-extractor-py/scripts/extract_page_info.py
使用方法：
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/。
不包含提取工具：
result_validation.html 验证设计风格准确性
重点提取：
特殊组件：
重点提取：
特殊组件：
重点提取：
特殊组件：
重点提取：
特殊组件：
重点提取：
特殊组件：
重点提取：
特殊组件：
重点提取：
特殊组件：
共 2 个版本