# Next Variant

> 两个入口，一个出口。给定一个网站 URL 或一段内容描述，输出可用于生成 UI 的 skill 组合。

- Skill: `npc-live/next-variant` (Agent Skill)
- Install (CLI): `npx skillmds@latest add npc-live/next-variant`
- Raw SKILL.md: https://api.skillmd.com/api/skills/npc-live/next-variant/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: npc-live (https://skillmd.com/u/npc-live)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/npc-live/next-variant

---


# Next Variant Style Engine

## 两个功能入口

---

## 功能一：网站风格反向提取（URL → Skills）

**触发词**：用户提供一个网站 URL，说「帮我分析这个网站的风格」「这个网站风格也不错」「参考这个网站」

### 执行流程

**Step 1 — 抓取原始数据**

同时执行以下操作：
1. 用 browser/fetch 获取页面 HTML
2. 从 HTML 中提取所有 `<link rel="stylesheet">` 的 href
3. 下载主 CSS 文件（优先选名称含 `main`、`global`、`theme` 的）
4. 在 CSS 中搜索 `:root {` 块，提取所有 `--` 开头的 custom properties

```
目标提取项：
- 背景色 (background, --bg-*, --color-background)
- 文字色 (color, --text-*, --color-text)
- Accent 色 (--color-brand, --color-primary, --accent)
- 字体 (font-family, --font-*)
- 字号体系 (--text-*, --font-size-*)
- 间距 (--space-*, --spacing-*)
- 圆角 (border-radius, --radius-*)
- 阴影 (box-shadow, --shadow-*)
- 特殊效果 (filter, backdrop-filter, animation)
```

**Step 2 — 视觉特征识别**

根据抓到的 token 值，判断以下维度：

```
色调判断：
  背景 L < 20%           → 深色系
  背景含暖色调 (rgb R≈G, 偏黄) → 暖色系  
  背景 L > 90% 且无彩     → 极简白
  accent 含渐变           → 渐变系

字体判断：
  font-family 含 monospace → 等宽风格
  font-family 含 serif      → 衬线风格
  letter-spacing 负值 + 大字号 → 展示型 grotesque
  -apple-system             → 系统 UI 风格

风格判断：
  border-radius: 0          → Brutalist
  backdrop-filter: blur      → Glassmorphism / Vibrancy
  box-shadow 含 translateY   → Press 3D
  特殊 CSS 变量名 (--color-terminal, --color-shell) → 找命名语义
  box-shadow 多彩 (#ff0, #0ff, #f0f) → Chromatic aberration
```

**Step 3 — 映射到现有 Skills**

对照下表找最接近的 skill 组合：

| 检测到的特征 | 推荐 color skill |
|------------|----------------|
| 深黑底 + 透明层叠 + 蓝色 accent | `dark-moody` |
| 近黑 + 暖白文字 + 紫色 accent | `terminal-violet` |
| 近黑 + 霓虹发光 + grid | `neon-tech` |
| 奶油白底 + 橙色 accent | `warm-cream-orange` |
| 纯白底 + 无彩 accent | `clean-minimal` |
| 米色/棕色系 + 大地色 accent | `warm-editorial` |
| 渐变色彩 + 深色底 | `gradient-vibrant` |
| 高饱和纯色块 | `bright-blocks` |
| rgba 语义色 + 系统蓝 `#007AFF` | `apple-system` |

| 检测到的特征 | 推荐 typography skill |
|------------|---------------------|
| `font-family` 含 monospace / Mono | `mono-tech` |
| `-apple-system` / `BlinkMacSystemFont` | `sf-pro` |
| `IBM Plex Sans` | `humanist-sans` |
| `Suisse Intl` / `Helvetica Neue` / letter-spacing 负值 | `swiss-grotesque` |
| `Playfair` / `Lora` / serif | `display-serif` |
| `clamp` 超大字号 + font-weight 800+ | `big-display` |
| `Inter` / `system-ui` + 14px 正文 | `inter-minimal` |

| 检测到的特征 | 推荐 style skill |
|------------|----------------|
| `backdrop-filter: blur` + rgba 透明 | `glassmorphism` |
| `backdrop-filter` + 系统 chrome | `macos-vibrancy` |
| `border-radius: 0` + 2px+ 粗边框 | `brutalist` |
| `box-shadow: 0 2px 0` + hover translateY | `press-3d` |
| 多彩 box-shadow RGB 分量 | `chromatic-terminal` |
| 无 shadow + 纯色填充 | `flat-clean` |
| 暖色纸质 + sepia filter | `retro-warm` |
| offset shadow `4px 4px 0` + 高饱和 | `playful` |
| 多层光照 gradient + inset shadow | `skeuomorphic` |

