--- 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 ``` **Component styles — update `