HTML 风格总结 Skill

本 Skill 用于分析用户指定的 HTML 页面，进行风格总结，并输出可复用的 HTML 片段模板。

使用场景

当需要对一组具有相同风格的 HTML 页面进行总结时使用本 Skill，生成的风格总结可供后续创建新页面时参考。

输入参数

使用本 Skill 时，用户需要提供以下信息：

| 参数 | 必填 | 说明 | 示例 | |------|------|------|------| | 页面类型名称 | ✅ | 风格的分类名称 | 章节页、标准含视频详情页、一般详情页 等 | | 页面路径列表 | ✅ | 要分析的 HTML 页面相对路径（相对于项目根目录） | ./pages/custom/直播自动化.html | | 输出文件名 | ❌ | 总结文档的文件名（默认根据类型自动生成） | 01_章节页风格.md | | 风格描述 | ❌ | 对该类型页面的简要描述 | 用于内容分隔/过渡的极简设计页面 |

调用示例

请使用 HTML 风格总结 Skill，分析以下页面：
- 页面类型：章节页
- 页面列表：
  - ./pages/common/小试影刀.html
  - ./pages/common/QA.html
  - ./pages/common/从何开始.html
- 输出文件名：01_章节页风格.md
- 风格描述：用于作为内容分隔/过渡页面，以极简设计为主

步骤 1：启动本地服务

cd [project_root] && python3 -m http.server 8000

服务启动后，可通过 http://localhost:8000/ 访问项目文件。

步骤 2：逐个访问用户指定的页面并进行风格分析

根据用户提供的页面路径列表，依次访问每个页面进行分析。

访问方式

将用户提供的相对路径转换为 HTTP 访问地址：

./pages/xxx/页面名.html  →  http://localhost:8000/pages/xxx/页面名.html

通用分析要素

对每个页面，分析以下要素：

背景样式
- 背景颜色/渐变
- 装饰性光晕效果
布局结构
- 页面整体框架
- 内容区域划分
- 栅格/分栏布局
标题与文字
- 标题层级与样式
- 字体大小、字重、颜色
- 文字装饰元素
组件与卡片
- 卡片类型与样式
- 图标使用规范
- 按钮/标签样式
动画效果
- 入场动画
- 交互动画
- 动画延迟规则
特殊组件（根据页面内容）
- 视频播放器
- 工作流视图
- 数据统计展示
- 对比布局等

步骤 3：输出风格总结

分析完成后，根据用户指定的页面类型名称和输出文件名，将风格总结保存到 ./html_style_summary/ 目录。

输出文件命名规则

如果用户指定了输出文件名，直接使用该名称
如果未指定，则按格式 {序号}_{页面类型名称}风格.md 自动生成
- 例如：04_产品介绍页风格.md

输出文件路径

./html_style_summary/{输出文件名}.md

总结内容模板

每个风格总结文档应包含以下章节：

# {页面类型名称} 风格总结

## 概述
{用户提供的风格描述，或根据分析结果生成的描述}

## 分析的页面
- {页面1路径}
- {页面2路径}
- ...

## 1. 设计规范
（根据分析结果填写）
- 画布尺寸
- 背景色/渐变
- 品牌色
- 字体规范

## 2. 布局模板
（根据分析结果填写）
- 页面整体结构
- 内容区域划分
- 响应式处理

## 3. 组件清单
（根据页面实际包含的组件填写）
- 组件1：描述 + 样式规范
- 组件2：描述 + 样式规范
- ...

## 4. CSS 类名与样式约定
- 使用的 CSS 框架/方法
- 关键类名规范
- 设计令牌

## 5. 动画约定
- 入场动画
- 交互动画
- 动画延迟规则

## 6. 固化 HTML 片段
（完整的可复用 HTML 模板代码）

风格总结要求

每个总结文档必须包含：

设计令牌 (Design Tokens)

/* 关键颜色 */
--rpa-red: #C00000;
--bg-light: #F8F9FA;
--text-primary: #1F2937;
--text-secondary: #6B7280;

/* 关键间距 */
--page-padding: 48px (p-12);
--card-padding: 24px (p-6);

/* 关键圆角 */
--radius-card: 16px (rounded-2xl);
--radius-icon: 12px (rounded-xl);

HTML 结构框架
- 页面外壳结构
- 内容区域划分
- 响应式处理
CSS 类名约定
- 使用 Tailwind CSS
- 自定义类名规范
动画约定
- 入场动画
- 交互动画
- 动画延迟规则
完整可复用代码片段
- 可直接复制使用的 HTML 模板
- 包含所有必要的 CSS 和引用

注意事项

确保 Python HTTP 服务在后台运行
使用浏览器截图工具记录关键样式
所有输出使用 Markdown 格式
代码片段使用围栏代码块，标注语言类型
风格总结要具体、可操作，便于后续 Skill 直接使用