| name | huo15-openclaw-frontend-design |
| displayName | 火一五前端设计技能 |
| description | 高保真 Web UI / 移动 H5 / iOS / Android / HarmonyOS / 微信 + 支付宝 + 抖音 + 快手 四端小程序 原生风格原型 + 大胆美学方向 + 反 AI Slop 硬红线 + 8 流派 design tokens（含 motion）系统化（CSS vars / Tailwind / Figma 三导出） + 多流派并行对比 + WCAG 2.2 AA 无障碍自动审计 + 动效 tokens + 2026 微趋势补丁（Editorial Tech / Spatial Web / AI-Backlash / Brutalist 2026）。用于构建网站、落地页、仪表盘、APP 移动端、小程序（四端）、React/Vue 组件、HTML 海报、产品详情页、信息图、设计系统、无障碍合规页面、动效系统。配套 6 大美学流派 + 4 条 2026 微趋势 + 小程序子集、15 条硬红线、Junior/Full 两趟渲染、design tokens（color / typography / spacing / radius / shadow / motion）；自验证 Claude in Chrome MCP 优先 + 多路线 fallback + axe-core / Lighthouse a11y 审计；多流派对比与 design-director v3.x 联动。触发词：做网站、做落地页、做 UI、做 APP、做 H5、做小程序、做设计系统、design tokens、做动效、motion tokens、wxml、axml、ttml、ksml、做组件、HTML 原型、页面设计、移动端设计、前端设计、做海报、做详情页、iOS 风格、安卓风格、鸿蒙风格、微信小程序、支付宝小程序、抖音小程序、快手小程序、几个方向对比、风格提案、无障碍、a11y、WCAG、Lighthouse 审计、动画时长、easing、缓动函数、Editorial Tech、Spatial Web、AI-Backlash、Brutalist 2026、2026 微趋势。 |
| version | 4.7.0 |
| aliases | ["火一五前端设计技能","火一五Web设计技能","火一五APP设计技能","火一五移动端设计技能","火一五H5设计技能","火一五小程序设计技能","火一五抖音小程序技能","火一五快手小程序技能","火一五无障碍审计技能","火一五动效技能","火一五设计系统技能","火一五落地页技能","火一五UI设计技能","火一五海报设计技能","火一五前端设计","前端设计","UI 设计","页面设计","HTML 原型","落地页设计","海报设计","Web 设计","APP 设计","移动端设计","H5 设计","小程序设计","微信小程序","支付宝小程序","抖音小程序","快手小程序","无障碍","a11y","WCAG","动效","motion tokens","动画 tokens","design tokens","设计 tokens","设计系统"] |
火一五前端设计技能 v4.7
高保真 Web UI + 移动端 / APP / H5 + 微信 / 支付宝 / 抖音 / 快手 四端小程序 + design tokens（含 motion）系统化 + 多流派并行对比 + WCAG 2.2 AA 无障碍审计 + 动效 tokens + Tailwind v4 @theme 适配 + 2026 微趋势补丁 原型生成 — 青岛火一五信息科技有限公司
设计理念对标 Anthropic frontend-design skill 与 2026 社区共识，本土化改写、不拷贝官方内容
v2.0 起：5 流派 starter HTML（examples/）+ 配色 / 字体 / 灵感三件套（references/）+ 反 AI Slop 红线扩到 11 条
v2.1 起：第 6 流派 MOBILE-NATIVE（iOS HIG / Material Design 3 / HarmonyOS 三套 starter）+ 移动端红线 2 条（共 13 条）+ 触发词覆盖 APP / H5 / 移动端
v2.2 起：微信小程序 + 支付宝小程序 starter（归 MOBILE-NATIVE 子集）+ 小程序红线 2 条（共 15 条）+ 字体豁免说明 + 触发词覆盖 wxml / axml
v3.0 起：自验证工作流升级 — Claude in Chrome MCP 优先，Playwright CLI / 微信开发者工具 / 支付宝 IDE 三路线 fallback；新增 references/self-verify.md 操作手册
v4.0 起：design tokens 系统化 — 8 个流派统一 tokens/<slug>.json 扁平 schema（color / colorHex / typography / spacing / radius / shadow），三导出器 jq 一行转 CSS variables / Tailwind config / Figma Tokens Studio
v4.1 起：多流派并行对比 — 新增 tokens/_compare-matrix.md 8 流派横向对比矩阵 + references/multi-genre-compare.md 与 huo15-openclaw-design-director 联动手册
v4.2 起：小程序三端齐 — 抖音 starter；红线 #14 UI 库列表扩展
v4.3 起：小程序四端齐 — 快手 starter；触发词扩到快手小程序 / ksml
v4.4 起：a11y 自动审计 — WCAG 2.2 AA 30 条速查 + axe-core MCP 注入 + Lighthouse CLI fallback
v4.5 起：动效 tokens — 8 流派 motion 字段差异化动效原则
v4.6 起：Tailwind v4 @theme {} 块导出 + oklch 原生支持
v4.7 起：2026 微趋势补丁 — 新增 §三补 4 条 2026 当代微趋势（Editorial Tech 编辑科技 / Spatial / Depth Web 半 3D / AI-Aesthetic Backlash 反 AI 范式 / Brutalist 2026 克制版），不动 §三 6 流派主表，作为流派之上的「年代感锚点层」，与 design-director v3.0 的 §四 2026 趋势池 1:1 对应；红线没变（继续 15 条），但加 era_anchor 元字段到 tokens/<slug>.json 让流派和 2026 趋势 hybridize；references/inspirations.md 顶部加 §0 当代标杆指南 (linear.app / vercel.com / stripe.press / are.na / nothing.tech / aesop.com 等真实 URL 锚点)
一、触发场景
当用户要构建以下任一，触发本技能：
- 网站 / 落地页 / 官网 / 仪表盘
- React / Vue / HTML / Svelte 组件
- 营销海报 / 产品详情页 / 信息图
- 移动 H5 落地页 / APP 风格原型（iOS / 安卓 / 鸿蒙 风格 H5，对应 §三 第 6 流派 MOBILE-NATIVE）
- 微信 / 支付宝 / 抖音 / 快手小程序原型 ⭐v2.2 起，v4.3 补齐四端（归 MOBILE-NATIVE 子集，见
examples/mini-program/）
- 任何"美化页面 / 优化 UI"类请求
不触发（归其他技能）：
- PPT 演示稿 →
huo15-openclaw-ppt
- Word / PDF 文档 →
huo15-openclaw-office-doc
- 纯数据分析图表 → 常规 matplotlib / echarts 即可
产出：可直接运行的 HTML/CSS/JS（或 React/Vue）代码 + 3 行设计说明 + 可选截图验证命令。
二、设计思考（动手前必答四问）
| 维度 | 要回答 |
|---|
| 目的 | 这个界面解决什么问题？谁是使用者？ |
| 基调 | 选一个极端方向（见 §三） |
| 约束 | 技术栈 / 性能 / 可访问性 / 目标设备 |
| 差异点 | 用户会记住哪一件事？ |
硬规则：承诺一个极端方向。极简和极繁同样有效，关键是意图明确，不要骑墙。
三、六大美学流派（必选其一）
| 流派 | 关键特征 | 适合场景 | 参考 |
|---|
| BOLD-MINIMAL 勇敢极简 | 大字号、大留白、2 色系、无装饰 | 科技产品、B 端 SaaS、个人作品集 | Stripe / Linear / Apple |
| EDITORIAL 编辑杂志 | 衬线字、纵向栅格、引号装饰、杂志版式 | 品牌故事、深度内容、报告 | NYT Style / The Verge |
| BRUTALIST 野兽派 | 等宽字、粗黑线、打破网格、刻意粗糙 | 独立工作室、Web3、先锋作品 | Bloomberg / early craigslist |
| RETRO-FUTURE 复古未来 | 像素字、CRT 光晕、80s 霓虹配色 | 游戏、音乐、娱乐 | Vaporwave / Cyberpunk 2077 |
| ORGANIC 有机自然 | 手绘感、暖色、不规则形状、柔边 | 食品、母婴、健康 | Medium 早期 / Notion |
| MOBILE-NATIVE 移动原生 ⭐v2.1 | 遵循平台规范的移动设计：iOS HIG / Material Design 3 / HarmonyOS | APP 原型、H5 落地页、移动 webview | Apple HIG / m3.material.io / 鸿蒙设计指南 |
如果用户没给方向 ⭐v4.1 升级：走多流派并行对比流程，详见 references/multi-genre-compare.md。
- 首选：让
huo15-openclaw-design-director 选 3 流派（它有 20 条设计哲学 + 五维矩阵）
- 次选：从
tokens/_compare-matrix.md §反差对位选一组（理性/感性/实验、冷峻/温暖/复古、桌面/移动/跨端等）
- 3 个 Junior pass 必须并行（用 Explore subagent 隔离 context，不要串行）
- 截图后由 director 打分推荐 / design-critique 5 维评分 / 用户人眼挑，三选一
- 用户敲定 → 删掉其他草稿 → 单流派走阶段 3 Full Pass
MOBILE-NATIVE 的三选一：用户说"做 APP / 做 H5"时，先问目标平台 — iOS（用 examples/mobile-native/ios/）/ Android（用 examples/mobile-native/md3/）/ HarmonyOS（用 examples/mobile-native/harmony/）。多平台需求 → 三套 starter 都给，但产出文件夹分开。
小程序场景 ⭐v2.2 起，v4.3 补齐四端：归 MOBILE-NATIVE 子集，不另立第 7 流派（避免膨胀）。
- 微信小程序：
examples/mini-program/wechat/（wxml + wxss + JSON 配置三件套）
- 支付宝小程序：
examples/mini-program/alipay/（axml + acss + 配置）
- 抖音小程序 ⭐v4.2：
examples/mini-program/douyin/（ttml + ttss + 配置）
- 快手小程序 ⭐v4.3：
examples/mini-program/kuaishou/（ksml + 标准 css 后缀 + 配置）
- 四端同步迭代姿势：先做微信 → 复制到抖音改
wx: → tt: → 复制到快手改 wx: → ks:（两者最相近，各 3 分钟）→ 复制到支付宝改 wx: → a: / bindtap → onTap（差异最大，5 分钟）。完整对照表见 examples/mini-program/README.md。
三补、2026 微趋势补丁 ⭐v4.7
6 流派是骨架（决定字体 / 配色 / 排版的基本性格），2026 微趋势是年代感锚点层（决定看起来是不是当下流行）。 一个高品味的 brief 通常是「主流派 × 1 条 2026 微趋势」的混合，而不是单一流派。
与 huo15-openclaw-design-director v3.0 §四 2026 趋势池 1:1 对应，director 选趋势 → frontend-design 落地实现。
三补.1 Editorial Tech（编辑科技）
视觉签名：米色或近黑底 + 衬线 display + 等宽 caption + 长篇排版 + 无千篇一律 hero/features 骨架
适配的主流派：bold-minimal / editorial（混血）
实现锚点：
- 字体组合：GT Sectra / Tiempos serif display + Söhne / Inter sans body + JetBrains Mono caption
- 配色：
#FAF8F5 米色底 + #0F0F0F 黑文 + #FF5733 单一橙 accent
- 关键钩子：长段落（72 字符宽）+ 引号装饰 + drop cap 首字母 + 永久 metadata（作者 / 时间 / Reading Time）
当代标杆：press.stripe.com · linear.app/blog · cosmos.so · pirsch.io · craft.do/blog
适用场景：内容型品牌（书店 / 媒体 / 思想类 SaaS / 投资基金 / 思想型公司 blog）
三补.2 Spatial / Depth Web（半 3D）
视觉签名：WebGL 浅景深 / OKLab spotlight / 鼠标跟随阴影 / parallax / 浮空层叠
适配的主流派：bold-minimal / mobile-native-ios（Vision OS Web 风）
实现锚点：
- WebGL：Three.js / OGL 做轻量 GPU 几何（不要满屏 3D，只在 hero 用 spotlight）
- CSS：
backdrop-filter + mask-image 做 OKLab 光斑 + transform: perspective(1000px) translateZ(...) 浮空
- 鼠标跟随：CSS variable +
mousemove 注入 --mouse-x --mouse-y 控制阴影 / 高光位置
- 关键钩子：hero 的"鼠标移动看到不同角度"或"scroll 时元素小幅 Z 轴偏移"
当代标杆：apple.com/vision-pro/ · onform.fm · igloo.inc · paper.design · readymag.com
适用场景：科技品牌（AI / 硬件 / 操作系统 / 高端 SaaS）想要「未来感」但不要赛博朋克霓虹
警示：和红线 #11（AI 渐变模糊）容易撞 — 用 OKLab 真 spotlight 不是 blur 大色块。
三补.3 AI-Aesthetic Backlash（反 AI 范式）
视觉签名：手绘 + 真实摄影 + 不规则形 + 严禁紫粉渐变 / glassmorphism + 反 SaaS 千篇一律
适配的主流派：organic / brutalist 2026
实现锚点：
- 字体：avoid Inter / Roboto / system-ui；用 Tiempos / Druk / Söhne / GT America
- 配色：暖灰 + 深棕 + 不超过 2 色 accent；严禁紫色渐变 / 大色块 blur
- 元素：用 SVG 手绘线 + 真摄影（Unsplash / 自家素材，禁 AI 生图）+ 不规则圆角（
border-radius: 24px 8px 32px 12px）
- 关键钩子：「这看起来明显不是 AI 生成的」一眼可辨
当代标杆：are.na · plain-english.com · oatly.com 改版 · obvious.studio · cosmos.so
适用场景：独立品牌 / 高端食品 / 文化机构 / 想反工业 SaaS 范式的产品
警示：和红线 #2（紫色渐变）/ #11（AI 渐变模糊）/ #10（玻璃形态）强联动，违反任一直接 AI Slop 判废。
三补.4 Brutalist 2026（克制版野兽派）
视觉签名：灰白 / 米白 + 黑 + 警示黄 / 警示红 + 等宽字 + 极少装饰 + 永久 metadata
适配的主流派：brutalist
实现锚点：
- 字体：JetBrains Mono / Iosevka / Departure Mono 单字体打天下（display + body 都用 mono）
- 配色：
#FAFAFA 灰白底（不是纯白） + #0A0A0A 黑 + #FFE600 警示黄（仅用于 accent / 状态标记，不是装饰）
- 元素：1px 黑描边 / 0 圆角 / 永久 BUILD · 日期戳 / 文档感版式（像 README）
- 关键钩子：「看起来像 GitHub README 但是品牌官网」/ 信息密度大但克制装饰
当代标杆：nothing.tech · tylko.com · plainenglishpodcast.com · are.na
适用场景：硬件品牌（极简硬件 / DevTool / 独立工作室）/ 思想型博客 / 反工业 SaaS
警示：和老 Brutalist（Bloomberg Terminal / craigslist 风）的区别 — 2026 版克制装饰、强调信息层级，不是原始网吧风。
三补 与红线 / tokens / director 的关系
- 红线（§四 15 条）不变：2026 微趋势依然要遵守 15 条硬红线
- tokens（§五.6）加可选
era_anchor 元字段：标记本流派 token 默认对应哪条 2026 趋势（如 brutalist token 默认对应"Brutalist 2026"）
- director（v3.0 §四）选 1 条趋势 → 本 skill 落地：接力消息
briefs.<genre>.eraAnchor 字段填趋势名（"Editorial Tech" / "Spatial Web" / "AI-Backlash" / "Brutalist 2026"），渲染时拉本节锚点配色 / 字体 / 关键钩子做 starter 改写
四、反 AI Slop 硬红线（违反任一直接判废）
| # | 禁用项 | 为什么 |
|---|
| 1 | 默认 Inter / Roboto / Arial / system-ui 字体 | 字体即性格，系统字 = 没性格 |
| 2 | 紫色渐变（尤其紫色渐变打白底） | 2023 以来 AI 最滥用的视觉陈词滥调 |
| 3 | emoji 当图标 | 必须用 Lucide / Phosphor / Tabler / Heroicons 真图标 |
| 4 | 圆角卡片 + 左侧彩色竖条 | Tailwind 默认范式，设计师都看腻了 |
| 5 | CSS 画的伪产品图 | 真产品图用 Unsplash/Picsum 占位，明确标注"待替换" |
| 6 | 默认暗黑 #121212 + 紫色主题 | 懒，且和 #2 联动犯错 |
| 7 | Hero + Features + CTA + Footer 千篇一律骨架 | 按内容定制结构，不要模板化 |
| 8 | 全部用 #007AFF / #FF3B30 这类 iOS 系统色 | 没有记忆点 |
| 9 | 全局统一 16px / 12px border-radius | Tailwind / shadcn 默认值，工业感 = 没设计 |
| 10 | 滥用 backdrop-blur 玻璃形态（每个卡片都磨砂） | 2024 后期开始烂大街，掩盖排版无能 |
| 11 | AI 生成的渐变模糊背景（紫粉 / 蓝青大色块 blur） | 与红线 #2 联动，是 AI Slop 最强信号 |
| 12 ⭐v2.1 | 移动端直接套 UI 库默认皮（Vant / Ant Mobile / NutUI 不改 token） | 没有 brand identity = 没有产品 |
| 13 ⭐v2.1 | 移动端缺 viewport-fit=cover + safe-area-inset（刘海 / Home indicator 被遮） | 客户拿真机一看就崩，硬 a11y 红线 |
| 14 ⭐v2.2 / v4.2 / v4.3 扩展 | 小程序直接套 WeUI / Vant Weapp / TDesign-Mini / Lin-UI / TTUI / Tt-Mini-UI / KSUI / kuaishou-uikit 默认皮（不改 token） | 四端 1 千个 demo 长一个样，没产品识别 |
| 15 ⭐v2.2 | 小程序缺 <page-meta> + safe-area-inset + rpx 适配 | 真机一看顶部胶囊 / 底部 home indicator 重叠，硬适配红线 |
小程序字体豁免说明 ⭐v2.2：小程序平台不允许 @font-face 加载 web font（出于性能与审核），无法套用红线 #1 推荐字体（Manrope / DM Sans / IBM Plex Sans）。小程序 wxss / acss 中 font-family 优先序：
- PingFang SC（iOS / 微信）
- Source Han Sans CN / 思源黑体（Android / 支付宝端）
- Noto Sans SC fallback
- 禁
-apple-system, BlinkMacSystemFont 写法（红线 #1 仍生效，且这些 fallback 链在小程序里其实也只走系统中文字体）
数字 / 英文如需差异化字体，可用 wxss 内联 base64 字体子集（仅 0–9 + A–Z），或干脆全部用 PingFang SC 数字部分，靠字号 / 字重做区分。
五、美学要素清单（每项都要想过）
5.1 字体 Typography
- 主字（display）选有性格的：Playfair Display / IBM Plex Serif / Space Mono / Noto Serif SC / DM Serif / Rubik Mono One
- 副字（body）选考究的：IBM Plex Sans / Source Serif / 思源宋体 / Noto Sans SC
- 主副反差要大，避免同字族
5.2 颜色 Color
- 主色 + 锐利强调色，CSS variables 统一管理
- 优先 oklch 色空间（感知均匀，避免灰调）
- 主色占 60-70%，强调色 5-10%，中性 20-30%
- 不要 evenly-distributed palette
5.3 动效 Motion
- 页面加载的 staggered reveal > 散落的微交互
animation-delay 做级联出场- CSS 优先，React 用 Motion（framer-motion）
- 一个高质量的动效 > 十个微交互
5.4 空间 Spatial Composition
- 不对称 / 重叠 / 对角线 / 打破网格
- 留白充足 或 密集信息，二选一
- 避免居中对齐一统到底
5.5 氛围 Backgrounds & Texture
- 渐变网格 / 噪点 / 几何图案 / 戏剧阴影
- 装饰性边框 / 自定义光标 / grain overlay
- 不要纯色底（除非极简流派明确需要）
5.6 Design Tokens ⭐v4.0 / v4.5 加 motion
5.7 Motion Tokens ⭐v4.5（动效原则）
动效不是装饰，是时间维度的版式。每个流派的动效原则与该流派静态视觉一致：
- bold-minimal / editorial：克制 / 稳重 — 单一 easing、决不弹跳
- brutalist / retro-future：硬切 / CRT 闪烁 — linear / step easing，禁缓动函数
- organic：弹性 — spring 1.56 超调，模拟手作回落
- mobile-native iOS / MD3 / Harmony：照搬平台 spec（iOS spring / MD3 12 档 emphasized / 鸿蒙 fluid）
实现：CSS 用 transition: <prop> var(--duration-fast) var(--easing-standard)；React 用 Motion（framer-motion）的 transition={{ duration, ease }}；列表级联用 :nth-child(n) { animation-delay: calc(var(--stagger-normal) * (n - 1)) }。
禁忌（继承 §四 红线）：
- 禁滥用 motion（每个元素都 hover scale → 头晕）
- 禁
transition: all —— 总是显式列 properties
- 禁忽略
prefers-reduced-motion: reduce —— 媒体查询关掉 stagger / spring
六、工作流（Junior → Full 两趟渲染）
阶段 1 · 理解（Understand）
阶段 2 · Junior Pass（假设占位，快速出骨架）
- 从
examples/<流派>/index.html 起手，复制到目标文件再改 — 不要从空白起步
- 同时打开
references/colors.md 和 references/typography.md 锁配色 / 字体
- 用占位文案（Lorem Ipsum 或真实类似文案）+ 占位图片（Picsum/Unsplash 链接）
- 跑通结构、栅格、主要交互
- 诚实标注每一块占位（
<!-- TODO: 真实文案 -->）
- 让用户看到方向再继续
阶段 3 · Full Pass（补内容、调细节）
- 补真实文案（问用户要 或 用
huo15-openclaw-brand-protocol 抓品牌资源）
- 替换真实图片（需要下载时返回 CLI 命令，不用 child_process）
- 微调字号、行高、字距、间距、阴影层级
- 加动效
阶段 3.5 · Tokens 导出（可选）⭐v4.0
当用户要把设计落地到既有项目（已有 Tailwind / 已有 Figma 设计系统 / 多产品复用）：
阶段 4 · 自验证（Self-Verify）⭐v3.0 工作流升级
优先路线：Claude in Chrome MCP，由 Claude 直接驱动浏览器渲染并截图，不需要让用户跑命令。
mcp__Claude_in_Chrome__list_connected_browsers → 检查浏览器连接mcp__Claude_in_Chrome__navigate → 打开 file:// 或 URLmcp__Claude_in_Chrome__computer({action:"screenshot", save_to_disk:true}) → 截图mcp__Claude_in_Chrome__read_console_messages → 抓 oklch fallback / 字体 404 / JS 报错- 移动端用
resize_window 切到设备 viewport（393×852 / 412×915 / 396×858）
Fallback 顺序（按场景降级）：
- MCP 不可用（
list_connected_browsers 返 []）→ Playwright CLI（return-cliCmd 让用户执行，延续禁 child_process 铁律）：
npx playwright-core screenshot <URL 或 file:///绝对路径> ~/verify.png --viewport-size=1440,900
npx playwright-core screenshot <URL> ~/verify-iphone.png --viewport-size=393,852
npx playwright-core screenshot <URL> ~/verify-android.png --viewport-size=412,915
- 微信小程序场景 → 微信开发者工具打开
examples/mini-program/wechat/，编译预览 / 真机调试扫码
- 支付宝小程序场景 → 支付宝小程序 IDE 打开
examples/mini-program/alipay/，预览扫码
- 抖音小程序场景 ⭐v4.2 → 抖音开发者工具打开
examples/mini-program/douyin/，编译预览 / 扫码用抖音 App 看真机
- 快手小程序场景 ⭐v4.3 → 快手小程序开发者工具打开
examples/mini-program/kuaishou/，编译预览 / 扫码用快手 App 看真机
完整决策树 + 命令清单 + 兼容性矩阵 见 references/self-verify.md（v3.0 新增手册）。
评审接力：截图回收后由用户人眼审，或调 huo15-openclaw-design-critique 5 维打分。MOBILE-NATIVE 流派额外检查：safe-area-inset 上下有效、tab-bar 触达高度 ≥ 44pt / 48dp；小程序检查 <page-meta> 存在 + tabBar native + rpx 适配。
a11y 审计 ⭐v4.4：渲染完成后注入 axe-core 跑 WCAG 2.2 AA 检查（首选 Chrome MCP 路线，详见 references/self-verify.md §1.5 + references/a11y-checklist.md 30 条速查）；机器测不出的主观 / 交互项（颜色非唯一信息载体、键盘陷阱、错误纠正建议等）人审兜底。violations 修完且 passes ≥ 90% 视为可发布。
阶段 5 · 可选 · 评审（Review）
调用 huo15-openclaw-design-critique 做 5 维评分 + Keep/Fix/Quick Wins。
七、产出清单（每次交付必含）
- 代码文件（
index.html / App.tsx / page.vue），可直接运行
- 3 行设计说明：
- 流派（从 §三 五选一）
- 关键设计选择（字体 / 主色 / 动效三选一突出）
- 差异点（用户会记住什么）
- （可选）截图验证 CLI 命令
- （可选）已知限制（占位图未替换 / 未测移动端等）
八、与其他 huo15 技能的分工
| 能力 | 归属技能 |
|---|
| Web UI / HTML 原型 / 落地页 | 本技能 |
| 设计方向选择（多流派对比） | huo15-openclaw-design-director |
| 品牌规范抓取 + brand-spec | huo15-openclaw-brand-protocol |
| 设计评审 5 维打分 | huo15-openclaw-design-critique |
| PPT 演示稿 | huo15-openclaw-ppt |
| Word / PDF 文档 | huo15-openclaw-office-doc |
九、触发词
Web 端
- 做网站 / 做落地页 / 做官网 / 做仪表盘
- 做组件 / 做 React 组件 / 做 Vue 组件
- HTML 原型 / 页面原型 / 前端原型
- 美化页面 / 优化 UI / 前端设计 / Web 设计
- 做海报 / 做详情页 / 做信息图 / 产品页
移动端 ⭐v2.1
- 做 APP / 做 APP 原型 / 做 APP 落地页 / 做 APP UI
- 做 H5 / 做移动 H5 / 做移动落地页
- iOS 风格 / iOS HIG / iPhone 设计
- 安卓 / Android / Material Design / MD3 / 安卓风格
- 鸿蒙 / HarmonyOS / 鸿蒙设计
小程序 ⭐v2.2 起，v4.3 补齐四端
- 做小程序 / 做微信小程序 / 做支付宝小程序 / 做抖音小程序 / 做快手小程序
- 小程序原型 / 小程序落地页 / 小程序首页
- wxml / wxss / 微信小程序设计
- axml / acss / 支付宝小程序设计
- ttml / ttss / 抖音小程序设计 ⭐v4.2
- ksml / 快手小程序设计 ⭐v4.3
- 四端小程序 / 多端同步
Design Tokens ⭐v4.0
- design tokens / 设计 tokens / 设计 token / token 导出
- 做设计系统 / 设计系统 / design system
- Tailwind 配色 / Tailwind 主题 / 流派 token
- Figma tokens / Tokens Studio / Figma 主题
- jq 转 CSS variables / 多产品共享主题
多流派对比 ⭐v4.1
- 几个方向对比 / 三个风格对比 / 多流派对比
- 帮我选方向 / 帮我选流派 / 你定方向
- design direction / 设计方向 / 风格提案 / 方向选型
- 三套 Junior pass / 三方向草稿
- 五维矩阵 / 流派打分
无障碍审计 ⭐v4.4
- 无障碍 / a11y / WCAG / WCAG 2.2
- accessibility / 无障碍审计 / 无障碍合规
- Lighthouse / axe-core / axe 审计
- 屏幕阅读器 / 键盘可操作 / 焦点环
- 对比度 / 触达目标 / alt 文本 / 色盲
动效 / Motion Tokens ⭐v4.5
- 做动效 / 加动效 / 动画 / motion / animation
- motion tokens / 动效 token / 动画 token
- duration / easing / 缓动函数 / cubic-bezier
- spring / 弹簧动效 / staggered / 级联出场
- prefers-reduced-motion / 减少动效 / 无障碍动效
2026 微趋势 ⭐v4.7
- Editorial Tech / 编辑科技 / 编辑感 / 长篇排版
- Spatial Web / 半 3D / Vision OS Web / depth web
- AI-Backlash / 反 AI / 反 AI 范式 / 反 SaaS / 手作高保真
- Brutalist 2026 / 克制版野兽派 / 灰白警示黄
- 2026 微趋势 / 2026 当代风 / 当下流行什么 / era_anchor
十、版本历史
- v4.7.0（当前 · 2026-04-28）：2026 微趋势补丁。§三 6 流派主表不变，新增 §三补「2026 微趋势补丁」4 条年代感锚点（Editorial Tech 编辑科技 / Spatial Web 半 3D / AI-Aesthetic Backlash 反 AI / Brutalist 2026 克制版），每条含视觉签名 + 适配主流派 + 实现锚点（字体 / 配色 / 元素 / 关键钩子）+ 当代标杆 URL（press.stripe.com / linear.app/blog / apple.com/vision-pro/ / are.na / nothing.tech 等真实可访问）+ 适用场景 + 警示；与
huo15-openclaw-design-director v3.0 §四 2026 趋势池 1:1 对应（director 选趋势 → 本 skill 落地）；接力消息加 briefs.<genre>.eraAnchor 字段；建议 tokens/<slug>.json 加可选 era_anchor 元字段标记默认对应趋势（不强制改 schema，渐进式）；触发词扩到 Editorial Tech / Spatial Web / AI-Backlash / Brutalist 2026 / 2026 微趋势。红线 / 流派 / tokens / a11y / motion / 自验证 / 多流派对比均不变，纯当代审美补丁层。
- v4.6.0（2026-04-27）：Tailwind v4 适配。
tokens/exporters/to-tailwind.md 在 v3 theme.extend 章节之上加 v4 @theme {} 块导出（推荐，2026 起 Tailwind 默认走这条）：jq 命令把 tokens.json 转成 CSS 内 @theme 块，token 命名前缀化（--color-* / --spacing-* / --radius-* / --shadow-* / --duration-* / --ease-*），utility class 由 Tailwind 自动生成无需配置；oklch 在 v4 原生支持不需要 @property polyfill；hex fallback 通过同名属性双写实现；保留 v3 theme.extend 章节作 legacy 项目兼容。红线 / 流派 / a11y / motion / 自验证 / 多流派对比 / tokens schema 均不变，纯 Tailwind 现代化适配。
- v4.5.0（2026-04-27）：动效 tokens。8 个
tokens/<slug>.json 加 motion 字段（duration / easing / stagger / philosophy），每个流派差异化动效原则：bold-minimal 克制 / editorial 稳重 / brutalist 硬切 / retro-future CRT 闪烁 / organic 弹性 spring / mobile-native-ios HIG spring / mobile-native-md3 完整 12 档 + 4 emphasized / mobile-native-harmony fluid；3 导出器同步加 motion 转换段：to-css-vars.md 加 --duration-* / --easing-* / --stagger-* + @property 块平滑过渡 / to-tailwind.md 加 transitionDuration + transitionTimingFunction 注入 theme.extend / to-figma.md 加 cubicBezier 4 元数组 + Tokens Studio v2 兼容；tokens/_compare-matrix.md 加 motion 哲学速查表（含反差选 motion 命题）；tokens/_schema.md 加 motion 字段约定；SKILL.md §五 加 5.7 Motion Tokens 段（动效原则 + 实现方式 + prefers-reduced-motion 兜底禁忌）；触发词扩到做动效 / motion / duration / easing / spring / 级联出场。红线 / 流派 / a11y / 自验证均不变，纯动效 token 化升级。
- v4.4.0（2026-04-26）：a11y 自动审计。新增
references/a11y-checklist.md WCAG 2.2 AA 30 条速查（4 大类 Perceivable / Operable / Understandable / Robust + 场景优先级表 B 端 / 内容站 / 落地页 / 移动端 / 小程序 + 流派 a11y 友好度对照表 8 流派）；references/self-verify.md §1.5 新增 axe-core MCP 注入路线（mcp__Claude_in_Chrome__javascript_tool 跑 axe.run wcag2aa+wcag22aa）+ Lighthouse CLI fallback（npx lighthouse --only-categories=accessibility）；§六 阶段 4 加 a11y 审计段（violations 修完 + passes ≥ 90% 可发布）；触发词扩到无障碍 / a11y / WCAG / Lighthouse / 对比度 / 焦点环 / 屏幕阅读器；标识 a11y 与红线的关系（红线 #13 与 a11y #16 触达交集，未引入新红线）。红线 / 流派 / tokens / 多流派对比均不变，纯无障碍审计能力补齐。
- v4.3.0（2026-04-26）：小程序四端齐。新增
examples/mini-program/kuaishou/ 快手小程序 starter（app.json + app.css + app.js + project.config.json + pages/index 4 件套：ksml + css + json + js），与微信端 95% 同源，仅前缀差异（wx: → ks: 机械替换），样式后缀用标准 .css（区别于微信 .wxss / 抖音 .ttss）；红线 #14 UI 库列表扩展 KSUI / kuaishou-uikit；触发词扩到快手小程序 / ksml / 四端小程序；examples/mini-program/README.md 升级四端对照表（推荐顺序：微信 → 抖音 → 快手 → 支付宝）+ 顶部胶囊形态四端对照（微信圆角 / 支付宝椭圆 / 抖音矩形 / 快手矩形）+ "何时该用 Taro / Uni-app 编译框架"提示；阶段 4 自验证补快手开发者工具流程；references/inspirations.md §7.4 加快手参考、§7.5 通用参考从三端升为四端。红线 / 流派 / 自验证 / tokens / 多流派对比均不变，纯第四端补齐。
- v4.2.0（2026-04-26）：小程序三端齐。新增
examples/mini-program/douyin/ 抖音小程序 starter（app.json + app.ttss + app.js + project.config.json + pages/index 4 件套：ttml + ttss + json + js），与微信 / 支付宝端 95% 同源，仅前缀差异（wx: → tt: 机械替换）；红线 #14 UI 库列表扩展 TTUI / Tt-Mini-UI；触发词扩到抖音小程序 / ttml / ttss / 三端小程序 / 多端同步；examples/mini-program/README.md 升级三端对照表（微信 → 抖音 3 分钟 / 微信 → 支付宝 5 分钟）+ 真机扫码必查清单；阶段 4 自验证补抖音开发者工具流程；references/inspirations.md §7.3 加抖音参考、§7.4 三端通用参考含 Taro / Uni-app 编译框架；§三 小程序场景说明双端 → 三端。红线 / 流派 / 自验证 / tokens / 多流派对比均不变，纯第三端补齐。
- v4.1.0（2026-04-26）：多流派并行对比。新增
tokens/_compare-matrix.md 8 流派横向对比矩阵（关键 token / 反差对位 / redLineWaiver 速查）；新增 references/multi-genre-compare.md 多流派对比手册（流程总览 + 与 huo15-openclaw-design-director 协作接力 + 接力消息格式 + Explore subagent 并行 3 流派 Junior pass）；SKILL.md §三 改写"如果用户没给方向"段为 director 联动入口；§六 阶段 1 加多流派模式判断；触发词扩到几个方向对比 / design direction / 风格提案 / 五维矩阵 / 流派打分。红线 / 流派 / 自验证 / tokens 系统均不变，纯多流派编排升级。预留 director v2 升级时无需 frontend-design 再改的接力入口（tokens schema + compare matrix + redLineWaiver 已就位）。
- v4.0.0（2026-04-26）：design tokens 系统化。新增
tokens/ 目录：8 个流派各一份扁平 1 层 JSON（color / colorHex / typography / spacing / radius / shadow / examplePath / redLineWaiver?），覆盖 BOLD-MINIMAL / EDITORIAL / BRUTALIST / RETRO-FUTURE / ORGANIC + MOBILE-NATIVE iOS HIG / MD3 / HarmonyOS；三个导出器手册（tokens/exporters/{to-css-vars,to-tailwind,to-figma}.md）— jq 一行转 CSS variables / tailwind.config.js extend / Tokens Studio v2 兼容 JSON；SKILL.md §五 加 5.6 Design Tokens 段、§六 加阶段 3.5 Tokens 导出（可选）；触发词扩到 design tokens / 设计系统 / Tailwind 配色 / Figma tokens；导出器延续禁 child_process 铁律（return-cliCmd）；references/colors.md 顶部加 tokens 路径指引。红线 / 流派 / 自验证工作流均不变，纯设计系统化升级。
- v3.0.0（2026-04-26）：自验证工作流升级。阶段 4 重写：Claude in Chrome MCP 成为首选路线（list_connected_browsers / navigate / screenshot / read_console_messages / resize_window 5 个 MCP 工具组合驱动）；MCP 不可用时降级到 Playwright CLI（保留 return-cliCmd 模式 + 禁 child_process 铁律）；小程序场景下沉到微信开发者工具 / 支付宝 IDE；新增
references/self-verify.md 完整操作手册（决策树 + 4 条路线命令清单 + 三路线兼容性矩阵 + 移动端检查清单 + 设计原则提醒）。红线 / 流派 / 触发词均不变，纯工作流升级。
- v2.2.0（2026-04-26）：小程序扩展。新增
examples/mini-program/wechat/ + examples/mini-program/alipay/ 双小程序 starter（pages/index 三件套 + app.json + project.config / mini.project 配置 + sitemap），归 MOBILE-NATIVE 子集，不另立第 7 流派；硬红线由 13 → 15 条（增 #14 禁直接套 WeUI / Vant Weapp / TDesign-Mini / Lin-UI 默认皮、#15 禁缺 <page-meta> + safe-area-inset + rpx 适配）；新增小程序字体豁免说明（平台不允许 @font-face 加载 web font，font-family 退到 PingFang SC / 思源黑体）；触发词扩到小程序 / wxml / axml / 微信 / 支付宝；阶段 4 自验证补微信开发者工具 + 支付宝 IDE 流程；references/inspirations.md 补小程序章节。
- v2.1.0（2026-04-26）：移动端扩展。新增第 6 流派 MOBILE-NATIVE，覆盖 iOS HIG / Material Design 3 / HarmonyOS 三套平台规范；新增
examples/mobile-native/{ios,md3,harmony}/index.html 三套 starter；硬红线由 11 → 13 条（增：禁直接套 Vant / Ant Mobile / NutUI 默认皮、禁缺 viewport-fit=cover + safe-area-inset）；触发词扩到 APP / H5 / 移动端 / iOS 风格 / 安卓 / 鸿蒙；阶段 4 自验证补移动端双截图（iPhone 16 Pro / Pixel 8 viewport）；references/ 三件套补 mobile-native 章节。
- v2.0.0（2026-04-26）：对齐补 + 补料版。SKILL.md 与 clawhub 版本号对齐到 2.0；新建
examples/ 5 流派 starter HTML（直接可在浏览器打开，oklch + Google Fonts，复制即起步）；新建 references/ 三件套（colors.md / typography.md / inspirations.md）作为运行期资源；硬红线由 8 → 11 条（增：禁全局 16px 圆角、禁滥用 backdrop-blur、禁 AI 渐变模糊背景）；Junior Pass 工作流强制从 examples/ 起手。删除空的 presets/ 占位目录。
- v1.0.0（2026-04-23）：初始版本。对齐 Anthropic
frontend-design 核心理念（BOLD 美学方向 + 反 AI slop），本土化中文改写，加入 5 流派选择、8 条硬红线、Junior/Full 两趟渲染工作流、Playwright 自验证 CLI、与火一五其他技能的分工边界。
技术支持： 青岛火一五信息科技有限公司