**Step 4 — 输出**

```
## 识别结果

网站：{URL}

### 提取到的关键 Token
- 背景色：{值}
- 主文字：{值}
- Accent：{值}
- 字体：{值}
- 特殊效果：{描述}

### 推荐 Skill 组合
color:      {skill}
typography: {skill}
style:      {skill}
layout:     {skill（根据页面结构判断）}

### 判断依据
- color → {skill}：因为 {具体 token 值和特征}
- typography → {skill}：因为 {字体/字号/字距特征}
- style → {skill}：因为 {具体效果/shadow/border特征}

### 是否需要新建 Skill？
{如果有强烈特征没有对应 skill，在此说明并创建新 skill 文件}
```

**Step 5（可选）— 如有显著特征未被覆盖，新建 skill 文件**

在 `skills/color/`、`skills/typography/`、`skills/style/` 下新建 `.md` 文件，格式参考现有任意 skill 文件，必须包含：
- Design Tokens（CSS 变量）
- Rules（正向约束）
- Component Examples（代码示例）
- Forbidden（禁止项）

---

## 功能二：内容匹配风格（Content → Skills）

**触发词**：用户描述他要做的产品/页面，说「我要做一个 XX 网站」「帮我找适合的风格」「这个内容适合什么风格」

### 执行流程

**Step 1 — 内容分析**

从用户输入中提取以下信息（没有的项不追问，用默认判断）：

```
产品类型：   SaaS / 电商 / 作品集 / 博客 / 工具 / 营销页 / App...
目标用户：   开发者 / 消费者 / 企业 / 创意从业者 / 学生...
品牌气质：   专业严肃 / 友好亲切 / 创意前卫 / 极简克制 / 活泼有趣...
内容密度：   信息密集（数据/功能多）/ 呼吸感（故事/情感为主）
竞品参考：   有没有提到参考网站或"像 XX 那样"
```

**Step 2 — 决策树**

```
产品类型
├── 开发者工具 / AI 基础设施 / GPU / 云计算
│   ├── 极简严肃风    → terminal-violet + swiss-grotesque + chromatic-terminal
│   └── 亲切工程师风  → warm-cream-orange + humanist-sans + press-3d
│
├── SaaS / 产品工具（非开发者向）
│   ├── 现代简洁      → clean-minimal + inter-minimal + flat-clean
│   ├── 暗色高端      → dark-moody + inter-minimal + glassmorphism
│   └── 活泼消费品    → bright-blocks + big-display + playful
│
├── 电商 / 产品展示
│   ├── 精品/手工艺   → warm-editorial + display-serif + retro-warm
│   ├── 现代零售      → clean-minimal + inter-minimal + flat-clean
│   └── 潮牌/创意     → dark-moody + big-display + brutalist
│
├── 作品集 / Agency
│   ├── 字体主导      → clean-minimal + big-display + brutalist
│   ├── 视觉主导      → gradient-vibrant + big-display + glassmorphism
│   └── 复古品味      → warm-editorial + display-serif + retro-warm
│
├── 博客 / 媒体 / 内容
│   ├── 严肃文学      → warm-editorial + display-serif + retro-warm
│   └── 现代数字媒体  → dark-moody + inter-minimal + flat-clean
│
├── 数据 / 仪表盘 / 内部工具
│   ├── 技术感强      → neon-tech + mono-tech + glassmorphism
│   └── 企业标准      → apple-system + sf-pro + macos-vibrancy
│
└── 游戏 / 娱乐 / 儿童
    └── → bright-blocks / gradient-vibrant + big-display + playful
```

**Step 3 — Layout 选择**

```
落地页（首次访问的营销页）→ 进入 landing/ 子维度：
  有强视觉资产（截图/3D）  → hero-split
  SaaS 标准               → hero-centered
  创意/agency             → hero-type-only
  背景视频/图片            → hero-full-screen

应用/工具界面  → sidebar-dashboard
画廊/作品展示  → masonry-gallery
数据仪表盘    → bento-box
文章/博客     → editorial-magazine
```

**Step 4 — 输出**

