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:
多方向设计提案生成 — 青岛火一五信息科技有限公司
v3.0 起：审美升级。24 条设计哲学库改写为「视觉三元组」（hex 配色 + 字体组合 + 当代标杆锚点）+ 3 档审美档位（Junior / Senior / Master）+ 2026 当代趋势锚点池 + 反差三方向出硬核 brief（可直接执行）+ 6 类 anti-pattern 警示 + 5 组高分混血组合。
v2.0 起：从 5 流派扩到 6 流派含 mobile-native 子集；与
huo15-openclaw-frontend-designv4.x 全量接力（tokens / compare-matrix / multi-genre-compare / redLineWaiver / a11y-checklist）
当用户要做一个页面 / 产品 / 品牌 / APP / 小程序，但没明确美学方向时：
huo15-openclaw-frontend-design §三 被用户选"让你决定"时自动触发产出：3 个反差方向的硬核 brief（可直接拿去执行，不是抽象描述）+ 五维对比矩阵 + 推荐方向 + Master 档可选升级路径，按接力消息格式移交给 frontend-design 做并行 Junior pass。
每条哲学不再是抽象名字，而是「hex 配色 / 字体组合 / 当代标杆锚点」可直接落地的三元组。
| # | 哲学 | 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
| # | 哲学 | 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
| # | 哲学 | 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
| # | 哲学 | 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
| # | 哲学 | 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 + 数据组件
| # | 哲学 | 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 + 小程序四端（微信 / 支付宝 / 抖音 / 快手）
同一个流派，三档品味差距巨大。直接在 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 年 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 警示）：
不要选 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 | 想要前卫品味 |
或按"经典 + 反差 + 时代感"自由组合：
### 方向 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 点，从 §六 抄| 维度 | 方向 1 | 方向 2 | 方向 3 |
|------|--------|--------|--------|
| 美学震撼 | ★★★☆☆ | ★★★★★ | ★★☆☆☆ |
| 可用性 | ★★★★★ | ★★★☆☆ | ★★★★☆ |
| 品牌辨识 | ★★☆☆☆ | ★★★★★ | ★★★☆☆ |
| 实现成本 | 低 | 高 | 中 |
| 风险 | 低 | 高（可能不被客户接受） | 中 |
| 品味档位上限 ⭐v3.0 | Senior | Master | Senior |
| a11y 友好度 | 见 a11y-checklist.md §流派对照 |
必须给出一个推荐（不能骑墙）：
### 推荐
选 **方向 N · <档位>**，理由：[结合用户的目的、受众、约束的三句话推理]
### 次选
方向 M（<档位>），适用场景：[如果方向 N 不被接受的退路]
### 反对
不选方向 K，原因：[为什么这条不合适]
### 升级建议（可选）⭐v3.0
如果预算 / 时间允许，方向 N 可从 Senior 升到 Master：补 [具体 1-2 个签名钩子]每个方向必标 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 → 直接判废，重选方向 |
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 |
混血必须遵守：
本 skill 不直接出 HTML，而是按下面接力消息格式发给 frontend-design，由它跑 multi-genre-compare.md 流程并行出 3 份 Junior pass HTML。
但 brief 内容必须按 §5.2 8 件套写死配色 hex / 死字体名 / 死签名钩子，不要含糊。
3 份 Junior pass 截图回流后（frontend-design 自验证用 Chrome MCP 路线），按 §5.3 + §5.4 出报告，给出升级到 Master 档的具体建议。
// 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 一致。
| 场景 | 归属 |
|------|------|
| 设计方向选型（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 |
tier / anchor / antiPattern / hybridSuggestion 字段；触发词扩到 Master 档 / 风格混血 / 2026 当代风。与 frontend-design v4.x 接力路径不变，纯审美品味升级。技术支持： 青岛火一五信息科技有限公司