huo15-openclaw-design-director

当用户没给明确方向时，基于 6 大美学流派 × 24 设计哲学库（含 mobile-native 平台派）生成 3 个反差方向的 Junior pass 简报对比，帮用户快速定流派、定基调、定差异点。配合 huo15-openclaw-frontend-design v4.x 使用，直接读取其 tokens / compare-matrix / redLineWaiver / multi-genre-compare 接力入口。触发词：帮我选设计方向、做几个方向对比、三个风格对比、design direction、设计选型、风格提案、APP 选风格、移动端选方向、iOS 还是安卓、跨端方案选型。

Safety Notice

This listing is from the official public ClawHub registry. Review SKILL.md and referenced scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "huo15-openclaw-design-director" with this command: npx skills add huo15-openclaw-design-director

火一五设计方向顾问技能 v2.0

多方向设计提案生成 — 青岛火一五信息科技有限公司 v2.0 起：从 5 流派扩到 6 流派含 mobile-native 子集；24 条设计哲学库；与 huo15-openclaw-frontend-design v4.x 全量接力（tokens / compare-matrix / multi-genre-compare / redLineWaiver / a11y-checklist）

一、触发场景

当用户要做一个页面 / 产品 / 品牌 / APP / 小程序，但没明确美学方向时：

  • "帮我选个设计方向"
  • "做三个风格对比"
  • "这个 APP 应该做成什么风格"
  • "iOS / 安卓 / 鸿蒙 选哪种平台风" ⭐v2.0
  • 或在 huo15-openclaw-frontend-design §三 被用户选"让你决定"时自动触发

产出：3 个反差方向的简报（流派 + tokens 路径 + 差异点 + redLineWaiver）+ 五维对比矩阵 + 推荐方向，按接力消息格式移交给 frontend-design 做并行 Junior pass。

二、设计哲学库（24 条可引用）

2.1 极简主义派（5 条）

  1. 原研哉（Kenya Hara） — 白、空、无印良品式的留白美学
  2. Dieter Rams 十诫 — 少即是多，诚实、长寿、环保
  3. Swiss Design / 国际主义 — 网格、无衬线、左对齐
  4. Apple 后乔布斯 — 超大字、超大图、一屏一个重点
  5. Stripe 极简科技 — 渐变 + sans-serif + 大量白

→ 对应 frontend-design 流派：bold-minimal

2.2 编辑杂志派（4 条）

  1. NYT / 纽约客 — 衬线、纵向栅格、引号做装饰
  2. Monocle 杂志 — 深色衬线 + 米色底 + 分栏
  3. Pentagram 平面 — 超大字排版 + 强烈对比
  4. Hoefler & Co 字体中心主义 — 字体本身就是视觉

→ 对应 frontend-design 流派：editorial

2.3 前卫实验派（4 条）

  1. Sagmeister 观念先锋 — 手写、大胆、打破规则
  2. David Carson 破坏性排版 — 故意错位、字符切割
  3. Brutalist Web Design — 粗黑、原始、反精致
  4. Y2K / Vaporwave 复古未来 — 霓虹、CRT、像素

→ 对应 frontend-design 流派：brutalist / retro-future

2.4 东方 / 有机派（4 条）

  1. 东方禅意 — 枯山水、空寂、留白 80%
  2. 日本民艺（Mingei） — 手工感、温润、不对称
  3. Field.io 动态几何 — 数字生成艺术
  4. Organic / 有机自然 — 手绘、暖色、柔边

→ 对应 frontend-design 流派：organic

2.5 信息 / 功能派（3 条）

  1. Tufte 数据可视化 — 数据墨水比、无废装饰
  2. Bauhaus 功能主义 — 形式追随功能、三原色
  3. Edward Tufte 小图密度 — sparkline、紧凑信息层级

→ 对应 frontend-design 流派：B 端 dashboard 场景常 mix bold-minimal + 数据组件

