--- 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。用于构建网站、落地页、仪表盘、APP 移动端、小程序（四端）、React/Vue 组件、HTML 海报、产品详情页、信息图、设计系统、无障碍合规页面、动效系统。配套 6 大美学流派 + 小程序子集、15 条硬红线、Junior/Full 两趟渲染、design tokens（color / typography / spacing / radius / shadow / motion）；自验证 Claude in Chrome MCP 优先 + 多路线 fallback + axe-core / Lighthouse a11y 审计；多流派对比与 design-director 联动。触发词：做网站、做落地页、做 UI、做 APP、做 H5、做小程序、做设计系统、design tokens、做动效、motion tokens、wxml、axml、ttml、ksml、做组件、HTML 原型、页面设计、移动端设计、前端设计、做海报、做详情页、iOS 风格、安卓风格、鸿蒙风格、微信小程序、支付宝小程序、抖音小程序、快手小程序、几个方向对比、风格提案、无障碍、a11y、WCAG、Lighthouse 审计、动画时长、easing、缓动函数。 version: 4.6.0 aliases: - 火一五前端设计技能 - 火一五Web设计技能 - 火一五APP设计技能 - 火一五移动端设计技能 - 火一五H5设计技能 - 火一五小程序设计技能 - 火一五抖音小程序技能 - 火一五快手小程序技能 - 火一五无障碍审计技能 - 火一五动效技能 - 火一五设计系统技能 - 火一五落地页技能 - 火一五UI设计技能 - 火一五海报设计技能 - 火一五前端设计 - 前端设计 - UI 设计 - 页面设计 - HTML 原型 - 落地页设计 - 海报设计 - Web 设计 - APP 设计 - 移动端设计 - H5 设计 - 小程序设计 - 微信小程序 - 支付宝小程序 - 抖音小程序 - 快手小程序 - 无障碍 - a11y - WCAG - 动效 - motion tokens - 动画 tokens - design tokens - 设计 tokens - 设计系统 --- # 火一五前端设计技能 v4.6 > 高保真 Web UI + 移动端 / APP / H5 + 微信 / 支付宝 / 抖音 / 快手四端小程序 + design tokens（含 motion）系统化 + 多流派并行对比 + WCAG 2.2 AA 无障碍审计 + 动效 tokens + Tailwind v4 `@theme` 适配原型生成 — 青岛火一五信息科技有限公司 > 设计理念对标 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`](references/self-verify.md) 操作手册 > v4.0 起：design tokens 系统化 — 8 个流派统一 [`tokens/.json`](tokens/) 扁平 schema（color / colorHex / typography / spacing / radius / shadow），三导出器 jq 一行转 CSS variables / Tailwind config / Figma Tokens Studio > v4.1 起：多流派并行对比 — 新增 [`tokens/_compare-matrix.md`](tokens/_compare-matrix.md) 8 流派横向对比矩阵 + [`references/multi-genre-compare.md`](references/multi-genre-compare.md) 与 `huo15-openclaw-design-director` 联动手册（Explore subagent 并行 3 流派 Junior pass + 接力消息格式 + redLineWaiver 速查） > v4.2 起：小程序三端齐 — 新增 [`examples/mini-program/douyin/`](examples/mini-program/douyin/) 抖音 starter（ttml + ttss + project.config + pages/index 4 件套），微信 / 支付宝 / 抖音三端 95% 同源；红线 #14 UI 库列表扩展 TTUI / Tt-Mini-UI；触发词扩到抖音小程序 / ttml；README 升级三端同步迭代姿势 + 真机扫码必查清单 > v4.3 起：小程序四端齐 — 新增 [`examples/mini-program/kuaishou/`](examples/mini-program/kuaishou/) 快手 starter（ksml + 标准 css 后缀 + project.config + pages/index 4 件套）；红线 #14 UI 库列表加 KSUI / kuaishou-uikit；触发词扩到快手小程序 / ksml；README 升级四端同步迭代姿势（微信 → 抖音 → 快手 → 支付宝）+ 顶部胶囊形态四端对照 > v4.4 起：a11y 自动审计 — 新增 [`references/a11y-checklist.md`](references/a11y-checklist.md) WCAG 2.2 AA 30 条速查 + 场景优先级 + 流派 a11y 友好度对照；[`references/self-verify.md`](references/self-verify.md) §1.5 加 axe-core MCP 注入路线 + Lighthouse CLI fallback；触发词扩到无障碍 / a11y / WCAG / Lighthouse > v4.5 起：动效 tokens — 8 流派 [`tokens/.json`](tokens/) 加 `motion` 字段（duration / easing / stagger / philosophy），每个流派有差异化动效原则（克制 / 稳重 / 硬切 / CRT 闪烁 / 弹性 / iOS spring / MD3 12 档 / 鸿蒙流畅）；3 导出器同步加 motion 转换段（CSS vars + `@property` 平滑过渡 / Tailwind transitionDuration + transitionTimingFunction / Figma Tokens Studio cubicBezier 4 元数组）；[`tokens/_compare-matrix.md`](tokens/_compare-matrix.md) 加 motion 哲学速查表 > **v4.6 起**：Tailwind v4 适配 — [`tokens/exporters/to-tailwind.md`](tokens/exporters/to-tailwind.md) 加 v4 `@theme {}` 块导出（CSS 内声明 token，前缀化 `--color-* / --spacing-* / --radius-*` 等，自动生成 utility class）；oklch 在 v4 原生支持不需要 `@property` polyfill；hex fallback 用同名属性双写；保留 v3 `theme.extend` 章节作 legacy --- ## 一、触发场景当用户要构建以下任一，触发本技能： - 网站 / 落地页 / 官网 / 仪表盘 - 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`](references/multi-genre-compare.md)。 - **首选**：让 `huo15-openclaw-design-director` 选 3 流派（它有 20 条设计哲学 + 五维矩阵） - **次选**：从 [`tokens/_compare-matrix.md`](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`](examples/mini-program/README.md)。 --- ## 四、反 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 | 小程序**缺 `` + `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/.json`](tokens/)，扁平 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-css-vars.md) / [`tokens/exporters/to-tailwind.md`](tokens/exporters/to-tailwind.md) / [`tokens/exporters/to-figma.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/_schema.md)；横向对比见 [`tokens/_compare-matrix.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: 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`](references/multi-genre-compare.md) 流程；否则进单流派 Junior pass ### 阶段 2 · Junior Pass（假设占位，快速出骨架） - **从 `examples/<流派>/index.html` 起手**，复制到目标文件再改 — 不要从空白起步 - 同时打开 `references/colors.md` 和 `references/typography.md` 锁配色 / 字体 - 用占位文案（Lorem Ipsum 或真实类似文案）+ 占位图片（Picsum/Unsplash 链接） - 跑通**结构、栅格、主要交互** - **诚实标注**每一块占位（``） - 让用户看到方向再继续 ### 阶段 3 · Full Pass（补内容、调细节） - 补真实文案（问用户要或用 `huo15-openclaw-brand-protocol` 抓品牌资源） - 替换真实图片（需要下载时返回 CLI 命令，不用 child_process） - 微调字号、行高、字距、间距、阴影层级 - 加动效 ### 阶段 3.5 · Tokens 导出（可选）⭐v4.0 当用户要把设计落地到既有项目（已有 Tailwind / 已有 Figma 设计系统 / 多产品复用）： - 选定流派 → 找到对应 [`tokens/.json`](tokens/) - 跑 jq 一行转换：CSS vars（[`exporters/to-css-vars.md`](tokens/exporters/to-css-vars.md)）/ Tailwind extend（[`exporters/to-tailwind.md`](tokens/exporters/to-tailwind.md)）/ Figma Tokens Studio（[`exporters/to-figma.md`](tokens/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 ~/verify.png --viewport-size=1440,900 # 移动端（MOBILE-NATIVE 流派必跑） npx playwright-core screenshot ~/verify-iphone.png --viewport-size=393,852 npx playwright-core screenshot ~/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`](references/self-verify.md)（v3.0 新增手册）。 **评审接力**：截图回收后由用户人眼审，或调 `huo15-openclaw-design-critique` 5 维打分。MOBILE-NATIVE 流派额外检查：safe-area-inset 上下有效、tab-bar 触达高度 ≥ 44pt / 48dp；小程序检查 `` 存在 + tabBar native + rpx 适配。 **a11y 审计 ⭐v4.4**：渲染完成后注入 axe-core 跑 WCAG 2.2 AA 检查（首选 Chrome MCP 路线，详见 [`references/self-verify.md`](references/self-verify.md) §1.5 + [`references/a11y-checklist.md`](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-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 / 减少动效 / 无障碍动效 --- ## 十、版本历史 - **v4.6.0（当前 · 2026-04-27）**：Tailwind v4 适配。[`tokens/exporters/to-tailwind.md`](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/.json`](tokens/) 加 `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`](tokens/_compare-matrix.md) 加 motion 哲学速查表（含反差选 motion 命题）；[`tokens/_schema.md`](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`](references/a11y-checklist.md) WCAG 2.2 AA 30 条速查（4 大类 Perceivable / Operable / Understandable / Robust + 场景优先级表 B 端 / 内容站 / 落地页 / 移动端 / 小程序 + 流派 a11y 友好度对照表 8 流派）；[`references/self-verify.md`](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/`](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`](examples/mini-program/README.md) 升级四端对照表（推荐顺序：微信 → 抖音 → 快手 → 支付宝）+ 顶部胶囊形态四端对照（微信圆角 / 支付宝椭圆 / 抖音矩形 / 快手矩形）+ "何时该用 Taro / Uni-app 编译框架"提示；阶段 4 自验证补快手开发者工具流程；[`references/inspirations.md`](references/inspirations.md) §7.4 加快手参考、§7.5 通用参考从三端升为四端。**红线 / 流派 / 自验证 / tokens / 多流派对比均不变**，纯第四端补齐。 - **v4.2.0（2026-04-26）**：小程序三端齐。新增 [`examples/mini-program/douyin/`](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`](examples/mini-program/README.md) 升级三端对照表（微信 → 抖音 3 分钟 / 微信 → 支付宝 5 分钟）+ 真机扫码必查清单；阶段 4 自验证补抖音开发者工具流程；[`references/inspirations.md`](references/inspirations.md) §7.3 加抖音参考、§7.4 三端通用参考含 Taro / Uni-app 编译框架；§三小程序场景说明双端 → 三端。**红线 / 流派 / 自验证 / tokens / 多流派对比均不变**，纯第三端补齐。 - **v4.1.0（2026-04-26）**：多流派并行对比。新增 [`tokens/_compare-matrix.md`](tokens/_compare-matrix.md) 8 流派横向对比矩阵（关键 token / 反差对位 / redLineWaiver 速查）；新增 [`references/multi-genre-compare.md`](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 禁缺 `` + 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、与火一五其他技能的分工边界。 --- **技术支持：** 青岛火一五信息科技有限公司 FILE:_meta.json { "ownerId": "kn7byevkn40d6z4p7ghdb097z983tj33", "slug": "huo15-openclaw-frontend-design", "version": "4.5.0" } FILE:examples/bold-minimal/index.html BOLD-MINIMAL · 火一五前端设计技能 v2.0 示例

HUO15

少即是极致。
承诺一个方向。

BOLD-MINIMAL 流派示例 — 2 色系、大留白、大字号、零装饰。差异点：标题 Playfair italic black 与 IBM Plex Sans 形成强反差，强调色仅在 hover 出现。

查看作品集 →

排版即结构

不靠装饰元素分隔信息，靠字号、字重、留白本身承担层级。设计的节制源自对内容的尊重。

颜色靠节制

主色 70% 留白、20% 墨黑、10% 强调色。强调色一旦出现，必须够锐利，否则就别用。

FILE:examples/brutalist/index.html BRUTALIST · 火一五前端设计技能 v2.0 示例

FILE / huo15.example
BUILD / 2026.04.26
BRANCH / brutalist

// 005 of 005HUO15 ━ 火一五

RAW. HEAVY.
HONEST.

v2.0
BRUTALIST

+--------+
|  ████  |
|  ████  |
|  ████  |
+--------+
 [ HUO15 ]

BRUTALIST 流派示例 — 6px 黑边、12 列错位栅格、JetBrains Mono 等宽字、纯黑白 + 1 块警示黄。差异点：把"网格"暴露出来当装饰，stamp 块刻意打破对齐。

FILE:examples/editorial/index.html EDITORIAL · 火一五前端设计技能 v2.0 示例

设计观察 · Editorial

当版式回到纸张本来的样子

在屏幕上重建一份杂志的体验，靠的不是模仿装订线，而是让字距、行长、栏宽，重新代替像素去说话。

撰文 · 编辑部　／　摄影 · 待替换占位　／　12 分钟阅读

这不是一篇关于"复古"的文章。把 Source Serif 放到首屏，不是为了让它看起来像旧报纸；而是因为衬线在长文阅读里仍然提供着独有的方向感——衬线是字母给眼睛留下的扶手。

纵向栅格的密度并非装饰。三栏在 1180px 容器里精确给出 36px 行间距，每行 60–75 字符，恰好落在排版学公认的最舒适阅读区间。

所谓"编辑感"，其实是节奏的稳定与意外的混合：稳定来自栅格、来自衬线、来自每页一致的页眉；意外来自尺寸跳变——大引号、首字下沉、横跨三栏的一行字。

设计不是装饰内容，
设计就是内容的重量。

EDITORIAL 流派示例：DM Serif Display 标题 + Source Serif 4 正文，三栏栅格，首字下沉，跨栏引号块。配色用低饱和暖纸色 + 一点点砖红强调。

差异点：把杂志的版式秩序搬上屏幕，但不画装订线、不做拟真翻页——节制，但每一处衬线、每一处对齐都在替你说话。

