ADR

# ADR-004: 风格迁移方案

## 状态

已采纳

## 背景

用户在 A 网站打磨出满意的视觉风格后，希望"迁移"到 B 网站。

**核心挑战**：CSS 是页面特定的——`.Header` 选择器在 B 网站不存在。

## 决策

引入 **Style Skill**——从对话中提取抽象的"风格 DNA"，存储为自然语言文档。

```
网站 A 的对话 ──LLM 提取──→ 风格 DNA（色彩/排版/效果/意图）
                                    │
网站 B          ──LLM 适配──→ 新 CSS（B 网站的选择器）
```

## 原因分析

### 为什么不能直接复制 CSS

```
网站 A 的 CSS:
  .Header { background: #1a1a2e; }
  .nav-item { color: #00ff88; }

网站 B 的 DOM:
  <nav class="s-topbar">...</nav>
  <a class="s-link">...</a>

问题：.Header 和 .nav-item 在网站 B 不存在
```

### 传统方案的局限

| 方案 | 问题 |
|------|------|
| CSS 选择器映射 | 需要为每个网站维护映射表，不可扩展 |
| 风格变量系统 | 需要定义变量体系（color-primary 等），页面不一定遵循 |
| CSS-in-JS 转换 | 过度工程化，增加复杂度 |

### LLM 的优势

LLM 天然擅长：
- 理解语义（"这是导航栏"）
- 适配结构（A 的 `.Header` 对应 B 的 `nav.s-topbar`）
- 保持视觉一致性（颜色、字体、效果）

### 风格 DNA 的设计

存储为**自然语言 markdown 文档**，而非结构化 JSON：

```markdown
# 赛博朋克

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

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

## 视觉效果
- 发光边框：box-shadow: 0 0 10px #00ff88
- 渐变背景：linear-gradient(135deg, #0a0a1a, #1a1a2e)

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

**为什么用自然语言**：
- 用户偏好是开放式的（"喜欢高对比度"、"讨厌圆角"）
- 结构化 JSON 会限制表达
- LLM 能理解并适配，无需严格 schema

## 后果

### 优点

- 风格描述灵活，不限于预设维度
- 迁移智能交给 LLM，代码只提供存储
- 用户可以编辑风格描述

### 缺点

- 迁移效果依赖 LLM 能力
- 可能需要多次调整才能达到理想效果

### 技术影响

- 新增工具：`save_style_skill`、`list_style_skills`、`delete_style_skill`
- 扩展 `load_skill` 支持加载用户技能
- 存储位置：`chrome.storage.local`

## 替代方案

### 方案 A：CSS 选择器映射系统

```json
{
  "nav": { "github": ".Header", "stackoverflow": ".s-topbar" }
}
```

放弃原因：
- 需要为每个网站手动维护
- 不可扩展
- 新网站无法使用

### 方案 B：CSS 变量提取

提取颜色、字体等变量，在新页面重新应用。

放弃原因：
- 不是所有页面都用 CSS 变量
- 无法处理复杂效果（渐变、阴影）
- 丢失设计意图

### 方案 C：截图 + 视觉匹配

截取 A 网站样式截图，用视觉模型指导 B 网站样式。

放弃原因：
- 截图不包含选择器信息
- 视觉匹配不稳定
- 增加处理复杂度