2.6 移动平台派 ⭐v2.0（4 条）

  1. Apple Human Interface Guidelines — large title、segmented control、grouped list、blur navbar、HIG spring 动效
  2. Material Design 3 dynamic color — seed 派生 primary / secondary / tertiary container；FAB；emphasized easing 4 档
  3. HarmonyOS 灵动色块 — 4 色块同明度多色相（L≈0.78）、大圆角胶囊（24-48px 分级）、fluid easing
  4. 微信小程序 Native — <page-meta> + safe-area-inset + 原生 tabBar、PingFang SC 字体豁免、rpx 适配

→ 对应 frontend-design 流派：mobile-native-ios / mobile-native-md3 / mobile-native-harmony + 小程序四端（微信 / 支付宝 / 抖音 / 快手）

三、3 方向生成法

3.1 方向选取规则

不要选 3 个相似方向。从 frontend-design v4.1 tokens/_compare-matrix.md §反差对位 5 组任选一组：

命题流派组合
理性 vs 感性 vs 实验bold-minimal × organic × brutalist
冷峻 vs 温暖 vs 复古editorial × organic × retro-future
桌面 vs 移动 vs 跨端 ⭐v2.0bold-minimal × mobile-native-ios × mobile-native-harmony
极简 vs 信息密度 vs 装饰bold-minimal × editorial × retro-future
Web vs iOS vs 鸿蒙 ⭐v2.0bold-minimal × mobile-native-ios × mobile-native-harmony

或按"经典 + 反差 + 中间"自由组合：

  • 1 个保守方向（BOLD-MINIMAL / EDITORIAL）
  • 1 个反差方向（BRUTALIST / RETRO-FUTURE / 移动平台派任一）
  • 1 个中间调和（ORGANIC / mobile-native-md3）

3.2 每个方向必给 6 件东西 ⭐v2.0 增加 tokens 路径

### 方向 N：<流派名>
- **一句话定位**：[ 为谁做 + 什么感觉 ]
- **核心字体**：display + body 组合（从 tokens.json typography 读）
- **主色 + 强调色**：含 oklch 值（从 tokens.json color 读）
- **关键元素**：3 个会被用户记住的视觉元素
- **frontend-design 资产路径** ⭐v2.0：
  - tokens：`../huo15-openclaw-frontend-design/tokens/<slug>.json`
  - example：`../huo15-openclaw-frontend-design/examples/<dir>/index.html`（Junior pass 起手）
- **redLineWaiver 提醒** ⭐v2.0：本流派的合规豁免（避免 design-critique / 评审环节误判违规）

3.3 五维对比矩阵

维度方向 1方向 2方向 3
美学震撼★★★☆☆★★★★★★★☆☆☆
可用性★★★★★★★★☆☆★★★★☆
品牌辨识★★☆☆☆★★★★★★★★☆☆
实现成本低高中
风险低高（可能不被客户接受）中
a11y 友好度 ⭐v2.0见 a11y-checklist.md §流派对照

3.4 推荐表态

必须给出一个推荐（不能骑墙）：

### 推荐
选 **方向 N**，理由：[结合用户的目的、受众、约束的三句话推理]

### 次选
方向 M，适用场景：[如果方向 N 不被接受的退路]

### 反对
不选方向 K，原因：[为什么这条不合适]

四、工作流

阶段 1 · 需求分解

  • 复述用户的：目的 / 受众 / 约束 / 时间预算 / 平台（Web / 移动 / 跨端 / 小程序）⭐v2.0 加平台维度
  • 平台维度决定要不要把 mobile-native 子集纳入候选
  • 如果以上任一缺失，先用一轮问答补齐

阶段 2 · 方向筛选

从 24 条设计哲学库中挑 3 条（按 §3.1 规则组合）

阶段 3 · Junior pass 简报生成 ⭐v2.0

本 skill 不直接出 HTML，而是按下面接力消息格式发给 frontend-design，由它跑 multi-genre-compare.md 流程并行出 3 份 Junior pass HTML。

阶段 4 · 对比 + 推荐

3 份 Junior pass 截图回流后（frontend-design 自验证用 Chrome MCP 路线），按 §3.3 + §3.4 出报告。