FILE:examples/mini-program/README.md # 小程序 Starter — 火一五前端设计技能 v4.3 > 微信 + 支付宝 + 抖音 + 快手 **四端** starter。**浏览器无法直接渲染** wxml / axml / ttml / ksml，必须用各家 IDE。 ## 微信小程序 1. 下载并安装 [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)（Stable v1.06+） 2. 打开工具 → **项目 → 导入项目** → 目录选 `wechat/` 3. AppID 选"测试号"或填自有；项目名留空走默认 4. 点**编译**：左侧模拟器看渲染；点**真机调试**扫码看真机 5. 页面走 `pages/index/index`，全局配置 `app.json` ## 支付宝小程序 1. 下载并安装 [支付宝小程序 IDE](https://opendocs.alipay.com/mini/ide/download) 2. 打开 IDE → **文件 → 打开项目** → 目录选 `alipay/` 3. 点**预览**，扫码用支付宝 App 看真机 4. 配置文件名是 `mini.project.json`（不是 `project.config.json`），别搞混 ## 抖音小程序 1. 下载并安装 [抖音开发者工具](https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/developer-instrument/installation/developer-instrument-update-and-download) 2. 打开工具 → **项目 → 导入项目** → 目录选 `douyin/` 3. AppID 用"测试号"或填自有 4. 点**编译预览**，扫码用抖音 App 看真机 5. 模板后缀是 `.ttml` / `.ttss`（与微信 `.wxml` / `.wxss` 95% 同源，仅前缀差异） ## 快手小程序 ⭐v4.3 1. 下载并安装 [快手小程序开发者工具](https://mp.kuaishou.com/docs/develop/developerTools/downloadPath.html) 2. 打开工具 → **项目 → 导入项目** → 目录选 `kuaishou/` 3. AppID 用"测试号"或填自有 4. 点**编译预览**，扫码用快手 App 看真机 5. 模板后缀是 `.ksml` / 样式 `.css`（标准 CSS 后缀，区别于其他端） ## 四端同步迭代姿势 ⭐v4.3 升级 **推荐顺序**：微信 → 抖音 → 快手（最相近）→ 支付宝（差异最大） ### 步骤 1：先在 `wechat/` 改完 `wxml` + `wxss` + 配置全部跑通。开发体验在微信端最顺。 ### 步骤 2：复制到 `douyin/` 改前缀（机械替换，3 分钟） | 微信 | 抖音 | |---|---| | `wx:for` / `wx:key` / `wx:if` | `tt:for` / `tt:key` / `tt:if` | | `wxml` 文件名 | `ttml` | | `wxss` 文件名 | `ttss` | | `bindtap` / `bindinput` | **保留**（兼容微信 bind 风格） | ### 步骤 3：复制到 `kuaishou/` 改前缀（机械替换，3 分钟） | 微信 | 快手 | |---|---| | `wx:for` / `wx:key` / `wx:if` | `ks:for` / `ks:key` / `ks:if` | | `wxml` 文件名 | `ksml` | | `wxss` 文件名 | `css`（注意：快手用标准 CSS 后缀） | | `bindtap` / `bindinput` | **保留** | ### 步骤 4：复制到 `alipay/` 改前缀（机械替换，5 分钟） | 微信 | 支付宝 | |---|---| | `wx:for` / `wx:key` / `wx:if` | `a:for` / `a:key` / `a:if` | | `bindtap` / `bindinput` / `bindsubmit` | `onTap` / `onInput` / `onSubmit` | | `wxml` 文件名 | `axml` | | `wxss` 文件名 | `acss` | | `` | **不支持**，改 `my.setNavigationBar` API（写在 onLoad） | | `enhanced="true"` 等微信特有属性 | 删掉 | | `app.json` tabBar `color`/`text` | `textColor`/`name` | ### 步骤 5：四端 ICON / 图片资源建议放 CDN（本地用 base64 或纯色块占位） ## 反 AI Slop 红线（v4.3 扩展 UI 库列表） | # | 禁用项 | 替代方案 | |---|---|---| | 14 | 直接套 **WeUI / Vant Weapp / TDesign-Mini / Lin-UI / TTUI / Tt-Mini-UI / KSUI / kuaishou-uikit** 默认皮 | 自定义 token，至少改 5 个变量再用 | | 15 | 缺 `` + `safe-area-inset` + `rpx` 适配 | 见本目录 `wechat/pages/index/index.wxml` | 通用红线 #1 字体豁免：小程序里 `font-family` 优先 PingFang SC / Source Han Sans SC / Noto Sans SC（不能加载 Web Font）。 ## 视觉风格四端 starter 共用 ORGANIC 流派暖色调（米白 + 土橙 + 暖卡片），主题"手作商品列表"。`hero` + `chips` + 商品 `grid` 三段式，避开千篇一律的"banner + features + cta"。 ## 引用关系 - 配色逻辑参考 [`references/colors.md`](../../references/colors.md) §5 ORGANIC（用 hex 表达 oklch 等价值，因小程序基础库 < 3.0 不一定支持 oklch） - 字体策略参考 [`references/typography.md`](../../references/typography.md) §6 + 小程序豁免说明（见 SKILL.md §四 v2.2 新增段） - 多端同步迭代速查见本文 §四端同步迭代姿势 ## 四端真机扫码后必查清单 - [ ] 顶部胶囊（四端形态略有不同：微信圆角 / 支付宝椭圆 / 抖音矩形 / 快手矩形）不遮内容 - [ ] 底部 home indicator 不遮 tabBar / 内容 - [ ] 横屏 / 竖屏切换不崩 - [ ] 字号在小屏（375rpx）/ 大屏（414rpx+）都不溢出 - [ ] tabBar 用平台 native（不要自绘 view 拼接） ## 何时该用编译框架如果同时维护 4 端，且产品复杂度 > 10 个页面，建议直接上 [Taro](https://taro-docs.jd.com/) 或 [Uni-app](https://uniapp.dcloud.net.cn/) — 写一份代码自动编译四端。本 skill 提供的 4 个 starter 是给"原生开发 + 设计样板参考"用的，不是 SaaS 级框架。 FILE:examples/mini-program/alipay/app.js App({ globalData: { brand: 'huo15', skillVersion: 'frontend-design@2.2.0' }, onLaunch(options) {} }); FILE:examples/mini-program/alipay/app.json { "pages": ["pages/index/index"], "window": { "defaultTitle": "火一五 · 商品", "titleBarColor": "#fafaf6", "backgroundColor": "#f0eee8", "pullRefresh": false, "allowsBounceVertical": "NO" }, "tabBar": { "textColor": "#888888", "selectedColor": "#d97706", "backgroundColor": "#ffffff", "items": [ { "pagePath": "pages/index/index", "name": "首页" }, { "pagePath": "pages/index/index", "name": "我的" } ] } } FILE:examples/mini-program/alipay/mini.project.json { "enableAppxNg": true, "format": "ascii", "node_modules_es6_whitelist": [], "compileOptions": { "minify": false, "minifyJS": false, "minifyCSS": false } } FILE:examples/mini-program/alipay/pages/index/index.js Page({ data: { products: [ { id: 1, name: '手工陶杯 · 月白', price: '128', sold: 234, tag: '新', tone: '#fde6c8' }, { id: 2, name: '宋代茶则 · 黑檀', price: '168', sold: 89, tag: '限', tone: '#dde7d4' }, { id: 3, name: '《设计的觉醒》原研哉', price: '88', sold: 512, tag: '荐', tone: '#e8dcd0' }, { id: 4, name: '黄铜书签套装 · 三枚', price: '58', sold: 321, tag: '', tone: '#f4dccd' }, { id: 5, name: '柴烧建盏 · 兔毫', price: '288', sold: 41, tag: '限', tone: '#d8d4c5' }, { id: 6, name: '日记本 · 夏布封面', price: '78', sold: 168, tag: '', tone: '#e9e1d0' } ] }, onCardTap(e) { const id = e.currentTarget.dataset.id; console.log('tap product', id); } }); FILE:examples/mini-program/alipay/pages/index/index.json { "defaultTitle": "火一五 · 商品", "transparentTitle": "none" } FILE:examples/mini-program/douyin/app.js App({ globalData: { brand: 'huo15', skillVersion: 'frontend-design@4.2.0' }, onLaunch() {} }); FILE:examples/mini-program/douyin/app.json { "pages": ["pages/index/index"], "window": { "backgroundTextStyle": "dark", "navigationBarBackgroundColor": "#fafaf6", "navigationBarTitleText": "火一五 · 商品", "navigationBarTextStyle": "black", "backgroundColor": "#f0eee8" }, "tabBar": { "color": "#888888", "selectedColor": "#d97706", "backgroundColor": "#ffffff", "borderStyle": "white", "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/index/index", "text": "我的" } ] } } FILE:examples/mini-program/douyin/pages/index/index.js Page({ data: { products: [ { id: 1, name: '手工陶杯 · 月白', price: '128', sold: 234, tag: '新', tone: '#fde6c8' }, { id: 2, name: '宋代茶则 · 黑檀', price: '168', sold: 89, tag: '限', tone: '#dde7d4' }, { id: 3, name: '《设计的觉醒》原研哉', price: '88', sold: 512, tag: '荐', tone: '#e8dcd0' }, { id: 4, name: '黄铜书签套装 · 三枚', price: '58', sold: 321, tag: '', tone: '#f4dccd' }, { id: 5, name: '柴烧建盏 · 兔毫', price: '288', sold: 41, tag: '限', tone: '#d8d4c5' }, { id: 6, name: '日记本 · 夏布封面', price: '78', sold: 168, tag: '', tone: '#e9e1d0' } ] }, onCardTap(e) { const id = e.currentTarget.dataset.id; console.log('tap product', id); } }); FILE:examples/mini-program/douyin/pages/index/index.json { "navigationBarTitleText": "火一五 · 商品", "usingComponents": {} } FILE:examples/mini-program/douyin/project.config.json { "miniprogramRoot": "./", "compileType": "miniprogram", "appid": "tt-test-appid", "projectname": "huo15-frontend-design-douyin-starter", "description": "火一五前端设计技能 v4.2 抖音小程序 starter", "setting": { "es6": true, "minified": false, "newFeature": true }, "libVersion": "latest" } FILE:examples/mini-program/kuaishou/app.css page { --paper: #fafaf6; --paper-2: #fff8ed; --ink: #1a1a1a; --mute: #777777; --accent: #d97706; --card: #ffffff; --sep: #ececec; --moss: #5b8a3b; background: var(--paper); color: var(--ink); font-family: 'PingFang SC', 'Source Han Sans SC', 'Noto Sans SC', sans-serif; font-size: 28rpx; line-height: 1.5; -webkit-font-smoothing: antialiased; } FILE:examples/mini-program/kuaishou/app.js App({ globalData: { brand: 'huo15', skillVersion: 'frontend-design@4.3.0' }, onLaunch() {} }); FILE:examples/mini-program/kuaishou/app.json { "pages": ["pages/index/index"], "window": { "backgroundTextStyle": "dark", "navigationBarBackgroundColor": "#fafaf6", "navigationBarTitleText": "火一五 · 商品", "navigationBarTextStyle": "black", "backgroundColor": "#f0eee8" }, "tabBar": { "color": "#888888", "selectedColor": "#d97706", "backgroundColor": "#ffffff", "borderStyle": "white", "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/index/index", "text": "我的" } ] } } FILE:examples/mini-program/kuaishou/pages/index/index.css .page { min-height: 100vh; } .hero { position: relative; margin: 24rpx 24rpx 32rpx; padding: 56rpx 40rpx; border-radius: 32rpx; overflow: hidden; background: var(--paper-2); } .hero-bg { position: absolute; right: -80rpx; top: -80rpx; width: 320rpx; height: 320rpx; border-radius: 50%; background: radial-gradient(circle, #fbbf24, transparent 70%); opacity: 0.5; } .hero-content { position: relative; z-index: 1; } .hero-kicker { display: block; font-size: 22rpx; color: var(--accent); letter-spacing: 4rpx; text-transform: uppercase; font-weight: 500; margin-bottom: 16rpx; } .hero-title { display: block; font-size: 64rpx; font-weight: 800; line-height: 1.1; letter-spacing: -1rpx; white-space: pre-line; margin-bottom: 32rpx; } .hero-cta { display: inline-flex; align-items: center; gap: 8rpx; background: var(--ink); color: var(--paper); padding: 18rpx 36rpx; border-radius: 999rpx; font-size: 26rpx; font-weight: 500; } .hero-cta .arrow { color: var(--paper); font-size: 26rpx; } .chips { white-space: nowrap; padding: 0 24rpx 32rpx; } .chip { display: inline-block; padding: 14rpx 32rpx; margin-right: 16rpx; border-radius: 999rpx; background: var(--card); color: var(--ink); font-size: 26rpx; font-weight: 500; border: 1rpx solid var(--sep); } .chip.selected { background: var(--ink); color: var(--paper); border-color: var(--ink); } .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24rpx; padding: 0 24rpx; } .card { background: var(--card); border-radius: 24rpx; overflow: hidden; border: 1rpx solid var(--sep); } .img { width: 100%; height: 280rpx; position: relative; } .img-tag { position: absolute; top: 16rpx; left: 16rpx; background: rgba(255, 255, 255, 0.92); color: var(--ink); font-size: 20rpx; font-weight: 600; padding: 4rpx 14rpx; border-radius: 999rpx; } .info { padding: 20rpx 24rpx 24rpx; } .name { display: -webkit-box; font-size: 28rpx; font-weight: 600; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; min-height: 78rpx; } .meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14rpx; } .price { font-size: 32rpx; font-weight: 700; color: var(--accent); } .sold { font-size: 22rpx; color: var(--mute); } .footer-note { display: block; font-size: 22rpx; color: var(--mute); margin: 40rpx 24rpx 32rpx; line-height: 1.7; } FILE:examples/mini-program/kuaishou/pages/index/index.js Page({ data: { products: [ { id: 1, name: '手工陶杯 · 月白', price: '128', sold: 234, tag: '新', tone: '#fde6c8' }, { id: 2, name: '宋代茶则 · 黑檀', price: '168', sold: 89, tag: '限', tone: '#dde7d4' }, { id: 3, name: '《设计的觉醒》原研哉', price: '88', sold: 512, tag: '荐', tone: '#e8dcd0' }, { id: 4, name: '黄铜书签套装 · 三枚', price: '58', sold: 321, tag: '', tone: '#f4dccd' }, { id: 5, name: '柴烧建盏 · 兔毫', price: '288', sold: 41, tag: '限', tone: '#d8d4c5' }, { id: 6, name: '日记本 · 夏布封面', price: '78', sold: 168, tag: '', tone: '#e9e1d0' } ] }, onCardTap(e) { const id = e.currentTarget.dataset.id; console.log('tap product', id); } }); FILE:examples/mini-program/kuaishou/pages/index/index.json { "navigationBarTitleText": "火一五 · 商品", "usingComponents": {} } FILE:examples/mini-program/kuaishou/project.config.json { "miniprogramRoot": "./", "compileType": "miniprogram", "appid": "ks-test-appid", "projectname": "huo15-frontend-design-kuaishou-starter", "description": "火一五前端设计技能 v4.3 快手小程序 starter", "setting": { "es6": true, "minified": false, "newFeature": true }, "libVersion": "latest" } FILE:examples/mini-program/wechat/app.js App({ globalData: { brand: 'huo15', skillVersion: 'frontend-design@2.2.0' }, onLaunch() {} }); FILE:examples/mini-program/wechat/app.json { "pages": ["pages/index/index"], "window": { "backgroundTextStyle": "dark", "navigationBarBackgroundColor": "#fafaf6", "navigationBarTitleText": "火一五 · 商品", "navigationBarTextStyle": "black", "backgroundColor": "#f0eee8" }, "tabBar": { "color": "#888888", "selectedColor": "#d97706", "backgroundColor": "#ffffff", "borderStyle": "white", "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/index/index", "text": "我的" } ] }, "style": "v2", "sitemapLocation": "sitemap.json" } FILE:examples/mini-program/wechat/pages/index/index.js Page({ data: { products: [ { id: 1, name: '手工陶杯 · 月白', price: '128', sold: 234, tag: '新', tone: '#fde6c8' }, { id: 2, name: '宋代茶则 · 黑檀', price: '168', sold: 89, tag: '限', tone: '#dde7d4' }, { id: 3, name: '《设计的觉醒》原研哉', price: '88', sold: 512, tag: '荐', tone: '#e8dcd0' }, { id: 4, name: '黄铜书签套装 · 三枚', price: '58', sold: 321, tag: '', tone: '#f4dccd' }, { id: 5, name: '柴烧建盏 · 兔毫', price: '288', sold: 41, tag: '限', tone: '#d8d4c5' }, { id: 6, name: '日记本 · 夏布封面', price: '78', sold: 168, tag: '', tone: '#e9e1d0' } ] }, onCardTap(e) { const id = e.currentTarget.dataset.id; console.log('tap product', id); } }); FILE:examples/mini-program/wechat/pages/index/index.json { "navigationStyle": "custom", "usingComponents": {} } FILE:examples/mini-program/wechat/project.config.json { "miniprogramRoot": "./", "compileType": "miniprogram", "appid": "touristappid", "projectname": "huo15-frontend-design-wechat-starter", "description": "火一五前端设计技能 v2.2 微信小程序 starter", "setting": { "es6": true, "enhance": true, "postcss": true, "minified": false, "newFeature": true, "useCompilerPlugins": false }, "libVersion": "3.5.0" } FILE:examples/mini-program/wechat/sitemap.json { "desc": "关于 sitemap 详见 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html", "rules": [ { "action": "allow", "page": "*" } ] } FILE:examples/mobile-native/harmony/index.html HarmonyOS 鸿蒙 · 火一五前端设计技能 v2.1 示例

