提取目标网站的设计系统并应用到指定项目中（Vue/React/Next.js/Tailwind）。当用户说「把 XX 网站的样式应用到我的项目」或「用 Y 的风格重新设计」时使用。

SKILL.md

---
name: style-transfer
description: 提取目标网站的设计系统并应用到指定项目中（Vue/React/Next.js/Tailwind）。当用户说「把 XX 网站的样式应用到我的项目」或「用 Y 的风格重新设计」时使用。
category: software-development
---

# style-transfer（风格迁移）

> 将目标网站的设计风格迁移到指定项目中

## Workflow

### Step 1 — Extract design from target website

```bash
npx designlang https://target-website.com/ --full
```

Or for faster extraction (no screenshots/interactions):
```bash
npx designlang https://target-website.com/
```

Output goes to `~/.designlang/{domain}.json` and `~/.hermes-agent/workspace/design-extract-output/`.

### Step 2 — Detect project type

Inspect the project at the target path:

```bash
# Detect framework
ls /path/to/project/src/                    # Vue/React
ls /path/to/project/                       # Next.js (app/, pages/)
cat /path/to/project/package.json | grep -E "vue|react|next"

# Detect styling approach
ls /path/to/project/src/assets/styles/      # SCSS/CSS variables
cat /path/to/project/tailwind.config.js     # Tailwind
cat /path/to/project/src/style.css          # Plain CSS
cat /path/to/project/src/App.vue            # Vue SFC styles
```

### Step 3 — Read extracted design files

Key files to read from `~/.hermes-agent/workspace/design-extract-output/`:

| File | Purpose |
|------|---------|
| `*-design-tokens.json` | DTCG format tokens (primitive + semantic) |
| `*-tailwind.config.js` | Tailwind theme config |
| `*-shadcn-theme.css` | shadcn/ui CSS variables |
| `*-global.css` / `*-variables.css` | CSS custom properties |
| `*-design-language.md` | Full design doc (colors, fonts, spacing) |
| `*-gradients.css` | Brand gradients |
| `*-motion-tokens.json` | Animation tokens |

### Step 4 — Apply styles based on project type

#### Vue 3 + Vite project

**global.scss / main CSS — replace CSS variables:**
```scss
// src/assets/styles/global.scss
// Replace :root variables with extracted tokens
:root {
  --primary-color: #7f41ff;        // from design-tokens.json
  --bg-color: #fdfcff;
  --text-primary: #261c3a;
  --border-color: #d9bfe2;
  --radius: 16px;
  --shadow: 0 0 24px rgba(0,0,0,0.03);
  --gradient-brand: linear-gradient(90deg, #7f41ff, #ab8ee8);
}
```

**Add Google Fonts to index.html:**
```html
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
```

**Component styles — update `<style>` blocks:**
- Replace button `background` with `--gradient-brand`
- Replace `border-radius` values with `--radius`
- Replace shadows with `--shadow`
- Update tag styles to pill shape (`border-radius: 999px`)

#### Next.js / React project

**Tailwind config — merge extracted tokens:**
```js
// tailwind.config.js
colors: {
  primary: '#7f41ff',
  secondary: '#ab8ee8',
  accent: '#d9bfe2',
}
```

**globals.css:**
```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --primary: #7f41ff;
    --background: #fdfcff;
  }
}
```

#### Plain HTML / Static site

Inject the `*-variables.css` content into `<style>` tag and add Google Fonts link.

### Step 5 — Build and verify

```bash
cd /path/to/project
npm run build
# or
npm run dev
```

Check dist output for:
- CSS contains new color tokens (grep for primary hex)
- No build errors
- Font loaded correctly

## Common Pitfalls

1. **npx designlang hangs** — use without `--full` flag, timeout after 120s
2. **Project has no src/styles** — create `src/assets/styles/global.scss` and import in `main.js` / `main.tsx`
3. **CSS variable conflicts** — ensure new variables override old ones; check specificity
4. **Font not loading** — verify Google Fonts URL in `<head>`, check network
5. **Tailwind purge removes new classes** — ensure design tokens are in `content[]` paths
6. **Vue scoped styles** — CSS vars defined in `:root` or `global.scss` leak into scoped styles correctly

## Verification Commands

```bash
# Check CSS variables applied
grep -o "#[0-9a-fA-F]\{6\}" dist/assets/*.css | sort | uniq

# Check gradient applied
grep -c "gradient" dist/assets/*.css

# Check font loaded
grep "fonts.googleapis" dist/index.html
```

## Project Path Resolution

If user says "my project" without specifying path:
- Check current working directory for `package.json`
- Check `../` for project with `src/` directory
- Ask user for explicit path if ambiguous

## Example Conversation

**User**: "把 withlantern.com 的样式应用到我的 Vue 项目里"

1. `npx designlang https://withlantern.com/` → extract design
2. Read `*-design-tokens.json` → get color palette
3. Read `*-global.css` → get CSS variables
4. Read project's `src/assets/styles/global.scss` → apply new variables
5. Add Google Fonts to `index.html`
6. Update component button styles to use gradient
7. `npm run build` → verify

Style Transfer（风格迁移）

SKILL.md

related skills