文件内容
SKILL.md
---
name: huo15-openclaw-design-director
displayName: 火一五设计方向顾问技能
description: 当用户没给明确方向时，基于 6 大美学流派 × 24 设计哲学库（每条带视觉三元组：hex 配色 + 字体组合 + 当代标杆作品锚点）× 3 档审美档位（Junior / Senior / Master）× 2026 当代趋势锚点池，生成 3 个反差方向的硬核 brief 对比（不是抽象描述，是可直接执行的配色 + 字体 + 视觉钩子三件套），帮用户快速定流派、定基调、定差异点。配 anti-pattern 警示和 5 组高分混血组合。配合 huo15-openclaw-frontend-design v4.x 使用，直接读取其 tokens / compare-matrix / redLineWaiver / multi-genre-compare 接力入口。触发词：帮我选设计方向、做几个方向对比、三个风格对比、design direction、设计选型、风格提案、APP 选风格、移动端选方向、iOS 还是安卓、跨端方案选型、Master 档设计、风格混血、aesthetic tier。
version: 3.0.0
aliases:
- 火一五设计方向技能
- 火一五设计方向顾问技能
- 火一五风格提案技能
- 火一五方向选型技能
- 火一五跨端方案技能
- 火一五设计方向
- 设计方向
- 方向选型
- 风格提案
- design direction
- 选风格
- APP 选风格
- 跨端选型
- Master 档设计
- 风格混血
- aesthetic tier
- 当代趋势锚点
---
# 火一五设计方向顾问技能 v3.0
> 多方向设计提案生成 — 青岛火一五信息科技有限公司
> **v3.0 起**：审美升级。24 条设计哲学库改写为「视觉三元组」（hex 配色 + 字体组合 + 当代标杆锚点）+ 3 档审美档位（Junior / Senior / Master）+ 2026 当代趋势锚点池 + 反差三方向出硬核 brief（可直接执行）+ 6 类 anti-pattern 警示 + 5 组高分混血组合。
> **v2.0 起**：从 5 流派扩到 6 流派含 mobile-native 子集；与 `huo15-openclaw-frontend-design` v4.x 全量接力（tokens / compare-matrix / multi-genre-compare / redLineWaiver / a11y-checklist）
---
## 一、触发场景
当用户要做一个页面 / 产品 / 品牌 / APP / 小程序，但**没明确美学方向**时：
- "帮我选个设计方向"
- "做三个风格对比"
- "这个 APP 应该做成什么风格"
- "iOS / 安卓 / 鸿蒙 选哪种平台风"
- "做一个 Master 档的设计方案" ⭐v3.0
- "我想要风格混血" ⭐v3.0
- 或在 `huo15-openclaw-frontend-design §三` 被用户选"让你决定"时自动触发
**产出**：3 个反差方向的**硬核 brief**（可直接拿去执行，不是抽象描述）+ 五维对比矩阵 + 推荐方向 + Master 档可选升级路径，按接力消息格式移交给 `frontend-design` 做并行 Junior pass。
---
## 二、24 条设计哲学库（v3.0 视觉三元组化）
每条哲学不再是抽象名字，而是「**hex 配色 / 字体组合 / 当代标杆锚点**」可直接落地的三元组。
### 2.1 极简主义派（5 条）
| # | 哲学 | hex 配色（主+辅+强调） | 字体组合 | 当代标杆锚点 |
|---|------|----------------|---------|-------------|
| 1 | **原研哉 / 无印良品** | `#FAF7EB` 米白 + `#1A1A1A` 黑 + `#7F0019` 朱红印 | Noto Serif SC display + Hiragino Sans body | muji.net / 原研哉「白」展册 / 真山正纪杂志 |
| 2 | **Dieter Rams 十诫** | `#F0F0F0` 浅灰 + `#1B1B1B` 近黑 + `#E45D2D` Braun 橙 | Akzidenz-Grotesk / GT America | Braun T1000 收音机 / vitsoe.com / Apple Calculator(2026) |
| 3 | **Swiss Design / 国际主义** | `#FFFFFF` + `#000000` + `#D4181F` 红 | Helvetica Neue / Neue Haas Grotesk | Müller-Brockmann《Grid Systems》/ Swissted poster 系列 |
| 4 | **Apple 后乔布斯** | `#FFFFFF` + `#1D1D1F` 黑灰 + `#0071E3` 链接蓝 | SF Pro Display + SF Pro Text | apple.com/iphone/ / Apple WWDC 2024 keynote 单帧 |
| 5 | **Stripe 极简科技** | `#FFFFFF` + `#0A2540` 海军蓝 + `#635BFF` 亮紫 | Sohne / Sohne Mono | stripe.com 首屏 / stripe.press（电子书 site） |
→ 对应 frontend-design 流派：**bold-minimal**
### 2.2 编辑杂志派（4 条）
| # | 哲学 | hex 配色 | 字体组合 | 当代标杆锚点 |
|---|------|---------|---------|-------------|
| 6 | **NYT / 纽约客** | `#FFFFFF` + `#121212` 深黑 + `#D0021B` 报头红 | Cheltenham / NYT Imperial / Karnak | nytimes.com/section/style / The New Yorker 封面 |
| 7 | **Monocle 杂志** | `#F2EBDC` 米色 + `#1F2A1F` 深绿 + `#A56B33` 棕 | Plantin MT + Helvetica | monocle.com / Monocle Films 字幕 |
| 8 | **Pentagram 平面** | `#000000` + `#FFFFFF` + `#FF6347` 番茄 | Founders Grotesk / Caslon | pentagram.com / Paula Scher Citibank logo / NYT Magazine 改版 |
| 9 | **Stripe Press / Linear blog** ⭐v3.0 编辑科技 | `#FAF8F5` 米色 + `#0F0F0F` 黑 + `#FF5733` 橙 | GT Sectra serif + Sohne sans | press.stripe.com / linear.app/blog / Mono Issue 杂志 |
→ 对应 frontend-design 流派：**editorial**
### 2.3 前卫实验派（4 条）
| # | 哲学 | hex 配色 | 字体组合 | 当代标杆锚点 |
|---|------|---------|---------|-------------|
| 10 | **Sagmeister 观念先锋** | `#F4D03F` 黄 + `#1A1A1A` + `#FF1744` 警示红 | Knockout / Acumin Pro | sagmeisterwalsh.com / "Things I Have Learned in My Life So Far" |
| 11 | **David Carson 破坏排版** | `#000000` + `#FFFFFF` + `#FF6B35` 焦橙 | Adobe Garamond + 错位的任何字 | Ray Gun 杂志 / "The End of Print" |
| 12 | **Brutalist 2026** ⭐v3.0 升级 | `#FAFAFA` 不再纯白 + `#0A0A0A` + `#FFE600` 警告黄 | JetBrains Mono / Iosevka / Departure Mono | are.na / nothing.tech / Plain English Podcast / Tylko |
| 13 | **Y2K / Vaporwave 复古未来** | `#FF00FF` 品红 + `#00FFFF` 青 + `#9D4EDD` 紫 | Druk Wide / Bitstream Vera Sans Mono | A.G. Cook / PC Music / Cyberpunk 2077 UI / Nothing Phone OS |
→ 对应 frontend-design 流派：**brutalist** / **retro-future**
### 2.4 东方 / 有机派（4 条）
| # | 哲学 | hex 配色 | 字体组合 | 当代标杆锚点 |
|---|------|---------|---------|-------------|
| 14 | **东方禅意（侘寂）** | `#FDFBF5` 宣纸 + 墨分五色 `#1A1A1A` `#404040` `#7A7A7A` `#B0B0B0` `#E0E0E0` + `#A62828` 朱砂 | Noto Serif SC + Hiragino Mincho | 龙安寺枯山水 / 杉本博司「海景」/ 安藤忠雄住吉之家 |
| 15 | **日本民艺（Mingei）** | `#E8DCC4` 米黄 + `#5C4033` 棕 + `#7A8B5A` 苔绿 | DNP 秀英明朝 + Noto Sans JP | 柳宗悦民艺馆 / 日本民艺馆 web / 中川政七商店 |
| 16 | **Field.io 动态几何** | `#000000` + `#00FF94` 荧光绿 + `#FF006E` 品 | GT America Mono / Söhne | field.io / 资生堂 The Ginza / OFFF 主视觉 |
| 17 | **Organic / 有机自然** | `#FFFBF5` 奶白 + `#3D2817` 棕墨 + `#9AAB9C` 莫兰迪绿 | Tiempos / Druk + Söhne | aesop.com / oatly.com / Notion 早期 |
→ 对应 frontend-design 流派：**organic**
### 2.5 信息 / 功能派（3 条）
| # | 哲学 | hex 配色 | 字体组合 | 当代标杆锚点 |
|---|------|---------|---------|-------------|
| 18 | **Tufte 数据可视化** | `#FFFFFF` + `#1A1A1A` + 单一 `#D0021B` accent | ETBembo / Gill Sans | edwardtufte.com / The Visual Display of Quantitative Information |
| 19 | **Bauhaus 功能主义** | `#D32F2F` 红 + `#FFD600` 黄 + `#1565C0` 蓝 + `#FAFAFA` 象牙 | Futura / Bauhaus 93（克制使用）+ Helvetica | Herbert Bayer 海报 / Bauhaus Dessau / IBM Rebus（Paul Rand） |
| 20 | **Bloomberg 编辑信息密度** ⭐v3.0 | `#000000` + `#FF6900` Bloomberg 橙 + `#1A1A1A` | AvantGarde / Tungsten + Roboto Mono | bloomberg.com/businessweek / Tobias Frere-Jones 字体作品 |
→ 对应 frontend-design 流派：B 端 dashboard 场景常 mix **bold-minimal** + 数据组件
### 2.6 移动平台派（4 条）
| # | 哲学 | hex 配色 | 字体组合 | 当代标杆锚点 |
|---|------|---------|---------|-------------|
| 21 | **Apple HIG (iOS 26)** | `#FFFFFF` + `#000000` + `#0A84FF` 系统蓝 | SF Pro Display + SF Pro Text + SF Mono | iOS 26 Settings / Apple Notes / Shortcuts |
| 22 | **Material Design 3 dynamic** | seed 派生 primary/secondary/tertiary container | Roboto / Roboto Flex variable | Pixel Launcher / Gmail Android 2025 / m3.material.io |
| 23 | **HarmonyOS 灵动色块** | 4 色同明度（L≈0.78）多色相 + 大圆角胶囊（24-48px） | HarmonyOS Sans + 鸿蒙黑体 | HarmonyOS 4 设置 / 鸿蒙音乐 / 华为新闻 app |
| 24 | **微信小程序 Native** | 系统暗/亮 + 各 brand 自定 | PingFang SC（系统）+ 不能 @font-face | 滴滴小程序 / 美团点餐 / 微信电商 |
→ 对应 frontend-design 流派：**mobile-native-ios** / **mobile-native-md3** / **mobile-native-harmony** + 小程序四端（微信 / 支付宝 / 抖音 / 快手）
---
## 三、审美档位（Junior / Senior / Master）⭐v3.0 新增
**同一个流派，三档品味差距巨大**。直接在 brief 里声明档位，下游 frontend-design 才知道交付到哪一层。
| 档位 | 特征 | 信号词 | bold-minimal 例子 |
|------|------|-------|-------------------|
| **Junior pass** | 占位文案 + 占位图 + 跑通骨架 | Tailwind 默认色板、Inter 字体、shadcn 卡片 | 一个能用的 hero + features + footer |
| **Senior 落地** | 字体定制、自家配色、自家组件 | OKLCH 主色、display+body 反差、骨架定制 | Stripe 落地页质感 |
| **Master 级** | 单一签名钩子 / 反工业范式 / 时代感强 | 自定字距 / 微版式 / 反 cliché 选择 | linear.app 的 hero gradient + 版本号 / Vercel Ship 单帧 |
**对标范本**（Master 档每流派 2-3 个，建议读完原网页再做）：
| 流派 | Master 档对标 |
|------|---------------|
| bold-minimal | linear.app · vercel.com · stripe.press · raycast.com |
| editorial | nytimes.com（深度专题）· monocle.com · linear.app/blog · stripe.press |
| brutalist | are.na · nothing.tech · plainenglishpodcast.com · tylko.com |
| retro-future | nothing.tech ROM · A.G. Cook 网站 · OFFF Festival 主视觉 |
| organic | aesop.com · oatly.com · Notion 早期 · cosmos.so |
| mobile-native-ios | iOS 26 Settings · Apple Notes 真机截图 · Day One iOS · Things 3 |
| mobile-native-md3 | Pixel Launcher · Gmail Android · Calculator(Android 14+) |
| mobile-native-harmony | HarmonyOS 4 Settings · 鸿蒙音乐 · 华为新闻 |
**判断流程**（director 在 brief 中显式标注）：
```
用户预算 / 时间充裕 + 目标是品牌官网 / 投融资路演 / 单页 KV → Master 档
中等预算 + 目标是产品落地页 / 完整功能页 → Senior 落地
快速验证 / 内部工具 / 抢时间 → Junior pass
```
---
## 四、2026 当代趋势锚点池 ⭐v3.0 新增
每年都有新潮流。下面是**截至 2026 年 4 月**真实在火、可作为参考的当代趋势池，**不是过期的（如紫色渐变）也不是过早期的（如 2018 玻璃拟态）**。director 在反差三方向时，可从中选 1 条作为"反差方向"。
| 趋势 | 视觉签名 | 真实在火的理由 | 锚点 |
|------|---------|---------------|------|
| **Editorial Tech 编辑科技** | 米色或近黑底 + 衬线 display + 等宽 caption + 长篇排版 | 反 SaaS 千篇一律，回归阅读质感 | linear.app/blog · stripe.press · cosmos.so · pirsch.io |
| **Spatial / Depth Web** | 半 3D / WebGL 浅景深 / OKLab spotlight + 鼠标跟随阴影 | Apple Vision OS 推动 + 浏览器 GPU 进步 | apple.com/vision-pro/ · onform.fm · igloo.inc |
| **AI-Aesthetic Backlash 反 AI 范式** | 手绘 + 真实摄影 + 不规则形 + 严禁紫粉渐变 / glassmorphism | 2024-2025 紫渐变烂大街后的反弹 | are.na · plain-english.com · oatly.com 改版 |
| **Brutalist 2026** | 灰白 + 黑 + 警示黄 / 警示红 + 等宽字 + 极少装饰 | nothing.tech / 极简硬件品牌带火 | nothing.tech · tylko.com · plainenglishpodcast.com |
| **Modern Memphis 新孟菲斯** | 80s 几何 + 但更克制 + 莫兰迪化（不是糖果色） | 韦斯安德森电影回流 + 新生代复古 | wesanderson.com · The Grand Budapest Hotel UI |
| **Organic Tech 有机科技** | OKLCH 暖灰 + 不规则圆角 + 手作字体 + spring 动效 | 反"机器感" SaaS，强调温度 | aesop.com · cosmos.so · obvious.studio |
| **Editorial Mono 等宽编辑** | 全等宽字 + 单色 + 大留白 + 文档感 | Are.na / Plain English / 独立播客带动 | are.na · plainenglishpodcast.com · craft.do |
| **大字 + 大照片** ⭐ Apple 时代 | 100pt+ display + 撑满全屏照片 + 极少文案 | Apple 一直在做、社媒小红书也跟上 | apple.com 任意产品页 / Vercel Ship |
**反趋势 / 已死的视觉**（director 应主动避免推荐 + 加入 anti-pattern 警示）：
- ❌ 紫渐变 + glassmorphism（2023-2024 AI slop 标志）
- ❌ Material You 默认配色（默认 token 不改）
- ❌ Skeuomorphism 重型仿物（除非客户明确要"轻拟物 iOS 26 风"）
- ❌ Hero + 3 features + CTA + footer 模板化骨架
- ❌ 默认 Inter / Roboto + 默认 Tailwind 圆角 16px
---
## 五、3 方向生成法（v3.0 升级出硬核 brief）
### 5.1 方向选取规则
**不要选 3 个相似方向**。从以下五维反差对位中任选一组，或自由组合：
| 命题 | 流派组合 | 主推场景 |
|---|---|---|
| 理性 vs 感性 vs 实验 | bold-minimal × organic × brutalist | 早期品牌选型 |
| 冷峻 vs 温暖 vs 复古 | editorial × organic × retro-future | 内容产品 |
| 桌面 vs 移动 vs 跨端 | bold-minimal × mobile-native-ios × mobile-native-harmony | APP 选型 |
| 极简 vs 编辑 vs 装饰 | bold-minimal × editorial × retro-future | 杂志型品牌 |
| **2026 三新趋势** ⭐v3.0 | Editorial Tech × Spatial × Brutalist 2026 | 想要前卫品味 |
或按"经典 + 反差 + 时代感"自由组合：
- **1 个经典稳妥**（bold-minimal / editorial）
- **1 个有性格反差**（brutalist / retro-future / 移动平台派任一）
- **1 个 2026 当代锚点**（从 §四 趋势池选一）
### 5.2 每个方向必给的「**硬核 brief**」（v3.0 8 件套，可直接执行）
```
### 方向 N：<流派名> · <Junior/Senior/Master 档位>
- **一句话定位**（≤ 25 字）：[ 为谁做 + 什么感觉 + 一个差异钩子 ]
- **配色硬核**（直接给 hex，不要"温暖色调"这种废话）：
- 主色：#XXXXXX（OKLCH: oklch(L% C H)）
- 文字：#XXXXXX 在 #XXXXXX 上，对比度 ≥ 4.5:1
- accent：#XXXXXX（点缀 5-10%，警示色 / 品牌色）
- 中性：3-5 级灰阶 hex
- **字体硬核**（不要"现代无衬线"这种废话）：
- display：<具体字体名> + 字号区间 + 字距 % + 行高
- body：<具体字体名> + 字号 + 行高
- mono（如有）：<具体字体名>
- **签名钩子**（用户会记住的「那一件事」，必须具体到一个动作）：
例：「hero 大字 144pt + -3% 字距 + 单一 OKLCH 渐变文字」
或：「左下永远显示 BUILD · 2026.4.28 等宽版本戳」
或：「scrollytelling 时段落随 scroll 进度淡入」
- **当代标杆锚点**：1-2 个具体 URL / 网站名（从 §二 视觉三元组的"锚点"列直接抄）
- **frontend-design 资产路径**：
- tokens：`../huo15-openclaw-frontend-design/tokens/<slug>.json`
- example：`../huo15-openclaw-frontend-design/examples/<dir>/index.html`
- **redLineWaiver 提醒**：本流派的合规豁免（避免误判违规）
- **anti-pattern 警示**（v3.0 必填）：本方向最容易做差的 1-2 点，从 §六 抄
```
### 5.3 五维对比矩阵（v3.0 加品味档位维度）
| 维度 | 方向 1 | 方向 2 | 方向 3 |
|------|--------|--------|--------|
| 美学震撼 | ★★★☆☆ | ★★★★★ | ★★☆☆☆ |
| 可用性 | ★★★★★ | ★★★☆☆ | ★★★★☆ |
| 品牌辨识 | ★★☆☆☆ | ★★★★★ | ★★★☆☆ |
| 实现成本 | 低 | 高 | 中 |
| 风险 | 低 | 高（可能不被客户接受） | 中 |
| **品味档位上限** ⭐v3.0 | Senior | Master | Senior |
| **a11y 友好度** | 见 [`a11y-checklist.md §流派对照`](../huo15-openclaw-frontend-design/references/a11y-checklist.md) |
### 5.4 推荐表态
**必须**给出一个推荐（不能骑墙）：
```
### 推荐
选 **方向 N · <档位>**，理由：[结合用户的目的、受众、约束的三句话推理]
### 次选
方向 M（<档位>），适用场景：[如果方向 N 不被接受的退路]
### 反对
不选方向 K，原因：[为什么这条不合适]
### 升级建议（可选）⭐v3.0
如果预算 / 时间允许，方向 N 可从 Senior 升到 Master：补 [具体 1-2 个签名钩子]
```
---
## 六、6 类审美 anti-pattern ⭐v3.0 新增
每个方向必标 1-2 条相关 anti-pattern。Director 也用这个清单做"反趋势 / 已死视觉"自检。
| # | anti-pattern | 哪个流派最易犯 | 体现 |
|---|--------------|--------------|------|
| 1 | **极简变性冷淡** | bold-minimal | 全白 + 灰文字 + 没有 accent，无温度无品牌 → 加一个鲜明 accent / 一个签名钩子 |
| 2 | **有机变幼稚** | organic | 全圆角 + 莫兰迪粉 + 手绘 emoji 图标 → 砍 emoji + 用真摄影 + 字体加重 |
| 3 | **复古变土味** | retro-future | 直接堆 80s 霓虹粉 + Comic Sans + 像素字 → 用 Druk Wide 等当代复古字 + 单一霓虹 accent |
| 4 | **杂志变 Word 文档** | editorial | 衬线 + 左对齐 + 没结构感 → 加纵向栅格、引号装饰、栏宽控制 |
| 5 | **野兽变脏乱差** | brutalist | 等宽 + 黑底 + 红字一键命中 = 原始网吧风 → Brutalist 2026 用浅灰 + 警示黄克制装饰 |
| 6 | **AI Slop 全家桶** | 任何流派 | 紫粉渐变 / 玻璃拟态 / 默认 Tailwind / Inter 字体 + Hero+Features+CTA → 直接判废，重选方向 |
---
## 七、5 组高分混血 ⭐v3.0 新增
6 流派 × 6 流派 = 36 组 pair，绝大部分会"对冲"互相削弱。下面是 5 组**经测试品味互补、不打架**的混血：
| 混血组合 | 配比 | 用法 | 标杆锚点 |
|---------|------|------|---------|
| **editorial × bold-minimal** | 70%E + 30%BM | 阅读型品牌（书店 / 媒体 / 内容产品）| stripe.press · linear.app/blog |
| **organic × bold-minimal** | 60%O + 40%BM | 健康 / 食品 / 母婴的高品质版（不要可爱化） | aesop.com · oatly.com |
| **brutalist 2026 × editorial** | 50%/50% | 独立工作室 / 编辑型 SaaS / 思想类播客 | are.na · plainenglishpodcast.com |
| **retro-future × bold-minimal** | 30%RF + 70%BM | 科技品牌想要"一点点性格"（避免全盘霓虹） | nothing.tech · raycast.com |
| **mobile-native-ios × organic** | 50%/50% | 高品质生活类 APP / 内容向 APP | Day One iOS · Things 3 · Reeder |
**混血必须遵守**：
- **挑一个为主导**（70%/30% 或 60%/40%），不要 50%/50% 除非两个流派天然互补（如上表第 3、5 组）
- **配色取主导流派**，副流派只贡献 1-2 个签名元素
- **字体绝不混用 4 套**，最多 display + body + mono 三种
---
## 八、工作流（v3.0 升级）
### 阶段 1 · 需求分解
- 复述用户的：**目的 / 受众 / 约束 / 时间预算 / 平台 / 期望档位 ⭐v3.0**
- 平台维度决定要不要把 mobile-native 子集纳入候选
- **档位维度**：根据预算 / 时间 / 目标产物自动判定 Junior / Senior / Master，并在最终 brief 显式标注
- 如果以上任一缺失，先用一轮问答补齐
### 阶段 2 · 方向筛选
- 从 §二 24 条设计哲学库中挑 3 条（按 §5.1 规则组合）
- 至少 1 条来自 §四 2026 趋势池（强制保证有当代性）
- 跑过 §六 anti-pattern 自检 — 每个方向标记 1-2 条相关警示
- 检查混血必要性（§七）— 单流派够不够 hold 住目标？不够就推荐混血
### 阶段 3 · 硬核 brief 生成 ⭐v3.0 升级
本 skill **不直接出 HTML**，而是按下面接力消息格式发给 `frontend-design`，由它跑 [`multi-genre-compare.md`](../huo15-openclaw-frontend-design/references/multi-genre-compare.md) 流程并行出 3 份 Junior pass HTML。
但 brief 内容必须按 §5.2 8 件套写**死配色 hex / 死字体名 / 死签名钩子**，不要含糊。
### 阶段 4 · 对比 + 推荐
3 份 Junior pass 截图回流后（frontend-design 自验证用 Chrome MCP 路线），按 §5.3 + §5.4 出报告，**给出升级到 Master 档的具体建议**。
### 阶段 5 · 接力消息格式 ⭐v3.0 加 tier / anchor / antiPattern 字段
```jsonc
// director → frontend-design
{
"task": "multi-genre-junior-pass",
"genres": ["bold-minimal", "organic", "brutalist"],
"tier": "senior", // junior | senior | master ⭐v3.0
"context": {
"client": "<品牌名>",
"scope": "<目标页面 / 组件类型>",
"differentiator": "<差异点一句话>",
"platform": "web | mobile | mini-program | cross"
},
"briefs": {
"bold-minimal": {
"positioning": "...",
"palette": { "primary": "#0A2540", "text": "#1D1D1F", "accent": "#635BFF" },
"typography": { "display": "Sohne 80pt -2%", "body": "Sohne 16pt 1.5", "mono": "Sohne Mono" },
"signatureHook": "hero 大字带 OKLCH 单色渐变 + 永久 BUILD 戳",
"anchor": "stripe.com 首屏 / linear.app",
"antiPattern": "性冷淡（要加 accent + signature hook 反制）",
"redLineWaiver": []
},
"organic": { /* 同上结构 */ },
"brutalist": { /* 同上结构 */ }
},
"hybridSuggestion": null // 或 { "primary": "editorial", "secondary": "bold-minimal", "ratio": "70/30" }
}
// frontend-design → director（截图回流）
{
"task": "multi-genre-junior-pass-done",
"outputs": [
{ "genre": "bold-minimal", "html": "<rel-path>", "screenshot": "<rel-path>" },
{ "genre": "organic", "html": "<rel-path>", "screenshot": "<rel-path>" },
{ "genre": "brutalist", "html": "<rel-path>", "screenshot": "<rel-path>" }
]
}
```
格式与 [`frontend-design/references/multi-genre-compare.md §6`](../huo15-openclaw-frontend-design/references/multi-genre-compare.md) 一致。
---
## 九、与其他 huo15 技能的分工
| 场景 | 归属 |
|------|------|
| 设计方向选型（3 方向对比 + 硬核 brief + 档位） | **本技能** |
| 选定方向后做 HTML 原型 | `huo15-openclaw-frontend-design` |
| 评审已有设计 + 审美档位识别 | `huo15-openclaw-design-critique` v2.0 |
| 抓品牌规范 brand-spec | `huo15-openclaw-brand-protocol` |
| Web / 移动 / 小程序四端 starter / tokens / a11y / motion | `huo15-openclaw-frontend-design` v4.x |
| 文生图风格预设 + aesthetic anchor | `huo15-img-prompt` v3.x |
---
## 十、触发词
- 帮我选设计方向 / 选个方向 / 定方向
- 做三个风格对比 / 做几个方向对比 / 出几个风格
- 这个产品应该做成什么风格
- design direction / design proposal
- 设计选型 / 风格提案
- APP 选风格 / 移动端选方向 / iOS 还是安卓 / 跨端方案选型 / 鸿蒙还是 iOS
- 小程序选哪个风格 / 多端做什么风
- **Master 档设计 / 想做品牌官网级 / 想要顶级设计** ⭐v3.0
- **风格混血 / 混血组合 / 流派混合** ⭐v3.0
- **2026 当代风 / 当下流行什么 / aesthetic tier** ⭐v3.0
---
## 十一、版本历史
- **v3.0.0（当前 · 2026-04-28）**：审美升级。**§二 24 条设计哲学库改写为视觉三元组**（hex 配色 / 字体组合 / 当代标杆锚点）— 不再是抽象大师名，每条直接落地到可用配色 hex + 具体字体名 + 真实可访问的标杆作品 / 网站锚点；新增 §三 **3 档审美档位**（Junior pass / Senior 落地 / Master 级）+ 每流派 Master 档对标范本表；新增 §四 **2026 当代趋势锚点池**（Editorial Tech / Spatial Web / AI-Backlash / Brutalist 2026 / Modern Memphis / Organic Tech / Editorial Mono / 大字大照片）+ 反趋势 / 已死视觉清单；§五 反差三方向 §5.2 升级为 **8 件套硬核 brief**（一句话定位 / 死 hex 配色 / 死字体名 / 签名钩子 / 当代锚点 / tokens 路径 / redLineWaiver / anti-pattern），不再写"留白美学"这种抽象描述；§5.3 五维矩阵加品味档位上限维度；§5.4 推荐表态加升级到 Master 的具体建议；新增 §六 **6 类审美 anti-pattern**（极简变性冷淡 / 有机变幼稚 / 复古变土味 / 杂志变 Word / 野兽变脏乱 / AI Slop 全家桶）；新增 §七 **5 组高分混血**（editorial×bold-minimal / organic×bold-minimal / brutalist 2026×editorial / retro-future×bold-minimal / mobile-native-ios×organic）+ 混血规则；§八 工作流加档位维度 + 强制至少 1 条 2026 趋势 + anti-pattern 自检；§五 阶段 5 接力消息格式加 `tier` / `anchor` / `antiPattern` / `hybridSuggestion` 字段；触发词扩到 Master 档 / 风格混血 / 2026 当代风。**与 frontend-design v4.x 接力路径不变**，纯审美品味升级。
- **v2.0.0（2026-04-27）**：跨端 + 接力升级。流派从 5 扩到 6（加 MOBILE-NATIVE 含 iOS HIG / Material Design 3 / HarmonyOS / 小程序四端）；设计哲学库从 20 条扩到 24 条（新增 §2.6 移动平台派 4 条）；§3.1 方向选取规则加"桌面 / 移动 / 跨端"+"Web / iOS / 鸿蒙"两组反差对位；§3.2 每个方向必给从 5 件扩到 6 件；§3.3 五维矩阵加 a11y 友好度；§4 工作流阶段 5 移交正式格式化为接力消息 JSON；与 frontend-design v4.x 全量接力。
- **v1.0.0（2026-04-23）**：初始版本。20 条设计哲学库（5 派分类）+ 3 方向生成规则（1 保守 + 1 反差 + 1 中间）+ 五维对比矩阵 + 强制推荐表态（不骑墙）。
---
**技术支持：** 青岛火一五信息科技有限公司