jaraxuss/HTML 风格总结

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

通用分析要素

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

1. 背景样式

   • 背景颜色/渐变
   • 装饰性光晕效果

2. 布局结构

   • 页面整体框架
   • 内容区域划分
   • 栅格/分栏布局

3. 标题与文字

   • 标题层级与样式
   • 字体大小、字重、颜色
   • 文字装饰元素

4. 组件与卡片

   • 卡片类型与样式
   • 图标使用规范
   • 按钮/标签样式

5. 动画效果

   • 入场动画
   • 交互动画
   • 动画延迟规则

6. 特殊组件（根据页面内容）

   • 视频播放器
   • 工作流视图
   • 数据统计展示
   • 对比布局等

---

步骤 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 模板代码）

---

风格总结要求

每个总结文档必须包含：

1. 设计令牌 (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);
   

2. HTML 结构框架

   • 页面外壳结构
   • 内容区域划分
   • 响应式处理

3. CSS 类名约定

   • 使用 Tailwind CSS
   • 自定义类名规范

4. 动画约定

   • 入场动画
   • 交互动画
   • 动画延迟规则

5. 完整可复用代码片段

   • 可直接复制使用的 HTML 模板
   • 包含所有必要的 CSS 和引用

---

注意事项

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