阶段 5 · 接力消息格式 ⭐v2.0

// director → frontend-design
{
  "task": "multi-genre-junior-pass",
  "genres": ["bold-minimal", "organic", "brutalist"],
  "context": {
    "client": "<品牌名>",
    "scope": "<目标页面 / 组件类型>",
    "differentiator": "<差异点一句话>",
    "platform": "web | mobile | mini-program | cross"
  },
  "briefs": {
    "bold-minimal": "<本 director 写的简报：定位 + 字体 + 主色 + 关键元素>",
    "organic": "...",
    "brutalist": "..."
  }
}

// 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 方向对比）本技能
选定方向后做 HTML 原型huo15-openclaw-frontend-design
评审已有设计 5 维打分huo15-openclaw-design-critique
抓品牌规范 brand-spechuo15-openclaw-brand-protocol
Web / 移动 / 小程序四端 starter / tokens / a11y / motionhuo15-openclaw-frontend-design v4.x

六、触发词

  • 帮我选设计方向 / 选个方向 / 定方向
  • 做三个风格对比 / 做几个方向对比 / 出几个风格
  • 这个产品应该做成什么风格
  • design direction / design proposal
  • 设计选型 / 风格提案
  • APP 选风格 / 移动端选方向 / iOS 还是安卓 / 跨端方案选型 / 鸿蒙还是 iOS ⭐v2.0
  • 小程序选哪个风格 / 多端做什么风 ⭐v2.0

七、版本历史

  • v2.0.0（当前 · 2026-04-27）：跨端 + 接力升级。流派从 5 扩到 6（加 MOBILE-NATIVE 含 iOS HIG / Material Design 3 / HarmonyOS / 小程序四端）；设计哲学库从 20 条扩到 24 条（新增 §2.6 移动平台派 4 条：HIG / MD3 / HarmonyOS / 微信小程序 Native）；§3.1 方向选取规则加"桌面 / 移动 / 跨端"+"Web / iOS / 鸿蒙"两组反差对位；§3.2 每个方向必给从 5 件扩到 6 件（增 frontend-design tokens 路径 + redLineWaiver 提醒）；§3.3 五维矩阵加 a11y 友好度引用 frontend-design a11y-checklist；§4 工作流阶段 5 移交正式格式化为接力消息 JSON；与 frontend-design v4.x 全量接力 — tokens / compare-matrix / redLineWaiver / multi-genre-compare / a11y-checklist 全部指路。
  • v1.0.0（2026-04-23）：初始版本。20 条设计哲学库（5 派分类）+ 3 方向生成规则（1 保守 + 1 反差 + 1 中间）+ 五维对比矩阵 + 强制推荐表态（不骑墙）。

技术支持： 青岛火一五信息科技有限公司

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Open Registry RecordOpen in ClawHub

Related Skills

Related by shared tags or category signals.

General

Multi Edge-TTS CN

Edge-TTS 在线语音合成 skill。基于微软 Edge TTS 引擎，生成速度快（1-2秒），支持多种音色和输出格式。同时支持飞书（OGG/Opus）和企业微信（AMR）。默认音色 xiaoxiao_lively。需联网。

Registry SourceRecently Updated
00itian932
General

vedic-destiny

吠陀命盘分析中文入口。用于完整命盘研判、命主盘 Rashi chart 与九分盘 Navamsha chart 联读、既往事件回看、出生时间稳定度判断、事业主题、婚姻主题、时空盘专题，以及基于 Jagannatha Hora PDF、星盘截图或文本命盘数据的系统拆盘。当用户提到完整星盘、事业方向、婚姻问题、关系窗...

Registry SourceRecently Updated
00seanding1998
General

One Person Company OS

Build a visual operating cockpit for an AI-native one-person company across promise, buyer, product, delivery, cash, learning, and assets. / 为 AI 一人公司建立可视化经营...

Registry SourceRecently Updated
4831living-hi
General

健康追踪

健康追踪技能 - 追踪饮水、睡眠、步数等健康数据，JSON存储。

Registry SourceRecently Updated
00534422530