```
## 风格推荐

根据你描述的「{产品简述}」，推荐以下 skill 组合：

color:      {skill}  — {一句话说明为什么}
layout:     {skill}  — {一句话说明为什么}
typography: {skill}  — {一句话说明为什么}
style:      {skill}  — {一句话说明为什么}

### 参考近似案例
{从 Combination Examples 中找最接近的，或说明这个组合的视觉感受}

### 备选方案
如果你想要更 {形容词} 的感觉，可以把 {skill A} 换成 {skill B}：
color: {alternative}  — {区别说明}
```

---

## Skill 索引（当前可用）

### Color
| Skill | Mood |
|-------|------|
| `dark-moody` | 深黑透明层叠 · 蓝色 accent |
| `gradient-vibrant` | 彩色渐变 · 戏剧性 |
| `clean-minimal` | 纯净白灰 · 无色彩 |
| `warm-editorial` | 奶油/锈橙 · 大地色 |
| `neon-tech` | 近黑底 · 霓虹发光 |
| `warm-cream-orange` | 奶油白 · 橙色 accent · PostHog 风 |
| `bright-blocks` | 高饱和纯色块 |
| `apple-system` | 系统语义色 · 蓝 accent · Light/Dark |
| `terminal-violet` | 近黑 `#0b0b0b` · 暖白 · 紫 accent · Lambda 风 |

### Layout
| Skill | Shape |
|-------|-------|
| `masonry-gallery` | Pinterest 瀑布流 |
| `bento-box` | 仪表盘格子 |
| `full-bleed` | 全出血 hero |
| `editorial-magazine` | 杂志专栏 |
| `sidebar-dashboard` | 240px 侧边栏 App Shell |
| `landing/hero-centered` | SaaS 居中 hero |
| `landing/hero-split` | 50/50 分栏 hero |
| `landing/hero-type-only` | 纯字体 hero |
| `landing/hero-full-screen` | 全视口背景 hero |
| `landing/section-features` | 功能介绍 section |
| `landing/section-social-proof` | 信任背书 section |
| `landing/section-pricing` | 定价方案 section |
| `landing/section-cta` | 页尾转化 section |

### Typography
| Skill | Voice |
|-------|-------|
| `inter-minimal` | 系统 sans · 隐形排版 |
| `display-serif` | Playfair/Lora · 编辑感 |
| `mono-tech` | 等宽全覆盖 · 终端感 |
| `big-display` | 巨型 grotesque · 字即图像 |
| `humanist-sans` | IBM Plex Sans · 人文温度 |
| `sf-pro` | -apple-system · macOS HIG |
| `swiss-grotesque` | Suisse Intl/Helvetica · 精密工程 |

### Style
| Skill | Texture |
|-------|---------|
| `glassmorphism` | 磨砂玻璃 · 渐变背景 |
| `brutalist` | B&W · 0圆角 · 粗边框 |
| `flat-clean` | 无阴影 · 纯色填充 |
| `retro-warm` | 纸质纹理 · 复古暖 |
| `playful` | 偏移阴影 · 胶囊 · 高饱和 |
| `press-3d` | 底部阴影按钮 · hover 翻转 · PostHog 风 |
| `macos-vibrancy` | vibrancy blur · 窗口 chrome |
| `skeuomorphic` | 多层光照 · 物理材质感 |
| `chromatic-terminal` | RGB 色差 · 终端 UI · Lambda 风 |

---

## 生成 Prompt 模板

确定 skill 组合后，用此模板生成 UI：

```
你是一名 UI 工程师，正在生成 React/HTML+CSS 组件。

严格执行以下 4 个 design skill 的所有约束。每个 skill 文件定义了 token、rules 和 forbidden——视为硬性规则。

## 激活的 Skills

### Color: {COLOR_SKILL 的完整文件内容}

### Layout: {LAYOUT_SKILL 的完整文件内容}

### Typography: {TYPOGRAPHY_SKILL 的完整文件内容}

### Style: {STYLE_SKILL 的完整文件内容}

## 任务
构建：{用户需求}

## 输出要求
- 使用 skill 中定义的 design token，不硬编码颜色值
- 遵守每个 skill 的所有 Rules
- 严格执行所有 Forbidden 项
- 输出单个自包含组件（inline style 或 <style> 块）
- 禁止 Tailwind（除非 skill 明确允许）
- 所有占位内容用真实感虚拟数据，禁止纯色灰色块
```