为已有网站创建分类页设计 Skill 完整指南

你是一名信息架构师。请分析以下网站，输出结构报告：

网站：[URL 或截图]

请完成：
1. **导航层级**：列出一级、二级、三级导航项
2. **内容类型**：识别站点包含哪些内容实体（文章、产品、课程、案例等）
3. **分类维度**：内容按哪些维度分类（标签、行业、时间、价格区间等）
4. **页面类型清单**：
   - 首页
   - 列表/分类页（本次重点）
   - 详情页
   - 搜索结果页
   - 其他（落地页、关于页等）
5. **分类页现状**：当前分类页采用哪种布局（网格、列表、瀑布流、筛选侧边栏）？存在哪些体验问题？

输出格式为结构化 Markdown，包含小结和改进建议。

你是一名资深 UI 设计师。请从以下网站截图/代码中提取设计 Token：

输入：[截图 / CSS 文件 / Figma 链接]

提取维度：
- **色彩系统**：主色、辅助色、背景色、文字色、边框色、状态色（hover/active/disabled）
- **字体系统**：字体族、标题字号阶梯（H1~H4）、正文字号、行高、字重
- **间距系统**：基础单位（4px/8px/10px？）、常用间距值
- **圆角规范**：按钮/卡片/标签的圆角半径
- **阴影规范**：卡片阴影、弹层阴影的 box-shadow 值
- **组件风格关键词**：用 5 个形容词描述整体视觉调性

最终输出一份 CSS Variables 草稿，命名规范为 --color-primary、--spacing-md 等。

请为 [行业/产品类型] 网站的分类页，提供 3 种不同布局方向的参考分析：

方向 A：筛选侧边栏 + 卡片网格
方向 B：顶部 Tab 切换 + 瀑布流
方向 C：全屏沉浸式分类导航（大图入口）

对每种方向，说明：
- 适合的内容密度（稀疏/密集）
- 用户决策路径
- 技术复杂度（低/中/高）
- 代表性网站案例

最终推荐最适合 [当前站点特征] 的方向，并说明原因。

基于以下设计 Token，生成一份「分类页设计约束文档」，供后续 AI 生成页面时严格遵守：

[粘贴提示词2的输出结果]

约束文档需包含：

## 禁止事项（Hard Rules）
- 不允许使用的颜色值（与品牌色冲突的色系）
- 不允许使用的字体（与现有字体栈不兼容的选择）
- 不允许的布局打破点（哪些设计决策会破坏整体一致性）

## 必须遵守事项（Must Rules）
- 卡片必须使用的样式规格
- 分类标签的统一写法
- 空状态（无结果）的处理方式
- 加载状态的动画规范

## 推荐惯例（Conventions）
- 图片比例（16:9、1:1、3:2？）
- 分页 vs 无限滚动的选择依据
- 移动端断点策略

输出为可直接粘贴进 SKILL.md 的 Markdown 格式。

我将提供一个新设计的分类页 HTML/JSX 片段。请对照以下设计规范进行一致性审查：

规范文档：[粘贴约束文档]

新设计片段：
[粘贴代码]

请输出：
1. ✅ 符合规范的部分（列举）
2. ⚠️ 存在偏差的部分（说明偏差点和修改建议）
3. ❌ 严重违反规范的部分（必须修改）

最后给出 0-100 的「风格一致性评分」及改进后的完整代码。

你是一名精通品牌一致性的前端工程师。请为以下站点生成「分类页」完整代码。

## 站点背景
- 站点类型：[电商/内容/SaaS/教育/媒体]
- 目标用户：[描述用户画像]
- 分类页作用：[帮助用户筛选XXX，找到XXX]

## 设计约束（严格遵守）
[粘贴提示词4的输出]

## 本次分类页规格
- 分类维度：[一级分类：X个；二级分类：可选]
- 每页展示卡片数：[12/24/36]
- 筛选方式：[侧边栏/顶部/无]
- 排序选项：[最新/最热/价格/推荐]
- 是否支持多选筛选：[是/否]
- 空状态设计：[需要/沿用现有]

## 技术要求
- 框架：[React/Vue/原生HTML]
- 是否使用 Tailwind：[是/否]
- 响应式断点：[移动优先，sm:640px / md:768px / lg:1024px]
- 动画：[轻微过渡即可 / 丰富微交互]

