Install
openclaw skills install huo15-openclaw-design-directorHuo15 Openclaw Design Director
当用户没给明确方向时，基于 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。
火一五设计方向顾问技能 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-designv4.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 §流派对照 |
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 流程并行出 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 字段
// 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 技能的分工
| 场景 | 归属 |
|---|---|
| 设计方向选型（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 中间）+ 五维对比矩阵 + 强制推荐表态（不骑墙）。
技术支持： 青岛火一五信息科技有限公司