style-transfer（风格迁移）

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

Workflow

Step 1 — Extract design from target website

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

Or for faster extraction (no screenshots/interactions):

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:

# 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/:

Step 4 — Apply styles based on project type

Vue 3 + Vite project

global.scss / main CSS — replace CSS variables:

// 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:

\x3Clink href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />

Component styles — update \x3Cstyle> 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:

// tailwind.config.js
colors: {
  primary: '#7f41ff',
  secondary: '#ab8ee8',
  accent: '#d9bfe2',
}

globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

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

Plain HTML / Static site

Inject the *-variables.css content into \x3Cstyle> tag and add Google Fonts link.

Step 5 — Build and verify

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 \x3Chead>, 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

# 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