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 组合：

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

Layout

Typography

Style

生成 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 明确允许）
- 所有占位内容用真实感虚拟数据，禁止纯色灰色块