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

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:

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

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

Component styles — update

Style Transfer（风格迁移）