10:42 ★ 5G ▣▣▣

当前场景 · 工作模式

专注·设计冲刺

持续 38 分钟 · 已通过 5 条红线体检

智能音箱已连

空气净化优

温度22℃

屏幕亮度68%

书

书房灯2700K · 暖光阅读

音

客厅声场低音 +3 / 流派模式

场景

设备

历史

我

FILE:examples/mobile-native/ios/index.html iOS HIG · 火一五前端设计技能 v2.1 示例

9:41 5G

今日

上午

项目设计评审10:30 · 与花叔

›

v2.1 SKILL.md 收尾14:00 · 30 分钟

›

下午

clawhub publish 2.1.016:00 · 5 分钟

›

同步给火一五群17:00 · 3 分钟

›

今日

项目

设置

FILE:examples/mobile-native/md3/index.html Material Design 3 · 火一五前端设计技能 v2.1 示例

10:08 ● 5G ▰▰▰

Material Studio

早上好，job。
今天 3 个待办。

设计 · 进行中

v2.1 移动端扩展定稿

第 6 流派 MOBILE-NATIVE 三套 starter HTML 加 references 章节扩展。

10:30 → 12:0040% ━━━━─────

代码 · 待开始

静态红线体检脚本

grep 5+3 个新文件，验证不犯 #1/#2/#8/#9/#10/#12/#13。

14:00 → 14:300%

发布 · 排队中

clawhub publish 2.1.0

existing slug 升版本，不占 5/h 配额；双 remote push。

16:00—

FILE:examples/organic/index.html ORGANIC · 火一五前端设计技能 v2.0 示例

huo15 · 慢慢做

种一棵树
最好的时候

ORGANIC 流派示例 — 手写体 Caveat + 衬线 Source Serif，土橙 / 森林绿 / 雾蓝三色，不规则圆角与轻微旋转的便签，柔边斑块替代渐变。

柔边

每个圆角都不一样，border-radius 用 4 段不同的百分比，避免统一 16px 的工业感。

暖色

oklch 暖色域里挑 3 个相近色，纯色而非渐变，避开 AI 渐变模糊背景。

不齐

便签轻微旋转 -1.2°，文字下划线用 wavy 装饰，所有"完美"都被刻意打破。

— 差异点：每一处不规则都是手挑的，不是随机的。

FILE:examples/retro-future/index.html RETRO-FUTURE · 火一五前端设计技能 v2.0 示例

HUO15 // SYS-2026█ READY

NEW WAVE
1986 → 2026

RETRO-FUTURE 流派示例 — 等宽字 + 80s 霓虹（青 / 洋红，**避开紫渐变红线**）+ CRT 扫描线 + 终端式 menu。差异点：所有发光来自硬色双层 text-shadow，不用任何 backdrop-blur。

    ╔═══ HUO15 ═══╗
    ║  ▓▒░ 26 ░▒▓ ║
    ╚═════════════╝

