Features

# 风格迁移（Style Skill）

## 功能概述

从对话中提取抽象的"风格 DNA"，存储为自然语言文档，支持跨网站应用。

---

## 为什么需要

**场景**：用户在 GitHub 打磨出满意的赛博朋克风格，想应用到 Stack Overflow。

**问题**：CSS 选择器是页面特定的——`.Header` 在 Stack Overflow 不存在。

---

## 设计目标

| 目标 | 说明 |
|------|------|
| 跨网站复用 | 同一风格应用到不同网站 |
| 视觉一致 | 色彩、字体、效果保持一致 |
| 选择器适配 | 自动匹配目标网站的 DOM 结构 |
| 可管理 | 查看、删除已保存的风格 |

---

## 核心概念

### 风格 DNA

抽象的视觉特征描述，不包含具体选择器：

```
风格 DNA 包含：
├── 风格描述（一句话概括）
├── 色彩方案（主色、辅色、背景色）
├── 排版（字体、字号、行高）
├── 视觉效果（阴影、圆角、渐变）
└── 设计意图（适用场景）
```

### 为何不用 CSS 变量系统

| 方案 | 问题 |
|------|------|
| CSS 变量提取 | 页面不一定用 CSS 变量 |
| 选择器映射 | 需为每个网站维护映射表 |
| 风格变量系统 | 限制表达能力，需定义 schema |

**LLM 方案**：理解语义、适配结构——这是 LLM 的强项。

---

## 功能设计

### 相关工具

| 工具 | 用途 |
|------|------|
| save_style_skill | 保存当前风格 |
| list_style_skills | 列出已保存风格 |
| load_skill | 加载风格详情 |
| delete_style_skill | 删除风格 |

### 创建流程

```
用户："保存这个风格"

1. Agent 分析当前会话
   ├── 对话意图（赛博朋克？深色？极简？）
   └── 累积的 CSS（提取视觉特征）

2. LLM 生成风格 DNA 文档
   ├── 名称（LLM 自动命名或用户指定）
   ├── 描述
   ├── 色彩方案
   ├── 视觉效果
   └── 设计意图

3. 存储到 chrome.storage.local
```

### 应用流程

```
用户："用我的赛博朋克风格"

1. list_style_skills → 找到匹配的风格
2. load_skill → 加载风格 DNA
3. get_page_structure → 获取目标网站结构
4. LLM 生成适配 CSS
   ├── 色彩/效果：从风格 DNA 获取
   └── 选择器：从页面结构获取
5. apply_styles → 注入并保存
```

### 风格文档格式

```markdown
# 赛博朋克

## 风格描述
深色背景配合霓虹色调，营造高科技感

## 色彩方案
- 主背景：#0a0a1a（深邃黑蓝）
- 强调色：#00ff88（霓虹绿）
- 次要强调：#ff00ff（霓虹紫）
- 文字：#e0e0e0（浅灰）

## 排版
- 标题：无衬线字体，加粗
- 正文：14-16px

## 视觉效果
- 发光边框：box-shadow: 0 0 10px
- 渐变背景：linear-gradient
- 圆角：4-8px

## 设计意图
适合技术博客、开发者社区，强调科技感和未来感
```

### 存储

```
skills:user:index        # 风格索引列表
skills:user:{id}         # 风格文档内容
```

索引条目包含：id、名称、描述、来源域名、创建时间。

---

## 目标效果

| 场景 | 效果 |
|------|------|
| 保存风格 | 从当前对话提取特征，存储为可复用文档 |
| 应用风格 | 风格视觉一致，选择器自动适配 |
| 列出风格 | 看到所有已保存风格 |
| 删除风格 | 清理不需要的风格 |

---

## 与静态技能的关系

| | 静态技能 | 动态技能（Style Skill） |
|---|---|---|
| 来源 | 预设的设计知识 | 从用户对话提取 |
| 内容 | 通用方法论 | 具体视觉方案 |
| 存储 | 扩展内打包 | chrome.storage.local |
| 示例 | 深色模式指南、色彩理论 | 用户保存的"赛博朋克" |

两者通过同一个 `load_skill` 加载，对 LLM 是统一的知识源。

---

## 边界情况

| 情况 | 处理 |
|------|------|
| 无风格可保存 | 提示用户先创建样式 |
| 风格名称冲突 | 自动添加后缀或提示重命名 |
| 存储已满 | 提示清理旧风格（上限 50 个） |
| 目标网站结构差异大 | LLM 尽力适配，可能需要调整 |