火一五前端设计技能 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 / AppleEDITORIAL 编辑杂志衬线字、纵向栅格、引号装饰、杂志版式品牌故事、深度内容、报告NYT Style / The VergeBRUTALIST 野兽派等宽字、粗黑线、打破网格、刻意粗糙独立工作室、Web3、先锋作品Bloomberg / early craigslistRETRO-FUTURE 复古未来像素字、CRT 光晕、80s 霓虹配色游戏、音乐、娱乐Vaporwave / Cyberpunk 2077ORGANIC 有机自然手绘感、暖色、不规则形状、柔边食品、母婴、健康Medium 早期 / NotionMOBILE-NATIVE 移动原生 ⭐v2.1遵循平台规范的移动设计：iOS HIG / Material Design 3 / HarmonyOSAPP 原型、H5 落地页、移动 webviewApple 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 最滥用的视觉陈词滥调3emoji 当图标必须用 Lucide / Phosphor / Tabler / Heroicons 真图标4圆角卡片 + 左侧彩色竖条Tailwind 默认范式，设计师都看腻了5CSS 画的伪产品图真产品图用 Unsplash/Picsum 占位，明确标注"待替换"6默认暗黑 #121212 + 紫色主题懒，且和 #2 联动犯错7Hero + Features + CTA + Footer 千篇一律骨架按内容定制结构，不要模板化8全部用 #007AFF / #FF3B30 这类 iOS 系统色没有记忆点9全局统一 16px / 12px border-radiusTailwind / shadcn 默认值，工业感 = 没设计10滥用 backdrop-blur 玻璃形态（每个卡片都磨砂）2024 后期开始烂大街，掩盖排版无能11AI 生成的渐变模糊背景（紫粉 / 蓝青大色块 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 优先序：

1. PingFang SC（iOS / 微信）
2. Source Han Sans CN / 思源黑体（Android / 支付宝端）
3. Noto Sans SC fallback
4. 禁 -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#

• 每个流派一份 tokens/<slug>.json，扁平 1 层 schema： color / colorHex / typography / spacing / radius / shadow / motion ⭐v4.5 / examplePath / redLineWaiver?
• 8 个流派： bold-minimal / editorial / brutalist / retro-future / organic / mobile-native-ios / mobile-native-md3 / mobile-native-harmony
• 三个导出器（jq 一行）： tokens/exporters/to-css-vars.md / tokens/exporters/to-tailwind.md / tokens/exporters/to-figma.md
• 使用流程：先在 §六 阶段 3.5 选定流派 → 跑 jq 命令出 CSS vars / Tailwind config → Junior Pass starter HTML 直接 var(--color-xxx) / var(--duration-fast) 引用
• schema 详细见 tokens/_schema.md；横向对比见 tokens/_compare-matrix.md（含 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）#

• 复述需求 / 目的 / 受众
• 确认基调和流派
• 列出硬约束（技术栈、浏览器兼容、a11y）
• 多流派模式判断 ⭐v4.1：用户没给明确流派 + 触发词命中"几个方向 / 三个风格 / 帮我选" → 走 references/multi-genre-compare.md 流程；否则进单流派 Junior pass

阶段 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 设计系统 / 多产品复用）：

• 选定流派 → 找到对应 tokens/<slug>.json
• 跑 jq 一行转换：CSS vars（ exporters/to-css-vars.md）/ Tailwind extend（ exporters/to-tailwind.md）/ Figma Tokens Studio（ exporters/to-figma.md）
• 转换产物建议落到 <用户项目>/generated/tokens/ 入仓
• 不强制：纯一次性 H5 / 海报场景跳过本阶段，直接用 examples/ 起手即可

阶段 4 · 自验证（Self-Verify）⭐v3.0 工作流升级#

优先路线： Claude in Chrome MCP，由 Claude 直接驱动浏览器渲染并截图，不需要让用户跑命令。

• mcp__Claude_in_Chrome__list_connected_browsers → 检查浏览器连接
• mcp__Claude_in_Chrome__navigate → 打开 file:// 或 URL
• mcp__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 顺序（按场景降级）：

1. MCP 不可用（ list_connected_browsers 返 []）→ Playwright CLI（return-cliCmd 让用户执行，延续禁 child_process 铁律）： bash

   # 桌面端
   npx playwright-core screenshot <URL 或 file:///绝对路径> ~/verify.png --viewport-size=1440,900
   # 移动端（MOBILE-NATIVE 流派必跑）
   npx playwright-core screenshot <URL> ~/verify-iphone.png --viewport-size=393,852
   npx playwright-core screenshot <URL> ~/verify-android.png --viewport-size=412,915
   
   

2. 微信小程序场景 → 微信开发者工具打开 examples/mini-program/wechat/，编译预览 / 真机调试扫码

3. 支付宝小程序场景 → 支付宝小程序 IDE 打开 examples/mini-program/alipay/，预览扫码

4. 抖音小程序场景 ⭐v4.2 → 抖音开发者工具打开 examples/mini-program/douyin/，编译预览 / 扫码用抖音 App 看真机

5. 快手小程序场景 ⭐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。

---

七、产出清单（每次交付必含）#

1. 代码文件（ index.html / App.tsx / page.vue），可直接运行

2. 3 行设计说明：

   • 流派（从 §三 五选一）
   • 关键设计选择（字体 / 主色 / 动效三选一突出）
   • 差异点（用户会记住什么）

3. （可选）截图验证 CLI 命令

4. （可选）已知限制（占位图未替换 / 未测移动端等）

---

八、与其他 huo15 技能的分工#

能力归属技能Web UI / HTML 原型 / 落地页本技能设计方向选择（多流派对比）huo15-openclaw-design-director品牌规范抓取 + brand-spechuo15-openclaw-brand-protocol设计评审 5 维打分huo15-openclaw-design-critiquePPT 演示稿huo15-openclaw-pptWord / 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、与火一五其他技能的分工边界。

---

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