FILE:references/a11y-checklist.md # a11y / WCAG 2.2 AA 速查清单 ⭐v4.4 > 30 条速查 + 场景优先级 + 自动检查路线（axe-core / Lighthouse）。本清单**不是**SKILL.md §四"反 AI Slop 红线"那种判废级硬规则，而是验证阶段的**门控检查表**：每条标 ✓ 或 ⚠（待修）或 N/A。 ## 1. Perceivable · 可感知（8 条） | # | 检查点 | 自动可测 | 工具 | |---|---|---|---| | 1 | 文本对比度 ≥ **4.5:1**（正文）/ **3:1**（大字 18pt+ 或 14pt+ 粗） | ✓ | axe / Lighthouse | | 2 | 非文本元素（图标 / UI 控件 / 图表）对比度 ≥ **3:1** | ✓ | axe | | 3 | 所有 `` 有 `alt` 属性（装饰图用 `alt=""`） | ✓ | axe / Lighthouse | | 4 | 视频有 captions / transcripts（视频内容站） | ✗ | 人审 | | 5 | **颜色不是唯一信息载体**（错误状态除颜色外要有图标 / 文字） | ✗ | 人审 | | 6 | 自动播放音频 ≤ 3 秒或提供暂停 | ✗ | 人审 | | 7 | 文本可放大 200% 而不破坏布局（用 rem / em，不全用 px） | ✓ | Lighthouse | | 8 | GIF / 视频闪烁频率 < 3 次/秒（防光敏性癫痫） | ✗ | 人审 | ## 2. Operable · 可操作（11 条） | # | 检查点 | 自动可测 | 工具 | |---|---|---|---| | 9 | 全部交互**可键盘操作**（Tab / Shift+Tab / Enter / Esc / Space） | ⚠ 部分 | axe + 人审 | | 10 | **焦点环可见**（`:focus-visible` 保留浏览器默认或自绘清晰样式） | ✓ | axe | | 11 | 没有键盘陷阱（trap） — Tab 进得去也出得来 | ✗ | 人审（Tab 全键过一遍）| | 12 | "Skip to main content" 链接（首个 Tab 焦点） | ✓ | axe | | 13 | 每页有唯一 `` | ✓ | Lighthouse | | 14 | heading 层级合理（h1 → h2 → h3 不跳级 / 不重复 h1） | ✓ | axe | | 15 | 链接文字描述清晰 — **禁** "点这里" / "查看更多" 这类无上下文 | ✓ 部分 | axe | | 16 ⭐2.2 | 触达目标尺寸 ≥ **24×24px**（按钮 / 链接 / 表单控件） | ✓ | axe + 真机 | | 17 ⭐2.2 | 拖拽操作有**键盘 / 单点替代**（slider 可左右键） | ✗ | 人审 | | 18 ⭐2.2 | 认证不强制 cognitive test（不让用户记复杂密码 / 解谜） | ✗ | 人审 | | 19 ⭐2.2 | 重复表单字段不强制再输入（自动填充 + remember 选项） | ✗ | 人审 | ## 3. Understandable · 可理解（7 条） | # | 检查点 | 自动可测 | 工具 | |---|---|---|---| | 20 | `<html lang="...">` 必填（中文 `zh` / `zh-CN`） | ✓ | axe | | 21 | 所有表单控件**有 `<label>`** 或 `aria-label` | ✓ | axe | | 22 | 错误提示**清晰具体**（不只是"输入有误"） | ✗ | 人审 | | 23 | 错误**给出纠正建议**（"邮箱缺少 @"，不只是"格式错"） | ✗ | 人审 | | 24 | 表单提交前可**确认 / 撤销**（金额 / 删除等关键操作） | ✗ | 人审 | | 25 | 上下文变化（焦点跳转 / 弹窗 / 页面跳转）**用户可预期** | ✗ | 人审 | | 26 | 控件文本与功能一致（按钮叫"提交"就真的提交） | ✗ | 人审 | ## 4. Robust · 健壮（4 条） | # | 检查点 | 自动可测 | 工具 | |---|---|---|---| | 27 | HTML **语义化** — 用 `<nav>` / `<main>` / `<article>` / `<aside>` 而不是全 `<div>` | ✓ | axe | | 28 | ARIA 属性正确（`aria-label` / `role` / `aria-expanded` / `aria-current`） | ✓ | axe | | 29 | 按钮 / 链接职责正确（提交动作用 `<button>` 不用 `<a href="#">`） | ✓ | axe | | 30 | 状态变化通过 `aria-live` region 通知屏幕阅读器 | ⚠ 部分 | axe + 人审 | --- ## 场景优先级速查不同场景检查重点不同。Junior pass 阶段挑场景 P0 必跑；Full Pass 阶段全跑。 | 场景 | P0 必跑（4-5 条） | P1 应跑 | |---|---|---| | **B 端 Dashboard** | #9 键盘操作 / #10 焦点环 / #14 heading / #20 lang / #27 语义化 | #1 #2 #21 #28 #30 | | **内容站 / 文章** | #1 文本对比 / #3 alt / #14 heading / #15 链接清晰 / #20 lang | #21 #27 | | **营销落地页** | #1 / #15 / #21 表单 label / #16 触达 24px | #3 #5 #20 | | **移动端 H5（MOBILE-NATIVE）** | #1 / #5 / #16 / #20 / #21 | #2 #7 #9 | | **小程序（四端）** | #5 / #16（多数 a11y 由平台 webview 兜底） | #20 #21 | --- ## 自动检查路线（与 [`self-verify.md`](self-verify.md) 联动） ### 路线 A · Claude in Chrome MCP + axe-core（首选 ⭐v4.4） ``` # 1. 浏览器渲染（已在 self-verify §1.2 完成） mcp__Claude_in_Chrome__navigate({ url: "file:///abs/index.html", tabId: <id> }) # 2. 注入 axe-core 并执行 mcp__Claude_in_Chrome__javascript_tool({ tabId: <id>, code: ` const s = document.createElement('script'); s.src = 'https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.10.0/axe.min.js'; document.head.appendChild(s); await new Promise(r => s.onload = r); return await axe.run({ runOnly: ['wcag2aa', 'wcag22aa'] }); ` }) # 3. 解析返回的 violations / passes / incomplete，对照本清单标记 ``` ### 路线 B · Lighthouse CLI（fallback） ```bash # 单次跑（return-cliCmd 让用户执行，禁 child_process） npx lighthouse <URL 或 file://> --only-categories=accessibility --output=html --output-path=./a11y-report.html --chrome-flags="--headless" # 批量跑（多个 examples 对比） for f in examples/*/index.html; do npx lighthouse "file://$(pwd)/$f" --only-categories=accessibility --output=json --output-path="./reports/$(dirname $f | tr / _).json" --chrome-flags="--headless" done ``` ### 路线 C · 人审兜底 #5 / #6 / #8 / #11 / #17 / #18 / #19 / #22 / #23 / #24 / #25 / #26 这些主观 / 需交互的项**机器测不出**。最少跑： 1. Tab 全键走一遍（验证 #9 #10 #11 #15） 2. 屏幕阅读器（VoiceOver / NVDA）跟读首页 30 秒（验证 #20 #21 #27 #28 #30） 3. 色盲模拟（Chrome DevTools → Rendering → Emulate vision deficiencies） --- ## 与流派的关系 a11y 与流派**正交** — 任何流派都该过 30 条 WCAG 2.2 AA。但流派会影响 a11y 的"难易程度"： | 流派 | a11y 友好度 | 需特别注意 | |---|---|---| | BOLD-MINIMAL | 高 | 大字 + 大留白 + 主色对比够，自然过 #1 / #14 | | EDITORIAL | 高 | 衬线 + 三栏 + 首字下沉，注意 #14 heading 层级 | | BRUTALIST | **中** | 粗黑边对比够，但 6px 边对屏幕阅读器可能干扰 — 加 `aria-hidden` 装饰 | | RETRO-FUTURE | **低** | 霓虹色 + CRT 扫描线 → #1 对比度容易掉；VT323 可读性差 → 长文不用；移动端慎选 | | ORGANIC | 中 | Caveat 手写体在小字号下可读性差 → ≥ 18px 起 | | MOBILE-NATIVE iOS | 高 | HIG 设计本身已考虑 a11y，关注 #16 触达 ≥ 44pt | | MOBILE-NATIVE MD3 | 高 | Material 3 默认带 a11y，关注 #1 dynamic color 派生时对比 | | MOBILE-NATIVE Harmony | 中 | 灵动色块多色相 → 对比度可能偏弱，每对色都要测 | --- ## 与红线的关系 a11y 清单**不是**SKILL.md §四红线（红线判废、检查清单门控）。但**两者有 1 条交集**： - **红线 #13 ⭐v2.1**（移动端缺 `viewport-fit=cover` + `safe-area-inset`）= 本清单 **#16 触达** + 平台 a11y 兜底，因为缺 safe-area 会导致 home indicator 遮挡触达区。如果该 a11y 项是**红线**那种"违反就废"级别，会反向促成 SKILL.md §四红线的扩展（v4.5+ 视情况）。 FILE:references/colors.md # 5 流派配色基线（oklch） > 全部使用 oklch 色空间。**禁紫渐变、禁 AI 模糊渐变背景**（参见 SKILL.md §四红线 #2 / #11）。 > > **⭐v4.0 起**：每个流派的配色已落到结构化 [`tokens/<slug>.json`](../tokens/) — 本文档保留可读的人类视角说明，jq 一行可转 CSS variables / Tailwind / Figma。配色硬规则源头仍在本文档。 ## 1. BOLD-MINIMAL · 勇敢极简 | 角色 | oklch | 用途 | |---|---|---| | ink | `oklch(0.18 0 0)` | 主文字、主结构线 | | paper | `oklch(0.99 0.005 95)` | 背景，几乎纯白带极淡暖调 | | accent | `oklch(0.66 0.20 28)` | 锐利橙红，仅用于强调（hover / em） | | mute | `oklch(0.45 0 0)` | 次要文字 | **比例**：墨黑 20% / 留白 70% / 强调 10%。 ## 2. EDITORIAL · 编辑杂志 | 角色 | oklch | 用途 | |---|---|---| | paper | `oklch(0.97 0.012 75)` | 暖纸色 | | ink | `oklch(0.20 0.015 280)` | 偏冷的墨黑 | | accent | `oklch(0.50 0.18 25)` | 砖红，首字下沉 / kicker / 引号 | | mute | `oklch(0.42 0.02 280)` | 副文字 | | rule | `oklch(0.20 0.015 280 / .25)` | 细分隔线 | **比例**：纸 75% / 墨 18% / 砖红 5% / 灰线 2%。 ## 3. BRUTALIST · 野兽派 | 角色 | oklch | 用途 | |---|---|---| | paper | `oklch(0.985 0 0)` | 近纯白（不做暖偏） | | ink | `oklch(0.10 0 0)` | 真黑，6px 粗边 | | warn | `oklch(0.78 0.22 105)` | 警示黄，stamp 块 | **比例**：白 60% / 黑 30% / 警示黄 10%。**只许 3 色**。 ## 4. RETRO-FUTURE · 复古未来 | 角色 | oklch | 用途 | |---|---|---| | bg | `oklch(0.13 0.04 280)` | 深夜紫蓝（注意：纯色，**不是渐变**） | | ink | `oklch(0.96 0.04 110)` | 暖白主字 | | neon-cyan | `oklch(0.85 0.18 195)` | 霓虹青 | | neon-magenta | `oklch(0.72 0.25 5)` | 霓虹洋红（**不是紫**） | **红线声明**：本流派使用霓虹双色对撞，**不得退化成紫渐变模糊背景**。所有发光必须由 `text-shadow` 多层叠加产生，禁用 `filter: blur()` 大色块当氛围。 ## 5. ORGANIC · 有机自然 | 角色 | oklch | 用途 | |---|---|---| | paper | `oklch(0.96 0.025 85)` | 米白偏暖 | | ink | `oklch(0.28 0.04 50)` | 棕墨 | | clay | `oklch(0.62 0.13 45)` | 土橙 | | moss | `oklch(0.45 0.10 145)` | 森林绿 | | sky | `oklch(0.78 0.07 220)` | 雾蓝 | **比例**：纸 60% / 棕墨 15% / 三原色（土橙 / 苔绿 / 雾蓝）各 8% 左右。 ## 6. MOBILE-NATIVE · 移动原生 ⭐v2.1 > 三套对照不是要你"复制官方默认色"——而是体现各平台的**色彩语义体系**。 ### 6.1 iOS HIG 风（推荐自有 brand color，避开系统蓝） | 角色 | oklch | 用途 | |---|---|---| | paper | `oklch(0.985 0.005 75)` | non-grouped 背景（暖中性） | | grouped-bg | `oklch(0.94 0.005 75)` | grouped table view 背景 | | ink | `oklch(0.18 0.005 280)` | label 主字 | | mute | `oklch(0.55 0.01 280)` | secondary label | | sep | `oklch(0.88 0.005 280)` | separator 0.5pt | | accent | `oklch(0.66 0.16 50)` | brand 强调（暖橙）— **替代 system blue** | **红线**：禁直接用 `#007AFF`（红线 #8）。Apple 自家 App（Music / Books / News）也都用品牌色而非系统蓝。 ### 6.2 Material Design 3（dynamic color，seed 自选） | 角色 | oklch | 派生方式 | |---|---|---| | seed | `oklch(0.55 0.13 175)` | **自选**色相（示例青绿，**避开 Material 默认紫**） | | primary | `oklch(0.55 0.13 175)` | = seed | | primary-container | `oklch(0.88 0.06 175)` | seed L+33 / C-50% | | secondary-container | `oklch(0.92 0.04 60)` | seed hue+245 / 低饱和 | | tertiary-container | `oklch(0.90 0.05 320)` | seed hue+145 / 低饱和 | | surface | `oklch(0.985 0.003 175)` | 近白带极淡 seed 色相 | | surface-variant | `oklch(0.93 0.01 175)` | 比 surface 暗 5% | | outline | `oklch(0.72 0.01 175)` | mid-tone | **规则**：seed 选 oklch C ∈ [0.10, 0.18]，避免高饱和（饱和过 → 派生 container 太脏）。 ### 6.3 HarmonyOS 鸿蒙（灵动色块） | 角色 | oklch | 用途 | |---|---|---| | paper | `oklch(0.97 0.005 240)` | 主背景 | | paper-2 | `oklch(0.94 0.008 240)` | hero / scene 卡片 | | ink | `oklch(0.18 0.01 260)` | 主字 | | mute | `oklch(0.50 0.01 260)` | 副字 | | c-cyan | `oklch(0.78 0.12 220)` | 灵动青 | | c-orange | `oklch(0.78 0.13 55)` | 灵动橙 | | c-green | `oklch(0.78 0.14 145)` | 灵动绿 | | c-pink | `oklch(0.82 0.10 5)` | 灵动粉 | **规则**：4 个灵动色 **同明度（L≈0.78）+ 同低饱和（C≈0.10–0.14）+ 不同色相**。同明度让多色拼一起不打架，这是鸿蒙"灵动色块"的核心。 --- ## 通用约束 - **禁** evenly-distributed palette（5 色等比例） - **禁** 默认暗黑 `#121212` + 紫主题 - **禁** 全局 iOS 系统蓝 `#007AFF`、警示红 `#FF3B30` 当主色 - **强制** oklch；如需 fallback 可附 hex 注释，但 hex 不能是唯一来源 - 主色单一（**60–70%**）+ 强调色锐利（**5–10%**）+ 中性（20–30%） FILE:references/inspirations.md # 5 流派真实参考站点 > 参考是用来**抄结构 / 学手感**的，不是用来照搬的。看完关掉，再写自己的。 > 商用敏感：huashu-design 项目仅个人 license，所有结构 / 工作流参考必须改写后落地。 ## 1. BOLD-MINIMAL - [Stripe](https://stripe.com) — 业内勇敢极简天花板，注意 hero 字号节奏 - [Linear](https://linear.app) — 黑底版的极简样板 - [Vercel](https://vercel.com) — 几何排版与极锐利强调色 - [Apple · Newsroom](https://www.apple.com/newsroom/) — 大字 hero + 衬线 + 单强调 - [Pitch](https://pitch.com) — 强调色更跳，但留白依旧 ## 2. EDITORIAL - [The New York Times Magazine](https://www.nytimes.com/section/magazine) — 数字版杂志范本 - [The Verge](https://www.theverge.com/) — 现代化编辑感 - [Pitchfork](https://pitchfork.com) — 评分文章的栅格密度 - [It's Nice That](https://www.itsnicethat.com) — 设计杂志的当代演绎 - [The Markup](https://themarkup.org) — 调查报道，衬线为主 ## 3. BRUTALIST - [Bloomberg Businessweek · 特别报道](https://www.bloomberg.com/businessweek) — 粗黑边、错位标题 - [Are.na](https://www.are.na) — 网格暴露，零装饰 - [Read.cv](https://read.cv) — Mono + 极致黑白 - [Praxis](https://www.praxis.cool) — 当代 brutalist 教科书 - 反例：自我标榜 brutalist 但只是把字调粗的 SaaS landing → **不要看** ## 4. RETRO-FUTURE - [Cyberpunk 2077 · Official](https://www.cyberpunk.net/cn/zh) — 霓虹双色对撞 - [Are.na · Vaporwave](https://www.are.na/search?q=vaporwave) — 80s 美学合集 - [Replit](https://replit.com)（部分 landing） — 终端 / mono 与现代结合 - [The Outpost](https://outpost.pub) — neon + grain 的现代演绎 - 反例：任何"紫渐变蓝"的 SaaS 落地页 → **不要看** ## 5. ORGANIC - [Notion · 早期版本](https://web.archive.org/web/2018*/notion.so) — 暖底 + 不规则插画 - [Medium · Stories](https://medium.com) — 衬线 + 暖纸感 - [Headspace](https://www.headspace.com) — 圆滑形状 + 柔色 - [Mailchimp](https://mailchimp.com) — 手绘插画 + 暖色组合 - [Squarespace · Templates "Five"](https://www.squarespace.com) — 手写体出现的尺度 ## 6. MOBILE-NATIVE · 移动原生 ⭐v2.1 ### 6.1 iOS HIG - [Apple HIG 官方](https://developer.apple.com/design/human-interface-guidelines/) — 必读，所有结构规范 - [Apple Music](https://www.apple.com/cn/apple-music/) — 自家 App，不用系统蓝的最佳范例 - [Things 3 by Cultured Code](https://culturedcode.com/things/) — HIG 教科书级 GTD 应用 - [Linear · iOS App](https://linear.app) — 现代化 HIG 典范 - [SwiftUI Component Library](https://www.swiftuiux.com/) — 抄结构不抄默认皮 ### 6.2 Material Design 3 - [m3.material.io](https://m3.material.io/) — 官方 token / component 文档 - [Material Theme Builder](https://material-foundation.github.io/material-theme-builder/) — seed → dynamic color 在线生成 - [Google Calendar / Tasks · Android](https://play.google.com/store/apps/details?id=com.google.android.calendar) — 第一方 MD3 示范 - [Read You](https://github.com/Ashinch/ReaderYou) — 开源 MD3 RSS 客户端，Compose 全栈 - 反例：直接套 Material UI 默认紫的 web mock → **不要看** ### 6.3 HarmonyOS 鸿蒙 - [HarmonyOS 设计指南官方](https://developer.huawei.com/consumer/cn/design/) — 必读 - [华为商城 App](https://m.vmall.com/) — 一方应用，灵动色块 + 大圆角范本 - [华为运动健康 App](https://consumer.huawei.com/cn/mobileservices/health/) — 数据可视化与场景化 - [鸿蒙生态合作 App 精选](https://developer.huawei.com/consumer/cn/forum/) — 论坛精华案例集 - 反例：套 EMUI 默认皮没改 token 的 demo → **不要看** ## 7. 小程序（MOBILE-NATIVE 子集）⭐v2.2 ### 7.1 微信小程序 - [微信小程序设计指南](https://developers.weixin.qq.com/miniprogram/design/) — 平台官方 - 喜茶 / 茶颜悦色 / Manner 小程序 — 自有 brand color，**不套 WeUI 默认绿**的样板 - 三顿半小程序 — 极简 + 排版 + 暖色，对标 ORGANIC 流派 - 即刻小程序 — 内容型小程序的字体 / 间距功底 - 反例：所有 hero 都是「全屏 banner + 5 个圆角胶囊 + 商品 grid」千篇一律的 → **不要看** ### 7.2 支付宝小程序 - [支付宝小程序设计指南](https://opendocs.alipay.com/mini/design) — 平台官方 - 蚂蚁森林 / 蚂蚁庄园 / 健康码 — 蚂蚁系一方应用，灵动卡片 + 微动效 - 飞猪 / 口碑 / 大众点评（部分 H5）— 内容密度的极致样板 - 反例：直接套 antd-mini 默认皮的 demo → **不要看** ### 7.3 抖音小程序 ⭐v4.2 - [抖音开放平台 · 设计指南](https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/component/) — 平台官方 - 抖音电商一方小程序（如"抖音商城")— 视频流 + 商品卡的样板 - 各品牌抖音小程序 hero 视频（不强求 starter 复刻，看节奏即可） - 反例：直接套 TTUI / Tt-Mini-UI 默认皮的 demo → **不要看** ### 7.4 快手小程序 ⭐v4.3 - [快手小程序开放平台](https://mp.kuaishou.com/docs/develop/) — 平台官方文档 - 快手商城小程序 — 一方应用，电商场景的样板 - 快手主播店铺小程序 — 内容驱动型小程序的导购卡片 - 反例：直接套 KSUI / kuaishou-uikit 默认皮的 demo → **不要看** ### 7.5 四端通用参考 - [Awesome MiniApp](https://github.com/topics/miniapp) — GitHub 上多端框架与精选 - 「小程序设计周刊」公众号 — 行业更新 - [Taro](https://taro-docs.jd.com/) / [Uni-app](https://uniapp.dcloud.net.cn/) — 三端编译框架，自动复用代码 --- ## 看参考的姿势 1. 一次只看 1 个流派，看完关掉再开下一个 2. 每个站点 ≤ 5 分钟，记住 1 个具体细节就够（不是整体氛围） 3. 写代码前再看一次 SKILL.md §四硬红线，确保没顺手抄回 AI Slop 4. 抄完检查：oklch 配色 ✓、非默认字体 ✓、无紫渐变 ✓、无圆角 + 左竖条卡片 ✓、无统一 16px 圆角 ✓ FILE:references/multi-genre-compare.md # 多流派对比生成手册 ⭐v4.1 > 用户没明确方向时如何并行生成 3 个流派对比；如何与 `huo15-openclaw-design-director` 协作。 ## 何时启用本流程 | 信号 | 处理 | |---|---| | "做几个方向对比" / "三个风格" / "我看看哪个好" | ✓ 启用 | | "帮我选" / "你定" | ✓ 启用 | | 给了具体流派（"做 brutalist 风"）| ✗ 直接走 §六单流派 Junior pass | | 给了视觉锚点（"参考 Stripe"）| ✗ 直接走 BOLD-MINIMAL 单流派 | | 给了完整 brand-spec（已有品牌色 / 字体）| ✗ 走 brand-protocol 抓品牌资源后单流派 | ## 流程总览 ``` director 选 3 流派 (or 自动取反差对位) ↓ 3 个 Junior pass 并行 (用 Explore subagent 隔离 context) ↓ 3 张截图 (Chrome MCP / Playwright) ↓ director 五维矩阵打分 / design-critique 5 维评分 ↓ 用户选定 → 单流派走 §六阶段 3 Full Pass ``` --- ## 1. 流派选取参考 [`tokens/_compare-matrix.md`](../tokens/_compare-matrix.md) §反差对位。 **有 director 时**：让 director 挑（它有 20 条设计哲学 + 五维矩阵）。 **无 director 时**：从下面 5 组反差对位任选一组： - 理性 / 感性 / 实验：bold-minimal × organic × brutalist - 冷峻 / 温暖 / 复古：editorial × organic × retro-future - 桌面 / 移动 / 跨端：bold-minimal × mobile-native-ios × mobile-native-harmony - 极简 / 信息密度 / 装饰：bold-minimal × editorial × retro-future - Web / iOS / 鸿蒙：bold-minimal × mobile-native-ios × mobile-native-harmony --- ## 2. 并行 Junior pass（3 流派同时出）对每个 `<slug>`： 1. 复制 `examples/<dir>/index.html` → `output-<slug>.html` 2. 替换占位文案为本次场景的文案 3. **保留视觉骨架** — hero / list / cards 结构不动，只换内容 4. 引用 `tokens/<slug>.json` 的 color / typography / spacing 当硬约束 — **不要改 token** React / Vue 项目：先跑 [`tokens/exporters/to-tailwind.md`](../tokens/exporters/to-tailwind.md) 出 3 份 tailwind config，再各做一个 `<Genre><Page>.tsx`。 **性能提示**：3 流派**必须并行**。用 Explore subagent 隔离 context，不要串行 3 趟。 --- ## 3. 三份截图走 [`self-verify.md`](self-verify.md) §1 Chrome MCP 路线（首选）： ``` mcp__Claude_in_Chrome__navigate({ url: "file:///abs/output-bold-minimal.html", tabId: <id> }) mcp__Claude_in_Chrome__computer({ action: "screenshot", tabId: <id>, save_to_disk: true }) # 重复对 organic / brutalist ``` mobile-native 子集额外用 `resize_window` 切到设备 viewport： - iOS: 393×852 - MD3: 412×915 - Harmony: 396×858 无 MCP 时降级到 Playwright CLI（见 self-verify.md §2）。 --- ## 4. 五维评审 **首选**：`huo15-openclaw-design-director` 五维矩阵（结构 / 字体 / 颜色 / 空间 / 氛围）出"推荐 / 次选 / 反对方向"。 **次选**：`huo15-openclaw-design-critique` 给每张图打 5 维分（1-5）求和取最高。 **兜底**：用户人眼选。 director 的输出格式见 [它的 SKILL.md §3.4 推荐表态](../../huo15-openclaw-design-director/SKILL.md)。 --- ## 5. 移交单流派用户敲定方向后： - 删除其他 2 份草稿 - 选定方向走 §六阶段 3 Full Pass（补真实文案 / 替换图片 / 调细节 / 加动效） - 视情况走阶段 3.5 导出 tokens 到既有项目 --- ## 6. 与 design-director 的协作接口 ### 我提供给 director 的资产 - **8 个流派的** [`tokens/<slug>.json`](../tokens/) — 结构化，director 一行 jq 取关键字段 - **8 个流派的** [`examples/<dir>/index.html`](../examples/) — Junior pass 起手不空白 - **redLineWaiver** — 每个流派的合规豁免，避免误判违规 - **横向对比表** [`tokens/_compare-matrix.md`](../tokens/_compare-matrix.md) — director 选流派的 cheat sheet ### director 提供给我的输入 - **3 个流派 slug**（如 `["bold-minimal", "organic", "brutalist"]`） - **每个流派的 brief**（已写好的文案 / 重点 / 差异点，我做 Junior pass 不用从需求倒推） - **五维矩阵回调**（截图回流后由 director 判最优） ### 接力消息格式（建议） ```jsonc // director → frontend-design { "task": "multi-genre-junior-pass", "genres": ["bold-minimal", "organic", "brutalist"], "context": { "client": "<品牌名>", "scope": "<目标页面 / 组件类型>", "differentiator": "<差异点一句话>" }, "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>" } ] } ``` ### director 现状与升级路径 - **当前 director v1.0.0**：5 大流派覆盖（与本 skill v1.0 配套）— 对前 5 个 Web 流派全量生效；mobile-native 子集需要等 director v2 升级才能联动。 - **本 skill 在不动 director 的前提下，已为 director v2 备好接力入口**（tokens schema + compare matrix + redLineWaiver）— director 升级时直接读取即可，无需 frontend-design 再改。 --- ## 7. 反 AI Slop 红线（多流派对比仍适用） 3 流派 Junior pass 仍要遵守 SKILL.md §四全部 15 条红线。多流派对比**不是 AI Slop 免罪金牌** — 不要因为"探索方向"就把 3 张图都做成 AI 渐变模糊背景 + 紫色 hero。每个 Junior pass 各自的 redLineWaiver 见 [`tokens/_compare-matrix.md`](../tokens/_compare-matrix.md)。 FILE:references/self-verify.md # 自验证工作流操作手册 ⭐v3.0 > 火一五前端设计技能 v3.0 起，**Claude in Chrome MCP** 成为自验证首选路线。本手册按场景分流，给出每条路线的具体命令。 ## 路线选择决策树 | 场景 | 首选 | Fallback 1 | Fallback 2 | |---|---|---|---| | Web / H5（5 个 Web 流派） | Claude in Chrome MCP | Playwright CLI | 用户手动 `open file://` | | MOBILE-NATIVE Web 流派（iOS/MD3/Harmony） | Claude in Chrome MCP（resize 设备 viewport） | Playwright CLI（带 `--viewport-size`） | — | | 微信小程序 | 微信开发者工具 IDE | 真机扫码 | — | | 支付宝小程序 | 支付宝小程序 IDE | 真机扫码 | — | --- ## 1. Claude in Chrome MCP（优先 ⭐v3.0） ### 1.1 前置条件 - 用户已在 Chrome 装 Claude in Chrome 扩展并登录 - 当前会话挂载了 `mcp__Claude_in_Chrome__*` 工具集（如 schemas 未加载，用 `ToolSearch query="select:mcp__Claude_in_Chrome__list_connected_browsers,..."`） - `mcp__Claude_in_Chrome__list_connected_browsers` 返回非空数组 ### 1.2 标准命令序列（Web / H5） ``` # 1. 列出可用浏览器 mcp__Claude_in_Chrome__list_connected_browsers # 2. 选定浏览器 mcp__Claude_in_Chrome__select_browser({ deviceId: "<from step 1>" }) # 3. 拿可用 tab mcp__Claude_in_Chrome__tabs_context_mcp # 4. 打开本地文件 / URL mcp__Claude_in_Chrome__navigate({ url: "file:///abs/path/index.html", tabId: <id> }) # 5. 截图（关键产物） mcp__Claude_in_Chrome__computer({ action: "screenshot", tabId: <id>, save_to_disk: true }) # 6. 读控制台错误（防 oklch 不支持 / 字体加载失败 / JS 报错） mcp__Claude_in_Chrome__read_console_messages({ tabId: <id> }) ``` ### 1.3 移动端 viewport 控制 ``` # iPhone 16 Pro mcp__Claude_in_Chrome__resize_window({ tabId: <id>, width: 393, height: 852 }) # Pixel 8 mcp__Claude_in_Chrome__resize_window({ tabId: <id>, width: 412, height: 915 }) # HarmonyOS Mate 60 mcp__Claude_in_Chrome__resize_window({ tabId: <id>, width: 396, height: 858 }) # resize 后再 screenshot mcp__Claude_in_Chrome__computer({ action: "screenshot", tabId: <id>, save_to_disk: true }) ``` 或者（更稳，无需 resize）：本 skill 的 `examples/mobile-native/*/index.html` 内置桌面预览手机壳（device frame），桌面 viewport 也能看到正确移动效果，桌面浏览器打开即可。 ### 1.4 何时跳过本路线 - `list_connected_browsers` 返回 `[]` → 直接路线 2 - 用户明确说"我不开 Chrome" → 路线 2 - wxml / axml 场景 → 路线 3 / 4（MCP 不能渲染小程序模板） ### 1.5 a11y 自动审计 ⭐v4.4 渲染完成后注入 axe-core 跑 WCAG 2.2 AA 检查（与 [`a11y-checklist.md`](a11y-checklist.md) 30 条对照）： ``` mcp__Claude_in_Chrome__javascript_tool({ tabId: <id>, code: ` const s = document.createElement('script'); s.src = 'https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.10.0/axe.min.js'; document.head.appendChild(s); await new Promise(r => s.onload = r); return await axe.run({ runOnly: ['wcag2aa', 'wcag22aa'] }); ` }) ``` 返回 `violations` / `passes` / `incomplete` 三个数组： - 把 `violations` 对照 a11y-checklist 标 ⚠ 或修复 - `incomplete` 是 axe 无法自动判断的（如 #5 颜色非唯一信息载体），人审兜底 - `passes` 数 / 总检查数 ≥ 90% 视为可发布 **Lighthouse fallback**（MCP 不可用时）： ```bash npx lighthouse <URL 或 file://> --only-categories=accessibility --output=html --output-path=./a11y-report.html --chrome-flags="--headless" ``` 详见 [`a11y-checklist.md`](a11y-checklist.md) §自动检查路线。 --- ## 2. Playwright CLI（fallback） ### 2.1 桌面端 ```bash npx playwright-core screenshot <URL 或 file:///abs/path> ~/verify.png --viewport-size=1440,900 ``` ### 2.2 移动端（MOBILE-NATIVE 流派必跑） ```bash # iPhone 16 Pro npx playwright-core screenshot <URL> ~/verify-iphone.png --viewport-size=393,852 # Pixel 8 npx playwright-core screenshot <URL> ~/verify-android.png --viewport-size=412,915 # HarmonyOS Mate 60 npx playwright-core screenshot <URL> ~/verify-harmony.png --viewport-size=396,858 ``` ### 2.3 注意 - 延续 enhance 插件"禁 child_process"铁律：**返回命令让用户执行**，不要 spawn - `--full-page` 截整页（默认只 viewport） - `--device="iPhone 16 Pro"` 也可用，但 Playwright 内置设备列表更新慢，自带 viewport 数值更稳 --- ## 3. 微信开发者工具（小程序） 1. 安装 [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)（Stable v1.06+） 2. 项目 → 导入项目 → 选 `examples/mini-program/wechat/` 3. AppID 选"测试号" 4. 编译后左侧模拟器看渲染 5. 真机调试扫码 → 微信扫码 → 真机看效果 6. 截图：模拟器右上角"截屏"按钮 / 工具菜单 → 截图，默认存 `~/Desktop` --- ## 4. 支付宝小程序 IDE（小程序） 1. 安装 [支付宝小程序 IDE](https://opendocs.alipay.com/mini/ide/download) 2. 文件 → 打开项目 → 选 `examples/mini-program/alipay/` 3. 预览 → 扫码用支付宝 App 看真机 4. 截图：IDE 内置截图工具，或预览界面右上角"复制图片" --- ## 5. 评审接力无论走哪条路线，截图最终： - **由用户人眼审** → 1 句话反馈 - 或调用 `huo15-openclaw-design-critique` 5 维打分（结构 / 字体 / 颜色 / 空间 / 氛围）+ Keep/Fix/Quick Wins 输出 --- ## 6. 移动端额外检查清单 - [ ] safe-area-inset 上下生效（刘海 / home indicator 没遮挡内容） - [ ] tab-bar 触达高度 ≥ 44pt（iOS）/ 48dp（Android / 鸿蒙） - [ ] 字号 / 行高在 375–430 多档 viewport 都不溢出 - [ ] 小程序：`<page-meta>` 在 wxml 中存在 + tabBar 是 native 不是自绘 + rpx 适配 750rpx 屏宽 - [ ] 控制台无 oklch 不支持警告（fallback 已生效） --- ## 7. 三路线兼容性矩阵 | 流派 / 场景 | Chrome MCP | Playwright CLI | 微信 IDE | 支付宝 IDE | 真机扫码 | |---|---|---|---|---|---| | BOLD-MINIMAL / EDITORIAL / BRUTALIST / RETRO-FUTURE / ORGANIC | ✓ | ✓ | — | — | ✓ | | MOBILE-NATIVE iOS HIG | ✓（resize 393×852）| ✓ | — | — | ✓ | | MOBILE-NATIVE MD3 | ✓（resize 412×915）| ✓ | — | — | ✓ | | MOBILE-NATIVE Harmony | ✓（resize 396×858）| ✓ | — | — | ✓ | | 微信小程序 | ✗ | ✗ | ✓ | — | ✓ | | 支付宝小程序 | ✗ | ✗ | — | ✓ | ✓ | --- ## 8. 设计原则提醒 - **MCP 优先**不是教条 —— 没浏览器连接就别等，立刻 fallback - **不要在 skill 内部 spawn 进程** — 所有 CLI 命令必须 return-cliCmd 模式给用户执行 - **截图是最终凭证** — 不要用"我看了源代码觉得 OK"代替真机 / 真渲染验证 - **控制台错误也要看** — `read_console_messages` 能抓到 oklch fallback、字体 404、JS 报错等隐患 FILE:references/typography.md # 5 流派字体对（display + body） > **禁默认 Inter / Roboto / Arial / system-ui**（参见 SKILL.md §四红线 #1）。 > 所有推荐字体均来自 [Google Fonts](https://fonts.google.com)、[Adobe Fonts](https://fonts.adobe.com) 或思源系列，license 友好。 ## 1. BOLD-MINIMAL | 角色 | 字体 | 备选 | |---|---|---| | display | **Playfair Display** Black Italic | Crimson Pro 900 / Tiempos Display | | body | **IBM Plex Sans** 400/600 | Söhne / Inter Tight（仅作 fallback，不能首选） | **反差**：粗衬线 italic ↔ 中性现代无衬线。 ## 2. EDITORIAL | 角色 | 字体 | 备选 | |---|---|---| | display | **DM Serif Display** | Cormorant Garamond / Tiempos Headline | | body | **Source Serif 4** opsz | EB Garamond / 思源宋体 | | caps | small-caps + letter-spacing .06em | — | **反差**：display 略 condensed，body 宽松，靠 opsz 自动调节字重。 ## 3. BRUTALIST | 角色 | 字体 | 备选 | |---|---|---| | display | **Space Grotesk** 700 | PP Neue Montreal / Druk Wide | | mono | **JetBrains Mono** 400/800 | Space Mono / IBM Plex Mono | **反差**：粗 sans 大标题 + mono 元数据 / 导航，等宽字承担"机械感"。 ## 4. RETRO-FUTURE | 角色 | 字体 | 备选 | |---|---|---| | display | **Major Mono Display** | Monoton / Audiowide（慎用，易土气） | | body | **VT323** | Press Start 2P（仅做装饰，不能跑长文） | **警告**：VT323 可读性弱，正文长度 ≤ 200 字符；超过请退回 IBM Plex Mono。 ## 5. ORGANIC | 角色 | 字体 | 备选 | |---|---|---| | display | **Caveat** 600 | Patrick Hand / Reenie Beanie | | body | **Source Serif 4** | Lora / 思源宋体 | | 中文配对 | 思源宋体（display 仍用 Caveat 拉手写） | 霞鹜文楷 | **反差**：手写体只在 hero / 卡片标题 / 注脚，正文一律严肃衬线，避免"小学生作文"。 ## 6. MOBILE-NATIVE · 移动原生 ⭐v2.1 ### 6.1 iOS HIG | 角色 | 字体 | 备选 | 备注 | |---|---|---|---| | display | **Manrope** 800 | Onest / Outfit / Bricolage Grotesque | **替代 SF Pro / system-ui**（红线 #1） | | body | **IBM Plex Sans** 400/500/600 | Söhne / Sentinel | — | | 数字 | DM Sans / IBM Plex Mono | — | 状态栏 / 数据用等宽更稳 | **HIG 排版三件套**：large title 34pt 800、navigation title 17pt 500、body 16pt。 ### 6.2 Material Design 3 | 角色 | 字体 | 备选 | 备注 | |---|---|---|---| | display | **DM Sans** 700 | Onest / Public Sans | **替代 Roboto Flex**（红线 #1） | | body | **IBM Plex Sans** 400/500 | Source Sans 3 | — | | 中文 | 思源黑体 / Noto Sans SC | — | 跟 DM Sans 字重对齐 | **MD3 type scale**：display 28pt 700、headline 22pt 500、title 16pt 500、body 14pt。 ### 6.3 HarmonyOS 鸿蒙 | 角色 | 字体 | 备选 | 备注 | |---|---|---|---| | display | **Noto Sans SC** 700/900 | 思源黑体 / 霞鹜文楷 | HarmonyOS Sans 不在 Google Fonts，用 Noto Sans SC 替代 | | body | **Noto Sans SC** 400/500 | 思源黑体 | 中文为主 | | 数字 / 英文 | **DM Sans** 500/700 | Inter Tight (慎用) | 中英混排时英文用 DM Sans | **鸿蒙排版**：屏头大标题 28pt 900、卡片标题 22pt 700、控件标签 15pt 500。 --- ## MOBILE-NATIVE 通用约束 - **禁** `font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, ...`（红线 #1，且无差异化） - **禁** `font-family: SF Pro Display`（在 web 上根本加载不到，最终 fallback 到 system-ui） - 中英混排：英文 / 数字用 DM Sans / Manrope，中文用 Noto Sans SC / 思源黑体；**两个字族不超过 3 个字重** --- ## 通用约束 - 主字 / 副字必须有性格反差：衬线 ↔ 无衬线、或 mono ↔ proportional - **中文**：思源宋体 / 思源黑体 / 霞鹜文楷 / Noto Serif SC，按流派挑一对（**不要**英文中文混 4 个字族） - **加载**：`<link rel="preconnect">` 提前连，`display=swap` 避免 FOIT - 任何"system-ui 兜底就完事"的写法 = 没用本 skill FILE:tokens/_compare-matrix.md # 8 流派横向对比矩阵 ⭐v4.1 > 给 `huo15-openclaw-design-director` 选流派用，或用户要做 multi-genre 平行对比时的速查表。 ## 关键 token 对比 | 流派 | 主色 (oklch) | 重音色 | display 字体 | radius 哲学 | 适合场景 | |---|---|---|---|---|---| | **bold-minimal** | 0.18 0 0（墨黑） | 0.66 0.20 28（锐橙） | Playfair Display 900 italic | sm 2 / md 8 / lg 14 / pill | 科技、B 端、作品集 | | **editorial** | 0.20 0.015 280（冷墨） | 0.50 0.18 25（砖红） | DM Serif Display 400 | sm 2 / md 4 / lg 8 | 内容、品牌故事、报告 | | **brutalist** | 0.10 0 0（真黑） | 0.78 0.22 105（警示黄） | Space Grotesk 700 + JetBrains Mono | 全 0（直角） | 独立工作室、Web3、先锋 | | **retro-future** | 0.13 0.04 280（深紫蓝 bg） | 0.85 0.18 195 / 0.72 0.25 5（霓虹双色） | Major Mono Display + VT323 | 主 0 / lg 4 | 游戏、音乐、娱乐 | | **organic** | 0.28 0.04 50（棕墨） | 0.62 0.13 45（土橙） | Caveat 600 + Source Serif | irregular 4 段 / soft 24 / pill | 食品、母婴、健康 | | **mobile-native-ios** | 0.18 0.005 280（HIG 墨） | 0.66 0.16 50（暖橙替代系统蓝） | Manrope 800 | icon 8 / button 7 / list 14 / fab 18 | iOS APP / iPhone H5 | | **mobile-native-md3** | 0.55 0.13 175（青绿 seed） | dynamic primary container | DM Sans 700 | chip 8 / card 16 / fab 18 / topBar 24 | Android APP / MD3 | | **mobile-native-harmony** | 0.18 0.01 260（鸿蒙墨） | 4 灵动色块同明度 L≈0.78 | Noto Sans SC 700/900 + DM Sans | control 14 / tile 24 / card 28 / hero 32 | HarmonyOS / 鸿蒙生态 | ## 反差对位（multi-genre 三选时常用） | 命题 | 流派组合 | |---|---| | 理性 vs 感性 vs 实验 | bold-minimal × organic × brutalist | | 冷峻 vs 温暖 vs 复古 | editorial × organic × retro-future | | 桌面 vs 移动 vs 跨端 | bold-minimal × mobile-native-ios × mobile-native-harmony | | 极简 vs 信息密度 vs 装饰 | bold-minimal × editorial × retro-future | | Web 端 vs 双移动端 | bold-minimal × mobile-native-md3 × mobile-native-harmony | ## redLineWaiver 速查 | 流派 | 豁免说明 | |---|---| | brutalist | radius 全 0 是 hallmark，**不是**红线 #9 违规 | | retro-future | bg 深紫蓝纯色（非渐变），霓虹靠 text-shadow 不靠 backdrop-blur | | organic | irregular radius 4 段不同百分比，不犯统一 16px | | mobile-native-ios | accent 暖橙替代 #007AFF（红线 #8 合规：Apple 自家 App 也这么做） | | mobile-native-md3 | seed 青绿避开 Material 默认紫 | | mobile-native-harmony | 4 灵动色块同明度多色相，避免单色一统天下 | ## motion 哲学速查 ⭐v4.5 | 流派 | 主 duration | 主 easing | stagger | 一句话动效原则 | |---|---|---|---|---| | **bold-minimal** | normal 300ms | standard | 80ms | 克制 — 单一 easing、绝不弹跳 | | **editorial** | normal 400ms / slow 700ms | decelerate | 120ms | 稳重 — 偏长 duration 模仿翻页 | | **brutalist** | instant 80ms / fast 120ms | linear / step2 | 30ms | 硬切 — 禁缓动函数 | | **retro-future** | blink 1000ms 周期 | step2 / linear | 50ms | CRT 闪烁 — 用 step 模拟显像管 | | **organic** | normal 500ms / slow 800ms | spring（1.56 超调） | 140ms | 弹性 — 卡片落下有回弹 | | **mobile-native-ios** | normal 350ms | iosSpring | 70ms | Apple HIG spring | | **mobile-native-md3** | medium2 300ms | emphasized | 75ms | MD3 完整 12 档 duration + 4 档 emphasized easing | | **mobile-native-harmony** | normal 300ms | fluid | 80ms | 鸿蒙流畅感（比 iOS 偏快） | **反差选 motion 的命题**： - 静态 vs 闪烁 vs 弹性：bold-minimal × retro-future × organic - 克制 vs 严谨 vs 灵动：brutalist × md3 × harmony 详细 motion token JSON 见 [`<slug>.json`](.) 的 `motion` 字段；导出到 CSS / Tailwind / Figma 见 [`exporters/`](exporters/)。 ## design-director 集成点 director 需要挑 3 流派对比时，对每个候选： 1. 读 [`<slug>.json`](.) 拿 color / typography / spacing / radius 2. 看 redLineWaiver（避免误判违规） 3. 用 `examples/<dir>/index.html` 作 Junior pass 起手（不用空白起步） 4. 截 3 张图喂给五维矩阵打分详细接力流程见 [`../references/multi-genre-compare.md`](../references/multi-genre-compare.md)。 FILE:tokens/_schema.md # tokens.json Schema · v4.0 > 每个流派一份 `<slug>.json`，扁平 1 层结构便于 jq 转换。 ## 字段约定 ```jsonc { "name": "bold-minimal", // 必须等于文件名（无 .json） "displayName": "BOLD-MINIMAL · 勇敢极简", // SKILL.md §三流派表对应名 "version": "1.0.0", // 流派 token 自身版本 "color": { "<token>": "oklch(...)" }, // oklch 首选 "colorHex": { "<token>": "#hex" }, // 1:1 对应 color，给不支持 oklch 环境 "typography": { "display": "<Family> <Weight> [italic]", "body": "<Family> <Weight>" }, "spacing": { "xs": 4, "sm": 8, ..., "2xl": 128 }, // 单位 px；小程序按 rpx ×2 换算 "radius": { "none": 0, "sm": 2, ..., "pill": 999 }, "shadow": { "subtle": "...", "card": "...", "modal": "..." }, "examplePath": "../examples/<dir>/index.html", // 对应 starter 文件 "redLineWaiver": ["..."], // 可选；说明本流派对哪条红线有合规豁免 "motion": { // ⭐v4.5 动效 tokens "duration": { "fast": 200, "normal": 300, ... }, // 单位 ms "easing": { "<name>": "cubic-bezier(...) | linear | steps(...)" }, "stagger": { "tight"|"normal"|"loose": 50|80|120 }, // 列表级联出场延迟（ms） "philosophy": "<一句话流派动效原则>" } } ``` ## 硬约束 - `color` 与 `colorHex` 必须**键名 1:1 对应**（同 key、同顺序） - `color` 必填 oklch；颜色硬规则见 [`../references/colors.md`](../references/colors.md) - `typography` 字体不能命中红线 #1（Inter / Roboto / Arial / system-ui）；**小程序场景豁免**（PingFang SC 等中文字体允许） - 任何字段缺失 → 视作"沿用 colors.md / typography.md 中通用约束" - **不要嵌套**对象（如 `color.brand.primary`）— 保持扁平 1 层，jq 一行能转 ## 导出器 - [`exporters/to-css-vars.md`](exporters/to-css-vars.md) — jq → CSS variables - [`exporters/to-tailwind.md`](exporters/to-tailwind.md) — jq → tailwind.config.js extend - [`exporters/to-figma.md`](exporters/to-figma.md) — Tokens Studio v2 兼容格式所有导出器**只返回 jq / shell 命令给用户执行**，不在 skill 内部 spawn（延续 enhance "禁 child_process" 铁律）。 FILE:tokens/bold-minimal.json { "name": "bold-minimal", "displayName": "BOLD-MINIMAL · 勇敢极简", "version": "1.0.0", "color": { "ink": "oklch(0.18 0 0)", "paper": "oklch(0.99 0.005 95)", "accent": "oklch(0.66 0.20 28)", "mute": "oklch(0.45 0 0)" }, "colorHex": { "ink": "#1a1a1a", "paper": "#fbfbf6", "accent": "#d6604c", "mute": "#666666" }, "typography": { "display": "Playfair Display 900 italic", "body": "IBM Plex Sans 400/600" }, "spacing": { "xs": 4, "sm": 8, "md": 16, "lg": 32, "xl": 64, "2xl": 128 }, "radius": { "none": 0, "sm": 2, "md": 8, "lg": 14, "pill": 999 }, "shadow": { "subtle": "0 1px 2px oklch(0 0 0 / .05)", "card": "0 4px 16px oklch(0 0 0 / .08)", "modal": "0 16px 48px oklch(0 0 0 / .15)" }, "examplePath": "../examples/bold-minimal/index.html", "motion": { "duration": { "instant": 100, "fast": 200, "normal": 300, "slow": 500 }, "easing": { "standard": "cubic-bezier(0.2, 0, 0, 1)", "decelerate": "cubic-bezier(0, 0, 0.2, 1)" }, "stagger": { "normal": 80 }, "philosophy": "克制 — 短 duration、单一 easing、绝不弹跳；hover/focus 200ms，页面进入 300ms" } } FILE:tokens/brutalist.json { "name": "brutalist", "displayName": "BRUTALIST · 野兽派", "version": "1.0.0", "color": { "paper": "oklch(0.985 0 0)", "ink": "oklch(0.10 0 0)", "warn": "oklch(0.78 0.22 105)" }, "colorHex": { "paper": "#fafafa", "ink": "#1a1a1a", "warn": "#dde43a" }, "typography": { "display": "Space Grotesk 700", "mono": "JetBrains Mono 400/800" }, "spacing": { "xs": 4, "sm": 8, "md": 16, "lg": 24, "xl": 32, "2xl": 64 }, "radius": { "none": 0, "sm": 0, "md": 0, "lg": 0 }, "shadow": { "subtle": "none", "card": "6px 6px 0 oklch(0.10 0 0)", "modal": "12px 12px 0 oklch(0.10 0 0)" }, "redLineWaiver": ["radius 全 0 是流派 hallmark（粗黑直角），不是红线 #9 违规（多档机制不适用）"], "examplePath": "../examples/brutalist/index.html", "motion": { "duration": { "instant": 80, "fast": 120 }, "easing": { "linear": "linear", "step2": "steps(2, end)" }, "stagger": { "tight": 30 }, "philosophy": "硬切 — instant duration、linear/step easing 让动效像机械按下；stagger 30ms 接近无延迟。**禁** spring / bounce / 缓动函数" } } FILE:tokens/editorial.json { "name": "editorial", "displayName": "EDITORIAL · 编辑杂志", "version": "1.0.0", "color": { "paper": "oklch(0.97 0.012 75)", "ink": "oklch(0.20 0.015 280)", "accent": "oklch(0.50 0.18 25)", "mute": "oklch(0.42 0.02 280)", "rule": "oklch(0.20 0.015 280 / .25)" }, "colorHex": { "paper": "#f6f3eb", "ink": "#2c2c33", "accent": "#a83a23", "mute": "#5e5e6a", "rule": "rgba(44,44,51,.25)" }, "typography": { "display": "DM Serif Display 400", "body": "Source Serif 4 400/600 opsz" }, "spacing": { "xs": 4, "sm": 8, "md": 16, "lg": 32, "xl": 48, "2xl": 96 }, "radius": { "none": 0, "sm": 2, "md": 4, "lg": 8 }, "shadow": { "subtle": "0 1px 2px oklch(0 0 0 / .04)", "card": "0 2px 8px oklch(0 0 0 / .06)", "modal": "0 12px 36px oklch(0 0 0 / .12)" }, "examplePath": "../examples/editorial/index.html", "motion": { "duration": { "fast": 250, "normal": 400, "slow": 700 }, "easing": { "decelerate": "cubic-bezier(0, 0, 0.2, 1)", "standard": "cubic-bezier(0.4, 0, 0.2, 1)" }, "stagger": { "loose": 120 }, "philosophy": "稳重 — 偏长 duration 模仿翻页节奏、decelerate easing 像纸张展开；段落 stagger 120ms 模拟阅读视线下移" } } FILE:tokens/exporters/to-css-vars.md # tokens.json → CSS Variables > 把任一 `<slug>.json` 转成可在 `<style>` 顶层使用的 CSS variables。 ## 一行 jq 命令（推荐） ```bash jq -r ' ":root {", (.color | to_entries[] | " --color-\(.key): \(.value);"), (.spacing | to_entries[] | " --spacing-\(.key): \(.value)px;"), (.radius | to_entries[] | " --radius-\(.key): \(if (.value | type) == "number" then "\(.value)px" else .value end);"), (.shadow | to_entries[] | " --shadow-\(.key): \(.value);"), (.motion.duration // {} | to_entries[] | " --duration-\(.key): \(.value)ms;"), (.motion.easing // {} | to_entries[] | " --easing-\(.key): \(.value);"), (.motion.stagger // {} | to_entries[] | " --stagger-\(.key): \(.value)ms;"), "}" ' tokens/bold-minimal.json ``` ## 输出示例（bold-minimal） ```css :root { --color-ink: oklch(0.18 0 0); --color-paper: oklch(0.99 0.005 95); --color-accent: oklch(0.66 0.20 28); --color-mute: oklch(0.45 0 0); --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 32px; --spacing-xl: 64px; --spacing-2xl: 128px; --radius-none: 0px; --radius-sm: 2px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px; --shadow-subtle: 0 1px 2px oklch(0 0 0 / .05); --shadow-card: 0 4px 16px oklch(0 0 0 / .08); --shadow-modal: 0 16px 48px oklch(0 0 0 / .15); --duration-instant: 100ms; --duration-fast: 200ms; --duration-normal: 300ms; --duration-slow: 500ms; --easing-standard: cubic-bezier(0.2, 0, 0, 1); --easing-decelerate: cubic-bezier(0, 0, 0.2, 1); --stagger-normal: 80ms; } ``` ## 在样式里使用 motion tokens ```css .btn { transition: background var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard); } .list-item { animation: fadeIn var(--duration-normal) var(--easing-decelerate) both; } .list-item:nth-child(1) { animation-delay: calc(var(--stagger-normal) * 0); } .list-item:nth-child(2) { animation-delay: calc(var(--stagger-normal) * 1); } .list-item:nth-child(3) { animation-delay: calc(var(--stagger-normal) * 2); } ``` ## `@property` 块（让 transition 跑动 oklch / 自定义属性）老式 `transition: --color 200ms` 不会工作（因 var 默认是字符串 type）。用 `@property` 声明： ```css @property --color-accent { syntax: '<color>'; inherits: true; initial-value: oklch(0.66 0.20 28); } ``` 之后 `transition: --color-accent 200ms` 就能平滑过渡颜色。 ## 批量导出（所有流派） ```bash mkdir -p generated/css for f in tokens/*.json; do slug=$(basename "$f" .json) jq -r '...' "$f" > "generated/css/$slug.css" done ``` ## hex fallback（不支持 oklch 的环境） ```bash jq -r ' ":root {", (.colorHex | to_entries[] | " --color-\(.key): \(.value);"), "}" ' tokens/bold-minimal.json ``` ## 注意 - 本 skill **不内置 spawn**，上述命令是给用户保存到自己项目里跑的（铁律延续 enhance 插件"禁 child_process"） - `radius.irregular`（organic 流派）值是字符串如 `"48% 52% 55% 45% / 50% 50% 50% 50%"`，jq 上面那行 `if number` 判断已正确处理 FILE:tokens/exporters/to-figma.md # tokens.json → Figma（Tokens Studio v2 兼容） > [Tokens Studio](https://tokens.studio/)（前 Figma Tokens Plugin）的 v2.x JSON 与本 skill tokens 几乎 1:1 对应。 ## 转换规则 | 本 skill 字段 | Tokens Studio v2 | |---|---| | `color.<key>: "oklch(...)"` | `{ value: "oklch(...)", type: "color" }` | | `colorHex.<key>: "#hex"` | （fallback，Figma 不支持 oklch 时使用）`{ value: "#hex", type: "color" }` | | `spacing.<key>: 16` | `{ value: "16px", type: "spacing" }` | | `radius.<key>: 14` | `{ value: "14px", type: "borderRadius" }` | | `shadow.<key>: "..."` | `{ value: "...", type: "boxShadow" }` | | `typography.display: "Manrope 800"` | 拆为 `fontFamilies.display` + `fontWeights.display` 两个 set | | `motion.duration.<key>: 200` ⭐v4.5 | `{ value: "200ms", type: "duration" }` | | `motion.easing.<key>: "cubic-bezier(...)"` ⭐v4.5 | `{ value: "[0.2, 0, 0, 1]", type: "cubicBezier" }`（拆为 4 元数组） | | `motion.stagger.<key>: 80` ⭐v4.5 | Figma 无原生概念；导出为 `{ value: "80ms", type: "duration" }` 给 Smart Animate 单独引用 | ## jq 转换（hex fallback 版，Figma 实际可用） ```bash jq '{ ($SLUG | tostring): { color: (.colorHex | with_entries({ key: .key, value: { value: .value, type: "color" } })), spacing: (.spacing | with_entries({ key: .key, value: { value: "$.value)px", type: "spacing" } })), borderRadius: (.radius | with_entries({ key: .key, value: { value: (if (.value | type) == "number" then "\(.value)px" else .value end), type: "borderRadius" } })), boxShadow: (.shadow | with_entries({ key: .key, value: { value: .value, type: "boxShadow" } })) } }' --arg SLUG bold-minimal tokens/bold-minimal.json > generated/figma/bold-minimal.tokens.json ``` ## 在 Figma 里使用 1. 安装 [Tokens Studio plugin](https://www.figma.com/community/plugin/843461159747178978/tokens-studio-for-figma) 2. 打开 plugin → 文件菜单 → **Import** → JSON 3. 上传上一步生成的 JSON 4. 一键应用到 Figma styles（自动建 color styles / text styles / effect styles） ## 限制 - **Figma 不支持 oklch**（截至 2026-04），plugin 默认用 hex fallback；本 skill 的 token 文件已为每个 color 提供 `colorHex` - **Figma 不支持 cubic-bezier 字符串**直接，需拆成 4 元数组 `[x1, y1, x2, y2]`；jq 转换时用 `gsub("cubic-bezier\\("; "[") | gsub("\$"; "]")` 简单替换可工作 - **stagger** 在 Figma 无原生概念，Smart Animate 只能逐对象设 delay；本 skill 把 stagger 导出为 duration 给 Figma 单独使用 - **不规则圆角**（organic 的 `48% 52% 55% 45%`）Figma 不支持，需手画 ellipse 或 vector - **rpx**（小程序单位）转 Figma 需 ×2 → px（750rpx 屏宽对应 Figma 375px design board） - **typography 字符串拆分**：`"Manrope 800"` → 需手动拆成 `fontFamilies.display = "Manrope"` 和 `fontWeights.display = 800`，jq 单行不够智能（用 awk 或 Node 脚本兜底） FILE:tokens/exporters/to-tailwind.md # tokens.json → Tailwind（v3 config + v4 @theme 双版本） > v3 用 `tailwind.config.js theme.extend` 注入；**v4（2026 主流）改用 CSS 内 `@theme {}` 块** ⭐v4.6。两者从同一 tokens.json 出发。 ## v4 适配 ⭐v4.6（推荐，2026 起 Tailwind 默认走这条） Tailwind v4 不再用 `tailwind.config.js`（仍兼容但非主流），改用 CSS 内 `@theme {}` 声明，token 命名前缀化（`--color-<key>` / `--spacing-<key>` 等）。 ### jq 转换（v4） ```bash jq -r ' "@import \"tailwindcss\";", "", "@theme {", (.color | to_entries[] | " --color-\(.key): \(.value);"), (.spacing | to_entries[] | " --spacing-\(.key): \(.value)px;"), (.radius | to_entries[] | " --radius-\(.key): \(if (.value | type) == "number" then "\(.value)px" else .value end);"), (.shadow | to_entries[] | " --shadow-\(.key): \(.value);"), (.motion.duration // {} | to_entries[] | " --duration-\(.key): \(.value)ms;"), (.motion.easing // {} | to_entries[] | " --ease-\(.key): \(.value);"), "}" ' tokens/bold-minimal.json > generated/tailwind-v4/bold-minimal.css ``` ### v4 输出示例（bold-minimal） ```css @import "tailwindcss"; @theme { --color-ink: oklch(0.18 0 0); --color-paper: oklch(0.99 0.005 95); --color-accent: oklch(0.66 0.20 28); --color-mute: oklch(0.45 0 0); --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 32px; --spacing-xl: 64px; --spacing-2xl: 128px; --radius-sm: 2px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px; --shadow-card: 0 4px 16px oklch(0 0 0 / .08); --duration-fast: 200ms; --duration-normal: 300ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); } ``` ### v4 用法（utility class 自动生成） ```html <h1 class="font-display text-ink leading-none">少即是<em>极致</em></h1> <p class="text-mute mt-md">承诺一个方向</p> <a class="bg-ink text-paper rounded-pill px-lg py-md transition-colors duration-fast ease-standard">查看 →</a> ``` `text-ink` / `bg-paper` / `rounded-pill` / `px-lg` / `duration-fast` / `ease-standard` 等 utility 由 Tailwind v4 从 `@theme` 块自动生成，不用配置。 ### v4 + oklch 兼容 Tailwind v4 直接支持 oklch；不需要 `@property` polyfill。需要 hex fallback 时（旧浏览器），单独写： ```css @theme { --color-ink: #1a1a1a; /* fallback */ --color-ink: oklch(0.18 0 0); } ``` 后写的 oklch 在支持的浏览器优先生效；不支持的退到上一行 hex。 --- ## v3 适配（legacy / 既有 Tailwind v3 项目） > 用 `theme.extend` 注入流派 token，**不要覆盖**默认。 ## jq 转换 ```bash jq '{ theme: { extend: { colors: .color, spacing: (.spacing | with_entries({ key: .key, value: (if (.value | type) == "number" then "\(.value)px" else .value end) })), borderRadius: (.radius | with_entries({ key: .key, value: (if (.value | type) == "number" then "\(.value)px" else .value end) })), boxShadow: .shadow, transitionDuration: (.motion.duration // {} | with_entries({ key: .key, value: "\(.value)ms" })), transitionTimingFunction: .motion.easing // {} } } }' tokens/bold-minimal.json > generated/tailwind/bold-minimal.tailwind.json ``` ## 落地到 tailwind.config.js ```js import boldMinimal from './generated/tailwind/bold-minimal.tailwind.json' assert { type: 'json' }; export default { content: ['./**/*.{html,js,ts,tsx,vue}'], theme: { extend: { ...boldMinimal.theme.extend, fontFamily: { display: ['"Playfair Display"', 'serif'], body: ['"IBM Plex Sans"', 'sans-serif'] } } } }; ``` 用法： ```html <h1 class="font-display text-ink leading-none">少即是<em>极致</em></h1> <p class="text-mute mt-md">承诺一个方向</p> <a class="bg-ink text-paper rounded-pill px-lg py-md transition-colors duration-fast ease-standard">查看 →</a> ``` `duration-fast` / `ease-standard` 是 v4.5 motion tokens 通过 `transitionDuration` / `transitionTimingFunction` 注入到 Tailwind 后产生的 utility class。 ## 红线提醒 - 不要把 token **覆盖** Tailwind 默认色（避免污染团队既有项目）— 只用 `extend` - `fontFamily` 必须**显式**列入 `extend`（typography 字段是字符串描述，jq 不能直接转换） - `radius.lg = 14` 不要无脑当全局 radius — 必须搭配多档（红线 #9） ## OKLCH 兼容 Tailwind v3.4+ 直接支持 oklch，无需额外配置。Tailwind v3.3- 需要 `@property` polyfill 或退到 hex fallback： ```bash # hex fallback 版 jq '{ theme: { extend: { colors: .colorHex } } }' tokens/bold-minimal.json ``` FILE:tokens/mobile-native-harmony.json { "name": "mobile-native-harmony", "displayName": "MOBILE-NATIVE · HarmonyOS 鸿蒙", "version": "1.0.0", "color": { "paper": "oklch(0.97 0.005 240)", "paper2": "oklch(0.94 0.008 240)", "ink": "oklch(0.18 0.01 260)", "mute": "oklch(0.50 0.01 260)", "cyan": "oklch(0.78 0.12 220)", "orange": "oklch(0.78 0.13 55)", "green": "oklch(0.78 0.14 145)", "pink": "oklch(0.82 0.10 5)" }, "colorHex": { "paper": "#f4f5f7", "paper2": "#eaedf2", "ink": "#23262e", "mute": "#76798a", "cyan": "#7ac8d4", "orange": "#e0a877", "green": "#9bc88a", "pink": "#e7b6b6" }, "typography": { "display": "Noto Sans SC 700/900", "body": "Noto Sans SC 400/500", "numeric": "DM Sans 500/700" }, "spacing": { "xs": 4, "sm": 8, "md": 16, "lg": 24, "xl": 32, "2xl": 56 }, "radius": { "control": 14, "tile": 24, "card": 28, "hero": 32, "pill": 999 }, "shadow": { "tile": "0 6px 18px oklch(0.78 0.12 220 / .15)" }, "redLineWaiver": ["灵动色块多色：4 色同明度 L≈0.78 + 同低饱和 C≈0.10–0.14 + 不同色相，避免某色一统天下"], "examplePath": "../examples/mobile-native/harmony/index.html", "motion": { "duration": { "fast": 200, "normal": 300, "slow": 450 }, "easing": { "harmonySpring": "cubic-bezier(0.2, 0, 0, 1)", "fluid": "cubic-bezier(0.36, 0, 0.66, 1)", "emphasized": "cubic-bezier(0.05, 0.7, 0.1, 1)" }, "stagger": { "normal": 80 }, "philosophy": "鸿蒙流畅感 — fluid easing 模仿 ArkUI 的灵动效果；4 灵动色块切换 normal 300ms（比 iOS 偏快），保持响应敏捷" } } FILE:tokens/mobile-native-ios.json { "name": "mobile-native-ios", "displayName": "MOBILE-NATIVE · iOS HIG", "version": "1.0.0", "color": { "paper": "oklch(0.985 0.005 75)", "groupedBg": "oklch(0.94 0.005 75)", "ink": "oklch(0.18 0.005 280)", "mute": "oklch(0.55 0.01 280)", "sep": "oklch(0.88 0.005 280)", "accent": "oklch(0.66 0.16 50)", "card": "oklch(1 0 0)" }, "colorHex": { "paper": "#fafaf6", "groupedBg": "#efefe9", "ink": "#2c2c33", "mute": "#85858a", "sep": "#dddde0", "accent": "#cf7a26", "card": "#ffffff" }, "typography": { "display": "Manrope 800", "body": "IBM Plex Sans 400/500/600" }, "spacing": { "xs": 4, "sm": 8, "md": 16, "lg": 20, "xl": 32, "2xl": 64 }, "radius": { "icon": 8, "button": 7, "list": 14, "fab": 18, "pill": 999 }, "shadow": { "navbarBlur": "saturate(180%) blur(20px)", "card": "0 1px 2px oklch(0 0 0 / .08), 0 0 0 .5px oklch(0 0 0 / .04)" }, "redLineWaiver": ["accent 用自有暖橙替代 system blue #007AFF（红线 #8 合规：Apple 自家 App 也都用品牌色而非系统蓝）"], "examplePath": "../examples/mobile-native/ios/index.html", "motion": { "duration": { "fast": 200, "normal": 350, "slow": 500 }, "easing": { "iosSpring": "cubic-bezier(0.32, 0.72, 0, 1)", "iosDefault": "cubic-bezier(0.25, 0.1, 0.25, 1)" }, "stagger": { "normal": 70 }, "philosophy": "Apple HIG spring — iosSpring 模仿 SwiftUI 的 .interactiveSpring；模态弹出 350ms、tab 切换 200ms" } } FILE:tokens/mobile-native-md3.json { "name": "mobile-native-md3", "displayName": "MOBILE-NATIVE · Material Design 3", "version": "1.0.0", "seed": "oklch(0.55 0.13 175)", "color": { "primary": "oklch(0.55 0.13 175)", "onPrimary": "oklch(0.99 0.01 175)", "primaryContainer": "oklch(0.88 0.06 175)", "onPrimaryContainer": "oklch(0.20 0.05 175)", "secondaryContainer": "oklch(0.92 0.04 60)", "onSecondaryContainer": "oklch(0.25 0.05 60)", "tertiaryContainer": "oklch(0.90 0.05 320)", "onTertiaryContainer": "oklch(0.25 0.06 320)", "surface": "oklch(0.985 0.003 175)", "surfaceVariant": "oklch(0.93 0.01 175)", "onSurface": "oklch(0.18 0.01 175)", "onSurfaceVariant": "oklch(0.45 0.01 175)", "outline": "oklch(0.72 0.01 175)" }, "colorHex": { "primary": "#3a8884", "onPrimary": "#fafefd", "primaryContainer": "#bee0dc", "onPrimaryContainer": "#193533", "secondaryContainer": "#eddfcb", "onSecondaryContainer": "#3e3322", "tertiaryContainer": "#e3d6e1", "onTertiaryContainer": "#3e2538", "surface": "#fafdfc", "surfaceVariant": "#e2eceb", "onSurface": "#1c2625", "onSurfaceVariant": "#646e6d", "outline": "#a5b3b1" }, "typography": { "display": "DM Sans 700", "body": "IBM Plex Sans 400/500" }, "spacing": { "xs": 4, "sm": 8, "md": 16, "lg": 24, "xl": 32, "2xl": 56 }, "radius": { "chip": 8, "card": 16, "fab": 18, "navPill": 16, "topBar": 24 }, "shadow": { "fab": "0 6px 20px oklch(0 0 0 / .18), 0 1px 3px oklch(0 0 0 / .12)" }, "redLineWaiver": ["seed 自选 oklch(0.55 0.13 175) 青绿，避开 Material 默认紫；多档 radius (8/16/18/24) 满足红线 #9"], "examplePath": "../examples/mobile-native/md3/index.html", "motion": { "duration": { "short1": 50, "short2": 100, "short3": 150, "short4": 200, "medium1": 250, "medium2": 300, "medium3": 350, "medium4": 400, "long1": 450, "long2": 500, "long3": 550, "long4": 600 }, "easing": { "emphasized": "cubic-bezier(0.2, 0, 0, 1)", "emphasizedDecelerate": "cubic-bezier(0.05, 0.7, 0.1, 1)", "emphasizedAccelerate": "cubic-bezier(0.3, 0, 0.8, 0.15)", "standard": "cubic-bezier(0.2, 0, 0, 1)" }, "stagger": { "normal": 75 }, "philosophy": "Material Design 3 完整 motion token — 12 档 duration + 4 档 emphasized easing 是 MD3 spec 一比一复刻；用 emphasized 给主动作（FAB / 抽屉），standard 给次要" } } FILE:tokens/organic.json { "name": "organic", "displayName": "ORGANIC · 有机自然", "version": "1.0.0", "color": { "paper": "oklch(0.96 0.025 85)", "ink": "oklch(0.28 0.04 50)", "clay": "oklch(0.62 0.13 45)", "moss": "oklch(0.45 0.10 145)", "sky": "oklch(0.78 0.07 220)" }, "colorHex": { "paper": "#f7eedb", "ink": "#574230", "clay": "#c97f3a", "moss": "#5b8a3b", "sky": "#9bbed4" }, "typography": { "display": "Caveat 600", "body": "Source Serif 4 400" }, "spacing": { "xs": 4, "sm": 8, "md": 16, "lg": 32, "xl": 48, "2xl": 80 }, "radius": { "irregular": "48% 52% 55% 45% / 50% 50% 50% 50%", "soft": 24, "pill": 999 }, "shadow": { "subtle": "0 2px 8px oklch(0.62 0.13 45 / .12)", "card": "0 8px 32px oklch(0.62 0.13 45 / .15)" }, "redLineWaiver": ["irregular radius 是 hallmark：每个圆角不一样（4 段不同百分比），避免统一 16px 工业感（红线 #9 合规）"], "examplePath": "../examples/organic/index.html", "motion": { "duration": { "fast": 300, "normal": 500, "slow": 800 }, "easing": { "spring": "cubic-bezier(0.34, 1.56, 0.64, 1)", "decelerate": "cubic-bezier(0, 0, 0.2, 1)", "wave": "cubic-bezier(0.42, 0, 0.58, 1)" }, "stagger": { "loose": 140 }, "philosophy": "弹性 + 摇曳 — spring easing 让卡片落下时有一次轻微回弹（1.56 超调）、stagger 140ms 像水面波纹扩散；duration 偏长配合手作慢节奏" } } FILE:tokens/retro-future.json { "name": "retro-future", "displayName": "RETRO-FUTURE · 复古未来", "version": "1.0.0", "color": { "bg": "oklch(0.13 0.04 280)", "ink": "oklch(0.96 0.04 110)", "neonCyan": "oklch(0.85 0.18 195)", "neonMagenta": "oklch(0.72 0.25 5)", "rule": "oklch(0.35 0.1 280)" }, "colorHex": { "bg": "#1c1a3a", "ink": "#f8f3c4", "neonCyan": "#2cd9d5", "neonMagenta": "#ee2657", "rule": "#3a3170" }, "typography": { "display": "Major Mono Display 400", "body": "VT323 400" }, "spacing": { "xs": 4, "sm": 8, "md": 16, "lg": 32, "xl": 48, "2xl": 96 }, "radius": { "none": 0, "sm": 0, "md": 0, "lg": 4 }, "shadow": { "neonCyan": "0 0 8px oklch(0.85 0.18 195), 0 0 24px oklch(0.85 0.18 195 / .5)", "neonMagenta": "0 0 8px oklch(0.72 0.25 5), 0 0 24px oklch(0.72 0.25 5 / .5)" }, "redLineWaiver": ["bg 用深紫蓝纯色（非渐变模糊），不犯红线 #2 / #11；霓虹效果靠 text-shadow 双层叠加，不靠 backdrop-blur（红线 #10 合规）"], "examplePath": "../examples/retro-future/index.html", "motion": { "duration": { "blink": 1000, "fast": 200 }, "easing": { "step2": "steps(2, end)", "linear": "linear" }, "stagger": { "tight": 50 }, "philosophy": "CRT 闪烁 + 无缓动 — 用 step2 模拟显像管刷新、1s blink 周期循环（光标 / 状态指示）；继承 brutalist 禁缓动函数" } } </article></body></html>

少即是极致。承诺一个方向。

Huo15 Openclaw Frontend Design

Comments (0)