多方向设计提案生成 — 青岛火一五信息科技有限公司 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 bodymuji.net / 原研哉「白」展册 / 真山正纪杂志2Dieter Rams 十诫#F0F0F0 浅灰 + #1B1B1B 近黑 + #E45D2D Braun 橙Akzidenz-Grotesk / GT AmericaBraun T1000 收音机 / vitsoe.com / Apple Calculator(2026)3Swiss Design / 国际主义#FFFFFF + #000000 + #D4181F 红Helvetica Neue / Neue Haas GroteskMüller-Brockmann《Grid Systems》/ Swissted poster 系列4Apple 后乔布斯#FFFFFF + #1D1D1F 黑灰 + #0071E3 链接蓝SF Pro Display + SF Pro Textapple.com/iphone/ / Apple WWDC 2024 keynote 单帧5Stripe 极简科技#FFFFFF + #0A2540 海军蓝 + #635BFF 亮紫Sohne / Sohne Monostripe.com 首屏 / stripe.press(电子书 site)
→ 对应 frontend-design 流派: bold-minimal
#哲学hex 配色字体组合当代标杆锚点6NYT / 纽约客#FFFFFF + #121212 深黑 + #D0021B 报头红Cheltenham / NYT Imperial / Karnaknytimes.com/section/style / The New Yorker 封面7Monocle 杂志#F2EBDC 米色 + #1F2A1F 深绿 + #A56B33 棕Plantin MT + Helveticamonocle.com / Monocle Films 字幕8Pentagram 平面#000000 + #FFFFFF + #FF6347 番茄Founders Grotesk / Caslonpentagram.com / Paula Scher Citibank logo / NYT Magazine 改版9Stripe Press / Linear blog ⭐v3.0 编辑科技#FAF8F5 米色 + #0F0F0F 黑 + #FF5733 橙GT Sectra serif + Sohne sanspress.stripe.com / linear.app/blog / Mono Issue 杂志
→ 对应 frontend-design 流派: editorial
#哲学hex 配色字体组合当代标杆锚点10Sagmeister 观念先锋#F4D03F 黄 + #1A1A1A + #FF1744 警示红Knockout / Acumin Prosagmeisterwalsh.com / "Things I Have Learned in My Life So Far"11David Carson 破坏排版#000000 + #FFFFFF + #FF6B35 焦橙Adobe Garamond + 错位的任何字Ray Gun 杂志 / "The End of Print"12Brutalist 2026 ⭐v3.0 升级#FAFAFA 不再纯白 + #0A0A0A + #FFE600 警告黄JetBrains Mono / Iosevka / Departure Monoare.na / nothing.tech / Plain English Podcast / Tylko13Y2K / Vaporwave 复古未来#FF00FF 品红 + #00FFFF 青 + #9D4EDD 紫Druk Wide / Bitstream Vera Sans MonoA.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 / 中川政七商店16Field.io 动态几何#000000 + #00FF94 荧光绿 + #FF006E 品GT America Mono / Söhnefield.io / 资生堂 The Ginza / OFFF 主视觉17Organic / 有机自然#FFFBF5 奶白 + #3D2817 棕墨 + #9AAB9C 莫兰迪绿Tiempos / Druk + Söhneaesop.com / oatly.com / Notion 早期
→ 对应 frontend-design 流派: organic
#哲学hex 配色字体组合当代标杆锚点18Tufte 数据可视化#FFFFFF + #1A1A1A + 单一 #D0021B accentETBembo / Gill Sansedwardtufte.com / The Visual Display of Quantitative Information19Bauhaus 功能主义#D32F2F 红 + #FFD600 黄 + #1565C0 蓝 + #FAFAFA 象牙Futura / Bauhaus 93(克制使用)+ HelveticaHerbert Bayer 海报 / Bauhaus Dessau / IBM Rebus(Paul Rand)20Bloomberg 编辑信息密度 ⭐v3.0#000000 + #FF6900 Bloomberg 橙 + #1A1A1AAvantGarde / Tungsten + Roboto Monobloomberg.com/businessweek / Tobias Frere-Jones 字体作品
→ 对应 frontend-design 流派:B 端 dashboard 场景常 mix bold-minimal + 数据组件
#哲学hex 配色字体组合当代标杆锚点21Apple HIG (iOS 26)#FFFFFF + #000000 + #0A84FF 系统蓝SF Pro Display + SF Pro Text + SF MonoiOS 26 Settings / Apple Notes / Shortcuts22Material Design 3 dynamicseed 派生 primary/secondary/tertiary containerRoboto / Roboto Flex variablePixel Launcher / Gmail Android 2025 / m3.material.io23HarmonyOS 灵动色块4 色同明度(L≈0.78)多色相 + 大圆角胶囊(24-48px)HarmonyOS Sans + 鸿蒙黑体HarmonyOS 4 设置 / 鸿蒙音乐 / 华为新闻 app24微信小程序 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 + footerSenior 落地字体定制、自家配色、自家组件OKLCH 主色、display+body 反差、骨架定制Stripe 落地页质感Master 级单一签名钩子 / 反工业范式 / 时代感强自定字距 / 微版式 / 反 cliché 选择linear.app 的 hero gradient + 版本号 / Vercel Ship 单帧
对标范本(Master 档每流派 2-3 个,建议读完原网页再做):
流派Master 档对标bold-minimallinear.app · vercel.com · stripe.press · raycast.comeditorialnytimes.com(深度专题)· monocle.com · linear.app/blog · stripe.pressbrutalistare.na · nothing.tech · plainenglishpodcast.com · tylko.comretro-futurenothing.tech ROM · A.G. Cook 网站 · OFFF Festival 主视觉organicaesop.com · oatly.com · Notion 早期 · cosmos.somobile-native-iosiOS 26 Settings · Apple Notes 真机截图 · Day One iOS · Things 3mobile-native-md3Pixel Launcher · Gmail Android · Calculator(Android 14+)mobile-native-harmonyHarmonyOS 4 Settings · 鸿蒙音乐 · 华为新闻
判断流程(director 在 brief 中显式标注):
text
用户预算 / 时间充裕 + 目标是品牌官网 / 投融资路演 / 单页 KV → Master 档
中等预算 + 目标是产品落地页 / 完整功能页 → Senior 落地
快速验证 / 内部工具 / 抢时间 → Junior pass
每年都有新潮流。下面是 截至 2026 年 4 月 真实在火、可作为参考的当代趋势池, 不是过期的(如紫色渐变)也不是过早期的(如 2018 玻璃拟态)。director 在反差三方向时,可从中选 1 条作为"反差方向"。
趋势视觉签名真实在火的理由锚点Editorial Tech 编辑科技米色或近黑底 + 衬线 display + 等宽 caption + 长篇排版反 SaaS 千篇一律,回归阅读质感linear.app/blog · stripe.press · cosmos.so · pirsch.ioSpatial / Depth Web半 3D / WebGL 浅景深 / OKLab spotlight + 鼠标跟随阴影Apple Vision OS 推动 + 浏览器 GPU 进步apple.com/vision-pro/ · onform.fm · igloo.incAI-Aesthetic Backlash 反 AI 范式手绘 + 真实摄影 + 不规则形 + 严禁紫粉渐变 / glassmorphism2024-2025 紫渐变烂大街后的反弹are.na · plain-english.com · oatly.com 改版Brutalist 2026灰白 + 黑 + 警示黄 / 警示红 + 等宽字 + 极少装饰nothing.tech / 极简硬件品牌带火nothing.tech · tylko.com · plainenglishpodcast.comModern Memphis 新孟菲斯80s 几何 + 但更克制 + 莫兰迪化(不是糖果色)韦斯安德森电影回流 + 新生代复古wesanderson.com · The Grand Budapest Hotel UIOrganic Tech 有机科技OKLCH 暖灰 + 不规则圆角 + 手作字体 + spring 动效反"机器感" SaaS,强调温度aesop.com · cosmos.so · obvious.studioEditorial 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-harmonyAPP 选型极简 vs 编辑 vs 装饰bold-minimal × editorial × retro-future杂志型品牌2026 三新趋势 ⭐v3.0Editorial Tech × Spatial × Brutalist 2026想要前卫品味
或按"经典 + 反差 + 时代感"自由组合:
text
### 方向 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.0SeniorMasterSeniora11y 友好度见 a11y-checklist.md §流派对照
必须 给出一个推荐(不能骑墙):
text
### 推荐
选 **方向 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 等当代复古字 + 单一霓虹 accent4杂志变 Word 文档editorial衬线 + 左对齐 + 没结构感 → 加纵向栅格、引号装饰、栏宽控制5野兽变脏乱差brutalist等宽 + 黑底 + 红字一键命中 = 原始网吧风 → Brutalist 2026 用浅灰 + 警示黄克制装饰6AI Slop 全家桶任何流派紫粉渐变 / 玻璃拟态 / 默认 Tailwind / Inter 字体 + Hero+Features+CTA → 直接判废,重选方向
6 流派 × 6 流派 = 36 组 pair,绝大部分会"对冲"互相削弱。下面是 5 组 经测试品味互补、不打架 的混血:
混血组合配比用法标杆锚点editorial × bold-minimal70%E + 30%BM阅读型品牌(书店 / 媒体 / 内容产品)stripe.press · linear.app/blogorganic × bold-minimal60%O + 40%BM健康 / 食品 / 母婴的高品质版(不要可爱化)aesop.com · oatly.combrutalist 2026 × editorial50%/50%独立工作室 / 编辑型 SaaS / 思想类播客are.na · plainenglishpodcast.comretro-future × bold-minimal30%RF + 70%BM科技品牌想要"一点点性格"(避免全盘霓虹)nothing.tech · raycast.commobile-native-ios × organic50%/50%高品质生活类 APP / 内容向 APPDay 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 档的具体建议。
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 一致。
场景归属设计方向选型(3 方向对比 + 硬核 brief + 档位)本技能选定方向后做 HTML 原型huo15-openclaw-frontend-design评审已有设计 + 审美档位识别huo15-openclaw-design-critique v2.0抓品牌规范 brand-spechuo15-openclaw-brand-protocolWeb / 移动 / 小程序四端 starter / tokens / a11y / motionhuo15-openclaw-frontend-design v4.x文生图风格预设 + aesthetic anchorhuo15-img-prompt v3.x
tier / anchor / antiPattern / hybridSuggestion 字段;触发词扩到 Master 档 / 风格混血 / 2026 当代风。 与 frontend-design v4.x 接力路径不变,纯审美品味升级。技术支持: 青岛火一五信息科技有限公司