## 输出要求
1. 完整可运行的代码文件
2. 关键设计决策说明（3-5条）
3. 与现有页面风格的一致性说明

请先列出你的设计思路，再输出代码。

请单独生成「分类页卡片组件」，需与以下现有卡片组件保持视觉一致：

现有卡片代码：
[粘贴现有卡片代码]

新卡片需要展示的字段：
- 必填：[标题、分类标签、封面图]
- 选填：[描述摘要、发布时间、作者、价格、评分]
- 状态标记：[新品/热门/限时/售罄]

设计要求：
- hover 交互效果与现有卡片保持一致
- 图片加载失败的降级处理
- 移动端单列，平板双列，桌面三列/四列

输出：
1. 卡片组件代码（含 Props 类型定义）
2. 使用示例
3. 变体说明（正常态/骨架屏/错误态）

为分类页生成筛选器组件，要求：

筛选项配置：
[
  { label: "分类", type: "radio", options: ["全部", "A类", "B类", "C类"] },
  { label: "标签", type: "checkbox", options: ["标签1", "标签2", "标签3"] },
  { label: "价格", type: "range", min: 0, max: 1000 },
  { label: "排序", type: "select", options: ["最新", "最热", "价格升序"] }
]

行为要求：
- 选中状态清晰可见
- 支持「重置全部筛选」
- 已选筛选项在顶部以 Tag 形式展示，可单独删除
- 移动端折叠为底部弹出抽屉

设计约束：与现有表单/按钮风格保持一致
[粘贴设计 Token]

输出完整组件代码 + 状态管理逻辑。

---
name: category-page-designer
description: >
  为已有网站生成与品牌风格高度一致的分类/列表页。
  当用户需要新增分类页、重设计列表页、或为现有站点扩展
  频道页/搜索结果页时触发本 Skill。包含站点风格自动提取、
  设计约束注入、响应式组件生成全流程。
---

# Category Page Designer Skill

## 触发场景
- 用户说「帮我做一个分类页」「新建一个列表页」
- 用户上传了现有页面截图，要求「保持风格一致地新建XXX页」
- 用户提供了设计稿，要求转为代码

## 执行流程

### Step 1 — 信息收集
运行「站点结构诊断」提示词，收集：
- 站点类型和目标用户
- 现有设计 Token（色彩/字体/间距）
- 分类页的具体规格需求

### Step 2 — 设计约束提取
将收集到的设计 Token 转为「设计约束文档」，
注入后续所有生成步骤。

### Step 3 — 组件生成
按以下顺序生成：
1. 分类页主框架（布局 + 路由结构）
2. 筛选器组件
3. 卡片列表组件
4. 空状态 / 加载状态 / 错误状态

### Step 4 — 一致性校验
使用「风格一致性审查」提示词，
对生成结果评分，低于 80 分则自动修正。

## 设计约束注入点
[此处在每次执行时动态替换为实际站点的设计 Token]

## 参考文件
- references/design-tokens.md   — 站点设计 Token 模板
- references/component-spec.md  — 卡片/筛选器规格说明
- assets/card-variants.html     — 卡片变体参考示例

请使用 category-page-designer Skill，为以下场景生成分类页：

场景：[电商站点，现有首页截图如下，需要新建「品牌馆」分类页]
截图：[附图]

要求：
- 自动提取现有首页的设计语言
- 生成符合品牌风格的「品牌馆」分类页
- 包含：品牌 Logo 展示、品牌介绍摘要、旗下产品入口
- 响应式，移动端优先

输出完整代码 + 风格一致性评分报告。

对以下分类页设计进行迭代优化：

当前版本代码：[粘贴]
用户反馈：[例如：「卡片太紧凑」「筛选器在移动端不好点击」「颜色和导航栏对不上」]

请：
1. 逐条分析每条反馈的根本原因
2. 提出对应的最小改动方案（不影响其他部分）
3. 输出修改后的完整代码
4. 说明每处改动对应的反馈项

如果无法从截图中确认某项设计 Token，请根据整体风格
进行「合理推断」，并标注为「[推断值]」，待人工确认。

分类层级：三级（一级为频道，二级为类目，三级为标签）
导航交互：面包屑 + 左侧树形导航（桌面）/ 底部 Tab + 下拉（移动端）

python -m scripts.package_skill ./skills/category-page-designer