{"id":"a6ac9d83-67b0-4cdc-b73f-7e7084fd2994","entityType":"agent","slug":"clawhub-zhaobod1-huo15-openclaw-frontend-design","name":"Huo15 Openclaw Frontend Design","canonicalUrl":"https://www.xpersona.co/agent/clawhub-zhaobod1-huo15-openclaw-frontend-design","canonicalPath":"/agent/clawhub-zhaobod1-huo15-openclaw-frontend-design","generatedAt":"2026-10-10T10:49:47.512Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T07:46:28.229Z","emptyReason":null},"description":"高保真 Web UI / 移动 H5 / iOS / Android / HarmonyOS / 微信 + 支付宝 + 抖音 + 快手 四端小程序 原生风格原型 + 大胆美学方向 + 反 AI Slop 硬红线 + 8 流派 design tokens（含 motion）系统化（CSS vars / Tailwi...","descriptionLabel":"Source description","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1.6K downloads reported by the source. Last updated 10/10/2026.","installCommand":"clawhub skill install s17f6q72skfgyjycm2frgdc8dn83v5mk:huo15-openclaw-frontend-design","sourceUrl":"https://clawhub.ai/zhaobod1/huo15-openclaw-frontend-design","homepage":"https://clawhub.ai/zhaobod1/skills/huo15-openclaw-frontend-design","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/zhaobod1/huo15-openclaw-frontend-design","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/zhaobod1/skills/huo15-openclaw-frontend-design","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":64,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Huo15 Openclaw Frontend Design technical dossier on Xpersona with agent coverage, OPENCLEW support, and live trust metadata."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-10T07:46:28.229Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T07:46:28.229Z","emptyReason":null},"stars":null,"forks":null,"downloads":1582,"packageName":null,"latestVersion":"4.7.0","tractionLabel":"1.6K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T07:46:28.229Z","emptyReason":null},"lastUpdatedAt":"2026-10-10T07:46:28.229Z","lastCrawledAt":"2026-10-10T07:46:28.229Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-11T07:46:28.229Z","lastVerifiedAt":null,"highlights":[{"version":"4.7.0","createdAt":"2026-05-29T05:11:47.832Z","changelog":"**2026 微趋势补丁引入，并强化主流与年代感分层** - 新增2026微趋势补丁（Editorial Tech、Spatial Web、AI-Backlash、Brutalist 2026），为设计提供流派之上的年代感锚点，与design-director v3.x趋势池对应。 - 在design tokens（如tokens/<slug>.json）中加入 era_anchor 字段，支持主流派与微趋势混合。 - 触发词、描述和说明文档全面同步2026趋势相关内容。 - [`references/inspirations.md`] 顶部新增标杆网站的真实 URL 锚点，提升案例对照力。 - 文件结构优化：删除 skill-card.md，加入 LICENSE，维持合规与精简。 - 红线规则（反AI Slop硬红线）保持原15条不变。","fileCount":55,"zipByteSize":87286},{"version":"4.6.0","createdAt":"2026-04-27T05:14:15.077Z","changelog":"v4.6.0 Tailwind v4 @theme 适配 — tokens/exporters/to-tailwind.md 加 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 均不变","fileCount":54,"zipByteSize":83654},{"version":"4.5.0","createdAt":"2026-04-26T23:15:03.116Z","changelog":"v4.5.0 motion tokens 8 流派动效系统化 — 8 个 tokens/<slug>.json 加 motion 字段（duration / easing / stagger / philosophy），每流派差异化动效原则：bold-minimal 克制、editorial 稳重、brutalist 硬切、retro-future CRT 闪烁、organic 弹性 spring、mobile-native-ios HIG spring 350ms、mobile-native-md3 完整 12 档 short/medium/long + 4 档 emphasized easing（MD3 spec 1:1）、mobile-native-harmony fluid 比 iOS 偏快；tokens/_schema.md 加 motion 字段约定；tokens/_compare-matrix.md 加 motion 哲学速查 + 反差选 motion 命题；3 导出器同步加 motion 转换：to-css-vars 加 --duration-*/--easing-*/--stagger-* + @property 平滑过渡、to-tailwind 加 transitionDuration + transitionTimingFunction 注入 theme.extend、to-figma 加 cubicBezier 4 元数组 + Tokens Studio v2 兼容；SKILL.md §五 加 5.7 Motion Tokens 段（动效原则 + 实现 + prefers-reduced-motion 兜底）；触发词扩到做动效/motion/duration/easing/spring/级联出场/缓动函数；红线/流派/a11y/自验证/多流派对比均不变","fileCount":53,"zipByteSize":81172},{"version":"4.4.0","createdAt":"2026-04-26T14:46:34.495Z","changelog":"v4.4.0 a11y 自动审计 — 新增 references/a11y-checklist.md（WCAG 2.2 AA 30 条速查：Perceivable 8 / Operable 11 含 WCAG 2.2 新增 4 条 / Understandable 7 / Robust 4 + 场景优先级表 + 8 流派 a11y 友好度对照）；references/self-verify.md §1.5 新增 axe-core MCP 注入路线（javascript_tool 跑 axe.run wcag2aa + wcag22aa）+ Lighthouse CLI fallback；§六 阶段 4 加 a11y 审计段（violations 修完 + passes ≥ 90% 可发布）；触发词扩到无障碍 / a11y / WCAG / Lighthouse / 对比度 / 焦点环 / 屏幕阅读器；流派 a11y 友好度速查 — BOLD-MINIMAL / EDITORIAL / iOS / MD3 高，BRUTALIST / Harmony / ORGANIC 中，RETRO-FUTURE 低；红线 / 流派 / tokens / 多流派对比均不变，纯无障碍审计能力补齐","fileCount":53,"zipByteSize":76398},{"version":"4.3.0","createdAt":"2026-04-26T14:24:30.322Z","changelog":"v4.3.0 快手小程序补齐四端 — 新增 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 后缀；红线 #14 UI 库列表扩展 KSUI / kuaishou-uikit；README 升级四端对照表（推荐顺序：微信 → 抖音 → 快手 → 支付宝）+ 顶部胶囊形态四端对照（微信圆角 / 支付宝椭圆 / 抖音矩形 / 快手矩形）+ Taro / Uni-app 编译框架提示；§三 小程序场景三端 → 四端；§六 阶段 4 自验证加快手开发者工具流程；触发词扩到快手小程序 / ksml / 四端小程序；references/inspirations.md §7.4 加快手参考、§7.5 通用参考从三端升四端；体检：safe-area-inset / rpx 42 处 / PingFang SC 字体豁免 / 0 -apple-system / 0 紫色 / 0 系统蓝；红线 / 流派 / 自验证 / tokens / 多流派对比均不变，纯第四端补齐","fileCount":52,"zipByteSize":70926},{"version":"4.2.0","createdAt":"2026-04-26T14:17:57.963Z","changelog":"v4.2.0 抖音小程序补齐三端 — 新增 examples/mini-program/douyin/ 完整 starter（app.json + app.ttss + app.js + project.config.json + pages/index 4 件套），与微信端 95% 同源；红线 #14 UI 库列表扩展 TTUI / Tt-Mini-UI；README 升级三端对照表（微信→抖音 3 分钟机械替换、微信→支付宝 5 分钟）+ 真机扫码必查清单；§三 小程序场景双端→三端；§六 阶段 4 自验证加抖音开发者工具流程；触发词扩到抖音小程序/ttml/ttss/三端小程序/多端同步；references/inspirations.md §7.3 加抖音参考、§7.4 三端通用补 Taro/Uni-app；体检：safe-area-inset/rpx 42 处/PingFang SC 字体豁免/0 命中 -apple-system/0 紫色/0 系统蓝；红线/流派/自验证/tokens/多流派对比均不变，纯第三端补齐","fileCount":45,"zipByteSize":66568},{"version":"4.1.0","createdAt":"2026-04-26T14:12:04.252Z","changelog":"v4.1.0 多流派并行对比 — 新增 tokens/_compare-matrix.md（8 流派横向对比矩阵：关键 token / display 字体 / radius 哲学 / 适合场景 / 反差对位 5 组 / redLineWaiver 速查）；新增 references/multi-genre-compare.md（多流派对比手册：启用信号 / 流派选取 / 并行 Junior pass / 三份截图 / 五维评审 / 移交单流派 / 与 huo15-openclaw-design-director 协作接力 / 接力消息格式 JSON）；SKILL.md §三改写「如果用户没给方向」段为 director 联动入口；§六 阶段 1 加多流派模式判断；触发词扩到几个方向对比 / design direction / 风格提案 / 五维矩阵；不修改 design-director skill 本体（v1.0 仍覆盖 5 流派；v2 升级时直接读已就位的 schema / matrix / waiver）；红线 / 流派 / 自验证 / tokens 系统均不变","fileCount":40,"zipByteSize":63107},{"version":"4.0.0","createdAt":"2026-04-26T13:57:09.718Z","changelog":"v4.0.0 design tokens 系统化 — 新增 tokens/ 目录：8 个流派各一份扁平 1 层 JSON（bold-minimal / editorial / brutalist / retro-future / organic + mobile-native-ios / -md3 / -harmony），含 color / colorHex / typography / spacing / radius / shadow / examplePath / redLineWaiver；三个导出器手册（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 / Tokens Studio；导出器全程禁 child_process（return-cliCmd）；红线 / 流派 / 自验证工作流均不变，纯设计系统化升级","fileCount":38,"zipByteSize":57330}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s17f6q72skfgyjycm2frgdc8dn83v5mk:huo15-openclaw-frontend-design","setupComplexity":"low","setupSteps":["Install using `clawhub skill install s17f6q72skfgyjycm2frgdc8dn83v5mk:huo15-openclaw-frontend-design` in an isolated environment before connecting it to live workloads.","No published capability contract is available yet, so validate auth and request/response behavior manually.","Review the upstream CLAWHUB listing at https://clawhub.ai/zhaobod1/huo15-openclaw-frontend-design before using production credentials."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhaobod1-huo15-openclaw-frontend-design/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhaobod1-huo15-openclaw-frontend-design/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhaobod1-huo15-openclaw-frontend-design/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-zhaobod1-huo15-openclaw-frontend-design/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-zhaobod1-huo15-openclaw-frontend-design/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-zhaobod1-huo15-openclaw-frontend-design/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-10T10:49:47.506Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhaobod1-huo15-openclaw-frontend-design/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhaobod1-huo15-openclaw-frontend-design/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhaobod1-huo15-openclaw-frontend-design/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhaobod1-huo15-openclaw-frontend-design/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T07:46:28.229Z","emptyReason":null},"readme":"Skill: Huo15 Openclaw Frontend Design\n\nOwner: zhaobod1\n\nSummary: 高保真 Web UI / 移动 H5 / iOS / Android / HarmonyOS / 微信 + 支付宝 + 抖音 + 快手 四端小程序 原生风格原型 + 大胆美学方向 + 反 AI Slop 硬红线 + 8 流派 design tokens（含 motion）系统化（CSS vars / Tailwi...\n\nTags: latest:4.7.0\n\nVersion history:\n\nv4.7.0 | 2026-05-29T05:11:47.832Z | auto\n\n**2026 微趋势补丁引入，并强化主流与年代感分层**\n\n- 新增2026微趋势补丁（Editorial Tech、Spatial Web、AI-Backlash、Brutalist 2026），为设计提供流派之上的年代感锚点，与design-director v3.x趋势池对应。\n- 在design tokens（如tokens/<slug>.json）中加入 era_anchor 字段，支持主流派与微趋势混合。\n- 触发词、描述和说明文档全面同步2026趋势相关内容。\n- [`references/inspirations.md`] 顶部新增标杆网站的真实 URL 锚点，提升案例对照力。\n- 文件结构优化：删除 skill-card.md，加入 LICENSE，维持合规与精简。\n- 红线规则（反AI Slop硬红线）保持原15条不变。\n\nv4.6.0 | 2026-04-27T05:14:15.077Z | user\n\nv4.6.0 Tailwind v4 @theme 适配 — tokens/exporters/to-tailwind.md 加 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 均不变\n\nv4.5.0 | 2026-04-26T23:15:03.116Z | user\n\nv4.5.0 motion tokens 8 流派动效系统化 — 8 个 tokens/<slug>.json 加 motion 字段（duration / easing / stagger / philosophy），每流派差异化动效原则：bold-minimal 克制、editorial 稳重、brutalist 硬切、retro-future CRT 闪烁、organic 弹性 spring、mobile-native-ios HIG spring 350ms、mobile-native-md3 完整 12 档 short/medium/long + 4 档 emphasized easing（MD3 spec 1:1）、mobile-native-harmony fluid 比 iOS 偏快；tokens/_schema.md 加 motion 字段约定；tokens/_compare-matrix.md 加 motion 哲学速查 + 反差选 motion 命题；3 导出器同步加 motion 转换：to-css-vars 加 --duration-*/--easing-*/--stagger-* + @property 平滑过渡、to-tailwind 加 transitionDuration + transitionTimingFunction 注入 theme.extend、to-figma 加 cubicBezier 4 元数组 + Tokens Studio v2 兼容；SKILL.md §五 加 5.7 Motion Tokens 段（动效原则 + 实现 + prefers-reduced-motion 兜底）；触发词扩到做动效/motion/duration/easing/spring/级联出场/缓动函数；红线/流派/a11y/自验证/多流派对比均不变\n\nv4.4.0 | 2026-04-26T14:46:34.495Z | user\n\nv4.4.0 a11y 自动审计 — 新增 references/a11y-checklist.md（WCAG 2.2 AA 30 条速查：Perceivable 8 / Operable 11 含 WCAG 2.2 新增 4 条 / Understandable 7 / Robust 4 + 场景优先级表 + 8 流派 a11y 友好度对照）；references/self-verify.md §1.5 新增 axe-core MCP 注入路线（javascript_tool 跑 axe.run wcag2aa + wcag22aa）+ Lighthouse CLI fallback；§六 阶段 4 加 a11y 审计段（violations 修完 + passes ≥ 90% 可发布）；触发词扩到无障碍 / a11y / WCAG / Lighthouse / 对比度 / 焦点环 / 屏幕阅读器；流派 a11y 友好度速查 — BOLD-MINIMAL / EDITORIAL / iOS / MD3 高，BRUTALIST / Harmony / ORGANIC 中，RETRO-FUTURE 低；红线 / 流派 / tokens / 多流派对比均不变，纯无障碍审计能力补齐\n\nv4.3.0 | 2026-04-26T14:24:30.322Z | user\n\nv4.3.0 快手小程序补齐四端 — 新增 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 后缀；红线 #14 UI 库列表扩展 KSUI / kuaishou-uikit；README 升级四端对照表（推荐顺序：微信 → 抖音 → 快手 → 支付宝）+ 顶部胶囊形态四端对照（微信圆角 / 支付宝椭圆 / 抖音矩形 / 快手矩形）+ Taro / Uni-app 编译框架提示；§三 小程序场景三端 → 四端；§六 阶段 4 自验证加快手开发者工具流程；触发词扩到快手小程序 / ksml / 四端小程序；references/inspirations.md §7.4 加快手参考、§7.5 通用参考从三端升四端；体检：safe-area-inset / rpx 42 处 / PingFang SC 字体豁免 / 0 -apple-system / 0 紫色 / 0 系统蓝；红线 / 流派 / 自验证 / tokens / 多流派对比均不变，纯第四端补齐\n\nv4.2.0 | 2026-04-26T14:17:57.963Z | user\n\nv4.2.0 抖音小程序补齐三端 — 新增 examples/mini-program/douyin/ 完整 starter（app.json + app.ttss + app.js + project.config.json + pages/index 4 件套），与微信端 95% 同源；红线 #14 UI 库列表扩展 TTUI / Tt-Mini-UI；README 升级三端对照表（微信→抖音 3 分钟机械替换、微信→支付宝 5 分钟）+ 真机扫码必查清单；§三 小程序场景双端→三端；§六 阶段 4 自验证加抖音开发者工具流程；触发词扩到抖音小程序/ttml/ttss/三端小程序/多端同步；references/inspirations.md §7.3 加抖音参考、§7.4 三端通用补 Taro/Uni-app；体检：safe-area-inset/rpx 42 处/PingFang SC 字体豁免/0 命中 -apple-system/0 紫色/0 系统蓝；红线/流派/自验证/tokens/多流派对比均不变，纯第三端补齐\n\nv4.1.0 | 2026-04-26T14:12:04.252Z | user\n\nv4.1.0 多流派并行对比 — 新增 tokens/_compare-matrix.md（8 流派横向对比矩阵：关键 token / display 字体 / radius 哲学 / 适合场景 / 反差对位 5 组 / redLineWaiver 速查）；新增 references/multi-genre-compare.md（多流派对比手册：启用信号 / 流派选取 / 并行 Junior pass / 三份截图 / 五维评审 / 移交单流派 / 与 huo15-openclaw-design-director 协作接力 / 接力消息格式 JSON）；SKILL.md §三改写「如果用户没给方向」段为 director 联动入口；§六 阶段 1 加多流派模式判断；触发词扩到几个方向对比 / design direction / 风格提案 / 五维矩阵；不修改 design-director skill 本体（v1.0 仍覆盖 5 流派；v2 升级时直接读已就位的 schema / matrix / waiver）；红线 / 流派 / 自验证 / tokens 系统均不变\n\nv4.0.0 | 2026-04-26T13:57:09.718Z | user\n\nv4.0.0 design tokens 系统化 — 新增 tokens/ 目录：8 个流派各一份扁平 1 层 JSON（bold-minimal / editorial / brutalist / retro-future / organic + mobile-native-ios / -md3 / -harmony），含 color / colorHex / typography / spacing / radius / shadow / examplePath / redLineWaiver；三个导出器手册（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 / Tokens Studio；导出器全程禁 child_process（return-cliCmd）；红线 / 流派 / 自验证工作流均不变，纯设计系统化升级\n\nv3.0.0 | 2026-04-26T13:49:20.839Z | user\n\nv3.0.0 自验证工作流升级 — Claude in Chrome MCP 成为阶段 4 首选路线（list_connected_browsers + navigate + screenshot + read_console_messages + resize_window 五工具链）；MCP 不可用时降级到 Playwright CLI（保留 return-cliCmd + 禁 child_process 铁律）；小程序场景下沉到微信开发者工具 / 支付宝 IDE；新增 references/self-verify.md 完整操作手册（路线决策树 + 4 条路线命令清单 + 三路线兼容性矩阵 + 移动端检查清单）；红线 / 流派 / 触发词均不变，纯工作流升级\n\nv2.2.0 | 2026-04-26T10:57:03.474Z | user\n\nv2.2.0 小程序扩展 — 新增微信 + 支付宝双端小程序 starter（pages/index 三件套 + app.json + project.config/mini.project 配置 + sitemap），归 MOBILE-NATIVE 子集（不另立流派）；反 AI Slop 红线扩到 15 条（+禁直接套 WeUI/Vant Weapp/TDesign-Mini/Lin-UI 默认皮 +禁缺 page-meta + safe-area-inset + rpx 适配）；新增小程序字体豁免说明（PingFang SC / 思源黑体优先，禁 -apple-system 写法）；触发词覆盖小程序/wxml/axml/微信/支付宝；阶段 4 自验证补微信开发者工具 + 支付宝 IDE 流程；references/inspirations.md 加 §7 小程序章节\n\nv2.1.0 | 2026-04-26T10:44:20.832Z | user\n\nv2.1.0 移动端扩展 — 第 6 流派 MOBILE-NATIVE，覆盖 iOS HIG / Material Design 3 / HarmonyOS 三套平台规范；新增 examples/mobile-native/{ios,md3,harmony}/index.html 三套 starter（桌面预览手机壳 + 移动端 full-bleed）；反 AI Slop 红线扩到 13 条（+禁直接套 Vant/Ant Mobile/NutUI 默认皮、+禁缺 viewport-fit=cover 与 safe-area-inset）；references 三件套补 mobile-native 章节（oklch 三套色板：iOS 暖橙避系统蓝 / MD3 青绿 seed 避默认紫 / HarmonyOS 同明度多色相灵动色块；三套字体对全部避开 SF Pro/Roboto/system-ui）；触发词覆盖 APP / H5 / 移动端 / iOS / 安卓 / 鸿蒙；自验证补 iPhone 16 Pro + Pixel 8 双截图。不含：微信/支付宝小程序 starter（留 v2.2）\n\nv2.0.0 | 2026-04-26T10:35:01.116Z | user\n\nv2.0.0 对齐 + 补料：SKILL.md 版本与 clawhub 对齐；examples/ 新增 5 流派 starter HTML（oklch + Google Fonts 直接可跑）；references/ 新增 colors / typography / inspirations 三件套；反 AI Slop 红线扩到 11 条（+禁全局 16px 圆角 / +禁滥用 backdrop-blur / +禁 AI 渐变模糊背景）；Junior Pass 强制从 examples 起手\n\nv1.0.1 | 2026-04-24T04:15:51.422Z | auto\n\n- Version bump only; no file or functionality changes.\n- All SKILL.md content remains the same as in v1.0.0.\n- No new features, fixes, or documentation updates included.\n\nv1.0.0 | 2026-04-23T04:47:56.363Z | user\n\n首发 v1.0.0：5 美学流派 + 反 AI Slop 硬红线 + Junior/Full 两趟渲染 + Playwright 验证 CLI\n\nArchive index:\n\nArchive v4.7.0: 55 files, 87286 bytes\n\nFiles: _meta.json (149b), examples/bold-minimal/index.html (3795b), examples/brutalist/index.html (3856b), examples/editorial/index.html (4646b), examples/mini-program/alipay/app.js (116b), examples/mini-program/alipay/app.json (479b), examples/mini-program/alipay/mini.project.json (178b), examples/mini-program/alipay/pages/index/index.js (771b), examples/mini-program/alipay/pages/index/index.json (74b), examples/mini-program/douyin/app.js (109b), examples/mini-program/douyin/app.json (541b), examples/mini-program/douyin/pages/index/index.js (771b), examples/mini-program/douyin/pages/index/index.json (79b), examples/mini-program/douyin/project.config.json (333b), examples/mini-program/kuaishou/app.css (373b), examples/mini-program/kuaishou/app.js (109b), examples/mini-program/kuaishou/app.json (541b), examples/mini-program/kuaishou/pages/index/index.css (2535b), examples/mini-program/kuaishou/pages/index/index.js (771b), examples/mini-program/kuaishou/pages/index/index.json (79b), examples/mini-program/kuaishou/project.config.json (335b), examples/mini-program/README.md (5168b), examples/mini-program/wechat/app.js (109b), examples/mini-program/wechat/app.json (595b), examples/mini-program/wechat/pages/index/index.js (771b), examples/mini-program/wechat/pages/index/index.json (59b), examples/mini-program/wechat/project.config.json (406b), examples/mini-program/wechat/sitemap.json (181b), examples/mobile-native/harmony/index.html (8676b), examples/mobile-native/ios/index.html (8593b), examples/mobile-native/md3/index.html (8631b), examples/organic/index.html (4232b), examples/retro-future/index.html (3906b), LICENSE (1145b), references/a11y-checklist.md (7338b), references/colors.md (5019b), references/inspirations.md (6222b), references/multi-genre-compare.md (5789b), references/self-verify.md (6953b), references/typography.md (4031b), skill-card.md (3158b), SKILL.md (38941b), tokens/_compare-matrix.md (4357b), tokens/_schema.md (2355b), tokens/bold-minimal.json (1193b), tokens/brutalist.json (1171b), tokens/editorial.json (1275b), tokens/exporters/to-css-vars.md (3142b), tokens/exporters/to-figma.md (3065b), tokens/exporters/to-tailwind.md (4712b), tokens/mobile-native-harmony.json (1648b), tokens/mobile-native-ios.json (1524b), tokens/mobile-native-md3.json (2458b), tokens/organic.json (1488b), tokens/retro-future.json (1428b)\n\nFile v4.7.0:SKILL.md\n\n---\nname: huo15-openclaw-frontend-design\ndisplayName: 火一五前端设计技能\ndescription: 高保真 Web UI / 移动 H5 / iOS / Android / HarmonyOS / 微信 + 支付宝 + 抖音 + 快手 四端小程序 原生风格原型 + 大胆美学方向 + 反 AI Slop 硬红线 + 8 流派 design tokens（含 motion）系统化（CSS vars / Tailwind / Figma 三导出） + 多流派并行对比 + WCAG 2.2 AA 无障碍自动审计 + 动效 tokens + 2026 微趋势补丁（Editorial Tech / Spatial Web / AI-Backlash / Brutalist 2026）。用于构建网站、落地页、仪表盘、APP 移动端、小程序（四端）、React/Vue 组件、HTML 海报、产品详情页、信息图、设计系统、无障碍合规页面、动效系统。配套 6 大美学流派 + 4 条 2026 微趋势 + 小程序子集、15 条硬红线、Junior/Full 两趟渲染、design tokens（color / typography / spacing / radius / shadow / motion）；自验证 Claude in Chrome MCP 优先 + 多路线 fallback + axe-core / Lighthouse a11y 审计；多流派对比与 design-director v3.x 联动。触发词：做网站、做落地页、做 UI、做 APP、做 H5、做小程序、做设计系统、design tokens、做动效、motion tokens、wxml、axml、ttml、ksml、做组件、HTML 原型、页面设计、移动端设计、前端设计、做海报、做详情页、iOS 风格、安卓风格、鸿蒙风格、微信小程序、支付宝小程序、抖音小程序、快手小程序、几个方向对比、风格提案、无障碍、a11y、WCAG、Lighthouse 审计、动画时长、easing、缓动函数、Editorial Tech、Spatial Web、AI-Backlash、Brutalist 2026、2026 微趋势。\nversion: 4.7.0\naliases:\n  - 火一五前端设计技能\n  - 火一五Web设计技能\n  - 火一五APP设计技能\n  - 火一五移动端设计技能\n  - 火一五H5设计技能\n  - 火一五小程序设计技能\n  - 火一五抖音小程序技能\n  - 火一五快手小程序技能\n  - 火一五无障碍审计技能\n  - 火一五动效技能\n  - 火一五设计系统技能\n  - 火一五落地页技能\n  - 火一五UI设计技能\n  - 火一五海报设计技能\n  - 火一五前端设计\n  - 前端设计\n  - UI 设计\n  - 页面设计\n  - HTML 原型\n  - 落地页设计\n  - 海报设计\n  - Web 设计\n  - APP 设计\n  - 移动端设计\n  - H5 设计\n  - 小程序设计\n  - 微信小程序\n  - 支付宝小程序\n  - 抖音小程序\n  - 快手小程序\n  - 无障碍\n  - a11y\n  - WCAG\n  - 动效\n  - motion tokens\n  - 动画 tokens\n  - design tokens\n  - 设计 tokens\n  - 设计系统\n---\n\n# 火一五前端设计技能 v4.7\n\n> 高保真 Web UI + 移动端 / APP / H5 + 微信 / 支付宝 / 抖音 / 快手 四端小程序 + design tokens（含 motion）系统化 + 多流派并行对比 + WCAG 2.2 AA 无障碍审计 + 动效 tokens + Tailwind v4 `@theme` 适配 + **2026 微趋势补丁** 原型生成 — 青岛火一五信息科技有限公司\n> 设计理念对标 Anthropic `frontend-design` skill 与 2026 社区共识，本土化改写、不拷贝官方内容\n> v2.0 起：5 流派 starter HTML（`examples/`）+ 配色 / 字体 / 灵感三件套（`references/`）+ 反 AI Slop 红线扩到 11 条\n> v2.1 起：第 6 流派 `MOBILE-NATIVE`（iOS HIG / Material Design 3 / HarmonyOS 三套 starter）+ 移动端红线 2 条（共 13 条）+ 触发词覆盖 APP / H5 / 移动端\n> v2.2 起：微信小程序 + 支付宝小程序 starter（归 MOBILE-NATIVE 子集）+ 小程序红线 2 条（共 15 条）+ 字体豁免说明 + 触发词覆盖 wxml / axml\n> v3.0 起：自验证工作流升级 — Claude in Chrome MCP 优先，Playwright CLI / 微信开发者工具 / 支付宝 IDE 三路线 fallback；新增 [`references/self-verify.md`](references/self-verify.md) 操作手册\n> v4.0 起：design tokens 系统化 — 8 个流派统一 [`tokens/<slug>.json`](tokens/) 扁平 schema（color / colorHex / typography / spacing / radius / shadow），三导出器 jq 一行转 CSS variables / Tailwind config / Figma Tokens Studio\n> 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` 联动手册\n> v4.2 起：小程序三端齐 — 抖音 starter；红线 #14 UI 库列表扩展\n> v4.3 起：小程序四端齐 — 快手 starter；触发词扩到快手小程序 / ksml\n> v4.4 起：a11y 自动审计 — WCAG 2.2 AA 30 条速查 + axe-core MCP 注入 + Lighthouse CLI fallback\n> v4.5 起：动效 tokens — 8 流派 motion 字段差异化动效原则\n> v4.6 起：Tailwind v4 `@theme {}` 块导出 + oklch 原生支持\n> **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`](tokens/) 让流派和 2026 趋势 hybridize；[`references/inspirations.md`](references/inspirations.md) 顶部加 §0 当代标杆指南 (linear.app / vercel.com / stripe.press / are.na / nothing.tech / aesop.com 等真实 URL 锚点)\n\n---\n\n## 一、触发场景\n\n当用户要构建以下任一，触发本技能：\n\n- 网站 / 落地页 / 官网 / 仪表盘\n- React / Vue / HTML / Svelte 组件\n- 营销海报 / 产品详情页 / 信息图\n- **移动 H5 落地页 / APP 风格原型**（iOS / 安卓 / 鸿蒙 风格 H5，对应 §三 第 6 流派 MOBILE-NATIVE）\n- **微信 / 支付宝 / 抖音 / 快手小程序原型** ⭐v2.2 起，v4.3 补齐四端（归 MOBILE-NATIVE 子集，见 `examples/mini-program/`）\n- 任何\"美化页面 / 优化 UI\"类请求\n\n**不触发**（归其他技能）：\n\n- PPT 演示稿 → `huo15-openclaw-ppt`\n- Word / PDF 文档 → `huo15-openclaw-office-doc`\n- 纯数据分析图表 → 常规 matplotlib / echarts 即可\n\n**产出**：可直接运行的 HTML/CSS/JS（或 React/Vue）代码 + 3 行设计说明 + 可选截图验证命令。\n\n---\n\n## 二、设计思考（动手前必答四问）\n\n| 维度 | 要回答 |\n|------|--------|\n| 目的 | 这个界面解决什么问题？谁是使用者？ |\n| 基调 | 选一个**极端**方向（见 §三） |\n| 约束 | 技术栈 / 性能 / 可访问性 / 目标设备 |\n| 差异点 | 用户会记住**哪一件**事？ |\n\n**硬规则**：**承诺一个极端方向**。极简和极繁同样有效，关键是意图明确，**不要骑墙**。\n\n---\n\n## 三、六大美学流派（必选其一）\n\n| 流派 | 关键特征 | 适合场景 | 参考 |\n|------|---------|---------|------|\n| **BOLD-MINIMAL** 勇敢极简 | 大字号、大留白、2 色系、无装饰 | 科技产品、B 端 SaaS、个人作品集 | Stripe / Linear / Apple |\n| **EDITORIAL** 编辑杂志 | 衬线字、纵向栅格、引号装饰、杂志版式 | 品牌故事、深度内容、报告 | NYT Style / The Verge |\n| **BRUTALIST** 野兽派 | 等宽字、粗黑线、打破网格、刻意粗糙 | 独立工作室、Web3、先锋作品 | Bloomberg / early craigslist |\n| **RETRO-FUTURE** 复古未来 | 像素字、CRT 光晕、80s 霓虹配色 | 游戏、音乐、娱乐 | Vaporwave / Cyberpunk 2077 |\n| **ORGANIC** 有机自然 | 手绘感、暖色、不规则形状、柔边 | 食品、母婴、健康 | Medium 早期 / Notion |\n| **MOBILE-NATIVE** 移动原生 ⭐v2.1 | 遵循平台规范的移动设计：iOS HIG / Material Design 3 / HarmonyOS | APP 原型、H5 落地页、移动 webview | Apple HIG / m3.material.io / 鸿蒙设计指南 |\n\n**如果用户没给方向 ⭐v4.1 升级**：走多流派并行对比流程，详见 [`references/multi-genre-compare.md`](references/multi-genre-compare.md)。\n- **首选**：让 `huo15-openclaw-design-director` 选 3 流派（它有 20 条设计哲学 + 五维矩阵）\n- **次选**：从 [`tokens/_compare-matrix.md`](tokens/_compare-matrix.md) §反差对位选一组（理性/感性/实验、冷峻/温暖/复古、桌面/移动/跨端等）\n- 3 个 Junior pass **必须并行**（用 Explore subagent 隔离 context，不要串行）\n- 截图后由 director 打分推荐 / design-critique 5 维评分 / 用户人眼挑，三选一\n- 用户敲定 → 删掉其他草稿 → 单流派走阶段 3 Full Pass\n\n**MOBILE-NATIVE 的三选一**：用户说\"做 APP / 做 H5\"时，先问目标平台 — iOS（用 `examples/mobile-native/ios/`）/ Android（用 `examples/mobile-native/md3/`）/ HarmonyOS（用 `examples/mobile-native/harmony/`）。多平台需求 → 三套 starter 都给，但产出文件夹分开。\n\n**小程序场景** ⭐v2.2 起，v4.3 补齐四端：归 MOBILE-NATIVE 子集，**不另立第 7 流派**（避免膨胀）。\n- 微信小程序：`examples/mini-program/wechat/`（wxml + wxss + JSON 配置三件套）\n- 支付宝小程序：`examples/mini-program/alipay/`（axml + acss + 配置）\n- 抖音小程序 ⭐v4.2：`examples/mini-program/douyin/`（ttml + ttss + 配置）\n- 快手小程序 ⭐v4.3：`examples/mini-program/kuaishou/`（ksml + 标准 css 后缀 + 配置）\n- **四端同步迭代姿势**：先做微信 → 复制到抖音改 `wx:` → `tt:` → 复制到快手改 `wx:` → `ks:`（两者最相近，各 3 分钟）→ 复制到支付宝改 `wx:` → `a:` / `bindtap` → `onTap`（差异最大，5 分钟）。完整对照表见 [`examples/mini-program/README.md`](examples/mini-program/README.md)。\n\n---\n\n## 三补、2026 微趋势补丁 ⭐v4.7\n\n**6 流派是骨架（决定字体 / 配色 / 排版的基本性格），2026 微趋势是年代感锚点层（决定看起来是不是当下流行）。** 一个高品味的 brief 通常是「主流派 × 1 条 2026 微趋势」的混合，而不是单一流派。\n\n与 [`huo15-openclaw-design-director`](../huo15-openclaw-design-director/SKILL.md) v3.0 §四 2026 趋势池 1:1 对应，director 选趋势 → frontend-design 落地实现。\n\n### 三补.1 Editorial Tech（编辑科技）\n\n**视觉签名**：米色或近黑底 + 衬线 display + 等宽 caption + 长篇排版 + 无千篇一律 hero/features 骨架\n\n**适配的主流派**：bold-minimal / editorial（混血）\n\n**实现锚点**：\n- 字体组合：GT Sectra / Tiempos serif display + Söhne / Inter sans body + JetBrains Mono caption\n- 配色：`#FAF8F5` 米色底 + `#0F0F0F` 黑文 + `#FF5733` 单一橙 accent\n- 关键钩子：长段落（72 字符宽）+ 引号装饰 + drop cap 首字母 + 永久 metadata（作者 / 时间 / Reading Time）\n\n**当代标杆**：press.stripe.com · linear.app/blog · cosmos.so · pirsch.io · craft.do/blog\n\n**适用场景**：内容型品牌（书店 / 媒体 / 思想类 SaaS / 投资基金 / 思想型公司 blog）\n\n### 三补.2 Spatial / Depth Web（半 3D）\n\n**视觉签名**：WebGL 浅景深 / OKLab spotlight / 鼠标跟随阴影 / parallax / 浮空层叠\n\n**适配的主流派**：bold-minimal / mobile-native-ios（Vision OS Web 风）\n\n**实现锚点**：\n- WebGL：Three.js / OGL 做轻量 GPU 几何（不要满屏 3D，只在 hero 用 spotlight）\n- CSS：`backdrop-filter` + `mask-image` 做 OKLab 光斑 + `transform: perspective(1000px) translateZ(...)` 浮空\n- 鼠标跟随：CSS variable + `mousemove` 注入 `--mouse-x` `--mouse-y` 控制阴影 / 高光位置\n- 关键钩子：hero 的\"鼠标移动看到不同角度\"或\"scroll 时元素小幅 Z 轴偏移\"\n\n**当代标杆**：apple.com/vision-pro/ · onform.fm · igloo.inc · paper.design · readymag.com\n\n**适用场景**：科技品牌（AI / 硬件 / 操作系统 / 高端 SaaS）想要「未来感」但不要赛博朋克霓虹\n\n**警示**：和红线 #11（AI 渐变模糊）容易撞 — 用 OKLab 真 spotlight 不是 blur 大色块。\n\n### 三补.3 AI-Aesthetic Backlash（反 AI 范式）\n\n**视觉签名**：手绘 + 真实摄影 + 不规则形 + **严禁紫粉渐变 / glassmorphism** + 反 SaaS 千篇一律\n\n**适配的主流派**：organic / brutalist 2026\n\n**实现锚点**：\n- 字体：avoid Inter / Roboto / system-ui；用 Tiempos / Druk / Söhne / GT America\n- 配色：暖灰 + 深棕 + 不超过 2 色 accent；严禁紫色渐变 / 大色块 blur\n- 元素：用 SVG 手绘线 + 真摄影（Unsplash / 自家素材，**禁** AI 生图）+ 不规则圆角（`border-radius: 24px 8px 32px 12px`）\n- 关键钩子：「这看起来明显不是 AI 生成的」一眼可辨\n\n**当代标杆**：are.na · plain-english.com · oatly.com 改版 · obvious.studio · cosmos.so\n\n**适用场景**：独立品牌 / 高端食品 / 文化机构 / 想反工业 SaaS 范式的产品\n\n**警示**：和红线 #2（紫色渐变）/ #11（AI 渐变模糊）/ #10（玻璃形态）强联动，违反任一直接 AI Slop 判废。\n\n### 三补.4 Brutalist 2026（克制版野兽派）\n\n**视觉签名**：灰白 / 米白 + 黑 + 警示黄 / 警示红 + 等宽字 + 极少装饰 + 永久 metadata\n\n**适配的主流派**：brutalist\n\n**实现锚点**：\n- 字体：JetBrains Mono / Iosevka / Departure Mono 单字体打天下（display + body 都用 mono）\n- 配色：`#FAFAFA` 灰白底（不是纯白） + `#0A0A0A` 黑 + `#FFE600` 警示黄（仅用于 accent / 状态标记，不是装饰）\n- 元素：1px 黑描边 / 0 圆角 / 永久 BUILD · 日期戳 / 文档感版式（像 README）\n- 关键钩子：「看起来像 GitHub README 但是品牌官网」/ 信息密度大但克制装饰\n\n**当代标杆**：nothing.tech · tylko.com · plainenglishpodcast.com · are.na\n\n**适用场景**：硬件品牌（极简硬件 / DevTool / 独立工作室）/ 思想型博客 / 反工业 SaaS\n\n**警示**：和老 Brutalist（Bloomberg Terminal / craigslist 风）的区别 — 2026 版**克制装饰、强调信息层级**，不是原始网吧风。\n\n### 三补 与红线 / tokens / director 的关系\n\n- **红线（§四 15 条）不变**：2026 微趋势依然要遵守 15 条硬红线\n- **tokens（§五.6）加可选 `era_anchor` 元字段**：标记本流派 token 默认对应哪条 2026 趋势（如 brutalist token 默认对应\"Brutalist 2026\"）\n- **director（v3.0 §四）选 1 条趋势 → 本 skill 落地**：接力消息 `briefs.<genre>.eraAnchor` 字段填趋势名（\"Editorial Tech\" / \"Spatial Web\" / \"AI-Backlash\" / \"Brutalist 2026\"），渲染时拉本节锚点配色 / 字体 / 关键钩子做 starter 改写\n\n---\n\n## 四、反 AI Slop 硬红线（违反任一直接判废）\n\n| # | 禁用项 | 为什么 |\n|---|--------|--------|\n| 1 | 默认 **Inter / Roboto / Arial / system-ui** 字体 | 字体即性格，系统字 = 没性格 |\n| 2 | **紫色渐变**（尤其紫色渐变打白底） | 2023 以来 AI 最滥用的视觉陈词滥调 |\n| 3 | **emoji 当图标** | 必须用 Lucide / Phosphor / Tabler / Heroicons 真图标 |\n| 4 | **圆角卡片 + 左侧彩色竖条** | Tailwind 默认范式，设计师都看腻了 |\n| 5 | **CSS 画的伪产品图** | 真产品图用 Unsplash/Picsum 占位，明确标注\"待替换\" |\n| 6 | **默认暗黑 `#121212` + 紫色主题** | 懒，且和 #2 联动犯错 |\n| 7 | **Hero + Features + CTA + Footer** 千篇一律骨架 | 按内容定制结构，不要模板化 |\n| 8 | 全部用 `#007AFF` / `#FF3B30` 这类 iOS 系统色 | 没有记忆点 |\n| 9 | **全局统一 16px / 12px `border-radius`** | Tailwind / shadcn 默认值，工业感 = 没设计 |\n| 10 | 滥用 **`backdrop-blur` 玻璃形态**（每个卡片都磨砂） | 2024 后期开始烂大街，掩盖排版无能 |\n| 11 | **AI 生成的渐变模糊背景**（紫粉 / 蓝青大色块 blur） | 与红线 #2 联动，是 AI Slop 最强信号 |\n| 12 ⭐v2.1 | 移动端**直接套 UI 库默认皮**（Vant / Ant Mobile / NutUI 不改 token） | 没有 brand identity = 没有产品 |\n| 13 ⭐v2.1 | 移动端**缺 `viewport-fit=cover` + `safe-area-inset`**（刘海 / Home indicator 被遮） | 客户拿真机一看就崩，硬 a11y 红线 |\n| 14 ⭐v2.2 / v4.2 / v4.3 扩展 | 小程序**直接套 WeUI / Vant Weapp / TDesign-Mini / Lin-UI / TTUI / Tt-Mini-UI / KSUI / kuaishou-uikit 默认皮**（不改 token） | 四端 1 千个 demo 长一个样，没产品识别 |\n| 15 ⭐v2.2 | 小程序**缺 `<page-meta>` + `safe-area-inset` + `rpx` 适配** | 真机一看顶部胶囊 / 底部 home indicator 重叠，硬适配红线 |\n\n**小程序字体豁免说明** ⭐v2.2：小程序平台**不允许 `@font-face` 加载 web font**（出于性能与审核），无法套用红线 #1 推荐字体（Manrope / DM Sans / IBM Plex Sans）。小程序 wxss / acss 中 `font-family` 优先序：\n1. **PingFang SC**（iOS / 微信）\n2. **Source Han Sans CN** / **思源黑体**（Android / 支付宝端）\n3. **Noto Sans SC** fallback\n4. **禁** `-apple-system, BlinkMacSystemFont` 写法（红线 #1 仍生效，且这些 fallback 链在小程序里其实也只走系统中文字体）\n\n数字 / 英文如需差异化字体，可用 wxss 内联 base64 字体子集（仅 0–9 + A–Z），或干脆**全部用 PingFang SC** 数字部分，靠**字号 / 字重**做区分。\n\n---\n\n## 五、美学要素清单（每项都要想过）\n\n### 5.1 字体 Typography\n- 主字（display）选有性格的：Playfair Display / IBM Plex Serif / Space Mono / Noto Serif SC / DM Serif / Rubik Mono One\n- 副字（body）选考究的：IBM Plex Sans / Source Serif / 思源宋体 / Noto Sans SC\n- **主副反差要大**，避免同字族\n\n### 5.2 颜色 Color\n- 主色 + 锐利强调色，CSS variables 统一管理\n- 优先 **oklch** 色空间（感知均匀，避免灰调）\n- 主色占 60-70%，强调色 5-10%，中性 20-30%\n- 不要 evenly-distributed palette\n\n### 5.3 动效 Motion\n- **页面加载的 staggered reveal > 散落的微交互**\n- `animation-delay` 做级联出场\n- CSS 优先，React 用 Motion（framer-motion）\n- 一个高质量的动效 > 十个微交互\n\n### 5.4 空间 Spatial Composition\n- 不对称 / 重叠 / 对角线 / 打破网格\n- 留白充足 **或** 密集信息，二选一\n- 避免居中对齐一统到底\n\n### 5.5 氛围 Backgrounds & Texture\n- 渐变网格 / 噪点 / 几何图案 / 戏剧阴影\n- 装饰性边框 / 自定义光标 / grain overlay\n- 不要纯色底（除非极简流派明确需要）\n\n### 5.6 Design Tokens ⭐v4.0 / v4.5 加 motion\n- 每个流派一份 [`tokens/<slug>.json`](tokens/)，扁平 1 层 schema：`color` / `colorHex` / `typography` / `spacing` / `radius` / `shadow` / **`motion` ⭐v4.5** / `examplePath` / `redLineWaiver?`\n- **8 个流派**：`bold-minimal` / `editorial` / `brutalist` / `retro-future` / `organic` / `mobile-native-ios` / `mobile-native-md3` / `mobile-native-harmony`\n- **三个导出器**（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)\n- **使用流程**：先在 §六 阶段 3.5 选定流派 → 跑 jq 命令出 CSS vars / Tailwind config → Junior Pass starter HTML 直接 `var(--color-xxx)` / `var(--duration-fast)` 引用\n- schema 详细见 [`tokens/_schema.md`](tokens/_schema.md)；横向对比见 [`tokens/_compare-matrix.md`](tokens/_compare-matrix.md)（含 v4.5 motion 哲学速查）\n\n### 5.7 Motion Tokens ⭐v4.5（动效原则）\n动效不是装饰，是**时间维度的版式**。每个流派的动效原则与该流派静态视觉一致：\n- **bold-minimal / editorial**：克制 / 稳重 — 单一 easing、决不弹跳\n- **brutalist / retro-future**：硬切 / CRT 闪烁 — linear / step easing，禁缓动函数\n- **organic**：弹性 — spring 1.56 超调，模拟手作回落\n- **mobile-native iOS / MD3 / Harmony**：照搬平台 spec（iOS spring / MD3 12 档 emphasized / 鸿蒙 fluid）\n\n**实现**：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)) }`。\n\n**禁忌**（继承 §四 红线）：\n- 禁滥用 motion（每个元素都 hover scale → 头晕）\n- 禁 `transition: all` —— 总是显式列 properties\n- 禁忽略 `prefers-reduced-motion: reduce` —— 媒体查询关掉 stagger / spring\n\n---\n\n## 六、工作流（Junior → Full 两趟渲染）\n\n### 阶段 1 · 理解（Understand）\n- 复述需求 / 目的 / 受众\n- 确认基调和流派\n- 列出硬约束（技术栈、浏览器兼容、a11y）\n- **多流派模式判断 ⭐v4.1**：用户没给明确流派 + 触发词命中\"几个方向 / 三个风格 / 帮我选\" → 走 [`references/multi-genre-compare.md`](references/multi-genre-compare.md) 流程；否则进单流派 Junior pass\n\n### 阶段 2 · Junior Pass（假设占位，快速出骨架）\n- **从 `examples/<流派>/index.html` 起手**，复制到目标文件再改 — 不要从空白起步\n- 同时打开 `references/colors.md` 和 `references/typography.md` 锁配色 / 字体\n- 用占位文案（Lorem Ipsum 或真实类似文案）+ 占位图片（Picsum/Unsplash 链接）\n- 跑通**结构、栅格、主要交互**\n- **诚实标注**每一块占位（`<!-- TODO: 真实文案 -->`）\n- 让用户看到方向再继续\n\n### 阶段 3 · Full Pass（补内容、调细节）\n- 补真实文案（问用户要 或 用 `huo15-openclaw-brand-protocol` 抓品牌资源）\n- 替换真实图片（需要下载时返回 CLI 命令，不用 child_process）\n- 微调字号、行高、字距、间距、阴影层级\n- 加动效\n\n### 阶段 3.5 · Tokens 导出（可选）⭐v4.0\n当用户要把设计落地到既有项目（已有 Tailwind / 已有 Figma 设计系统 / 多产品复用）：\n- 选定流派 → 找到对应 [`tokens/<slug>.json`](tokens/)\n- 跑 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)）\n- 转换产物建议落到 `<用户项目>/generated/tokens/` 入仓\n- **不强制**：纯一次性 H5 / 海报场景跳过本阶段，直接用 `examples/` 起手即可\n\n### 阶段 4 · 自验证（Self-Verify）⭐v3.0 工作流升级\n\n**优先路线**：**Claude in Chrome MCP**，由 Claude 直接驱动浏览器渲染并截图，不需要让用户跑命令。\n- `mcp__Claude_in_Chrome__list_connected_browsers` → 检查浏览器连接\n- `mcp__Claude_in_Chrome__navigate` → 打开 `file://` 或 URL\n- `mcp__Claude_in_Chrome__computer({action:\"screenshot\", save_to_disk:true})` → 截图\n- `mcp__Claude_in_Chrome__read_console_messages` → 抓 oklch fallback / 字体 404 / JS 报错\n- 移动端用 `resize_window` 切到设备 viewport（393×852 / 412×915 / 396×858）\n\n**Fallback 顺序**（按场景降级）：\n1. **MCP 不可用**（`list_connected_browsers` 返 `[]`）→ Playwright CLI（return-cliCmd 让用户执行，延续禁 child_process 铁律）：\n   ```bash\n   # 桌面端\n   npx playwright-core screenshot <URL 或 file:///绝对路径> ~/verify.png --viewport-size=1440,900\n   # 移动端（MOBILE-NATIVE 流派必跑）\n   npx playwright-core screenshot <URL> ~/verify-iphone.png --viewport-size=393,852\n   npx playwright-core screenshot <URL> ~/verify-android.png --viewport-size=412,915\n   ```\n2. **微信小程序场景** → 微信开发者工具打开 `examples/mini-program/wechat/`，编译预览 / 真机调试扫码\n3. **支付宝小程序场景** → 支付宝小程序 IDE 打开 `examples/mini-program/alipay/`，预览扫码\n4. **抖音小程序场景 ⭐v4.2** → 抖音开发者工具打开 `examples/mini-program/douyin/`，编译预览 / 扫码用抖音 App 看真机\n5. **快手小程序场景 ⭐v4.3** → 快手小程序开发者工具打开 `examples/mini-program/kuaishou/`，编译预览 / 扫码用快手 App 看真机\n\n**完整决策树 + 命令清单 + 兼容性矩阵** 见 [`references/self-verify.md`](references/self-verify.md)（v3.0 新增手册）。\n\n**评审接力**：截图回收后由用户人眼审，或调 `huo15-openclaw-design-critique` 5 维打分。MOBILE-NATIVE 流派额外检查：safe-area-inset 上下有效、tab-bar 触达高度 ≥ 44pt / 48dp；小程序检查 `<page-meta>` 存在 + tabBar native + rpx 适配。\n\n**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% 视为可发布。\n\n### 阶段 5 · 可选 · 评审（Review）\n调用 `huo15-openclaw-design-critique` 做 5 维评分 + Keep/Fix/Quick Wins。\n\n---\n\n## 七、产出清单（每次交付必含）\n\n1. **代码文件**（`index.html` / `App.tsx` / `page.vue`），可直接运行\n2. **3 行设计说明**：\n   - 流派（从 §三 五选一）\n   - 关键设计选择（字体 / 主色 / 动效三选一突出）\n   - 差异点（用户会记住什么）\n3. **（可选）截图验证 CLI 命令**\n4. **（可选）已知限制**（占位图未替换 / 未测移动端等）\n\n---\n\n## 八、与其他 huo15 技能的分工\n\n| 能力 | 归属技能 |\n|------|---------|\n| Web UI / HTML 原型 / 落地页 | **本技能** |\n| 设计方向选择（多流派对比） | `huo15-openclaw-design-director` |\n| 品牌规范抓取 + brand-spec | `huo15-openclaw-brand-protocol` |\n| 设计评审 5 维打分 | `huo15-openclaw-design-critique` |\n| PPT 演示稿 | `huo15-openclaw-ppt` |\n| Word / PDF 文档 | `huo15-openclaw-office-doc` |\n\n---\n\n## 九、触发词\n\n**Web 端**\n- 做网站 / 做落地页 / 做官网 / 做仪表盘\n- 做组件 / 做 React 组件 / 做 Vue 组件\n- HTML 原型 / 页面原型 / 前端原型\n- 美化页面 / 优化 UI / 前端设计 / Web 设计\n- 做海报 / 做详情页 / 做信息图 / 产品页\n\n**移动端 ⭐v2.1**\n- 做 APP / 做 APP 原型 / 做 APP 落地页 / 做 APP UI\n- 做 H5 / 做移动 H5 / 做移动落地页\n- iOS 风格 / iOS HIG / iPhone 设计\n- 安卓 / Android / Material Design / MD3 / 安卓风格\n- 鸿蒙 / HarmonyOS / 鸿蒙设计\n\n**小程序 ⭐v2.2 起，v4.3 补齐四端**\n- 做小程序 / 做微信小程序 / 做支付宝小程序 / 做抖音小程序 / 做快手小程序\n- 小程序原型 / 小程序落地页 / 小程序首页\n- wxml / wxss / 微信小程序设计\n- axml / acss / 支付宝小程序设计\n- ttml / ttss / 抖音小程序设计 ⭐v4.2\n- ksml / 快手小程序设计 ⭐v4.3\n- 四端小程序 / 多端同步\n\n**Design Tokens ⭐v4.0**\n- design tokens / 设计 tokens / 设计 token / token 导出\n- 做设计系统 / 设计系统 / design system\n- Tailwind 配色 / Tailwind 主题 / 流派 token\n- Figma tokens / Tokens Studio / Figma 主题\n- jq 转 CSS variables / 多产品共享主题\n\n**多流派对比 ⭐v4.1**\n- 几个方向对比 / 三个风格对比 / 多流派对比\n- 帮我选方向 / 帮我选流派 / 你定方向\n- design direction / 设计方向 / 风格提案 / 方向选型\n- 三套 Junior pass / 三方向草稿\n- 五维矩阵 / 流派打分\n\n**无障碍审计 ⭐v4.4**\n- 无障碍 / a11y / WCAG / WCAG 2.2\n- accessibility / 无障碍审计 / 无障碍合规\n- Lighthouse / axe-core / axe 审计\n- 屏幕阅读器 / 键盘可操作 / 焦点环\n- 对比度 / 触达目标 / alt 文本 / 色盲\n\n**动效 / Motion Tokens ⭐v4.5**\n- 做动效 / 加动效 / 动画 / motion / animation\n- motion tokens / 动效 token / 动画 token\n- duration / easing / 缓动函数 / cubic-bezier\n- spring / 弹簧动效 / staggered / 级联出场\n- prefers-reduced-motion / 减少动效 / 无障碍动效\n\n**2026 微趋势 ⭐v4.7**\n- Editorial Tech / 编辑科技 / 编辑感 / 长篇排版\n- Spatial Web / 半 3D / Vision OS Web / depth web\n- AI-Backlash / 反 AI / 反 AI 范式 / 反 SaaS / 手作高保真\n- Brutalist 2026 / 克制版野兽派 / 灰白警示黄\n- 2026 微趋势 / 2026 当代风 / 当下流行什么 / era_anchor\n\n---\n\n## 十、版本历史\n\n- **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`](../huo15-openclaw-design-director/SKILL.md) v3.0 §四 2026 趋势池 1:1 对应（director 选趋势 → 本 skill 落地）；接力消息加 `briefs.<genre>.eraAnchor` 字段；建议 [`tokens/<slug>.json`](tokens/) 加可选 `era_anchor` 元字段标记默认对应趋势（不强制改 schema，渐进式）；触发词扩到 Editorial Tech / Spatial Web / AI-Backlash / Brutalist 2026 / 2026 微趋势。**红线 / 流派 / tokens / a11y / motion / 自验证 / 多流派对比均不变**，纯当代审美补丁层。\n- **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 现代化适配。\n- **v4.5.0（2026-04-27）**：动效 tokens。8 个 [`tokens/<slug>.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 化升级。\n- **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 / 多流派对比均不变**，纯无障碍审计能力补齐。\n- **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 / 多流派对比均不变**，纯第四端补齐。\n- **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 / 多流派对比均不变**，纯第三端补齐。\n- **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 已就位）。\n- **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 路径指引。**红线 / 流派 / 自验证工作流均不变**，纯设计系统化升级。\n- **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 条路线命令清单 + 三路线兼容性矩阵 + 移动端检查清单 + 设计原则提醒）。**红线 / 流派 / 触发词均不变**，纯工作流升级。\n- **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` 补小程序章节。\n- **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 章节。\n- **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/` 占位目录。\n- **v1.0.0（2026-04-23）**：初始版本。对齐 Anthropic `frontend-design` 核心理念（BOLD 美学方向 + 反 AI slop），本土化中文改写，加入 5 流派选择、8 条硬红线、Junior/Full 两趟渲染工作流、Playwright 自验证 CLI、与火一五其他技能的分工边界。\n\n---\n\n**技术支持：** 青岛火一五信息科技有限公司\n\nFile v4.7.0:examples/mini-program/README.md\n\n# 小程序 Starter — 火一五前端设计技能 v4.3\n\n> 微信 + 支付宝 + 抖音 + 快手 **四端** starter。**浏览器无法直接渲染** wxml / axml / ttml / ksml，必须用各家 IDE。\n\n## 微信小程序\n\n1. 下载并安装 [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)（Stable v1.06+）\n2. 打开工具 → **项目 → 导入项目** → 目录选 `wechat/`\n3. AppID 选\"测试号\"或填自有；项目名留空走默认\n4. 点**编译**：左侧模拟器看渲染；点**真机调试**扫码看真机\n5. 页面走 `pages/index/index`，全局配置 `app.json`\n\n## 支付宝小程序\n\n1. 下载并安装 [支付宝小程序 IDE](https://opendocs.alipay.com/mini/ide/download)\n2. 打开 IDE → **文件 → 打开项目** → 目录选 `alipay/`\n3. 点**预览**，扫码用支付宝 App 看真机\n4. 配置文件名是 `mini.project.json`（不是 `project.config.json`），别搞混\n\n## 抖音小程序\n\n1. 下载并安装 [抖音开发者工具](https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/developer-instrument/installation/developer-instrument-update-and-download)\n2. 打开工具 → **项目 → 导入项目** → 目录选 `douyin/`\n3. AppID 用\"测试号\"或填自有\n4. 点**编译预览**，扫码用抖音 App 看真机\n5. 模板后缀是 `.ttml` / `.ttss`（与微信 `.wxml` / `.wxss` 95% 同源，仅前缀差异）\n\n## 快手小程序 ⭐v4.3\n\n1. 下载并安装 [快手小程序开发者工具](https://mp.kuaishou.com/docs/develop/developerTools/downloadPath.html)\n2. 打开工具 → **项目 → 导入项目** → 目录选 `kuaishou/`\n3. AppID 用\"测试号\"或填自有\n4. 点**编译预览**，扫码用快手 App 看真机\n5. 模板后缀是 `.ksml` / 样式 `.css`（标准 CSS 后缀，区别于其他端）\n\n## 四端同步迭代姿势 ⭐v4.3 升级\n\n**推荐顺序**：微信 → 抖音 → 快手（最相近）→ 支付宝（差异最大）\n\n### 步骤 1：先在 `wechat/` 改完\n\n`wxml` + `wxss` + 配置全部跑通。开发体验在微信端最顺。\n\n### 步骤 2：复制到 `douyin/` 改前缀（机械替换，3 分钟）\n\n| 微信 | 抖音 |\n|---|---|\n| `wx:for` / `wx:key` / `wx:if` | `tt:for` / `tt:key` / `tt:if` |\n| `wxml` 文件名 | `ttml` |\n| `wxss` 文件名 | `ttss` |\n| `bindtap` / `bindinput` | **保留**（兼容微信 bind 风格） |\n\n### 步骤 3：复制到 `kuaishou/` 改前缀（机械替换，3 分钟）\n\n| 微信 | 快手 |\n|---|---|\n| `wx:for` / `wx:key` / `wx:if` | `ks:for` / `ks:key` / `ks:if` |\n| `wxml` 文件名 | `ksml` |\n| `wxss` 文件名 | `css`（注意：快手用标准 CSS 后缀） |\n| `bindtap` / `bindinput` | **保留** |\n\n### 步骤 4：复制到 `alipay/` 改前缀（机械替换，5 分钟）\n\n| 微信 | 支付宝 |\n|---|---|\n| `wx:for` / `wx:key` / `wx:if` | `a:for` / `a:key` / `a:if` |\n| `bindtap` / `bindinput` / `bindsubmit` | `onTap` / `onInput` / `onSubmit` |\n| `wxml` 文件名 | `axml` |\n| `wxss` 文件名 | `acss` |\n| `<page-meta>` | **不支持**，改 `my.setNavigationBar` API（写在 onLoad） |\n| `enhanced=\"true\"` 等微信特有属性 | 删掉 |\n| `app.json` tabBar `color`/`text` | `textColor`/`name` |\n\n### 步骤 5：四端 ICON / 图片资源建议放 CDN（本地用 base64 或纯色块占位）\n\n## 反 AI Slop 红线（v4.3 扩展 UI 库列表）\n\n| # | 禁用项 | 替代方案 |\n|---|---|---|\n| 14 | 直接套 **WeUI / Vant Weapp / TDesign-Mini / Lin-UI / TTUI / Tt-Mini-UI / KSUI / kuaishou-uikit** 默认皮 | 自定义 token，至少改 5 个变量再用 |\n| 15 | 缺 `<page-meta>` + `safe-area-inset` + `rpx` 适配 | 见本目录 `wechat/pages/index/index.wxml` |\n\n通用红线 #1 字体豁免：小程序里 `font-family` 优先 PingFang SC / Source Han Sans SC / Noto Sans SC（不能加载 Web Font）。\n\n## 视觉风格\n\n四端 starter 共用 ORGANIC 流派暖色调（米白 + 土橙 + 暖卡片），主题\"手作商品列表\"。`hero` + `chips` + 商品 `grid` 三段式，避开千篇一律的\"banner + features + cta\"。\n\n## 引用关系\n\n- 配色逻辑参考 [`references/colors.md`](../../references/colors.md) §5 ORGANIC（用 hex 表达 oklch 等价值，因小程序基础库 < 3.0 不一定支持 oklch）\n- 字体策略参考 [`references/typography.md`](../../references/typography.md) §6 + 小程序豁免说明（见 SKILL.md §四 v2.2 新增段）\n- 多端同步迭代速查见本文 §四端同步迭代姿势\n\n## 四端真机扫码后必查清单\n\n- [ ] 顶部胶囊（四端形态略有不同：微信圆角 / 支付宝椭圆 / 抖音矩形 / 快手矩形）不遮内容\n- [ ] 底部 home indicator 不遮 tabBar / 内容\n- [ ] 横屏 / 竖屏切换不崩\n- [ ] 字号在小屏（375rpx）/ 大屏（414rpx+）都不溢出\n- [ ] tabBar 用平台 native（不要自绘 view 拼接）\n\n## 何时该用编译框架\n\n如果同时维护 4 端，且产品复杂度 > 10 个页面，建议直接上 [Taro](https://taro-docs.jd.com/) 或 [Uni-app](https://uniapp.dcloud.net.cn/) — 写一份代码自动编译四端。本 skill 提供的 4 个 starter 是给\"原生开发 + 设计样板参考\"用的，不是 SaaS 级框架。\n\nFile v4.7.0:_meta.json\n\n{\n  \"ownerId\": \"kn7byevkn40d6z4p7ghdb097z983tj33\",\n  \"slug\": \"huo15-openclaw-frontend-design\",\n  \"version\": \"4.7.0\",\n  \"publishedAt\": 1780031507832\n}\n\nFile v4.7.0:references/a11y-checklist.md\n\n# a11y / WCAG 2.2 AA 速查清单 ⭐v4.4\n\n> 30 条速查 + 场景优先级 + 自动检查路线（axe-core / Lighthouse）。本清单**不是**SKILL.md §四\"反 AI Slop 红线\"那种判废级硬规则，而是验证阶段的**门控检查表**：每条标 ✓ 或 ⚠（待修） 或 N/A。\n\n## 1. Perceivable · 可感知（8 条）\n\n| # | 检查点 | 自动可测 | 工具 |\n|---|---|---|---|\n| 1 | 文本对比度 ≥ **4.5:1**（正文）/ **3:1**（大字 18pt+ 或 14pt+ 粗） | ✓ | axe / Lighthouse |\n| 2 | 非文本元素（图标 / UI 控件 / 图表）对比度 ≥ **3:1** | ✓ | axe |\n| 3 | 所有 `<img>` 有 `alt` 属性（装饰图用 `alt=\"\"`） | ✓ | axe / Lighthouse |\n| 4 | 视频有 captions / transcripts（视频内容站） | ✗ | 人审 |\n| 5 | **颜色不是唯一信息载体**（错误状态除颜色外要有图标 / 文字） | ✗ | 人审 |\n| 6 | 自动播放音频 ≤ 3 秒 或 提供暂停 | ✗ | 人审 |\n| 7 | 文本可放大 200% 而不破坏布局（用 rem / em，不全用 px） | ✓ | Lighthouse |\n| 8 | GIF / 视频闪烁频率 < 3 次/秒（防光敏性癫痫） | ✗ | 人审 |\n\n## 2. Operable · 可操作（11 条）\n\n| # | 检查点 | 自动可测 | 工具 |\n|---|---|---|---|\n| 9 | 全部交互**可键盘操作**（Tab / Shift+Tab / Enter / Esc / Space） | ⚠ 部分 | axe + 人审 |\n| 10 | **焦点环可见**（`:focus-visible` 保留浏览器默认或自绘清晰样式） | ✓ | axe |\n| 11 | 没有键盘陷阱（trap） — Tab 进得去也出得来 | ✗ | 人审（Tab 全键过一遍）|\n| 12 | \"Skip to main content\" 链接（首个 Tab 焦点） | ✓ | axe |\n| 13 | 每页有唯一 `<title>` | ✓ | Lighthouse |\n| 14 | heading 层级合理（h1 → h2 → h3 不跳级 / 不重复 h1） | ✓ | axe |\n| 15 | 链接文字描述清晰 — **禁** \"点这里\" / \"查看更多\" 这类无上下文 | ✓ 部分 | axe |\n| 16 ⭐2.2 | 触达目标尺寸 ≥ **24×24px**（按钮 / 链接 / 表单控件） | ✓ | axe + 真机 |\n| 17 ⭐2.2 | 拖拽操作有**键盘 / 单点替代**（slider 可左右键） | ✗ | 人审 |\n| 18 ⭐2.2 | 认证不强制 cognitive test（不让用户记复杂密码 / 解谜） | ✗ | 人审 |\n| 19 ⭐2.2 | 重复表单字段不强制再输入（自动填充 + remember 选项） | ✗ | 人审 |\n\n## 3. Understandable · 可理解（7 条）\n\n| # | 检查点 | 自动可测 | 工具 |\n|---|---|---|---|\n| 20 | `<html lang=\"...\">` 必填（中文 `zh` / `zh-CN`） | ✓ | axe |\n| 21 | 所有表单控件**有 `<label>`** 或 `aria-label` | ✓ | axe |\n| 22 | 错误提示**清晰具体**（不只是\"输入有误\"） | ✗ | 人审 |\n| 23 | 错误**给出纠正建议**（\"邮箱缺少 @\"，不只是\"格式错\"） | ✗ | 人审 |\n| 24 | 表单提交前可**确认 / 撤销**（金额 / 删除等关键操作） | ✗ | 人审 |\n| 25 | 上下文变化（焦点跳转 / 弹窗 / 页面跳转）**用户可预期** | ✗ | 人审 |\n| 26 | 控件文本与功能一致（按钮叫\"提交\"就真的提交） | ✗ | 人审 |\n\n## 4. Robust · 健壮（4 条）\n\n| # | 检查点 | 自动可测 | 工具 |\n|---|---|---|---|\n| 27 | HTML **语义化** — 用 `<nav>` / `<main>` / `<article>` / `<aside>` 而不是全 `<div>` | ✓ | axe |\n| 28 | ARIA 属性正确（`aria-label` / `role` / `aria-expanded` / `aria-current`） | ✓ | axe |\n| 29 | 按钮 / 链接职责正确（提交动作用 `<button>` 不用 `<a href=\"#\">`） | ✓ | axe |\n| 30 | 状态变化通过 `aria-live` region 通知屏幕阅读器 | ⚠ 部分 | axe + 人审 |\n\n---\n\n## 场景优先级速查\n\n不同场景检查重点不同。Junior pass 阶段挑场景 P0 必跑；Full Pass 阶段全跑。\n\n| 场景 | P0 必跑（4-5 条） | P1 应跑 |\n|---|---|---|\n| **B 端 Dashboard** | #9 键盘操作 / #10 焦点环 / #14 heading / #20 lang / #27 语义化 | #1 #2 #21 #28 #30 |\n| **内容站 / 文章** | #1 文本对比 / #3 alt / #14 heading / #15 链接清晰 / #20 lang | #21 #27 |\n| **营销落地页** | #1 / #15 / #21 表单 label / #16 触达 24px | #3 #5 #20 |\n| **移动端 H5（MOBILE-NATIVE）** | #1 / #5 / #16 / #20 / #21 | #2 #7 #9 |\n| **小程序（四端）** | #5 / #16（多数 a11y 由平台 webview 兜底） | #20 #21 |\n\n---\n\n## 自动检查路线（与 [`self-verify.md`](self-verify.md) 联动）\n\n### 路线 A · Claude in Chrome MCP + axe-core（首选 ⭐v4.4）\n\n```\n# 1. 浏览器渲染（已在 self-verify §1.2 完成）\nmcp__Claude_in_Chrome__navigate({ url: \"file:///abs/index.html\", tabId: <id> })\n\n# 2. 注入 axe-core 并执行\nmcp__Claude_in_Chrome__javascript_tool({\n  tabId: <id>,\n  code: `\n    const s = document.createElement('script');\n    s.src = 'https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.10.0/axe.min.js';\n    document.head.appendChild(s);\n    await new Promise(r => s.onload = r);\n    return await axe.run({ runOnly: ['wcag2aa', 'wcag22aa'] });\n  `\n})\n\n# 3. 解析返回的 violations / passes / incomplete，对照本清单标记\n```\n\n### 路线 B · Lighthouse CLI（fallback）\n\n```bash\n# 单次跑（return-cliCmd 让用户执行，禁 child_process）\nnpx lighthouse <URL 或 file://> --only-categories=accessibility --output=html --output-path=./a11y-report.html --chrome-flags=\"--headless\"\n\n# 批量跑（多个 examples 对比）\nfor f in examples/*/index.html; do\n  npx lighthouse \"file://$(pwd)/$f\" --only-categories=accessibility --output=json --output-path=\"./reports/$(dirname $f | tr / _).json\" --chrome-flags=\"--headless\"\ndone\n```\n\n### 路线 C · 人审兜底\n\n#5 / #6 / #8 / #11 / #17 / #18 / #19 / #22 / #23 / #24 / #25 / #26 这些主观 / 需交互的项**机器测不出**。最少跑：\n1. Tab 全键走一遍（验证 #9 #10 #11 #15）\n2. 屏幕阅读器（VoiceOver / NVDA）跟读首页 30 秒（验证 #20 #21 #27 #28 #30）\n3. 色盲模拟（Chrome DevTools → Rendering → Emulate vision deficiencies）\n\n---\n\n## 与流派的关系\n\na11y 与流派**正交** — 任何流派都该过 30 条 WCAG 2.2 AA。但流派会影响 a11y 的\"难易程度\"：\n\n| 流派 | a11y 友好度 | 需特别注意 |\n|---|---|---|\n| BOLD-MINIMAL | 高 | 大字 + 大留白 + 主色对比够，自然过 #1 / #14 |\n| EDITORIAL | 高 | 衬线 + 三栏 + 首字下沉，注意 #14 heading 层级 |\n| BRUTALIST | **中** | 粗黑边对比够，但 6px 边对屏幕阅读器可能干扰 — 加 `aria-hidden` 装饰 |\n| RETRO-FUTURE | **低** | 霓虹色 + CRT 扫描线 → #1 对比度容易掉；VT323 可读性差 → 长文不用；移动端慎选 |\n| ORGANIC | 中 | Caveat 手写体在小字号下可读性差 → ≥ 18px 起 |\n| MOBILE-NATIVE iOS | 高 | HIG 设计本身已考虑 a11y，关注 #16 触达 ≥ 44pt |\n| MOBILE-NATIVE MD3 | 高 | Material 3 默认带 a11y，关注 #1 dynamic color 派生时对比 |\n| MOBILE-NATIVE Harmony | 中 | 灵动色块多色相 → 对比度可能偏弱，每对色都要测 |\n\n---\n\n## 与红线的关系\n\na11y 清单**不是**SKILL.md §四 红线（红线判废、检查清单门控）。但**两者有 1 条交集**：\n\n- **红线 #13 ⭐v2.1**（移动端缺 `viewport-fit=cover` + `safe-area-inset`）= 本清单 **#16 触达** + 平台 a11y 兜底，因为缺 safe-area 会导致 home indicator 遮挡触达区。\n\n如果该 a11y 项是**红线**那种\"违反就废\"级别，会反向促成 SKILL.md §四 红线的扩展（v4.5+ 视情况）。\n\nFile v4.7.0:references/colors.md\n\n# 5 流派配色基线（oklch）\n\n> 全部使用 oklch 色空间。**禁紫渐变、禁 AI 模糊渐变背景**（参见 SKILL.md §四 红线 #2 / #11）。\n>\n> **⭐v4.0 起**：每个流派的配色已落到结构化 [`tokens/<slug>.json`](../tokens/) — 本文档保留可读的人类视角说明，jq 一行可转 CSS variables / Tailwind / Figma。配色硬规则源头仍在本文档。\n\n## 1. BOLD-MINIMAL · 勇敢极简\n\n| 角色 | oklch | 用途 |\n|---|---|---|\n| ink | `oklch(0.18 0 0)` | 主文字、主结构线 |\n| paper | `oklch(0.99 0.005 95)` | 背景，几乎纯白带极淡暖调 |\n| accent | `oklch(0.66 0.20 28)` | 锐利橙红，仅用于强调（hover / em） |\n| mute | `oklch(0.45 0 0)` | 次要文字 |\n\n**比例**：墨黑 20% / 留白 70% / 强调 10%。\n\n## 2. EDITORIAL · 编辑杂志\n\n| 角色 | oklch | 用途 |\n|---|---|---|\n| paper | `oklch(0.97 0.012 75)` | 暖纸色 |\n| ink | `oklch(0.20 0.015 280)` | 偏冷的墨黑 |\n| accent | `oklch(0.50 0.18 25)` | 砖红，首字下沉 / kicker / 引号 |\n| mute | `oklch(0.42 0.02 280)` | 副文字 |\n| rule | `oklch(0.20 0.015 280 / .25)` | 细分隔线 |\n\n**比例**：纸 75% / 墨 18% / 砖红 5% / 灰线 2%。\n\n## 3. BRUTALIST · 野兽派\n\n| 角色 | oklch | 用途 |\n|---|---|---|\n| paper | `oklch(0.985 0 0)` | 近纯白（不做暖偏） |\n| ink | `oklch(0.10 0 0)` | 真黑，6px 粗边 |\n| warn | `oklch(0.78 0.22 105)` | 警示黄，stamp 块 |\n\n**比例**：白 60% / 黑 30% / 警示黄 10%。**只许 3 色**。\n\n## 4. RETRO-FUTURE · 复古未来\n\n| 角色 | oklch | 用途 |\n|---|---|---|\n| bg | `oklch(0.13 0.04 280)` | 深夜紫蓝（注意：纯色，**不是渐变**） |\n| ink | `oklch(0.96 0.04 110)` | 暖白主字 |\n| neon-cyan | `oklch(0.85 0.18 195)` | 霓虹青 |\n| neon-magenta | `oklch(0.72 0.25 5)` | 霓虹洋红（**不是紫**） |\n\n**红线声明**：本流派使用霓虹双色对撞，**不得退化成紫渐变模糊背景**。所有发光必须由 `text-shadow` 多层叠加产生，禁用 `filter: blur()` 大色块当氛围。\n\n## 5. ORGANIC · 有机自然\n\n| 角色 | oklch | 用途 |\n|---|---|---|\n| paper | `oklch(0.96 0.025 85)` | 米白偏暖 |\n| ink | `oklch(0.28 0.04 50)` | 棕墨 |\n| clay | `oklch(0.62 0.13 45)` | 土橙 |\n| moss | `oklch(0.45 0.10 145)` | 森林绿 |\n| sky | `oklch(0.78 0.07 220)` | 雾蓝 |\n\n**比例**：纸 60% / 棕墨 15% / 三原色（土橙 / 苔绿 / 雾蓝）各 8% 左右。\n\n## 6. MOBILE-NATIVE · 移动原生 ⭐v2.1\n\n> 三套对照不是要你\"复制官方默认色\"——而是体现各平台的**色彩语义体系**。\n\n### 6.1 iOS HIG 风（推荐自有 brand color，避开系统蓝）\n\n| 角色 | oklch | 用途 |\n|---|---|---|\n| paper | `oklch(0.985 0.005 75)` | non-grouped 背景（暖中性） |\n| grouped-bg | `oklch(0.94 0.005 75)` | grouped table view 背景 |\n| ink | `oklch(0.18 0.005 280)` | label 主字 |\n| mute | `oklch(0.55 0.01 280)` | secondary label |\n| sep | `oklch(0.88 0.005 280)` | separator 0.5pt |\n| accent | `oklch(0.66 0.16 50)` | brand 强调（暖橙）— **替代 system blue** |\n\n**红线**：禁直接用 `#007AFF`（红线 #8）。Apple 自家 App（Music / Books / News）也都用品牌色而非系统蓝。\n\n### 6.2 Material Design 3（dynamic color，seed 自选）\n\n| 角色 | oklch | 派生方式 |\n|---|---|---|\n| seed | `oklch(0.55 0.13 175)` | **自选**色相（示例青绿，**避开 Material 默认紫**） |\n| primary | `oklch(0.55 0.13 175)` | = seed |\n| primary-container | `oklch(0.88 0.06 175)` | seed L+33 / C-50% |\n| secondary-container | `oklch(0.92 0.04 60)` | seed hue+245 / 低饱和 |\n| tertiary-container | `oklch(0.90 0.05 320)` | seed hue+145 / 低饱和 |\n| surface | `oklch(0.985 0.003 175)` | 近白带极淡 seed 色相 |\n| surface-variant | `oklch(0.93 0.01 175)` | 比 surface 暗 5% |\n| outline | `oklch(0.72 0.01 175)` | mid-tone |\n\n**规则**：seed 选 oklch C ∈ [0.10, 0.18]，避免高饱和（饱和过 → 派生 container 太脏）。\n\n### 6.3 HarmonyOS 鸿蒙（灵动色块）\n\n| 角色 | oklch | 用途 |\n|---|---|---|\n| paper | `oklch(0.97 0.005 240)` | 主背景 |\n| paper-2 | `oklch(0.94 0.008 240)` | hero / scene 卡片 |\n| ink | `oklch(0.18 0.01 260)` | 主字 |\n| mute | `oklch(0.50 0.01 260)` | 副字 |\n| c-cyan | `oklch(0.78 0.12 220)` | 灵动青 |\n| c-orange | `oklch(0.78 0.13 55)` | 灵动橙 |\n| c-green | `oklch(0.78 0.14 145)` | 灵动绿 |\n| c-pink | `oklch(0.82 0.10 5)` | 灵动粉 |\n\n**规则**：4 个灵动色 **同明度（L≈0.78）+ 同低饱和（C≈0.10–0.14）+ 不同色相**。同明度让多色拼一起不打架，这是鸿蒙\"灵动色块\"的核心。\n\n---\n\n## 通用约束\n\n- **禁** evenly-distributed palette（5 色等比例）\n- **禁** 默认暗黑 `#121212` + 紫主题\n- **禁** 全局 iOS 系统蓝 `#007AFF`、警示红 `#FF3B30` 当主色\n- **强制** oklch；如需 fallback 可附 hex 注释，但 hex 不能是唯一来源\n- 主色单一（**60–70%**）+ 强调色锐利（**5–10%**）+ 中性（20–30%）\n\nFile v4.7.0:references/inspirations.md\n\n# 5 流派真实参考站点\n\n> 参考是用来**抄结构 / 学手感**的，不是用来照搬的。看完关掉，再写自己的。\n> 商用敏感：huashu-design 项目仅个人 license，所有结构 / 工作流参考必须改写后落地。\n\n## 1. BOLD-MINIMAL\n\n- [Stripe](https://stripe.com) — 业内勇敢极简天花板，注意 hero 字号节奏\n- [Linear](https://linear.app) — 黑底版的极简样板\n- [Vercel](https://vercel.com) — 几何排版与极锐利强调色\n- [Apple · Newsroom](https://www.apple.com/newsroom/) — 大字 hero + 衬线 + 单强调\n- [Pitch](https://pitch.com) — 强调色更跳，但留白依旧\n\n## 2. EDITORIAL\n\n- [The New York Times Magazine](https://www.nytimes.com/section/magazine) — 数字版杂志范本\n- [The Verge](https://www.theverge.com/) — 现代化编辑感\n- [Pitchfork](https://pitchfork.com) — 评分文章的栅格密度\n- [It's Nice That](https://www.itsnicethat.com) — 设计杂志的当代演绎\n- [The Markup](https://themarkup.org) — 调查报道，衬线为主\n\n## 3. BRUTALIST\n\n- [Bloomberg Businessweek · 特别报道](https://www.bloomberg.com/businessweek) — 粗黑边、错位标题\n- [Are.na](https://www.are.na) — 网格暴露，零装饰\n- [Read.cv](https://read.cv) — Mono + 极致黑白\n- [Praxis](https://www.praxis.cool) — 当代 brutalist 教科书\n- 反例：自我标榜 brutalist 但只是把字调粗的 SaaS landing → **不要看**\n\n## 4. RETRO-FUTURE\n\n- [Cyberpunk 2077 · Official](https://www.cyberpunk.net/cn/zh) — 霓虹双色对撞\n- [Are.na · Vaporwave](https://www.are.na/search?q=vaporwave) — 80s 美学合集\n- [Replit](https://replit.com)（部分 landing） — 终端 / mono 与现代结合\n- [The Outpost](https://outpost.pub) — neon + grain 的现代演绎\n- 反例：任何\"紫渐变蓝\"的 SaaS 落地页 → **不要看**\n\n## 5. ORGANIC\n\n- [Notion · 早期版本](https://web.archive.org/web/2018*/notion.so) — 暖底 + 不规则插画\n- [Medium · Stories](https://medium.com) — 衬线 + 暖纸感\n- [Headspace](https://www.headspace.com) — 圆滑形状 + 柔色\n- [Mailchimp](https://mailchimp.com) — 手绘插画 + 暖色组合\n- [Squarespace · Templates \"Five\"](https://www.squarespace.com) — 手写体出现的尺度\n\n## 6. MOBILE-NATIVE · 移动原生 ⭐v2.1\n\n### 6.1 iOS HIG\n\n- [Apple HIG 官方](https://developer.apple.com/design/human-interface-guidelines/) — 必读，所有结构规范\n- [Apple Music](https://www.apple.com/cn/apple-music/) — 自家 App，不用系统蓝的最佳范例\n- [Things 3 by Cultured Code](https://culturedcode.com/things/) — HIG 教科书级 GTD 应用\n- [Linear · iOS App](https://linear.app) — 现代化 HIG 典范\n- [SwiftUI Component Library](https://www.swiftuiux.com/) — 抄结构不抄默认皮\n\n### 6.2 Material Design 3\n\n- [m3.material.io](https://m3.material.io/) — 官方 token / component 文档\n- [Material Theme Builder](https://material-foundation.github.io/material-theme-builder/) — seed → dynamic color 在线生成\n- [Google Calendar / Tasks · Android](https://play.google.com/store/apps/details?id=com.google.android.calendar) — 第一方 MD3 示范\n- [Read You](https://github.com/Ashinch/ReaderYou) — 开源 MD3 RSS 客户端，Compose 全栈\n- 反例：直接套 Material UI 默认紫的 web mock → **不要看**\n\n### 6.3 HarmonyOS 鸿蒙\n\n- [HarmonyOS 设计指南官方](https://developer.huawei.com/consumer/cn/design/) — 必读\n- [华为商城 App](https://m.vmall.com/) — 一方应用，灵动色块 + 大圆角范本\n- [华为运动健康 App](https://consumer.huawei.com/cn/mobileservices/health/) — 数据可视化与场景化\n- [鸿蒙生态合作 App 精选](https://developer.huawei.com/consumer/cn/forum/) — 论坛精华案例集\n- 反例：套 EMUI 默认皮没改 token 的 demo → **不要看**\n\n## 7. 小程序（MOBILE-NATIVE 子集）⭐v2.2\n\n### 7.1 微信小程序\n\n- [微信小程序设计指南](https://developers.weixin.qq.com/miniprogram/design/) — 平台官方\n- 喜茶 / 茶颜悦色 / Manner 小程序 — 自有 brand color，**不套 WeUI 默认绿**的样板\n- 三顿半小程序 — 极简 + 排版 + 暖色，对标 ORGANIC 流派\n- 即刻小程序 — 内容型小程序的字体 / 间距功底\n- 反例：所有 hero 都是「全屏 banner + 5 个圆角胶囊 + 商品 grid」千篇一律的 → **不要看**\n\n### 7.2 支付宝小程序\n\n- [支付宝小程序设计指南](https://opendocs.alipay.com/mini/design) — 平台官方\n- 蚂蚁森林 / 蚂蚁庄园 / 健康码 — 蚂蚁系一方应用，灵动卡片 + 微动效\n- 飞猪 / 口碑 / 大众点评（部分 H5）— 内容密度的极致样板\n- 反例：直接套 antd-mini 默认皮的 demo → **不要看**\n\n### 7.3 抖音小程序 ⭐v4.2\n\n- [抖音开放平台 · 设计指南](https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/component/) — 平台官方\n- 抖音电商一方小程序（如\"抖音商城\")— 视频流 + 商品卡的样板\n- 各品牌抖音小程序 hero 视频（不强求 starter 复刻，看节奏即可）\n- 反例：直接套 TTUI / Tt-Mini-UI 默认皮的 demo → **不要看**\n\n### 7.4 快手小程序 ⭐v4.3\n\n- [快手小程序开放平台](https://mp.kuaishou.com/docs/develop/) — 平台官方文档\n- 快手商城小程序 — 一方应用，电商场景的样板\n- 快手主播店铺小程序 — 内容驱动型小程序的导购卡片\n- 反例：直接套 KSUI / kuaishou-uikit 默认皮的 demo → **不要看**\n\n### 7.5 四端通用参考\n\n- [Awesome MiniApp](https://github.com/topics/miniapp) — GitHub 上多端框架与精选\n- 「小程序设计周刊」公众号 — 行业更新\n- [Taro](https://taro-docs.jd.com/) / [Uni-app](https://uniapp.dcloud.net.cn/) — 三端编译框架，自动复用代码\n\n---\n\n## 看参考的姿势\n\n1. 一次只看 1 个流派，看完关掉再开下一个\n2. 每个站点 ≤ 5 分钟，记住 1 个具体细节就够（不是整体氛围）\n3. 写代码前再看一次 SKILL.md §四 硬红线，确保没顺手抄回 AI Slop\n4. 抄完检查：oklch 配色 ✓、非默认字体 ✓、无紫渐变 ✓、无圆角 + 左竖条卡片 ✓、无统一 16px 圆角 ✓\n\nFile v4.7.0:references/multi-genre-compare.md\n\n# 多流派对比生成手册 ⭐v4.1\n\n> 用户没明确方向时如何并行生成 3 个流派对比；如何与 `huo15-openclaw-design-director` 协作。\n\n## 何时启用本流程\n\n| 信号 | 处理 |\n|---|---|\n| \"做几个方向对比\" / \"三个风格\" / \"我看看哪个好\" | ✓ 启用 |\n| \"帮我选\" / \"你定\" | ✓ 启用 |\n| 给了具体流派（\"做 brutalist 风\"）| ✗ 直接走 §六 单流派 Junior pass |\n| 给了视觉锚点（\"参考 Stripe\"）| ✗ 直接走 BOLD-MINIMAL 单流派 |\n| 给了完整 brand-spec（已有品牌色 / 字体）| ✗ 走 brand-protocol 抓品牌资源后单流派 |\n\n## 流程总览\n\n```\ndirector 选 3 流派 (or 自动取反差对位)\n     ↓\n3 个 Junior pass 并行 (用 Explore subagent 隔离 context)\n     ↓\n3 张截图 (Chrome MCP / Playwright)\n     ↓\ndirector 五维矩阵打分 / design-critique 5 维评分\n     ↓\n用户选定 → 单流派走 §六 阶段 3 Full Pass\n```\n\n---\n\n## 1. 流派选取\n\n参考 [`tokens/_compare-matrix.md`](../tokens/_compare-matrix.md) §反差对位。\n\n**有 director 时**：让 director 挑（它有 20 条设计哲学 + 五维矩阵）。\n**无 director 时**：从下面 5 组反差对位任选一组：\n- 理性 / 感性 / 实验：bold-minimal × organic × brutalist\n- 冷峻 / 温暖 / 复古：editorial × organic × retro-future\n- 桌面 / 移动 / 跨端：bold-minimal × mobile-native-ios × mobile-native-harmony\n- 极简 / 信息密度 / 装饰：bold-minimal × editorial × retro-future\n- Web / iOS / 鸿蒙：bold-minimal × mobile-native-ios × mobile-native-harmony\n\n---\n\n## 2. 并行 Junior pass（3 流派同时出）\n\n对每个 `<slug>`：\n\n1. 复制 `examples/<dir>/index.html` → `output-<slug>.html`\n2. 替换占位文案为本次场景的文案\n3. **保留视觉骨架** — hero / list / cards 结构不动，只换内容\n4. 引用 `tokens/<slug>.json` 的 color / typography / spacing 当硬约束 — **不要改 token**\n\nReact / Vue 项目：先跑 [`tokens/exporters/to-tailwind.md`](../tokens/exporters/to-tailwind.md) 出 3 份 tailwind config，再各做一个 `<Genre><Page>.tsx`。\n\n**性能提示**：3 流派**必须并行**。用 Explore subagent 隔离 context，不要串行 3 趟。\n\n---\n\n## 3. 三份截图\n\n走 [`self-verify.md`](self-verify.md) §1 Chrome MCP 路线（首选）：\n\n```\nmcp__Claude_in_Chrome__navigate({ url: \"file:///abs/output-bold-minimal.html\", tabId: <id> })\nmcp__Claude_in_Chrome__computer({ action: \"screenshot\", tabId: <id>, save_to_disk: true })\n# 重复对 organic / brutalist\n```\n\nmobile-native 子集额外用 `resize_window` 切到设备 viewport：\n- iOS: 393×852\n- MD3: 412×915\n- Harmony: 396×858\n\n无 MCP 时降级到 Playwright CLI（见 self-verify.md §2）。\n\n---\n\n## 4. 五维评审\n\n**首选**：`huo15-openclaw-design-director` 五维矩阵（结构 / 字体 / 颜色 / 空间 / 氛围）出\"推荐 / 次选 / 反对方向\"。\n**次选**：`huo15-openclaw-design-critique` 给每张图打 5 维分（1-5）求和取最高。\n**兜底**：用户人眼选。\n\ndirector 的输出格式见 [它的 SKILL.md §3.4 推荐表态](../../huo15-openclaw-design-director/SKILL.md)。\n\n---\n\n## 5. 移交单流派\n\n用户敲定方向后：\n- 删除其他 2 份草稿\n- 选定方向走 §六 阶段 3 Full Pass（补真实文案 / 替换图片 / 调细节 / 加动效）\n- 视情况走阶段 3.5 导出 tokens 到既有项目\n\n---\n\n## 6. 与 design-director 的协作接口\n\n### 我提供给 director 的资产\n\n- **8 个流派的** [`tokens/<slug>.json`](../tokens/) — 结构化，director 一行 jq 取关键字段\n- **8 个流派的** [`examples/<dir>/index.html`](../examples/) — Junior pass 起手不空白\n- **redLineWaiver** — 每个流派的合规豁免，避免误判违规\n- **横向对比表** [`tokens/_compare-matrix.md`](../tokens/_compare-matrix.md) — director 选流派的 cheat sheet\n\n### director 提供给我的输入\n\n- **3 个流派 slug**（如 `[\"bold-minimal\", \"organic\", \"brutalist\"]`）\n- **每个流派的 brief**（已写好的文案 / 重点 / 差异点，我做 Junior pass 不用从需求倒推）\n- **五维矩阵回调**（截图回流后由 director 判最优）\n\n### 接力消息格式（建议）\n\n```jsonc\n// director → frontend-design\n{\n  \"task\": \"multi-genre-junior-pass\",\n  \"genres\": [\"bold-minimal\", \"organic\", \"brutalist\"],\n  \"context\": {\n    \"client\": \"<品牌名>\",\n    \"scope\": \"<目标页面 / 组件类型>\",\n    \"differentiator\": \"<差异点一句话>\"\n  },\n  \"briefs\": {\n    \"bold-minimal\": \"<director 写的简报>\",\n    \"organic\": \"...\",\n    \"brutalist\": \"...\"\n  }\n}\n\n// frontend-design → director（截图回流）\n{\n  \"task\": \"multi-genre-junior-pass-done\",\n  \"outputs\": [\n    { \"genre\": \"bold-minimal\", \"html\": \"<rel-path>\", \"screenshot\": \"<rel-path>\" },\n    { \"genre\": \"organic\", \"html\": \"<rel-path>\", \"screenshot\": \"<rel-path>\" },\n    { \"genre\": \"brutalist\", \"html\": \"<rel-path>\", \"screenshot\": \"<rel-path>\" }\n  ]\n}\n```\n\n### director 现状与升级路径\n\n- **当前 director v1.0.0**：5 大流派覆盖（与本 skill v1.0 配套）— 对前 5 个 Web 流派全量生效；mobile-native 子集需要等 director v2 升级才能联动。\n- **本 skill 在不动 director 的前提下，已为 director v2 备好接力入口**（tokens schema + compare matrix + redLineWaiver）— director 升级时直接读取即可，无需 frontend-design 再改。\n\n---\n\n## 7. 反 AI Slop 红线（多流派对比仍适用）\n\n3 流派 Junior pass 仍要遵守 SKILL.md §四 全部 15 条红线。多流派对比**不是 AI Slop 免罪金牌** — 不要因为\"探索方向\"就把 3 张图都做成 AI 渐变模糊背景 + 紫色 hero。\n\n每个 Junior pass 各自的 redLineWaiver 见 [`tokens/_compare-matrix.md`](../tokens/_compare-matrix.md)。\n\nFile v4.7.0:references/self-verify.md\n\n# 自验证工作流操作手册 ⭐v3.0\n\n> 火一五前端设计技能 v3.0 起，**Claude in Chrome MCP** 成为自验证首选路线。本手册按场景分流，给出每条路线的具体命令。\n\n## 路线选择决策树\n\n| 场景 | 首选 | Fallback 1 | Fallback 2 |\n|---|---|---|---|\n| Web / H5（5 个 Web 流派） | Claude in Chrome MCP | Playwright CLI | 用户手动 `open file://` |\n| MOBILE-NATIVE Web 流派（iOS/MD3/Harmony） | Claude in Chrome MCP（resize 设备 viewport） | Playwright CLI（带 `--viewport-size`） | — |\n| 微信小程序 | 微信开发者工具 IDE | 真机扫码 | — |\n| 支付宝小程序 | 支付宝小程序 IDE | 真机扫码 | — |\n\n---\n\n## 1. Claude in Chrome MCP（优先 ⭐v3.0）\n\n### 1.1 前置条件\n- 用户已在 Chrome 装 Claude in Chrome 扩展并登录\n- 当前会话挂载了 `mcp__Claude_in_Chrome__*` 工具集（如 schemas 未加载，用 `ToolSearch query=\"select:mcp__Claude_in_Chrome__list_connected_browsers,...\"`）\n- `mcp__Claude_in_Chrome__list_connected_browsers` 返回非空数组\n\n### 1.2 标准命令序列（Web / H5）\n\n```\n# 1. 列出可用浏览器\nmcp__Claude_in_Chrome__list_connected_browsers\n\n# 2. 选定浏览器\nmcp__Claude_in_Chrome__select_browser({ deviceId: \"<from step 1>\" })\n\n# 3. 拿可用 tab\nmcp__Claude_in_Chrome__tabs_context_mcp\n\n# 4. 打开本地文件 / URL\nmcp__Claude_in_Chrome__navigate({ url: \"file:///abs/path/index.html\", tabId: <id> })\n\n# 5. 截图（关键产物）\nmcp__Claude_in_Chrome__computer({\n  action: \"screenshot\",\n  tabId: <id>,\n  save_to_disk: true\n})\n\n# 6. 读控制台错误（防 oklch 不支持 / 字体加载失败 / JS 报错）\nmcp__Claude_in_Chrome__read_console_messages({ tabId: <id> })\n```\n\n### 1.3 移动端 viewport 控制\n\n```\n# iPhone 16 Pro\nmcp__Claude_in_Chrome__resize_window({ tabId: <id>, width: 393, height: 852 })\n\n# Pixel 8\nmcp__Claude_in_Chrome__resize_window({ tabId: <id>, width: 412, height: 915 })\n\n# HarmonyOS Mate 60\nmcp__Claude_in_Chrome__resize_window({ tabId: <id>, width: 396, height: 858 })\n\n# resize 后再 screenshot\nmcp__Claude_in_Chrome__computer({ action: \"screenshot\", tabId: <id>, save_to_disk: true })\n```\n\n或者（更稳，无需 resize）：本 skill 的 `examples/mobile-native/*/index.html` 内置桌面预览手机壳（device frame），桌面 viewport 也能看到正确移动效果，桌面浏览器打开即可。\n\n### 1.4 何时跳过本路线\n\n- `list_connected_browsers` 返回 `[]` → 直接路线 2\n- 用户明确说\"我不开 Chrome\" → 路线 2\n- wxml / axml 场景 → 路线 3 / 4（MCP 不能渲染小程序模板）\n\n### 1.5 a11y 自动审计 ⭐v4.4\n\n渲染完成后注入 axe-core 跑 WCAG 2.2 AA 检查（与 [`a11y-checklist.md`](a11y-checklist.md) 30 条对照）：\n\n```\nmcp__Claude_in_Chrome__javascript_tool({\n  tabId: <id>,\n  code: `\n    const s = document.createElement('script');\n    s.src = 'https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.10.0/axe.min.js';\n    document.head.appendChild(s);\n    await new Promise(r => s.onload = r);\n    return await axe.run({ runOnly: ['wcag2aa', 'wcag22aa'] });\n  `\n})\n```\n\n返回 `violations` / `passes` / `incomplete` 三个数组：\n- 把 `violations` 对照 a11y-checklist 标 ⚠ 或修复\n- `incomplete` 是 axe 无法自动判断的（如 #5 颜色非唯一信息载体），人审兜底\n- `passes` 数 / 总检查数 ≥ 90% 视为可发布\n\n**Lighthouse fallback**（MCP 不可用时）：\n\n```bash\nnpx lighthouse <URL 或 file://> --only-categories=accessibility --output=html --output-path=./a11y-report.html --chrome-flags=\"--headless\"\n```\n\n详见 [`a11y-checklist.md`](a11y-checklist.md) §自动检查路线。\n\n---\n\n## 2. Playwright CLI（fallback）\n\n### 2.1 桌面端\n\n```bash\nnpx playwright-core screenshot <URL 或 file:///abs/path> ~/verify.png --viewport-size=1440,900\n```\n\n### 2.2 移动端（MOBILE-NATIVE 流派必跑）\n\n```bash\n# iPhone 16 Pro\nnpx playwright-core screenshot <URL> ~/verify-iphone.png --viewport-size=393,852\n\n# Pixel 8\nnpx playwright-core screenshot <URL> ~/verify-android.png --viewport-size=412,915\n\n# HarmonyOS Mate 60\nnpx playwright-core screenshot <URL> ~/verify-harmony.png --viewport-size=396,858\n```\n\n### 2.3 注意\n\n- 延续 enhance 插件\"禁 child_process\"铁律：**返回命令让用户执行**，不要 spawn\n- `--full-page` 截整页（默认只 viewport）\n- `--device=\"iPhone 16 Pro\"` 也可用，但 Playwright 内置设备列表更新慢，自带 viewport 数值更稳\n\n---\n\n## 3. 微信开发者工具（小程序）\n\n1. 安装 [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)（Stable v1.06+）\n2. 项目 → 导入项目 → 选 `examples/mini-program/wechat/`\n3. AppID 选\"测试号\"\n4. 编译后左侧模拟器看渲染\n5. 真机调试扫码 → 微信扫码 → 真机看效果\n6. 截图：模拟器右上角\"截屏\"按钮 / 工具菜单 → 截图，默认存 `~/Desktop`\n\n---\n\n## 4. 支付宝小程序 IDE（小程序）\n\n1. 安装 [支付宝小程序 IDE](https://opendocs.alipay.com/mini/ide/download)\n2. 文件 → 打开项目 → 选 `examples/mini-program/alipay/`\n3. 预览 → 扫码用支付宝 App 看真机\n4. 截图：IDE 内置截图工具，或预览界面右上角\"复制图片\"\n\n---\n\n## 5. 评审接力\n\n无论走哪条路线，截图最终：\n- **由用户人眼审** → 1 句话反馈\n- 或调用 `huo15-openclaw-design-critique` 5 维打分（结构 / 字体 / 颜色 / 空间 / 氛围）+ Keep/Fix/Quick Wins 输出\n\n---\n\n## 6. 移动端额外检查清单\n\n- [ ] safe-area-inset 上下生效（刘海 / home indicator 没遮挡内容）\n- [ ] tab-bar 触达高度 ≥ 44pt（iOS）/ 48dp（Android / 鸿蒙）\n- [ ] 字号 / 行高在 375–430 多档 viewport 都不溢出\n- [ ] 小程序：`<page-meta>` 在 wxml 中存在 + tabBar 是 native 不是自绘 + rpx 适配 750rpx 屏宽\n- [ ] 控制台无 oklch 不支持警告（fallback 已生效）\n\n---\n\n## 7. 三路线兼容性矩阵\n\n| 流派 / 场景 | Chrome MCP | Playwright CLI | 微信 IDE | 支付宝 IDE | 真机扫码 |\n|---|---|---|---|---|---|\n| BOLD-MINIMAL / EDITORIAL / BRUTALIST / RETRO-FUTURE / ORGANIC | ✓ | ✓ | — | — | ✓ |\n| MOBILE-NATIVE iOS HIG | ✓（resize 393×852）| ✓ | — | — | ✓ |\n| MOBILE-NATIVE MD3 | ✓（resize 412×915）| ✓ | — | — | ✓ |\n| MOBILE-NATIVE Harmony | ✓（resize 396×858）| ✓ | — | — | ✓ |\n| 微信小程序 | ✗ | ✗ | ✓ | — | ✓ |\n| 支付宝小程序 | ✗ | ✗ | — | ✓ | ✓ |\n\n---\n\n## 8. 设计原则提醒\n\n- **MCP 优先**不是教条 —— 没浏览器连接就别等，立刻 fallback\n- **不要在 skill 内部 spawn 进程** — 所有 CLI 命令必须 return-cliCmd 模式给用户执行\n- **截图是最终凭证** — 不要用\"我看了源代码觉得 OK\"代替真机 / 真渲染验证\n- **控制台错误也要看** — `read_console_messages` 能抓到 oklch fallback、字体 404、JS 报错等隐患\n\nFile v4.7.0:references/typography.md\n\n# 5 流派字体对（display + body）\n\n> **禁默认 Inter / Roboto / Arial / system-ui**（参见 SKILL.md §四 红线 #1）。\n> 所有推荐字体均来自 [Google Fonts](https://fonts.google.com)、[Adobe Fonts](https://fonts.adobe.com) 或思源系列，license 友好。\n\n## 1. BOLD-MINIMAL\n\n| 角色 | 字体 | 备选 |\n|---|---|---|\n| display | **Playfair Display** Black Italic | Crimson Pro 900 / Tiempos Display |\n| body | **IBM Plex Sans** 400/600 | Söhne / Inter Tight（仅作 fallback，不能首选） |\n\n**反差**：粗衬线 italic ↔ 中性现代无衬线。\n\n## 2. EDITORIAL\n\n| 角色 | 字体 | 备选 |\n|---|---|---|\n| display | **DM Serif Display** | Cormorant Garamond / Tiempos Headline |\n| body | **Source Serif 4** opsz | EB Garamond / 思源宋体 |\n| caps | small-caps + letter-spacing .06em | — |\n\n**反差**：display 略 condensed，body 宽松，靠 opsz 自动调节字重。\n\n## 3. BRUTALIST\n\n| 角色 | 字体 | 备选 |\n|---|---|---|\n| display | **Space Grotesk** 700 | PP Neue Montreal / Druk Wide |\n| mono | **JetBrains Mono** 400/800 | Space Mono / IBM Plex Mono |\n\n**反差**：粗 sans 大标题 + mono 元数据 / 导航，等宽字承担\"机械感\"。\n\n## 4. RETRO-FUTURE\n\n| 角色 | 字体 | 备选 |\n|---|---|---|\n| display | **Major Mono Display** | Monoton / Audiowide（慎用，易土气） |\n| body | **VT323** | Press Start 2P（仅做装饰，不能跑长文） |\n\n**警告**：VT323 可读性弱，正文长度 ≤ 200 字符；超过请退回 IBM Plex Mono。\n\n## 5. ORGANIC\n\n| 角色 | 字体 | 备选 |\n|---|---|---|\n| display | **Caveat** 600 | Patrick Hand / Reenie Beanie |\n| body | **Source Serif 4** | Lora / 思源宋体 |\n| 中文配对 | 思源宋体（display 仍用 Caveat 拉手写） | 霞鹜文楷 |\n\n**反差**：手写体只在 hero / 卡片标题 / 注脚，正文一律严肃衬线，避免\"小学生作文\"。\n\n## 6. MOBILE-NATIVE · 移动原生 ⭐v2.1\n\n### 6.1 iOS HIG\n\n| 角色 | 字体 | 备选 | 备注 |\n|---|---|---|---|\n| display | **Manrope** 800 | Onest / Outfit / Bricolage Grotesque | **替代 SF Pro / system-ui**（红线 #1） |\n| body | **IBM Plex Sans** 400/500/600 | Söhne / Sentinel | — |\n| 数字 | DM Sans / IBM Plex Mono | — | 状态栏 / 数据用等宽更稳 |\n\n**HIG 排版三件套**：large title 34pt 800、navigation title 17pt 500、body 16pt。\n\n### 6.2 Material Design 3\n\n| 角色 | 字体 | 备选 | 备注 |\n|---|---|---|---|\n| display | **DM Sans** 700 | Onest / Public Sans | **替代 Roboto Flex**（红线 #1） |\n| body | **IBM Plex Sans** 400/500 | Source Sans 3 | — |\n| 中文 | 思源黑体 / Noto Sans SC | — | 跟 DM Sans 字重对齐 |\n\n**MD3 type scale**：display 28pt 700、headline 22pt 500、title 16pt 500、body 14pt。\n\n### 6.3 HarmonyOS 鸿蒙\n\n| 角色 | 字体 | 备选 | 备注 |\n|---|---|---|---|\n| display | **Noto Sans SC** 700/900 | 思源黑体 / 霞鹜文楷 | HarmonyOS Sans 不在 Google Fonts，用 Noto Sans SC 替代 |\n| body | **Noto Sans SC** 400/500 | 思源黑体 | 中文为主 |\n| 数字 / 英文 | **DM Sans** 500/700 | Inter Tight (慎用) | 中英混排时英文用 DM Sans |\n\n**鸿蒙排版**：屏头大标题 28pt 900、卡片标题 22pt 700、控件标签 15pt 500。\n\n---\n\n## MOBILE-NATIVE 通用约束\n\n- **禁** `font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, ...`（红线 #1，且无差异化）\n- **禁** `font-family: SF Pro Display`（在 web 上根本加载不到，最终 fallback 到 system-ui）\n- 中英混排：英文 / 数字用 DM Sans / Manrope，中文用 Noto Sans SC / 思源黑体；**两个字族不超过 3 个字重**\n\n---\n\n## 通用约束\n\n- 主字 / 副字必须有性格反差：衬线 ↔ 无衬线、或 mono ↔ proportional\n- **中文**：思源宋体 / 思源黑体 / 霞鹜文楷 / Noto Serif SC，按流派挑一对（**不要**英文中文混 4 个字族）\n- **加载**：`<link rel=\"preconnect\">` 提前连，`display=swap` 避免 FOIT\n- 任何\"system-ui 兜底就完事\"的写法 = 没用本 skill\n\nFile v4.7.0:skill-card.md\n\n## Description:\n\nGenerates high-fidelity frontend design guidance and prototype assets for web pages, mobile H5 or app interfaces, mini-programs, design systems, accessibility checks, motion tokens, and multi-style visual comparisons.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[zhaobod1](https://clawhub.ai/user/zhaobod1)\n\n### License/Terms of Use:\n\nMIT\n\n## Use Case:\n\nDevelopers, designers, and product teams use this skill to turn frontend UI requests into visually opinionated prototypes, platform-specific mobile or mini-program starters, design-token guidance, and accessibility verification steps.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Verification guidance can lead users to run mutable third-party browser or shell tooling.\n\nMitigation: Review verification steps before use and run audits against local prototypes or a dedicated browser profile without production logins.\n\nRisk: Examples reference CDN-hosted axe-core and unpinned npx tooling.\n\nMitigation: Replace CDN and unpinned examples with pinned or lockfile-managed local tooling before using them in a production workflow.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/zhaobod1/skills/huo15-openclaw-frontend-design)\n- [Accessibility and WCAG 2.2 AA checklist](references/a11y-checklist.md)\n- [Self-verification workflow](references/self-verify.md)\n- [Multi-style comparison workflow](references/multi-genre-compare.md)\n- [Design token schema](tokens/_schema.md)\n- [Design token comparison matrix](tokens/_compare-matrix.md)\n- [CSS variables exporter](tokens/exporters/to-css-vars.md)\n- [Tailwind exporter](tokens/exporters/to-tailwind.md)\n- [Figma exporter](tokens/exporters/to-figma.md)\n- [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/)\n- [Material Design 3](https://m3.material.io/)\n- [HarmonyOS Design Guidelines](https://developer.huawei.com/consumer/cn/design/)\n- [WeChat Mini Program Design Guidelines](https://developers.weixin.qq.com/miniprogram/design/)\n- [Alipay Mini Program Design Guidelines](https://opendocs.alipay.com/mini/design)\n- [Douyin Mini App Developer Documentation](https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/component/)\n- [Kuaishou Mini Program Developer Documentation](https://mp.kuaishou.com/docs/develop/)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance]\n\n**Output Format:** [Markdown guidance with code snippets, shell commands, configuration notes, JSON design tokens, and prototype source files.]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May include platform-specific starter files, design token exports, accessibility audit steps, and short design rationale.]\n\n## Skill Version(s):\n\n4.7.0 (source: frontmatter and server release metadata)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nFile v4.7.0:tokens/_compare-matrix.md\n\n# 8 流派横向对比矩阵 ⭐v4.1\n\n> 给 `huo15-openclaw-design-director` 选流派用，或用户要做 multi-genre 平行对比时的速查表。\n\n## 关键 token 对比\n\n| 流派 | 主色 (oklch) | 重音色 | display 字体 | radius 哲学 | 适合场景 |\n|---|---|---|---|---|---|\n| **bold-minimal** | 0.18 0 0（墨黑） | 0.66 0.20 28（锐橙） | Playfair Display 900 italic | sm 2 / md 8 / lg 14 / pill | 科技、B 端、作品集 |\n| **editorial** | 0.20 0.015 280（冷墨） | 0.50 0.18 25（砖红） | DM Serif Display 400 | sm 2 / md 4 / lg 8 | 内容、品牌故事、报告 |\n| **brutalist** | 0.10 0 0（真黑） | 0.78 0.22 105（警示黄） | Space Grotesk 700 + JetBrains Mono | 全 0（直角） | 独立工作室、Web3、先锋 |\n| **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 | 游戏、音乐、娱乐 |\n| **organic** | 0.28 0.04 50（棕墨） | 0.62 0.13 45（土橙） | Caveat 600 + Source Serif | irregular 4 段 / soft 24 / pill | 食品、母婴、健康 |\n| **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 |\n| **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 |\n| **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 / 鸿蒙生态 |\n\n## 反差对位（multi-genre 三选时常用）\n\n| 命题 | 流派组合 |\n|---|---|\n| 理性 vs 感性 vs 实验 | bold-minimal × organic × brutalist |\n| 冷峻 vs 温暖 vs 复古 | editorial × organic × retro-future |\n| 桌面 vs 移动 vs 跨端 | bold-minimal × mobile-native-ios × mobile-native-harmony |\n| 极简 vs 信息密度 vs 装饰 | bold-minimal × editorial × retro-future |\n| Web 端 vs 双移动端 | bold-minimal × mobile-native-md3 × mobile-native-harmony |\n\n## redLineWaiver 速查\n\n| 流派 | 豁免说明 |\n|---|---|\n| brutalist | radius 全 0 是 hallmark，**不是**红线 #9 违规 |\n| retro-future | bg 深紫蓝纯色（非渐变），霓虹靠 text-shadow 不靠 backdrop-blur |\n| organic | irregular radius 4 段不同百分比，不犯统一 16px |\n| mobile-native-ios | accent 暖橙替代 #007AFF（红线 #8 合规：Apple 自家 App 也这么做） |\n| mobile-native-md3 | seed 青绿避开 Material 默认紫 |\n| mobile-native-harmony | 4 灵动色块同明度多色相，避免单色一统天下 |\n\n## motion 哲学速查 ⭐v4.5\n\n| 流派 | 主 duration | 主 easing | stagger | 一句话动效原则 |\n|---|---|---|---|---|\n| **bold-minimal** | normal 300ms | standard | 80ms | 克制 — 单一 easing、绝不弹跳 |\n| **editorial** | normal 400ms / slow 700ms | decelerate | 120ms | 稳重 — 偏长 duration 模仿翻页 |\n| **brutalist** | instant 80ms / fast 120ms | linear / step2 | 30ms | 硬切 — 禁缓动函数 |\n| **retro-future** | blink 1000ms 周期 | step2 / linear | 50ms | CRT 闪烁 — 用 step 模拟显像管 |\n| **organic** | normal 500ms / slow 800ms | spring（1.56 超调） | 140ms | 弹性 — 卡片落下有回弹 |\n| **mobile-native-ios** | normal 350ms | iosSpring | 70ms | Apple HIG spring |\n| **mobile-native-md3** | medium2 300ms | emphasized | 75ms | MD3 完整 12 档 duration + 4 档 emphasized easing |\n| **mobile-native-harmony** | normal 300ms | fluid | 80ms | 鸿蒙流畅感（比 iOS 偏快） |\n\n**反差选 motion 的命题**：\n- 静态 vs 闪烁 vs 弹性：bold-minimal × retro-future × organic\n- 克制 vs 严谨 vs 灵动：brutalist × md3 × harmony\n\n详细 motion token JSON 见 [`<slug>.json`](.) 的 `motion` 字段；导出到 CSS / Tailwind / Figma 见 [`exporters/`](exporters/)。\n\n## design-director 集成点\n\ndirector 需要挑 3 流派对比时，对每个候选：\n1. 读 [`<slug>.json`](.) 拿 color / typography / spacing / radius\n2. 看 redLineWaiver（避免误判违规）\n3. 用 `examples/<dir>/index.html` 作 Junior pass 起手（不用空白起步）\n4. 截 3 张图喂给五维矩阵打分\n\n详细接力流程见 [`../references/multi-genre-compare.md`](../references/multi-genre-compare.md)。\n\nFile v4.7.0:tokens/_schema.md\n\n# tokens.json Schema · v4.0\n\n> 每个流派一份 `<slug>.json`，扁平 1 层结构便于 jq 转换。\n\n## 字段约定\n\n```jsonc\n{\n  \"name\": \"bold-minimal\",                     // 必须等于文件名（无 .json）\n  \"displayName\": \"BOLD-MINIMAL · 勇敢极简\",   // SKILL.md §三 流派表对应名\n  \"version\": \"1.0.0\",                         // 流派 token 自身版本\n  \"color\":    { \"<token>\": \"oklch(...)\" },   // oklch 首选\n  \"colorHex\": { \"<token>\": \"#hex\" },         // 1:1 对应 color，给不支持 oklch 环境\n  \"typography\": {\n    \"display\": \"<Family> <Weight> [italic]\",\n    \"body\":    \"<Family> <Weight>\"\n  },\n  \"spacing\": { \"xs\": 4, \"sm\": 8, ..., \"2xl\": 128 },   // 单位 px；小程序按 rpx ×2 换算\n  \"radius\":  { \"none\": 0, \"sm\": 2, ..., \"pill\": 999 },\n  \"shadow\":  { \"subtle\": \"...\", \"card\": \"...\", \"modal\": \"...\" },\n  \"examplePath\": \"../examples/<dir>/index.html\",     // 对应 starter 文件\n  \"redLineWaiver\": [\"...\"],                           // 可选；说明本流派对哪条红线有合规豁免\n  \"motion\": {                                         // ⭐v4.5 动效 tokens\n    \"duration\": { \"fast\": 200, \"normal\": 300, ... },  // 单位 ms\n    \"easing\":   { \"<name>\": \"cubic-bezier(...) | linear | steps(...)\" },\n    \"stagger\":  { \"tight\"|\"normal\"|\"loose\": 50|80|120 },  // 列表级联出场延迟（ms）\n    \"philosophy\": \"<一句话流派动效原则>\"\n  }\n}\n```\n\n## 硬约束\n\n- `color` 与 `colorHex` 必须**键名 1:1 对应**（同 key、同顺序）\n- `color` 必填 oklch；颜色硬规则见 [`../references/colors.md`](../references/colors.md)\n- `typography` 字体不能命中红线 #1（Inter / Roboto / Arial / system-ui）；**小程序场景豁免**（PingFang SC 等中文字体允许）\n- 任何字段缺失 → 视作\"沿用 colors.md / typography.md 中通用约束\"\n- **不要嵌套**对象（如 `color.brand.primary`）— 保持扁平 1 层，jq 一行能转\n\n## 导出器\n\n- [`exporters/to-css-vars.md`](exporters/to-css-vars.md) — jq → CSS variables\n- [`exporters/to-tailwind.md`](exporters/to-tailwind.md) — jq → tailwind.config.js extend\n- [`exporters/to-figma.md`](exporters/to-figma.md) — Tokens Studio v2 兼容格式\n\n所有导出器**只返回 jq / shell 命令给用户执行**，不在 skill 内部 spawn（延续 enhance \"禁 child_process\" 铁律）。\n\nArchive v4.6.0: 54 files, 83654 bytes\n\nFiles: _meta.json (149b), examples/bold-minimal/index.html (3795b), examples/brutalist/index.html (3856b), examples/editorial/index.html (4646b), examples/mini-program/alipay/app.js (116b), examples/mini-program/alipay/app.json (479b), examples/mini-program/alipay/mini.project.json (178b), examples/mini-program/alipay/pages/index/index.js (771b), examples/mini-program/alipay/pages/index/index.json (74b), examples/mini-program/douyin/app.js (109b), examples/mini-program/douyin/app.json (541b), examples/mini-program/douyin/pages/index/index.js (771b), examples/mini-program/douyin/pages/index/index.json (79b), examples/mini-program/douyin/project.config.json (333b), examples/mini-program/kuaishou/app.css (373b), examples/mini-program/kuaishou/app.js (109b), examples/mini-program/kuaishou/app.json (541b), examples/mini-program/kuaishou/pages/index/index.css (2535b), examples/mini-program/kuaishou/pages/index/index.js (771b), examples/mini-program/kuaishou/pages/index/index.json (79b), examples/mini-program/kuaishou/project.config.json (335b), examples/mini-program/README.md (5168b), examples/mini-program/wechat/app.js (109b), examples/mini-program/wechat/app.json (595b), examples/mini-program/wechat/pages/index/index.js (771b), examples/mini-program/wechat/pages/index/index.json (59b), examples/mini-program/wechat/project.config.json (406b), examples/mini-program/wechat/sitemap.json (181b), examples/mobile-native/harmony/index.html (8676b), examples/mobile-native/ios/index.html (8593b), examples/mobile-native/md3/index.html (8631b), examples/organic/index.html (4232b), examples/retro-future/index.html (3906b), references/a11y-checklist.md (7338b), references/colors.md (5019b), references/inspirations.md (6222b), references/multi-genre-compare.md (5789b), references/self-verify.md (6953b), references/typography.md (4031b), skill-card.md (2709b), SKILL.md (33511b), tokens/_compare-matrix.md (4357b), tokens/_schema.md (2355b), tokens/bold-minimal.json (1193b), tokens/brutalist.json (1171b), tokens/editorial.json (1275b), tokens/exporters/to-css-vars.md (3142b), tokens/exporters/to-figma.md (3065b), tokens/exporters/to-tailwind.md (4712b), tokens/mobile-native-harmony.json (1648b), tokens/mobile-native-ios.json (1524b), tokens/mobile-native-md3.json (2458b), tokens/organic.json (1488b), tokens/retro-future.json (1428b)\n\nFile v4.6.0:SKILL.md\n\n---\nname: huo15-openclaw-frontend-design\ndisplayName: 火一五前端设计技能\ndescription: 高保真 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、缓动函数。\nversion: 4.6.0\naliases:\n  - 火一五前端设计技能\n  - 火一五Web设计技能\n  - 火一五APP设计技能\n  - 火一五移动端设计技能\n  - 火一五H5设计技能\n  - 火一五小程序设计技能\n  - 火一五抖音小程序技能\n  - 火一五快手小程序技能\n  - 火一五无障碍审计技能\n  - 火一五动效技能\n  - 火一五设计系统技能\n  - 火一五落地页技能\n  - 火一五UI设计技能\n  - 火一五海报设计技能\n  - 火一五前端设计\n  - 前端设计\n  - UI 设计\n  - 页面设计\n  - HTML 原型\n  - 落地页设计\n  - 海报设计\n  - Web 设计\n  - APP 设计\n  - 移动端设计\n  - H5 设计\n  - 小程序设计\n  - 微信小程序\n  - 支付宝小程序\n  - 抖音小程序\n  - 快手小程序\n  - 无障碍\n  - a11y\n  - WCAG\n  - 动效\n  - motion tokens\n  - 动画 tokens\n  - design tokens\n  - 设计 tokens\n  - 设计系统\n---\n\n# 火一五前端设计技能 v4.6\n\n> 高保真 Web UI + 移动端 / APP / H5 + 微信 / 支付宝 / 抖音 / 快手 四端小程序 + design tokens（含 motion）系统化 + 多流派并行对比 + WCAG 2.2 AA 无障碍审计 + 动效 tokens + Tailwind v4 `@theme` 适配 原型生成 — 青岛火一五信息科技有限公司\n> 设计理念对标 Anthropic `frontend-design` skill 与 2026 社区共识，本土化改写、不拷贝官方内容\n> v2.0 起：5 流派 starter HTML（`examples/`）+ 配色 / 字体 / 灵感三件套（`references/`）+ 反 AI Slop 红线扩到 11 条\n> v2.1 起：第 6 流派 `MOBILE-NATIVE`（iOS HIG / Material Design 3 / HarmonyOS 三套 starter）+ 移动端红线 2 条（共 13 条）+ 触发词覆盖 APP / H5 / 移动端\n> v2.2 起：微信小程序 + 支付宝小程序 starter（归 MOBILE-NATIVE 子集）+ 小程序红线 2 条（共 15 条）+ 字体豁免说明 + 触发词覆盖 wxml / axml\n> v3.0 起：自验证工作流升级 — Claude in Chrome MCP 优先，Playwright CLI / 微信开发者工具 / 支付宝 IDE 三路线 fallback；新增 [`references/self-verify.md`](references/self-verify.md) 操作手册\n> v4.0 起：design tokens 系统化 — 8 个流派统一 [`tokens/<slug>.json`](tokens/) 扁平 schema（color / colorHex / typography / spacing / radius / shadow），三导出器 jq 一行转 CSS variables / Tailwind config / Figma Tokens Studio\n> 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 速查）\n> 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 升级三端同步迭代姿势 + 真机扫码必查清单\n> 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 升级四端同步迭代姿势（微信 → 抖音 → 快手 → 支付宝）+ 顶部胶囊形态四端对照\n> 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\n> v4.5 起：动效 tokens — 8 流派 [`tokens/<slug>.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 哲学速查表\n> **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\n\n---\n\n## 一、触发场景\n\n当用户要构建以下任一，触发本技能：\n\n- 网站 / 落地页 / 官网 / 仪表盘\n- React / Vue / HTML / Svelte 组件\n- 营销海报 / 产品详情页 / 信息图\n- **移动 H5 落地页 / APP 风格原型**（iOS / 安卓 / 鸿蒙 风格 H5，对应 §三 第 6 流派 MOBILE-NATIVE）\n- **微信 / 支付宝 / 抖音 / 快手小程序原型** ⭐v2.2 起，v4.3 补齐四端（归 MOBILE-NATIVE 子集，见 `examples/mini-program/`）\n- 任何\"美化页面 / 优化 UI\"类请求\n\n**不触发**（归其他技能）：\n\n- PPT 演示稿 → `huo15-openclaw-ppt`\n- Word / PDF 文档 → `huo15-openclaw-office-doc`\n- 纯数据分析图表 → 常规 matplotlib / echarts 即可\n\n**产出**：可直接运行的 HTML/CSS/JS（或 React/Vue）代码 + 3 行设计说明 + 可选截图验证命令。\n\n---\n\n## 二、设计思考（动手前必答四问）\n\n| 维度 | 要回答 |\n|------|--------|\n| 目的 | 这个界面解决什么问题？谁是使用者？ |\n| 基调 | 选一个**极端**方向（见 §三） |\n| 约束 | 技术栈 / 性能 / 可访问性 / 目标设备 |\n| 差异点 | 用户会记住**哪一件**事？ |\n\n**硬规则**：**承诺一个极端方向**。极简和极繁同样有效，关键是意图明确，**不要骑墙**。\n\n---\n\n## 三、六大美学流派（必选其一）\n\n| 流派 | 关键特征 | 适合场景 | 参考 |\n|------|---------|---------|------|\n| **BOLD-MINIMAL** 勇敢极简 | 大字号、大留白、2 色系、无装饰 | 科技产品、B 端 SaaS、个人作品集 | Stripe / Linear / Apple |\n| **EDITORIAL** 编辑杂志 | 衬线字、纵向栅格、引号装饰、杂志版式 | 品牌故事、深度内容、报告 | NYT Style / The Verge |\n| **BRUTALIST** 野兽派 | 等宽字、粗黑线、打破网格、刻意粗糙 | 独立工作室、Web3、先锋作品 | Bloomberg / early craigslist |\n| **RETRO-FUTURE** 复古未来 | 像素字、CRT 光晕、80s 霓虹配色 | 游戏、音乐、娱乐 | Vaporwave / Cyberpunk 2077 |\n| **ORGANIC** 有机自然 | 手绘感、暖色、不规则形状、柔边 | 食品、母婴、健康 | Medium 早期 / Notion |\n| **MOBILE-NATIVE** 移动原生 ⭐v2.1 | 遵循平台规范的移动设计：iOS HIG / Material Design 3 / HarmonyOS | APP 原型、H5 落地页、移动 webview | Apple HIG / m3.material.io / 鸿蒙设计指南 |\n\n**如果用户没给方向 ⭐v4.1 升级**：走多流派并行对比流程，详见 [`references/multi-genre-compare.md`](references/multi-genre-compare.md)。\n- **首选**：让 `huo15-openclaw-design-director` 选 3 流派（它有 20 条设计哲学 + 五维矩阵）\n- **次选**：从 [`tokens/_compare-matrix.md`](tokens/_compare-matrix.md) §反差对位选一组（理性/感性/实验、冷峻/温暖/复古、桌面/移动/跨端等）\n- 3 个 Junior pass **必须并行**（用 Explore subagent 隔离 context，不要串行）\n- 截图后由 director 打分推荐 / design-critique 5 维评分 / 用户人眼挑，三选一\n- 用户敲定 → 删掉其他草稿 → 单流派走阶段 3 Full Pass\n\n**MOBILE-NATIVE 的三选一**：用户说\"做 APP / 做 H5\"时，先问目标平台 — iOS（用 `examples/mobile-native/ios/`）/ Android（用 `examples/mobile-native/md3/`）/ HarmonyOS（用 `examples/mobile-native/harmony/`）。多平台需求 → 三套 starter 都给，但产出文件夹分开。\n\n**小程序场景** ⭐v2.2 起，v4.3 补齐四端：归 MOBILE-NATIVE 子集，**不另立第 7 流派**（避免膨胀）。\n- 微信小程序：`examples/mini-program/wechat/`（wxml + wxss + JSON 配置三件套）\n- 支付宝小程序：`examples/mini-program/alipay/`（axml + acss + 配置）\n- 抖音小程序 ⭐v4.2：`examples/mini-program/douyin/`（ttml + ttss + 配置）\n- 快手小程序 ⭐v4.3：`examples/mini-program/kuaishou/`（ksml + 标准 css 后缀 + 配置）\n- **四端同步迭代姿势**：先做微信 → 复制到抖音改 `wx:` → `tt:` → 复制到快手改 `wx:` → `ks:`（两者最相近，各 3 分钟）→ 复制到支付宝改 `wx:` → `a:` / `bindtap` → `onTap`（差异最大，5 分钟）。完整对照表见 [`examples/mini-program/README.md`](examples/mini-program/README.md)。\n\n---\n\n## 四、反 AI Slop 硬红线（违反任一直接判废）\n\n| # | 禁用项 | 为什么 |\n|---|--------|--------|\n| 1 | 默认 **Inter / Roboto / Arial / system-ui** 字体 | 字体即性格，系统字 = 没性格 |\n| 2 | **紫色渐变**（尤其紫色渐变打白底） | 2023 以来 AI 最滥用的视觉陈词滥调 |\n| 3 | **emoji 当图标** | 必须用 Lucide / Phosphor / Tabler / Heroicons 真图标 |\n| 4 | **圆角卡片 + 左侧彩色竖条** | Tailwind 默认范式，设计师都看腻了 |\n| 5 | **CSS 画的伪产品图** | 真产品图用 Unsplash/Picsum 占位，明确标注\"待替换\" |\n| 6 | **默认暗黑 `#121212` + 紫色主题** | 懒，且和 #2 联动犯错 |\n| 7 | **Hero + Features + CTA + Footer** 千篇一律骨架 | 按内容定制结构，不要模板化 |\n| 8 | 全部用 `#007AFF` / `#FF3B30` 这类 iOS 系统色 | 没有记忆点 |\n| 9 | **全局统一 16px / 12px `border-radius`** | Tailwind / shadcn 默认值，工业感 = 没设计 |\n| 10 | 滥用 **`backdrop-blur` 玻璃形态**（每个卡片都磨砂） | 2024 后期开始烂大街，掩盖排版无能 |\n| 11 | **AI 生成的渐变模糊背景**（紫粉 / 蓝青大色块 blur） | 与红线 #2 联动，是 AI Slop 最强信号 |\n| 12 ⭐v2.1 | 移动端**直接套 UI 库默认皮**（Vant / Ant Mobile / NutUI 不改 token） | 没有 brand identity = 没有产品 |\n| 13 ⭐v2.1 | 移动端**缺 `viewport-fit=cover` + `safe-area-inset`**（刘海 / Home indicator 被遮） | 客户拿真机一看就崩，硬 a11y 红线 |\n| 14 ⭐v2.2 / v4.2 / v4.3 扩展 | 小程序**直接套 WeUI / Vant Weapp / TDesign-Mini / Lin-UI / TTUI / Tt-Mini-UI / KSUI / kuaishou-uikit 默认皮**（不改 token） | 四端 1 千个 demo 长一个样，没产品识别 |\n| 15 ⭐v2.2 | 小程序**缺 `<page-meta>` + `safe-area-inset` + `rpx` 适配** | 真机一看顶部胶囊 / 底部 home indicator 重叠，硬适配红线 |\n\n**小程序字体豁免说明** ⭐v2.2：小程序平台**不允许 `@font-face` 加载 web font**（出于性能与审核），无法套用红线 #1 推荐字体（Manrope / DM Sans / IBM Plex Sans）。小程序 wxss / acss 中 `font-family` 优先序：\n1. **PingFang SC**（iOS / 微信）\n2. **Source Han Sans CN** / **思源黑体**（Android / 支付宝端）\n3. **Noto Sans SC** fallback\n4. **禁** `-apple-system, BlinkMacSystemFont` 写法（红线 #1 仍生效，且这些 fallback 链在小程序里其实也只走系统中文字体）\n\n数字 / 英文如需差异化字体，可用 wxss 内联 base64 字体子集（仅 0–9 + A–Z），或干脆**全部用 PingFang SC** 数字部分，靠**字号 / 字重**做区分。\n\n---\n\n## 五、美学要素清单（每项都要想过）\n\n### 5.1 字体 Typography\n- 主字（display）选有性格的：Playfair Display / IBM Plex Serif / Space Mono / Noto Serif SC / DM Serif / Rubik Mono One\n- 副字（body）选考究的：IBM Plex Sans / Source Serif / 思源宋体 / Noto Sans SC\n- **主副反差要大**，避免同字族\n\n### 5.2 颜色 Color\n- 主色 + 锐利强调色，CSS variables 统一管理\n- 优先 **oklch** 色空间（感知均匀，避免灰调）\n- 主色占 60-70%，强调色 5-10%，中性 20-30%\n- 不要 evenly-distributed palette\n\n### 5.3 动效 Motion\n- **页面加载的 staggered reveal > 散落的微交互**\n- `animation-delay` 做级联出场\n- CSS 优先，React 用 Motion（framer-motion）\n- 一个高质量的动效 > 十个微交互\n\n### 5.4 空间 Spatial Composition\n- 不对称 / 重叠 / 对角线 / 打破网格\n- 留白充足 **或** 密集信息，二选一\n- 避免居中对齐一统到底\n\n### 5.5 氛围 Backgrounds & Texture\n- 渐变网格 / 噪点 / 几何图案 / 戏剧阴影\n- 装饰性边框 / 自定义光标 / grain overlay\n- 不要纯色底（除非极简流派明确需要）\n\n### 5.6 Design Tokens ⭐v4.0 / v4.5 加 motion\n- 每个流派一份 [`tokens/<slug>.json`](tokens/)，扁平 1 层 schema：`color` / `colorHex` / `typography` / `spacing` / `radius` / `shadow` / **`motion` ⭐v4.5** / `examplePath` / `redLineWaiver?`\n- **8 个流派**：`bold-minimal` / `editorial` / `brutalist` / `retro-future` / `organic` / `mobile-native-ios` / `mobile-native-md3` / `mobile-native-harmony`\n- **三个导出器**（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)\n- **使用流程**：先在 §六 阶段 3.5 选定流派 → 跑 jq 命令出 CSS vars / Tailwind config → Junior Pass starter HTML 直接 `var(--color-xxx)` / `var(--duration-fast)` 引用\n- schema 详细见 [`tokens/_schema.md`](tokens/_schema.md)；横向对比见 [`tokens/_compare-matrix.md`](tokens/_compare-matrix.md)（含 v4.5 motion 哲学速查）\n\n### 5.7 Motion Tokens ⭐v4.5（动效原则）\n动效不是装饰，是**时间维度的版式**。每个流派的动效原则与该流派静态视觉一致：\n- **bold-minimal / editorial**：克制 / 稳重 — 单一 easing、决不弹跳\n- **brutalist / retro-future**：硬切 / CRT 闪烁 — linear / step easing，禁缓动函数\n- **organic**：弹性 — spring 1.56 超调，模拟手作回落\n- **mobile-native iOS / MD3 / Harmony**：照搬平台 spec（iOS spring / MD3 12 档 emphasized / 鸿蒙 fluid）\n\n**实现**：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)) }`。\n\n**禁忌**（继承 §四 红线）：\n- 禁滥用 motion（每个元素都 hover scale → 头晕）\n- 禁 `transition: all` —— 总是显式列 properties\n- 禁忽略 `prefers-reduced-motion: reduce` —— 媒体查询关掉 stagger / spring\n\n---\n\n## 六、工作流（Junior → Full 两趟渲染）\n\n### 阶段 1 · 理解（Understand）\n- 复述需求 / 目的 / 受众\n- 确认基调和流派\n- 列出硬约束（技术栈、浏览器兼容、a11y）\n- **多流派模式判断 ⭐v4.1**：用户没给明确流派 + 触发词命中\"几个方向 / 三个风格 / 帮我选\" → 走 [`references/multi-genre-compare.md`](references/multi-genre-compare.md) 流程；否则进单流派 Junior pass\n\n### 阶段 2 · Junior Pass（假设占位，快速出骨架）\n- **从 `examples/<流派>/index.html` 起手**，复制到目标文件再改 — 不要从空白起步\n- 同时打开 `references/colors.md` 和 `references/typography.md` 锁配色 / 字体\n- 用占位文案（Lorem Ipsum 或真实类似文案）+ 占位图片（Picsum/Unsplash 链接）\n- 跑通**结构、栅格、主要交互**\n- **诚实标注**每一块占位（`<!-- TODO: 真实文案 -->`）\n- 让用户看到方向再继续\n\n### 阶段 3 · Full Pass（补内容、调细节）\n- 补真实文案（问用户要 或 用 `huo15-openclaw-brand-protocol` 抓品牌资源）\n- 替换真实图片（需要下载时返回 CLI 命令，不用 child_process）\n- 微调字号、行高、字距、间距、阴影层级\n- 加动效\n\n### 阶段 3.5 · Tokens 导出（可选）⭐v4.0\n当用户要把设计落地到既有项目（已有 Tailwind / 已有 Figma 设计系统 / 多产品复用）：\n- 选定流派 → 找到对应 [`tokens/<slug>.json`](tokens/)\n- 跑 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)）\n- 转换产物建议落到 `<用户项目>/generated/tokens/` 入仓\n- **不强制**：纯一次性 H5 / 海报场景跳过本阶段，直接用 `examples/` 起手即可\n\n### 阶段 4 · 自验证（Self-Verify）⭐v3.0 工作流升级\n\n**优先路线**：**Claude in Chrome MCP**，由 Claude 直接驱动浏览器渲染并截图，不需要让用户跑命令。\n- `mcp__Claude_in_Chrome__list_connected_browsers` → 检查浏览器连接\n- `mcp__Claude_in_Chrome__navigate` → 打开 `file://` 或 URL\n- `mcp__Claude_in_Chrome__computer({action:\"screenshot\", save_to_disk:true})` → 截图\n- `mcp__Claude_in_Chrome__read_console_messages` → 抓 oklch fallback / 字体 404 / JS 报错\n- 移动端用 `resize_window` 切到设备 viewport（393×852 / 412×915 / 396×858）\n\n**Fallback 顺序**（按场景降级）：\n1. **MCP 不可用**（`list_connected_browsers` 返 `[]`）→ Playwright CLI（return-cliCmd 让用户执行，延续禁 child_process 铁律）：\n   ```bash\n   # 桌面端\n   npx playwright-core screenshot <URL 或 file:///绝对路径> ~/verify.png --viewport-size=1440,900\n   # 移动端（MOBILE-NATIVE 流派必跑）\n   npx playwright-core screenshot <URL> ~/verify-iphone.png --viewport-size=393,852\n   npx playwright-core screenshot <URL> ~/verify-android.png --viewport-size=412,915\n   ```\n2. **微信小程序场景** → 微信开发者工具打开 `examples/mini-program/wechat/`，编译预览 / 真机调试扫码\n3. **支付宝小程序场景** → 支付宝小程序 IDE 打开 `examples/mini-program/alipay/`，预览扫码\n4. **抖音小程序场景 ⭐v4.2** → 抖音开发者工具打开 `examples/mini-program/douyin/`，编译预览 / 扫码用抖音 App 看真机\n5. **快手小程序场景 ⭐v4.3** → 快手小程序开发者工具打开 `examples/mini-program/kuaishou/`，编译预览 / 扫码用快手 App 看真机\n\n**完整决策树 + 命令清单 + 兼容性矩阵** 见 [`references/self-verify.md`](references/self-verify.md)（v3.0 新增手册）。\n\n**评审接力**：截图回收后由用户人眼审，或调 `huo15-openclaw-design-critique` 5 维打分。MOBILE-NATIVE 流派额外检查：safe-area-inset 上下有效、tab-bar 触达高度 ≥ 44pt / 48dp；小程序检查 `<page-meta>` 存在 + tabBar native + rpx 适配。\n\n**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% 视为可发布。\n\n### 阶段 5 · 可选 · 评审（Review）\n调用 `huo15-openclaw-design-critique` 做 5 维评分 + Keep/Fix/Quick Wins。\n\n---\n\n## 七、产出清单（每次交付必含）\n\n1. **代码文件**（`index.html` / `App.tsx` / `page.vue`），可直接运行\n2. **3 行设计说明**：\n   - 流派（从 §三 五选一）\n   - 关键设计选择（字体 / 主色 / 动效三选一突出）\n   - 差异点（用户会记住什么）\n3. **（可选）截图验证 CLI 命令**\n4. **（可选）已知限制**（占位图未替换 / 未测移动端等）\n\n---\n\n## 八、与其他 huo15 技能的分工\n\n| 能力 | 归属技能 |\n|------|---------|\n| Web UI / HTML 原型 / 落地页 | **本技能** |\n| 设计方向选择（多流派对比） | `huo15-openclaw-design-director` |\n| 品牌规范抓取 + brand-spec | `huo15-openclaw-brand-protocol` |\n| 设计评审 5 维打分 | `huo15-openclaw-design-critique` |\n| PPT 演示稿 | `huo15-openclaw-ppt` |\n| Word / PDF 文档 | `huo15-openclaw-office-doc` |\n\n---\n\n## 九、触发词\n\n**Web 端**\n- 做网站 / 做落地页 / 做官网 / 做仪表盘\n- 做组件 / 做 React 组件 / 做 Vue 组件\n- HTML 原型 / 页面原型 / 前端原型\n- 美化页面 / 优化 UI / 前端设计 / Web 设计\n- 做海报 / 做详情页 / 做信息图 / 产品页\n\n**移动端 ⭐v2.1**\n- 做 APP / 做 APP 原型 / 做 APP 落地页 / 做 APP UI\n- 做 H5 / 做移动 H5 / 做移动落地页\n- iOS 风格 / iOS HIG / iPhone 设计\n- 安卓 / Android / Material Design / MD3 / 安卓风格\n- 鸿蒙 / HarmonyOS / 鸿蒙设计\n\n**小程序 ⭐v2.2 起，v4.3 补齐四端**\n- 做小程序 / 做微信小程序 / 做支付宝小程序 / 做抖音小程序 / 做快手小程序\n- 小程序原型 / 小程序落地页 / 小程序首页\n- wxml / wxss / 微信小程序设计\n- axml / acss / 支付宝小程序设计\n- ttml / ttss / 抖音小程序设计 ⭐v4.2\n- ksml / 快手小程序设计 ⭐v4.3\n- 四端小程序 / 多端同步\n\n**Design Tokens ⭐v4.0**\n- design tokens / 设计 tokens / 设计 token / token 导出\n- 做设计系统 / 设计系统 / design system\n- Tailwind 配色 / Tailwind 主题 / 流派 token\n- Figma tokens / Tokens Studio / Figma 主题\n- jq 转 CSS variables / 多产品共享主题\n\n**多流派对比 ⭐v4.1**\n- 几个方向对比 / 三个风格对比 / 多流派对比\n- 帮我选方向 / 帮我选流派 / 你定方向\n- design direction / 设计方向 / 风格提案 / 方向选型\n- 三套 Junior pass / 三方向草稿\n- 五维矩阵 / 流派打分\n\n**无障碍审计 ⭐v4.4**\n- 无障碍 / a11y / WCAG / WCAG 2.2\n- accessibility / 无障碍审计 / 无障碍合规\n- Lighthouse / axe-core / axe 审计\n- 屏幕阅读器 / 键盘可操作 / 焦点环\n- 对比度 / 触达目标 / alt 文本 / 色盲\n\n**动效 / Motion Tokens ⭐v4.5**\n- 做动效 / 加动效 / 动画 / motion / animation\n- motion tokens / 动效 token / 动画 token\n- duration / easing / 缓动函数 / cubic-bezier\n- spring / 弹簧动效 / staggered / 级联出场\n- prefers-reduced-motion / 减少动效 / 无障碍动效\n\n---\n\n## 十、版本历史\n\n- **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 现代化适配。\n- **v4.5.0（2026-04-27）**：动效 tokens。8 个 [`tokens/<slug>.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 化升级。\n- **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 / 多流派对比均不变**，纯无障碍审计能力补齐。\n- **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 / 多流派对比均不变**，纯第四端补齐。\n- **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 / 多流派对比均不变**，纯第三端补齐。\n- **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 已就位）。\n- **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 路径指引。**红线 / 流派 / 自验证工作流均不变**，纯设计系统化升级。\n- **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 条路线命令清单 + 三路线兼容性矩阵 + 移动端检查清单 + 设计原则提醒）。**红线 / 流派 / 触发词均不变**，纯工作流升级。\n- **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` 补小程序章节。\n- **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 章节。\n- **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/` 占位目录。\n- **v1.0.0（2026-04-23）**：初始版本。对齐 Anthropic `frontend-design` 核心理念（BOLD 美学方向 + 反 AI slop），本土化中文改写，加入 5 流派选择、8 条硬红线、Junior/Full 两趟渲染工作流、Playwright 自验证 CLI、与火一五其他技能的分工边界。\n\n---\n\n**技术支持：** 青岛火一五信息科技有限公司\n\nFile v4.6.0:examples/mini-program/README.md\n\n# 小程序 Starter — 火一五前端设计技能 v4.3\n\n> 微信 + 支付宝 + 抖音 + 快手 **四端** starter。**浏览器无法直接渲染** wxml / axml / ttml / ksml，必须用各家 IDE。\n\n## 微信小程序\n\n1. 下载并安装 [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)（Stable v1.06+）\n2. 打开工具 → **项目 → 导入项目** → 目录选 `wechat/`\n3. AppID 选\"测试号\"或填自有；项目名留空走默认\n4. 点**编译**：左侧模拟器看渲染；点**真机调试**扫码看真机\n5. 页面走 `pages/index/index`，全局配置 `app.json`\n\n## 支付宝小程序\n\n1. 下载并安装 [支付宝小程序 IDE](https://opendocs.alipay.com/mini/ide/download)\n2. 打开 IDE → **文件 → 打开项目** → 目录选 `alipay/`\n3. 点**预览**，扫码用支付宝 App 看真机\n4. 配置文件名是 `mini.project.json`（不是 `project.config.json`），别搞混\n\n## 抖音小程序\n\n1. 下载并安装 [抖音开发者工具](https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/developer-instrument/installation/developer-instrument-update-and-download)\n2. 打开工具 → **项目 → 导入项目** → 目录选 `douyin/`\n3. AppID 用\"测试号\"或填自有\n4. 点**编译预览**，扫码用抖音 App 看真机\n5. 模板后缀是 `.ttml` / `.ttss`（与微信 `.wxml` / `.wxss` 95% 同源，仅前缀差异）\n\n## 快手小程序 ⭐v4.3\n\n1. 下载并安装 [快手小程序开发者工具](https://mp.kuaishou.com/docs/develop/developerTools/downloadPath.html)\n2. 打开工具 → **项目 → 导入项目** → 目录选 `kuaishou/`\n3. AppID 用\"测试号\"或填自有\n4. 点**编译预览**，扫码用快手 App 看真机\n5. 模板后缀是 `.ksml` / 样式 `.css`（标准 CSS 后缀，区别于其他端）\n\n## 四端同步迭代姿势 ⭐v4.3 升级\n\n**推荐顺序**：微信 → 抖音 → 快手（最相近）→ 支付宝（差异最大）\n\n### 步骤 1：先在 `wechat/` 改完\n\n`wxml` + `wxss` + 配置全部跑通。开发体验在微信端最顺。\n\n### 步骤 2：复制到 `douyin/` 改前缀（机械替换，3 分钟）\n\n| 微信 | 抖音 |\n|---|---|\n| `wx:for` / `wx:key` / `wx:if` | `tt:for` / `tt:key` / `tt:if` |\n| `wxml` 文件名 | `ttml` |\n| `wxss` 文件名 | `ttss` |\n| `bindtap` / `bindinput` | **保留**（兼容微信 bind 风格） |\n\n### 步骤 3：复制到 `kuaishou/` 改前缀（机械替换，3 分钟）\n\n| 微信 | 快手 |\n|---|---|\n| `wx:for` / `wx:key` / `wx:if` | `ks:for` / `ks:key` / `ks:if` |\n| `wxml` 文件名 | `ksml` |\n| `wxss` 文件名 | `css`（注意：快手用标准 CSS 后缀） |\n| `bindtap` / `bindinput` | **保留** |\n\n### 步骤 4：复制到 `alipay/` 改前缀（机械替换，5 分钟）\n\n| 微信 | 支付宝 |\n|---|---|\n| `wx:for` / `wx:key` / `wx:if` | `a:for` / `a:key` / `a:if` |\n| `bindtap` / `bindinput` / `bindsubmit` | `onTap` / `onInput` / `onSubmit` |\n| `wxml` 文件名 | `axml` |\n| `wxss` 文件名 | `acss` |\n| `<page-meta>` | **不支持**，改 `my.setNavigationBar` API（写在 onLoad） |\n| `enhanced=\"true\"` 等微信特有属性 | 删掉 |\n| `app.json` tabBar `color`/`text` | `textColor`/`name` |\n\n### 步骤 5：四端 ICON / 图片资源建议放 CDN（本地用 base64 或纯色块占位）\n\n## 反 AI Slop 红线（v4.3 扩展 UI 库列表）\n\n| # | 禁用项 | 替代方案 |\n|---|---|---|\n| 14 | 直接套 **WeUI / Vant Weapp / TDesign-Mini / Lin-UI / TTUI / Tt-Mini-UI / KSUI / kuaishou-uikit** 默认皮 | 自定义 token，至少改 5 个变量再用 |\n| 15 | 缺 `<page-meta>` + `safe-area-inset` + `rpx` 适配 | 见本目录 `wechat/pages/index/index.wxml` |\n\n通用红线 #1 字体豁免：小程序里 `font-family` 优先 PingFang SC / Source Han Sans SC / Noto Sans SC（不能加载 Web Font）。\n\n## 视觉风格\n\n四端 starter 共用 ORGANIC 流派暖色调（米白 + 土橙 + 暖卡片），主题\"手作商品列表\"。`hero` + `chips` + 商品 `grid` 三段式，避开千篇一律的\"banner + features + cta\"。\n\n## 引用关系\n\n- 配色逻辑参考 [`references/colors.md`](../../references/colors.md) §5 ORGANIC（用 hex 表达 oklch 等价值，因小程序基础库 < 3.0 不一定支持 oklch）\n- 字体策略参考 [`references/typography.md`](../../references/typography.md) §6 + 小程序豁免说明（见 SKILL.md §四 v2.2 新增段）\n- 多端同步迭代速查见本文 §四端同步迭代姿势\n\n## 四端真机扫码后必查清单\n\n- [ ] 顶部胶囊（四端形态略有不同：微信圆角 / 支付宝椭圆 / 抖音矩形 / 快手矩形）不遮内容\n- [ ] 底部 home indicator 不遮 tabBar / 内容\n- [ ] 横屏 / 竖屏切换不崩\n- [ ] 字号在小屏（375rpx）/ 大屏（414rpx+）都不溢出\n- [ ] tabBar 用平台 native（不要自绘 view 拼接）\n\n## 何时该用编译框架\n\n如果同时维护 4 端，且产品复杂度 > 10 个页面，建议直接上 [Taro](https://taro-docs.jd.com/) 或 [Uni-app](https://uniapp.dcloud.net.cn/) — 写一份代码自动编译四端。本 skill 提供的 4 个 starter 是给\"原生开发 + 设计样板参考\"用的，不是 SaaS 级框架。\n\nFile v4.6.0:_meta.json\n\n{\n  \"ownerId\": \"kn7byevkn40d6z4p7ghdb097z983tj33\",\n  \"slug\": \"huo15-openclaw-frontend-design\",\n  \"version\": \"4.6.0\",\n  \"publishedAt\": 1777266855077\n}\n\nFile v4.6.0:references/a11y-checklist.md\n\n# a11y / WCAG 2.2 AA 速查清单 ⭐v4.4\n\n> 30 条速查 + 场景优先级 + 自动检查路线（axe-core / Lighthouse）。本清单**不是**SKILL.md §四\"反 AI Slop 红线\"那种判废级硬规则，而是验证阶段的**门控检查表**：每条标 ✓ 或 ⚠（待修） 或 N/A。\n\n## 1. Perceivable · 可感知（8 条）\n\n| # | 检查点 | 自动可测 | 工具 |\n|---|---|---|---|\n| 1 | 文本对比度 ≥ **4.5:1**（正文）/ **3:1**（大字 18pt+ 或 14pt+ 粗） | ✓ | axe / Lighthouse |\n| 2 | 非文本元素（图标 / UI 控件 / 图表）对比度 ≥ **3:1** | ✓ | axe |\n| 3 | 所有 `<img>` 有 `alt` 属性（装饰图用 `alt=\"\"`） | ✓ | axe / Lighthouse |\n| 4 | 视频有 captions / transcripts（视频内容站） | ✗ | 人审 |\n| 5 | **颜色不是唯一信息载体**（错误状态除颜色外要有图标 / 文字） | ✗ | 人审 |\n| 6 | 自动播放音频 ≤ 3 秒 或 提供暂停 | ✗ | 人审 |\n| 7 | 文本可放大 200% 而不破坏布局（用 rem / em，不全用 px） | ✓ | Lighthouse |\n| 8 | GIF / 视频闪烁频率 < 3 次/秒（防光敏性癫痫） | ✗ | 人审 |\n\n## 2. Operable · 可操作（11 条）\n\n| # | 检查点 | 自动可测 | 工具 |\n|---|---|---|---|\n| 9 | 全部交互**可键盘操作**（Tab / Shift+Tab / Enter / Esc / Space） | ⚠ 部分 | axe + 人审 |\n| 10 | **焦点环可见**（`:focus-visible` 保留浏览器默认或自绘清晰样式） | ✓ | axe |\n| 11 | 没有键盘陷阱（trap） — Tab 进得去也出得来 | ✗ | 人审（Tab 全键过一遍）|\n| 12 | \"Skip to main content\" 链接（首个 Tab 焦点） | ✓ | axe |\n| 13 | 每页有唯一 `<title>` | ✓ | Lighthouse |\n| 14 | heading 层级合理（h1 → h2 → h3 不跳级 / 不重复 h1） | ✓ | axe |\n| 15 | 链接文字描述清晰 — **禁** \"点这里\" / \"查看更多\" 这类无上下文 | ✓ 部分 | axe |\n| 16 ⭐2.2 | 触达目标尺寸 ≥ **24×24px**（按钮 / 链接 / 表单控件） | ✓ | axe + 真机 |\n| 17 ⭐2.2 | 拖拽操作有**键盘 / 单点替代**（slider 可左右键） | ✗ | 人审 |\n| 18 ⭐2.2 | 认证不强制 cognitive test（不让用户记复杂密码 / 解谜） | ✗ | 人审 |\n| 19 ⭐2.2 | 重复表单字段不强制再输入（自动填充 + remember 选项） | ✗ | 人审 |\n\n## 3. Understandable · 可理解（7 条）\n\n| # | 检查点 | 自动可测 | 工具 |\n|---|---|---|---|\n| 20 | `<html lang=\"...\">` 必填（中文 `zh` / `zh-CN`） | ✓ | axe |\n| 21 | 所有表单控件**有 `<label>`** 或 `aria-label` | ✓ | axe |\n| 22 | 错误提示**清晰具体**（不只是\"输入有误\"） | ✗ | 人审 |\n| 23 | 错误**给出纠正建议**（\"邮箱缺少 @\"，不只是\"格式错\"） | ✗ | 人审 |\n| 24 | 表单提交前可**确认 / 撤销**（金额 / 删除等关键操作） | ✗ | 人审 |\n| 25 | 上下文变化（焦点跳转 / 弹窗 / 页面跳转）**用户可预期** | ✗ | 人审 |\n| 26 | 控件文本与功能一致（按钮叫\"提交\"就真的提交） | ✗ | 人审 |\n\n## 4. Robust · 健壮（4 条）\n\n| # | 检查点 | 自动可测 | 工具 |\n|---|---|---|---|\n| 27 | HTML **语义化** — 用 `<nav>` / `<main>` / `<article>` / `<aside>` 而不是全 `<div>` | ✓ | axe |\n| 28 | ARIA 属性正确（`aria-label` / `role` / `aria-expanded` / `aria-current`） | ✓ | axe |\n| 29 | 按钮 / 链接职责正确（提交动作用 `<button>` 不用 `<a href=\"#\">`） | ✓ | axe |\n| 30 | 状态变化通过 `aria-live` region 通知屏幕阅读器 | ⚠ 部分 | axe + 人审 |\n\n---\n\n## 场景优先级速查\n\n不同场景检查重点不同。Junior pass 阶段挑场景 P0 必跑；Full Pass 阶段全跑。\n\n| 场景 | P0 必跑（4-5 条） | P1 应跑 |\n|---|---|---|\n| **B 端 Dashboard** | #9 键盘操作 / #10 焦点环 / #14 heading / #20 lang / #27 语义化 | #1 #2 #21 #28 #30 |\n| **内容站 / 文章** | #1 文本对比 / #3 alt / #14 heading / #15 链接清晰 / #20 lang | #21 #27 |\n| **营销落地页** | #1 / #15 / #21 表单 label / #16 触达 24px | #3 #5 #20 |\n| **移动端 H5（MOBILE-NATIVE）** | #1 / #5 / #16 / #20 / #21 | #2 #7 #9 |\n| **小程序（四端）** | #5 / #16（多数 a11y 由平台 webview 兜底） | #20 #21 |\n\n---\n\n## 自动检查路线（与 [`self-verify.md`](self-verify.md) 联动）\n\n### 路线 A · Claude in Chrome MCP + axe-core（首选 ⭐v4.4）\n\n```\n# 1. 浏览器渲染（已在 self-verify §1.2 完成）\nmcp__Claude_in_Chrome__navigate({ url: \"file:///abs/index.html\", tabId: <id> })\n\n# 2. 注入 axe-core 并执行\nmcp__Claude_in_Chrome__javascript_tool({\n  tabId: <id>,\n  code: `\n    const s = document.createElement('script');\n    s.src = 'https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.10.0/axe.min.js';\n    document.head.appendChild(s);\n    await new Promise(r => s.onload = r);\n    return await axe.run({ runOnly: ['wcag2aa', 'wcag22aa'] });\n  `\n})\n\n# 3. 解析返回的 violations / passes / incomplete，对照本清单标记\n```\n\n### 路线 B · Lighthouse CLI（fallback）\n\n```bash\n# 单次跑（return-cliCmd 让用户执行，禁 child_process）\nnpx lighthouse <URL 或 file://> --only-categories=accessibility --output=html --output-path=./a11y-report.html --chrome-flags=\"--headless\"\n\n# 批量跑（多个 examples 对比）\nfor f in examples/*/index.html; do\n  npx lighthouse \"file://$(pwd)/$f\" --only-categories=accessibility --output=json --output-path=\"./reports/$(dirname $f | tr / _).json\" --chrome-flags=\"--headless\"\ndone\n```\n\n### 路线 C · 人审兜底\n\n#5 / #6 / #8 / #11 / #17 / #18 / #19 / #22 / #23 / #24 / #25 / #26 这些主观 / 需交互的项**机器测不出**。最少跑：\n1. Tab 全键走一遍（验证 #9 #10 #11 #15）\n2. 屏幕阅读器（VoiceOver / NVDA）跟读首页 30 秒（验证 #20 #21 #27 #28 #30）\n3. 色盲模拟（Chrome DevTools → Rendering → Emulate vision deficiencies）\n\n---\n\n## 与流派的关系\n\na11y 与流派**正交** — 任何流派都该过 30 条 WCAG 2.2 AA。但流派会影响 a11y 的\"难易程度\"：\n\n| 流派 | a11y 友好度 | 需特别注意 |\n|---|---|---|\n| BOLD-MINIMAL | 高 | 大字 + 大留白 + 主色对比够，自然过 #1 / #14 |\n| EDITORIAL | 高 | 衬线 + 三栏 + 首字下沉，注意 #14 heading 层级 |\n| BRUTALIST | **中** | 粗黑边对比够，但 6px 边对屏幕阅读器可能干扰 — 加 `aria-hidden` 装饰 |\n| RETRO-FUTURE | **低** | 霓虹色 + CRT 扫描线 → #1 对比度容易掉；VT323 可读性差 → 长文不用；移动端慎选 |\n| ORGANIC | 中 | Caveat 手写体在小字号下可读性差 → ≥ 18px 起 |\n| MOBILE-NATIVE iOS | 高 | HIG 设计本身已考虑 a11y，关注 #16 触达 ≥ 44pt |\n| MOBILE-NATIVE MD3 | 高 | Material 3 默认带 a11y，关注 #1 dynamic color 派生时对比 |\n| MOBILE-NATIVE Harmony | 中 | 灵动色块多色相 → 对比度可能偏弱，每对色都要测 |\n\n---\n\n## 与红线的关系\n\na11y 清单**不是**SKILL.md §四 红线（红线判废、检查清单门控）。但**两者有 1 条交集**：\n\n- **红线 #13 ⭐v2.1**（移动端缺 `viewport-fit=cover` + `safe-area-inset`）= 本清单 **#16 触达** + 平台 a11y 兜底，因为缺 safe-area 会导致 home indicator 遮挡触达区。\n\n如果该 a11y 项是**红线**那种\"违反就废\"级别，会反向促成 SKILL.md §四 红线的扩展（v4.5+ 视情况）。\n\nFile v4.6.0:references/colors.md\n\n# 5 流派配色基线（oklch）\n\n> 全部使用 oklch 色空间。**禁紫渐变、禁 AI 模糊渐变背景**（参见 SKILL.md §四 红线 #2 / #11）。\n>\n> **⭐v4.0 起**：每个流派的配色已落到结构化 [`tokens/<slug>.json`](../tokens/) — 本文档保留可读的人类视角说明，jq 一行可转 CSS variables / Tailwind / Figma。配色硬规则源头仍在本文档。\n\n## 1. BOLD-MINIMAL · 勇敢极简\n\n| 角色 | oklch | 用途 |\n|---|---|---|\n| ink | `oklch(0.18 0 0)` | 主文字、主结构线 |\n| paper | `oklch(0.99 0.005 95)` | 背景，几乎纯白带极淡暖调 |\n| accent | `oklch(0.66 0.20 28)` | 锐利橙红，仅用于强调（hover / em） |\n| mute | `oklch(0.45 0 0)` | 次要文字 |\n\n**比例**：墨黑 20% / 留白 70% / 强调 10%。\n\n## 2. EDITORIAL · 编辑杂志\n\n| 角色 | oklch | 用途 |\n|---|---|---|\n| paper | `oklch(0.97 0.012 75)` | 暖纸色 |\n| ink | `oklch(0.20 0.015 280)` | 偏冷的墨黑 |\n| accent | `oklch(0.50 0.18 25)` | 砖红，首字下沉 / kicker / 引号 |\n| mute | `oklch(0.42 0.02 280)` | 副文字 |\n| rule | `oklch(0.20 0.015 280 / .25)` | 细分隔线 |\n\n**比例**：纸 75% / 墨 18% / 砖红 5% / 灰线 2%。\n\n## 3. BRUTALIST · 野兽派\n\n| 角色 | oklch | 用途 |\n|---|---|---|\n| paper | `oklch(0.985 0 0)` | 近纯白（不做暖偏） |\n| ink | `oklch(0.10 0 0)` | 真黑，6px 粗边 |\n| warn | `oklch(0.78 0.22 105)` | 警示黄，stamp 块 |\n\n**比例**：白 60% / 黑 30% / 警示黄 10%。**只许 3 色**。\n\n## 4. RETRO-FUTURE · 复古未来\n\n| 角色 | oklch | 用途 |\n|---|---|---|\n| bg | `oklch(0.13 0.04 280)` | 深夜紫蓝（注意：纯色，**不是渐变**） |\n| ink | `oklch(0.96 0.04 110)` | 暖白主字 |\n| neon-cyan | `oklch(0.85 0.18 195)` | 霓虹青 |\n| neon-magenta | `oklch(0.72 0.25 5)` | 霓虹洋红（**不是紫**） |\n\n**红线声明**：本流派使用霓虹双色对撞，**不得退化成紫渐变模糊背景**。所有发光必须由 `text-shadow` 多层叠加产生，禁用 `filter: blur()` 大色块当氛围。\n\n## 5. ORGANIC · 有机自然\n\n| 角色 | oklch | 用途 |\n|---|---|---|\n| paper | `oklch(0.96 0.025 85)` | 米白偏暖 |\n| ink | `oklch(0.28 0.04 50)` | 棕墨 |\n| clay | `oklch(0.62 0.13 45)` | 土橙 |\n| moss | `oklch(0.45 0.10 145)` | 森林绿 |\n| sky | `oklch(0.78 0.07 220)` | 雾蓝 |\n\n**比例**：纸 60% / 棕墨 15% / 三原色（土橙 / 苔绿 / 雾蓝）各 8% 左右。\n\n## 6. MOBILE-NATIVE · 移动原生 ⭐v2.1\n\n> 三套对照不是要你\"复制官方默认色\"——而是体现各平台的**色彩语义体系**。\n\n### 6.1 iOS HIG 风（推荐自有 brand color，避开系统蓝）\n\n| 角色 | oklch | 用途 |\n|---|---|---|\n| paper | `oklch(0.985 0.005 75)` | non-grouped 背景（暖中性） |\n| grouped-bg | `oklch(0.94 0.005 75)` | grouped table view 背景 |\n| ink | `oklch(0.18 0.005 280)` | label 主字 |\n| mute | `oklch(0.55 0.01 280)` | secondary label |\n| sep | `oklch(0.88 0.005 280)` | separator 0.5pt |\n| accent | `oklch(0.66 0.16 50)` | brand 强调（暖橙）— **替代 system blue** |\n\n**红线**：禁直接用 `#007AFF`（红线 #8）。Apple 自家 App（Music / Books / News）也都用品牌色而非系统蓝。\n\n### 6.2 Material Design 3（dynamic color，seed 自选）\n\n| 角色 | oklch | 派生方式 |\n|---|---|---|\n| seed | `oklch(0.55 0.13 175)` | **自选**色相（示例青绿，**避开 Material 默认紫**） |\n| primary | `oklch(0.55 0.13 175)` | = seed |\n| primary-container | `oklch(0.88 0.06 175)` | seed L+33 / C-50% |\n| secondary-container | `oklch(0.92 0.04 60)` | seed hue+245 / 低饱和 |\n| tertiary-container | `oklch(0.90 0.05 320)` | seed hue+145 / 低饱和 |\n| surface | `oklch(0.985 0.003 175)` | 近白带极淡 seed 色相 |\n| surface-variant | `oklch(0.93 0.01 175)` | 比 surface 暗 5% |\n| outline | `oklch(0.72 0.01 175)` | mid-tone |\n\n**规则**：seed 选 oklch C ∈ [0.10, 0.18]，避免高饱和（饱和过 → 派生 container 太脏）。\n\n### 6.3 HarmonyOS 鸿蒙（灵动色块）\n\n| 角色 | oklch | 用途 |\n|---|---|---|\n| paper | `oklch(0.97 0.005 240)` | 主背景 |\n| paper-2 | `oklch(0.94 0.008 240)` | hero / scene 卡片 |\n| ink | `oklch(0.18 0.01 260)` | 主字 |\n| mute | `oklch(0.50 0.01 260)` | 副字 |\n| c-cyan | `oklch(0.78 0.12 220)` | 灵动青 |\n| c-orange | `oklch(0.78 0.13 55)` | 灵动橙 |\n| c-green | `oklch(0.78 0.14 145)` | 灵动绿 |\n| c-pink | `oklch(0.82 0.10 5)` | 灵动粉 |\n\n**规则**：4 个灵动色 **同明度（L≈0.78）+ 同低饱和（C≈0.10–0.14）+ 不同色相**。同明度让多色拼一起不打架，这是鸿蒙\"灵动色块\"的核心。\n\n---\n\n## 通用约束\n\n- **禁** evenly-distributed palette（5 色等比例）\n- **禁** 默认暗黑 `#121212` + 紫主题\n- **禁** 全局 iOS 系统蓝 `#007AFF`、警示红 `#FF3B30` 当主色\n- **强制** oklch；如需 fallback 可附 hex 注释，但 hex 不能是唯一来源\n- 主色单一（**60–70%**）+ 强调色锐利（**5–10%**）+ 中性（20–30%）\n\nFile v4.6.0:references/inspirations.md\n\n# 5 流派真实参考站点\n\n> 参考是用来**抄结构 / 学手感**的，不是用来照搬的。看完关掉，再写自己的。\n> 商用敏感：huashu-design 项目仅个人 license，所有结构 / 工作流参考必须改写后落地。\n\n## 1. BOLD-MINIMAL\n\n- [Stripe](https://stripe.com) — 业内勇敢极简天花板，注意 hero 字号节奏\n- [Linear](https://linear.app) — 黑底版的极简样板\n- [Vercel](https://vercel.com) — 几何排版与极锐利强调色\n- [Apple · Newsroom](https://www.apple.com/newsroom/) — 大字 hero + 衬线 + 单强调\n- [Pitch](https://pitch.com) — 强调色更跳，但留白依旧\n\n## 2. EDITORIAL\n\n- [The New York Times Magazine](https://www.nytimes.com/section/magazine) — 数字版杂志范本\n- [The Verge](https://www.theverge.com/) — 现代化编辑感\n- [Pitchfork](https://pitchfork.com) — 评分文章的栅格密度\n- [It's Nice That](https://www.itsnicethat.com) — 设计杂志的当代演绎\n- [The Markup](https://themarkup.org) — 调查报道，衬线为主\n\n## 3. BRUTALIST\n\n- [Bloomberg Businessweek · 特别报道](https://www.bloomberg.com/businessweek) — 粗黑边、错位标题\n- [Are.na](https://www.are.na) — 网格暴露，零装饰\n- [Read.cv](https://read.cv) — Mono + 极致黑白\n- [Praxis](https://www.praxis.cool) — 当代 brutalist 教科书\n- 反例：自我标榜 brutalist 但只是把字调粗的 SaaS landing → **不要看**\n\n## 4. RETRO-FUTURE\n\n- [Cyberpunk 2077 · Official](https://www.cyberpunk.net/cn/zh) — 霓虹双色对撞\n- [Are.na · Vaporwave](https://www.are.na/search?q=vaporwave) — 80s 美学合集\n- [Replit](https://replit.com)（部分 landing） — 终端 / mono 与现代结合\n- [The Outpost](https://outpost.pub) — neon + grain 的现代演绎\n- 反例：任何\"紫渐变蓝\"的 SaaS 落地页 → **不要看**\n\n## 5. ORGANIC\n\n- [Notion · 早期版本](https://web.archive.org/web/2018*/notion.so) — 暖底 + 不规则插画\n- [Medium · Stories](https://medium.com) — 衬线 + 暖纸感\n- [Headspace](https://www.headspace.com) — 圆滑形状 + 柔色\n- [Mailchimp](https://mailchimp.com) — 手绘插画 + 暖色组合\n- [Squarespace · Templates \"Five\"](https://www.squarespace.com) — 手写体出现的尺度\n\n## 6. MOBILE-NATIVE · 移动原生 ⭐v2.1\n\n### 6.1 iOS HIG\n\n- [Apple HIG 官方](https://developer.apple.com/design/human-interface-guidelines/) — 必读，所有结构规范\n- [Apple Music](https://www.apple.com/cn/apple-music/) — 自家 App，不用系统蓝的最佳范例\n- [Things 3 by Cultured Code](https://culturedcode.com/things/) — HIG 教科书级 GTD 应用\n- [Linear · iOS App](https://linear.app) — 现代化 HIG 典范\n- [SwiftUI Component Library](https://www.swiftuiux.com/) — 抄结构不抄默认皮\n\n### 6.2 Material Design 3\n\n- [m3.material.io](https://m3.material.io/) — 官方 token / component 文档\n- [Material Theme Builder](https://material-foundation.github.io/material-theme-builder/) — seed → dynamic color 在线生成\n- [Google Calendar / Tasks · Android](https://play.google.com/store/apps/details?id=com.google.android.calendar) — 第一方 MD3 示范\n- [Read You](https://github.com/Ashinch/ReaderYou) — 开源 MD3 RSS 客户端，Compose 全栈\n- 反例：直接套 Material UI 默认紫的 web mock → **不要看**\n\n### 6.3 HarmonyOS 鸿蒙\n\n- [HarmonyOS 设计指南官方](https://developer.huawei.com/consumer/cn/design/) — 必读\n- [华为商城 App](https://m.vmall.com/) — 一方应用，灵动色块 + 大圆角范本\n- [华为运动健康 App](https://consumer.huawei.com/cn/mobileservices/health/) — 数据可视化与场景化\n- [鸿蒙生态合作 App 精选](https://developer.huawei.com/consumer/cn/forum/) — 论坛精华案例集\n- 反例：套 EMUI 默认皮没改 token 的 demo → **不要看**\n\n## 7. 小程序（MOBILE-NATIVE 子集）⭐v2.2\n\n### 7.1 微信小程序\n\n- [微信小程序设计指南](https://developers.weixin.qq.com/miniprogram/design/) — 平台官方\n- 喜茶 / 茶颜悦色 / Manner 小程序 — 自有 brand color，**不套 WeUI 默认绿**的样板\n- 三顿半小程序 — 极简 + 排版 + 暖色，对标 ORGANIC 流派\n- 即刻小程序 — 内容型小程序的字体 / 间距功底\n- 反例：所有 hero 都是「全屏 banner + 5 个圆角胶囊 + 商品 grid」千篇一律的 → **不要看**\n\n### 7.2 支付宝小程序\n\n- [支付宝小程序设计指南](https://opendocs.alipay.com/mini/design) — 平台官方\n- 蚂蚁森林 / 蚂蚁庄园 / 健康码 — 蚂蚁系一方应用，灵动卡片 + 微动效\n- 飞猪 / 口碑 / 大众点评（部分 H5）— 内容密度的极致样板\n- 反例：直接套 antd-mini 默认皮的 demo → **不要看**\n\n### 7.3 抖音小程序 ⭐v4.2\n\n- [抖音开放平台 · 设计指南](https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/component/) — 平台官方\n- 抖音电商一方小程序（如\"抖音商城\")— 视频流 + 商品卡的样板\n- 各品牌抖音小程序 hero 视频（不强求 starter 复刻，看节奏即可）\n- 反例：直接套 TTUI / Tt-Mini-UI 默认皮的 demo → **不要看**\n\n### 7.4 快手小程序 ⭐v4.3\n\n- [快手小程序开放平台](https://mp.kuaishou.com/docs/develop/) — 平台官方文档\n- 快手商城小程序 — 一方应用，电商场景的样板\n- 快手主播店铺小程序 — 内容驱动型小程序的导购卡片\n- 反例：直接套 KSUI / kuaishou-uikit 默认皮的 demo → **不要看**\n\n### 7.5 四端通用参考\n\n- [Awesome MiniApp](https://github.com/topics/miniapp) — GitHub 上多端框架与精选\n- 「小程序设计周刊」公众号 — 行业更新\n- [Taro](https://taro-docs.jd.com/) / [Uni-app](https://uniapp.dcloud.net.cn/) — 三端编译框架，自动复用代码\n\n---\n\n## 看参考的姿势\n\n1. 一次只看 1 个流派，看完关掉再开下一个\n2. 每个站点 ≤ 5 分钟，记住 1 个具体细节就够（不是整体氛围）\n3. 写代码前再看一次 SKILL.md §四 硬红线，确保没顺手抄回 AI Slop\n4. 抄完检查：oklch 配色 ✓、非默认字体 ✓、无紫渐变 ✓、无圆角 + 左竖条卡片 ✓、无统一 16px 圆角 ✓\n\nFile v4.6.0:references/multi-genre-compare.md\n\n# 多流派对比生成手册 ⭐v4.1\n\n> 用户没明确方向时如何并行生成 3 个流派对比；如何与 `huo15-openclaw-design-director` 协作。\n\n## 何时启用本流程\n\n| 信号 | 处理 |\n|---|---|\n| \"做几个方向对比\" / \"三个风格\" / \"我看看哪个好\" | ✓ 启用 |\n| \"帮我选\" / \"你定\" | ✓ 启用 |\n| 给了具体流派（\"做 brutalist 风\"）| ✗ 直接走 §六 单流派 Junior pass |\n| 给了视觉锚点（\"参考 Stripe\"）| ✗ 直接走 BOLD-MINIMAL 单流派 |\n| 给了完整 brand-spec（已有品牌色 / 字体）| ✗ 走 brand-protocol 抓品牌资源后单流派 |\n\n## 流程总览\n\n```\ndirector 选 3 流派 (or 自动取反差对位)\n     ↓\n3 个 Junior pass 并行 (用 Explore subagent 隔离 context)\n     ↓\n3 张截图 (Chrome MCP / Playwright)\n     ↓\ndirector 五维矩阵打分 / design-critique 5 维评分\n     ↓\n用户选定 → 单流派走 §六 阶段 3 Full Pass\n```\n\n---\n\n## 1. 流派选取\n\n参考 [`tokens/_compare-matrix.md`](../tokens/_compare-matrix.md) §反差对位。\n\n**有 director 时**：让 director 挑（它有 20 条设计哲学 + 五维矩阵）。\n**无 director 时**：从下面 5 组反差对位任选一组：\n- 理性 / 感性 / 实验：bold-minimal × organic × brutalist\n- 冷峻 / 温暖 / 复古：editorial × organic × retro-future\n- 桌面 / 移动 / 跨端：bold-minimal × mobile-native-ios × mobile-native-harmony\n- 极简 / 信息密度 / 装饰：bold-minimal × editorial × retro-future\n- Web / iOS / 鸿蒙：bold-minimal × mobile-native-ios × mobile-native-harmony\n\n---\n\n## 2. 并行 Junior pass（3 流派同时出）\n\n对每个 `<slug>`：\n\n1. 复制 `examples/<dir>/index.html` → `output-<slug>.html`\n2. 替换占位文案为本次场景的文案\n3. **保留视觉骨架** — hero / list / cards 结构不动，只换内容\n4. 引用 `tokens/<slug>.json` 的 color / typography / spacing 当硬约束 — **不要改 token**\n\nReact / Vue 项目：先跑 [`tokens/exporters/to-tailwind.md`](../tokens/exporters/to-tailwind.md) 出 3 份 tailwind config，再各做一个 `<Genre><Page>.tsx`。\n\n**性能提示**：3 流派**必须并行**。用 Explore subagent 隔离 context，不要串行 3 趟。\n\n---\n\n## 3. 三份截图\n\n走 [`self-verify.md`](self-verify.md) §1 Chrome MCP 路线（首选）：\n\n```\nmcp__Claude_in_Chrome__navigate({ url: \"file:///abs/output-bold-minimal.html\", tabId: <id> })\nmcp__Claude_in_Chrome__computer({ action: \"screenshot\", tabId: <id>, save_to_disk: true })\n# 重复对 organic / brutalist\n```\n\nmobile-native 子集额外用 `resize_window` 切到设备 viewport：\n- iOS: 393×852\n- MD3: 412×915\n- Harmony: 396×858\n\n无 MCP 时降级到 Playwright CLI（见 self-verify.md §2）。\n\n---\n\n## 4. 五维评审\n\n**首选**：`huo15-openclaw-design-director` 五维矩阵（结构 / 字体 / 颜色 / 空间 / 氛围）出\"推荐 / 次选 / 反对方向\"。\n**次选**：`huo15-openclaw-design-critique` 给每张图打 5 维分（1-5）求和取最高。\n**兜底**：用户人眼选。\n\ndirector 的输出格式见 [它的 SKILL.md §3.4 推荐表态](../../huo15-openclaw-design-director/SKILL.md)。\n\n---\n\n## 5. 移交单流派\n\n用户敲定方向后：\n- 删除其他 2 份草稿\n- 选定方向走 §六 阶段 3 Full Pass（补真实文案 / 替换图片 / 调细节 / 加动效）\n- 视情况走阶段 3.5 导出 tokens 到既有项目\n\n---\n\n## 6. 与 design-director 的协作接口\n\n### 我提供给 director 的资产\n\n- **8 个流派的** [`tokens/<slug>.json`](../tokens/) — 结构化，director 一行 jq 取关键字段\n- **8 个流派的** [`examples/<dir>/index.html`](../examples/) — Junior pass 起手不空白\n- **redLineWaiver** — 每个流派的合规豁免，避免误判违规\n- **横向对比表** [`tokens/_compare-matrix.md`](../tokens/_compare-matrix.md) — director 选流派的 cheat sheet\n\n### director 提供给我的输入\n\n- **3 个流派 slug**（如 `[\"bold-minimal\", \"organic\", \"brutalist\"]`）\n- **每个流派的 brief**（已写好的文案 / 重点 / 差异点，我做 Junior pass 不用从需求倒推）\n- **五维矩阵回调**（截图回流后由 director 判最优）\n\n### 接力消息格式（建议）\n\n```jsonc\n// director → frontend-design\n{\n  \"task\": \"multi-genre-junior-pass\",\n  \"genres\": [\"bold-minimal\", \"organic\", \"brutalist\"],\n  \"context\": {\n    \"client\": \"<品牌名>\",\n    \"scope\": \"<目标页面 / 组件类型>\",\n    \"differentiator\": \"<差异点一句话>\"\n  },\n  \"briefs\": {\n    \"bold-minimal\": \"<director 写的简报>\",\n    \"organic\": \"...\",\n    \"brutalist\": \"...\"\n  }\n}\n\n// frontend-design → director（截图回流）\n{\n  \"task\": \"multi-genre-junior-pass-done\",\n  \"outputs\": [\n    { \"genre\": \"bold-minimal\", \"html\": \"<rel-path>\", \"screenshot\": \"<rel-path>\" },\n    { \"genre\": \"organic\", \"html\": \"<rel-path>\", \"screenshot\": \"<rel-path>\" },\n    { \"genre\": \"brutalist\", \"html\": \"<rel-path>\", \"screenshot\": \"<rel-path>\" }\n  ]\n}\n```\n\n### director 现状与升级路径\n\n- **当前 director v1.0.0**：5 大流派覆盖（与本 skill v1.0 配套）— 对前 5 个 Web 流派全量生效；mobile-native 子集需要等 director v2 升级才能联动。\n- **本 skill 在不动 director 的前提下，已为 director v2 备好接力入口**（tokens schema + compare matrix + redLineWaiver）— director 升级时直接读取即可，无需 frontend-design 再改。\n\n---\n\n## 7. 反 AI Slop 红线（多流派对比仍适用）\n\n3 流派 Junior pass 仍要遵守 SKILL.md §四 全部 15 条红线。多流派对比**不是 AI Slop 免罪金牌** — 不要因为\"探索方向\"就把 3 张图都做成 AI 渐变模糊背景 + 紫色 hero。\n\n每个 Junior pass 各自的 redLineWaiver 见 [`tokens/_compare-matrix.md`](../tokens/_compare-matrix.md)。\n\nFile v4.6.0:references/self-verify.md\n\n# 自验证工作流操作手册 ⭐v3.0\n\n> 火一五前端设计技能 v3.0 起，**Claude in Chrome MCP** 成为自验证首选路线。本手册按场景分流，给出每条路线的具体命令。\n\n## 路线选择决策树\n\n| 场景 | 首选 | Fallback 1 | Fallback 2 |\n|---|---|---|---|\n| Web / H5（5 个 Web 流派） | Claude in Chrome MCP | Playwright CLI | 用户手动 `open file://` |\n| MOBILE-NATIVE Web 流派（iOS/MD3/Harmony） | Claude in Chrome MCP（resize 设备 viewport） | Playwright CLI（带 `--viewport-size`） | — |\n| 微信小程序 | 微信开发者工具 IDE | 真机扫码 | — |\n| 支付宝小程序 | 支付宝小程序 IDE | 真机扫码 | — |\n\n---\n\n## 1. Claude in Chrome MCP（优先 ⭐v3.0）\n\n### 1.1 前置条件\n- 用户已在 Chrome 装 Claude in Chrome 扩展并登录\n- 当前会话挂载了 `mcp__Claude_in_Chrome__*` 工具集（如 schemas 未加载，用 `ToolSearch query=\"select:mcp__Claude_in_Chrome__list_connected_browsers,...\"`）\n- `mcp__Claude_in_Chrome__list_connected_browsers` 返回非空数组\n\n### 1.2 标准命令序列（Web / H5）\n\n```\n# 1. 列出可用浏览器\nmcp__Claude_in_Chrome__list_connected_browsers\n\n# 2. 选定浏览器\nmcp__Claude_in_Chrome__select_browser({ deviceId: \"<from step 1>\" })\n\n# 3. 拿可用 tab\nmcp__Claude_in_Chrome__tabs_context_mcp\n\n# 4. 打开本地文件 / URL\nmcp__Claude_in_Chrome__navigate({ url: \"file:///abs/path/index.html\", tabId: <id> })\n\n# 5. 截图（关键产物）\nmcp__Claude_in_Chrome__computer({\n  action: \"screenshot\",\n  tabId: <id>,\n  save_to_disk: true\n})\n\n# 6. 读控制台错误（防 oklch 不支持 / 字体加载失败 / JS 报错）\nmcp__Claude_in_Chrome__read_console_messages({ tabId: <id> })\n```\n\n### 1.3 移动端 viewport 控制\n\n```\n# iPhone 16 Pro\nmcp__Claude_in_Chrome__resize_window({ tabId: <id>, width: 393, height: 852 })\n\n# Pixel 8\nmcp__Claude_in_Chrome__resize_window({ tabId: <id>, width: 412, height: 915 })\n\n# HarmonyOS Mate 60\nmcp__Claude_in_Chrome__resize_window({ tabId: <id>, width: 396, height: 858 })\n\n# resize 后再 screenshot\nmcp__Claude_in_Chrome__computer({ action: \"screenshot\", tabId: <id>, save_to_disk: true })\n```\n\n或者（更稳，无需 resize）：本 skill 的 `examples/mobile-native/*/index.html` 内置桌面预览手机壳（device frame），桌面 viewport 也能看到正确移动效果，桌面浏览器打开即可。\n\n### 1.4 何时跳过本路线\n\n- `list_connected_browsers` 返回 `[]` → 直接路线 2\n- 用户明确说\"我不开 Chrome\" → 路线 2\n- wxml / axml 场景 → 路线 3 / 4（MCP 不能渲染小程序模板）\n\n### 1.5 a11y 自动审计 ⭐v4.4\n\n渲染完成后注入 axe-core 跑 WCAG 2.2 AA 检查（与 [`a11y-checklist.md`](a11y-checklist.md) 30 条对照）：\n\n```\nmcp__Claude_in_Chrome__javascript_tool({\n  tabId: <id>,\n  code: `\n    const s = document.createElement('script');\n    s.src = 'https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.10.0/axe.min.js';\n    document.head.appendChild(s);\n    await new Promise(r => s.onload = r);\n    return await axe.run({ runOnly: ['wcag2aa', 'wcag22aa'] });\n  `\n})\n```\n\n返回 `violations` / `passes` / `incomplete` 三个数组：\n- 把 `violations` 对照 a11y-checklist 标 ⚠ 或修复\n- `incomplete` 是 axe 无法自动判断的（如 #5 颜色非唯一信息载体），人审兜底\n- `passes` 数 / 总检查数 ≥ 90% 视为可发布\n\n**Lighthouse fallback**（MCP 不可用时）：\n\n```bash\nnpx lighthouse <URL 或 file://> --only-categories=accessibility --output=html --output-path=./a11y-report.html --chrome-flags=\"--headless\"\n```\n\n详见 [`a11y-checklist.md`](a11y-checklist.md) §自动检查路线。\n\n---\n\n## 2. Playwright CLI（fallback）\n\n### 2.1 桌面端\n\n```bash\nnpx playwright-core screenshot <URL 或 file:///abs/path> ~/verify.png --viewport-size=1440,900\n```\n\n### 2.2 移动端（MOBILE-NATIVE 流派必跑）\n\n```bash\n# iPhone 16 Pro\nnpx playwright-core screenshot <URL> ~/verify-iphone.png --viewport-size=393,852\n\n# Pixel 8\nnpx playwright-core screenshot <URL> ~/verify-android.png --viewport-size=412,915\n\n# HarmonyOS Mate 60\nnpx playwright-core screenshot <URL> ~/verify-harmony.png --viewport-size=396,858\n```\n\n### 2.3 注意\n\n- 延续 enhance 插件\"禁 child_process\"铁律：**返回命令让用户执行**，不要 spawn\n- `--full-page` 截整页（默认只 viewport）\n- `--device=\"iPhone 16 Pro\"` 也可用，但 Playwright 内置设备列表更新慢，自带 viewport 数值更稳\n\n---\n\n## 3. 微信开发者工具（小程序）\n\n1. 安装 [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)（Stable v1.06+）\n2. 项目 → 导入项目 → 选 `examples/mini-program/wechat/`\n3. AppID 选\"测试号\"\n4. 编译后左侧模拟器看渲染\n5. 真机调试扫码 → 微信扫码 → 真机看效果\n6. 截图：模拟器右上角\"截屏\"按钮 / 工具菜单 → 截图，默认存 `~/Desktop`\n\n---\n\n## 4. 支付宝小程序 IDE（小程序）\n\n1. 安装 [支付宝小程序 IDE](https://opendocs.alipay.com/mini/ide/download)\n2. 文件 → 打开项目 → 选 `examples/mini-program/alipay/`\n3. 预览 → 扫码用支付宝 App 看真机\n4. 截图：IDE 内置截图工具，或预览界面右上角\"复制图片\"\n\n---\n\n## 5. 评审接力\n\n无论走哪条路线，截图最终：\n- **由用户人眼审** → 1 句话反馈\n- 或调用 `huo15-openclaw-design-critique` 5 维打分（结构 / 字体 / 颜色 / 空间 / 氛围）+ Keep/Fix/Quick Wins 输出\n\n---\n\n## 6. 移动端额外检查清单\n\n- [ ] safe-area-inset 上下生效（刘海 / home indicator 没遮挡内容）\n- [ ] tab-bar 触达高度 ≥ 44pt（iOS）/ 48dp（Android / 鸿蒙）\n- [ ] 字号 / 行高在 375–430 多档 viewport 都不溢出\n- [ ] 小程序：`<page-meta>` 在 wxml 中存在 + tabBar 是 native 不是自绘 + rpx 适配 750rpx 屏宽\n- [ ] 控制台无 oklch 不支持警告（fallback 已生效）\n\n---\n\n## 7. 三路线兼容性矩阵\n\n| 流派 / 场景 | Chrome MCP | Playwright CLI | 微信 IDE | 支付宝 IDE | 真机扫码 |\n|---|---|---|---|---|---|\n| BOLD-MINIMAL / EDITORIAL / BRUTALIST / RETRO-FUTURE / ORGANIC | ✓ | ✓ | — | — | ✓ |\n| MOBILE-NATIVE iOS HIG | ✓（resize 393×852）| ✓ | — | — | ✓ |\n| MOBILE-NATIVE MD3 | ✓（resize 412×915）| ✓ | — | — | ✓ |\n| MOBILE-NATIVE Harmony | ✓（resize 396×858）| ✓ | — | — | ✓ |\n| 微信小程序 | ✗ | ✗ | ✓ | — | ✓ |\n| 支付宝小程序 | ✗ | ✗ | — | ✓ | ✓ |\n\n---\n\n## 8. 设计原则提醒\n\n- **MCP 优先**不是教条 —— 没浏览器连接就别等，立刻 fallback\n- **不要在 skill 内部 spawn 进程** — 所有 CLI 命令必须 return-cliCmd 模式给用户执行\n- **截图是最终凭证** — 不要用\"我看了源代码觉得 OK\"代替真机 / 真渲染验证\n- **控制台错误也要看** — `read_console_messages` 能抓到 oklch fallback、字体 404、JS 报错等隐患\n\nFile v4.6.0:references/typography.md\n\n# 5 流派字体对（display + body）\n\n> **禁默认 Inter / Roboto / Arial / system-ui**（参见 SKILL.md §四 红线 #1）。\n> 所有推荐字体均来自 [Google Fonts](https://fonts.google.com)、[Adobe Fonts](https://fonts.adobe.com) 或思源系列，license 友好。\n\n## 1. BOLD-MINIMAL\n\n| 角色 | 字体 | 备选 |\n|---|---|---|\n| display | **Playfair Display** Black Italic | Crimson Pro 900 / Tiempos Display |\n| body | **IBM Plex Sans** 400/600 | Söhne / Inter Tight（仅作 fallback，不能首选） |\n\n**反差**：粗衬线 italic ↔ 中性现代无衬线。\n\n## 2. EDITORIAL\n\n| 角色 | 字体 | 备选 |\n|---|---|---|\n| display | **DM Serif Display** | Cormorant Garamond / Tiempos Headline |\n| body | **Source Serif 4** opsz | EB Garamond / 思源宋体 |\n| caps | small-caps + letter-spacing .06em | — |\n\n**反差**：display 略 condensed，body 宽松，靠 opsz 自动调节字重。\n\n## 3. BRUTALIST\n\n| 角色 | 字体 | 备选 |\n|---|---|---|\n| display | **Space Grotesk** 700 | PP Neue Montreal / Druk Wide |\n| mono | **JetBrains Mono** 400/800 | Space Mono / IBM Plex Mono |\n\n**反差**：粗 sans 大标题 + mono 元数据 / 导航，等宽字承担\"机械感\"。\n\n## 4. RETRO-FUTURE\n\n| 角色 | 字体 | 备选 |\n|---|---|---|\n| display | **Major Mono Display** | Monoton / Audiowide（慎用，易土气） |\n| body | **VT323** | Press Start 2P（仅做装饰，不能跑长文） |\n\n**警告**：VT323 可读性弱，正文长度 ≤ 200 字符；超过请退回 IBM Plex Mono。\n\n## 5. ORGANIC\n\n| 角色 | 字体 | 备选 |\n|---|---|---|\n| display | **Caveat** 600 | Patrick Hand / Reenie Beanie |\n| body | **Source Serif 4** | Lora / 思源宋体 |\n| 中文配对 | 思源宋体（display 仍用 Caveat 拉手写） | 霞鹜文楷 |\n\n**反差**：手写体只在 hero / 卡片标题 / 注脚，正文一律严肃衬线，避免\"小学生作文\"。\n\n## 6. MOBILE-NATIVE · 移动原生 ⭐v2.1\n\n### 6.1 iOS HIG\n\n| 角色 | 字体 | 备选 | 备注 |\n|---|---|---|---|\n| display | **Manrope** 800 | Onest / Outfit / Bricolage Grotesque | **替代 SF Pro / system-ui**（红线 #1） |\n| body | **IBM Plex Sans** 400/500/600 | Söhne / Sentinel | — |\n| 数字 | DM Sans / IBM Plex Mono | — | 状态栏 / 数据用等宽更稳 |\n\n**HIG 排版三件套**：large title 34pt 800、navigation title 17pt 500、body 16pt。\n\n### 6.2 Material Design 3\n\n| 角色 | 字体 | 备选 | 备注 |\n|---|---|---|---|\n| display | **DM Sans** 700 | Onest / Public Sans | **替代 Roboto Flex**（红线 #1） |\n| body | **IBM Plex Sans** 400/500 | Source Sans 3 | — |\n| 中文 | 思源黑体 / Noto Sans SC | — | 跟 DM Sans 字重对齐 |\n\n**MD3 type scale**：display 28pt 700、headline 22pt 500、title 16pt 500、body 14pt。\n\n### 6.3 HarmonyOS 鸿蒙\n\n| 角色 | 字体 | 备选 | 备注 |\n|---|---|---|---|\n| display | **Noto Sans SC** 700/900 | 思源黑体 / 霞鹜文楷 | HarmonyOS Sans 不在 Google Fonts，用 Noto Sans SC 替代 |\n| body | **Noto Sans SC** 400/500 | 思源黑体 | 中文为主 |\n| 数字 / 英文 | **DM Sans** 500/700 | Inter Tight (慎用) | 中英混排时英文用 DM Sans |\n\n**鸿蒙排版**：屏头大标题 28pt 900、卡片标题 22pt 700、控件标签 15pt 500。\n\n---\n\n## MOBILE-NATIVE 通用约束\n\n- **禁** `font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, ...`（红线 #1，且无差异化）\n- **禁** `font-family: SF Pro Display`（在 web 上根本加载不到，最终 fallback 到 system-ui）\n- 中英混排：英文 / 数字用 DM Sans / Manrope，中文用 Noto Sans SC / 思源黑体；**两个字族不超过 3 个字重**\n\n---\n\n## 通用约束\n\n- 主字 / 副字必须有性格反差：衬线 ↔ 无衬线、或 mono ↔ proportional\n- **中文**：思源宋体 / 思源黑体 / 霞鹜文楷 / Noto Serif SC，按流派挑一对（**不要**英文中文混 4 个字族）\n- **加载**：`<link rel=\"preconnect\">` 提前连，`display=swap` 避免 FOIT\n- 任何\"system-ui 兜底就完事\"的写法 = 没用本 skill\n\nFile v4.6.0:skill-card.md\n\n## Description: <br>\nGenerates high-fidelity frontend UI prototypes, mobile and mini-program interface patterns, design tokens, accessibility checks, and motion guidance for web and app design work. <br>\n\nThis skill is ready for commercial/non-commercial use. <br>\n\n## Publisher: <br>\n[zhaobod1](https://clawhub.ai/user/zhaobod1) <br>\n\n### License/Terms of Use: <br>\nMIT-0 <br>\n\n\n## Use Case: <br>\nDevelopers, designers, and product teams use this skill to produce polished frontend prototypes, design-system tokens, platform-specific mobile or mini-program UI patterns, and accessibility-oriented verification guidance. <br>\n\n### Deployment Geography for Use: <br>\nGlobal <br>\n\n## Known Risks and Mitigations: <br>\nRisk: Broad aliases such as UI design or accessibility may invoke the skill in more situations than expected. <br>\nMitigation: Confirm the requested task is frontend design, prototyping, design tokens, motion, mini-program UI, or accessibility verification before applying the workflow. <br>\nRisk: Browser preview, Lighthouse, Playwright, and axe workflows may render pages or local files during verification. <br>\nMitigation: Run verification only on pages, URLs, and local files the user is comfortable rendering and inspecting. <br>\n\n\n## Reference(s): <br>\n- [ClawHub skill page](https://clawhub.ai/zhaobod1/huo15-openclaw-frontend-design) <br>\n- [Publisher profile](https://clawhub.ai/user/zhaobod1) <br>\n- [Accessibility checklist](artifact/references/a11y-checklist.md) <br>\n- [Self-verification workflow](artifact/references/self-verify.md) <br>\n- [Multi-genre comparison workflow](artifact/references/multi-genre-compare.md) <br>\n- [Design token schema](artifact/tokens/_schema.md) <br>\n- [Design token comparison matrix](artifact/tokens/_compare-matrix.md) <br>\n- [Tailwind token exporter](artifact/tokens/exporters/to-tailwind.md) <br>\n\n\n## Skill Output: <br>\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance] <br>\n**Output Format:** [Markdown guidance with code blocks, design-token snippets, shell commands, and optional generated frontend files.] <br>\n**Output Parameters:** [1D] <br>\n**Other Properties Related to Output:** [May include HTML/CSS/JavaScript, React or Vue components, mini-program file patterns, Tailwind or Figma token exports, and accessibility verification steps.] <br>\n\n## Skill Version(s): <br>\n4.6.0 (source: frontmatter and release evidence) <br>\n\n## Ethical Considerations: <br>\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment. <br>\n\nFile v4.6.0:tokens/_compare-matrix.md\n\n# 8 流派横向对比矩阵 ⭐v4.1\n\n> 给 `huo15-openclaw-design-director` 选流派用，或用户要做 multi-genre 平行对比时的速查表。\n\n## 关键 token 对比\n\n| 流派 | 主色 (oklch) | 重音色 | display 字体 | radius 哲学 | 适合场景 |\n|---|---|---|---|---|---|\n| **bold-minimal** | 0.18 0 0（墨黑） | 0.66 0.20 28（锐橙） | Playfair Display 900 italic | sm 2 / md 8 / lg 14 / pill | 科技、B 端、作品集 |\n| **editorial** | 0.20 0.015 280（冷墨） | 0.50 0.18 25（砖红） | DM Serif Display 400 | sm 2 / md 4 / lg 8 | 内容、品牌故事、报告 |\n| **brutalist** | 0.10 0 0（真黑） | 0.78 0.22 105（警示黄） | Space Grotesk 700 + JetBrains Mono | 全 0（直角） | 独立工作室、Web3、先锋 |\n| **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 | 游戏、音乐、娱乐 |\n| **organic** | 0.28 0.04 50（棕墨） | 0.62 0.13 45（土橙） | Caveat 600 + Source Serif | irregular 4 段 / soft 24 / pill | 食品、母婴、健康 |\n| **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 |\n| **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 |\n| **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 / 鸿蒙生态 |\n\n## 反差对位（multi-genre 三选时常用）\n\n| 命题 | 流派组合 |\n|---|---|\n| 理性 vs 感性 vs 实验 | bold-minimal × organic × brutalist |\n| 冷峻 vs 温暖 vs 复古 | editorial × organic × retro-future |\n| 桌面 vs 移动 vs 跨端 | bold-minimal × mobile-native-ios × mobile-native-harmony |\n| 极简 vs 信息密度 vs 装饰 | bold-minimal × editorial × retro-future |\n| Web 端 vs 双移动端 | bold-minimal × mobile-native-md3 × mobile-native-harmony |\n\n## redLineWaiver 速查\n\n| 流派 | 豁免说明 |\n|---|---|\n| brutalist | radius 全 0 是 hallmark，**不是**红线 #9 违规 |\n| retro-future | bg 深紫蓝纯色（非渐变），霓虹靠 text-shadow 不靠 backdrop-blur |\n| organic | irregular radius 4 段不同百分比，不犯统一 16px |\n| mobile-native-ios | accent 暖橙替代 #007AFF（红线 #8 合规：Apple 自家 App 也这么做） |\n| mobile-native-md3 | seed 青绿避开 Material 默认紫 |\n| mobile-native-harmony | 4 灵动色块同明度多色相，避免单色一统天下 |\n\n## motion 哲学速查 ⭐v4.5\n\n| 流派 | 主 duration | 主 easing | stagger | 一句话动效原则 |\n|---|---|---|---|---|\n| **bold-minimal** | normal 300ms | standard | 80ms | 克制 — 单一 easing、绝不弹跳 |\n| **editorial** | normal 400ms / slow 700ms | decelerate | 120ms | 稳重 — 偏长 duration 模仿翻页 |\n| **brutalist** | instant 80ms / fast 120ms | linear / step2 | 30ms | 硬切 — 禁缓动函数 |\n| **retro-future** | blink 1000ms 周期 | step2 / linear | 50ms | CRT 闪烁 — 用 step 模拟显像管 |\n| **organic** | normal 500ms / slow 800ms | spring（1.56 超调） | 140ms | 弹性 — 卡片落下有回弹 |\n| **mobile-native-ios** | normal 350ms | iosSpring | 70ms | Apple HIG spring |\n| **mobile-native-md3** | medium2 300ms | emphasized | 75ms | MD3 完整 12 档 duration + 4 档 emphasized easing |\n| **mobile-native-harmony** | normal 300ms | fluid | 80ms | 鸿蒙流畅感（比 iOS 偏快） |\n\n**反差选 motion 的命题**：\n- 静态 vs 闪烁 vs 弹性：bold-minimal × retro-future × organic\n- 克制 vs 严谨 vs 灵动：brutalist × md3 × harmony\n\n详细 motion token JSON 见 [`<slug>.json`](.) 的 `motion` 字段；导出到 CSS / Tailwind / Figma 见 [`exporters/`](exporters/)。\n\n## design-director 集成点\n\ndirector 需要挑 3 流派对比时，对每个候选：\n1. 读 [`<slug>.json`](.) 拿 color / typography / spacing / radius\n2. 看 redLineWaiver（避免误判违规）\n3. 用 `examples/<dir>/index.html` 作 Junior pass 起手（不用空白起步）\n4. 截 3 张图喂给五维矩阵打分\n\n详细接力流程见 [`../references/multi-genre-compare.md`](../references/multi-genre-compare.md)。\n\nFile v4.6.0:tokens/_schema.md\n\n# tokens.json Schema · v4.0\n\n> 每个流派一份 `<slug>.json`，扁平 1 层结构便于 jq 转换。\n\n## 字段约定\n\n```jsonc\n{\n  \"name\": \"bold-minimal\",                     // 必须等于文件名（无 .json）\n  \"displayName\": \"BOLD-MINIMAL · 勇敢极简\",   // SKILL.md §三 流派表对应名\n  \"version\": \"1.0.0\",                         // 流派 token 自身版本\n  \"color\":    { \"<token>\": \"oklch(...)\" },   // oklch 首选\n  \"colorHex\": { \"<token>\": \"#hex\" },         // 1:1 对应 color，给不支持 oklch 环境\n  \"typography\": {\n    \"display\": \"<Family> <Weight> [italic]\",\n    \"body\":    \"<Family> <Weight>\"\n  },\n  \"spacing\": { \"xs\": 4, \"sm\": 8, ..., \"2xl\": 128 },   // 单位 px；小程序按 rpx ×2 换算\n  \"radius\":  { \"none\": 0, \"sm\": 2, ..., \"pill\": 999 },\n  \"shadow\":  { \"subtle\": \"...\", \"card\": \"...\", \"modal\": \"...\" },\n  \"examplePath\": \"../examples/<dir>/index.html\",     // 对应 starter 文件\n  \"redLineWaiver\": [\"...\"],                           // 可选；说明本流派对哪条红线有合规豁免\n  \"motion\": {                                         // ⭐v4.5 动效 tokens\n    \"duration\": { \"fast\": 200, \"normal\": 300, ... },  // 单位 ms\n    \"easing\":   { \"<name>\": \"cubic-bezier(...) | linear | steps(...)\" },\n    \"stagger\":  { \"tight\"|\"normal\"|\"loose\": 50|80|120 },  // 列表级联出场延迟（ms）\n    \"philosophy\": \"<一句话流派动效原则>\"\n  }\n}\n```\n\n## 硬约束\n\n- `color` 与 `colorHex` 必须**键名 1:1 对应**（同 key、同顺序）\n- `color` 必填 oklch；颜色硬规则见 [`../references/colors.md`](../references/colors.md)\n- `typography` 字体不能命中红线 #1（Inter / Roboto / Arial / system-ui）；**小程序场景豁免**（PingFang SC 等中文字体允许）\n- 任何字段缺失 → 视作\"沿用 colors.md / typography.md 中通用约束\"\n- **不要嵌套**对象（如 `color.brand.primary`）— 保持扁平 1 层，jq 一行能转\n\n## 导出器\n\n- [`exporters/to-css-vars.md`](exporters/to-css-vars.md) — jq → CSS variables\n- [`exporters/to-tailwind.md`](exporters/to-tailwind.md) — jq → tailwind.config.js extend\n- [`exporters/to-figma.md`](exporters/to-figma.md) — Tokens Studio v2 兼容格式\n\n所有导出器**只返回 jq / shell 命令给用户执行**，不在 skill 内部 spawn（延续 enhance \"禁 child_process\" 铁律）。\n\nArchive v4.5.0: 53 files, 81172 bytes\n\nFiles: _meta.json (149b), examples/bold-minimal/index.html (3795b), examples/brutalist/index.html (3856b), examples/editorial/index.html (4646b), examples/mini-program/alipay/app.js (116b), examples/mini-program/alipay/app.json (479b), examples/mini-program/alipay/mini.project.json (178b), examples/mini-program/alipay/pages/index/index.js (771b), examples/mini-program/alipay/pages/index/index.json (74b), examples/mini-program/douyin/app.js (109b), examples/mini-program/douyin/app.json (541b), examples/mini-program/douyin/pages/index/index.js (771b), examples/mini-program/douyin/pages/index/index.json (79b), examples/mini-program/douyin/project.config.json (333b), examples/mini-program/kuaishou/app.css (373b), examples/mini-program/kuaishou/app.js (109b), examples/mini-program/kuaishou/app.json (541b), examples/mini-program/kuaishou/pages/index/index.css (2535b), examples/mini-program/kuaishou/pages/index/index.js (771b), examples/mini-program/kuaishou/pages/index/index.json (79b), examples/mini-program/kuaishou/project.config.json (335b), examples/mini-program/README.md (5168b), examples/mini-program/wechat/app.js (109b), examples/mini-program/wechat/app.json (595b), examples/mini-program/wechat/pages/index/index.js (771b), examples/mini-program/wechat/pages/index/index.json (59b), examples/mini-program/wechat/project.config.json (406b), examples/mini-program/wechat/sitemap.json (181b), examples/mobile-native/harmony/index.html (8676b), examples/mobile-native/ios/index.html (8593b), examples/mobile-native/md3/index.html (8631b), examples/organic/index.html (4232b), examples/retro-future/index.html (3906b), references/a11y-checklist.md (7338b), references/colors.md (5019b), references/inspirations.md (6222b), references/multi-genre-compare.md (5789b), references/self-verify.md (6953b), references/typography.md (4031b), SKILL.md (32352b), tokens/_compare-matrix.md (4357b), tokens/_schema.md (2355b), tokens/bold-minimal.json (1193b), tokens/brutalist.json (1171b), tokens/editorial.json (1275b), tokens/exporters/to-css-vars.md (3142b), tokens/exporters/to-figma.md (3065b), tokens/exporters/to-tailwind.md (2195b), tokens/mobile-native-harmony.json (1648b), tokens/mobile-native-ios.json (1524b), tokens/mobile-native-md3.json (2458b), tokens/organic.json (1488b), tokens/retro-future.json (1428b)\n\nFile v4.5.0:SKILL.md\n\n---\nname: huo15-openclaw-frontend-design\ndisplayName: 火一五前端设计技能\ndescription: 高保真 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、缓动函数。\nversion: 4.5.0\naliases:\n  - 火一五前端设计技能\n  - 火一五Web设计技能\n  - 火一五APP设计技能\n  - 火一五移动端设计技能\n  - 火一五H5设计技能\n  - 火一五小程序设计技能\n  - 火一五抖音小程序技能\n  - 火一五快手小程序技能\n  - 火一五无障碍审计技能\n  - 火一五动效技能\n  - 火一五设计系统技能\n  - 火一五落地页技能\n  - 火一五UI设计技能\n  - 火一五海报设计技能\n  - 火一五前端设计\n  - 前端设计\n  - UI 设计\n  - 页面设计\n  - HTML 原型\n  - 落地页设计\n  - 海报设计\n  - Web 设计\n  - APP 设计\n  - 移动端设计\n  - H5 设计\n  - 小程序设计\n  - 微信小程序\n  - 支付宝小程序\n  - 抖音小程序\n  - 快手小程序\n  - 无障碍\n  - a11y\n  - WCAG\n  - 动效\n  - motion tokens\n  - 动画 tokens\n  - design tokens\n  - 设计 tokens\n  - 设计系统\n---\n\n# 火一五前端设计技能 v4.5\n\n> 高保真 Web UI + 移动端 / APP / H5 + 微信 / 支付宝 / 抖音 / 快手 四端小程序 + design tokens（含 motion）系统化 + 多流派并行对比 + WCAG 2.2 AA 无障碍审计 + 动效 tokens 原型生成 — 青岛火一五信息科技有限公司\n> 设计理念对标 Anthropic `frontend-design` skill 与 2026 社区共识，本土化改写、不拷贝官方内容\n> v2.0 起：5 流派 starter HTML（`examples/`）+ 配色 / 字体 / 灵感三件套（`references/`）+ 反 AI Slop 红线扩到 11 条\n> v2.1 起：第 6 流派 `MOBILE-NATIVE`（iOS HIG / Material Design 3 / HarmonyOS 三套 starter）+ 移动端红线 2 条（共 13 条）+ 触发词覆盖 APP / H5 / 移动端\n> v2.2 起：微信小程序 + 支付宝小程序 starter（归 MOBILE-NATIVE 子集）+ 小程序红线 2 条（共 15 条）+ 字体豁免说明 + 触发词覆盖 wxml / axml\n> v3.0 起：自验证工作流升级 — Claude in Chrome MCP 优先，Playwright CLI / 微信开发者工具 / 支付宝 IDE 三路线 fallback；新增 [`references/self-verify.md`](references/self-verify.md) 操作手册\n> v4.0 起：design tokens 系统化 — 8 个流派统一 [`tokens/<slug>.json`](tokens/) 扁平 schema（color / colorHex / typography / spacing / radius / shadow），三导出器 jq 一行转 CSS variables / Tailwind config / Figma Tokens Studio\n> 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 速查）\n> 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 升级三端同步迭代姿势 + 真机扫码必查清单\n> 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 升级四端同步迭代姿势（微信 → 抖音 → 快手 → 支付宝）+ 顶部胶囊形态四端对照\n> 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\n> **v4.5 起**：动效 tokens — 8 流派 [`tokens/<slug>.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 哲学速查表\n\n---\n\n## 一、触发场景\n\n当用户要构建以下任一，触发本技能：\n\n- 网站 / 落地页 / 官网 / 仪表盘\n- React / Vue / HTML / Svelte 组件\n- 营销海报 / 产品详情页 / 信息图\n- **移动 H5 落地页 / APP 风格原型**（iOS / 安卓 / 鸿蒙 风格 H5，对应 §三 第 6 流派 MOBILE-NATIVE）\n- **微信 / 支付宝 / 抖音 / 快手小程序原型** ⭐v2.2 起，v4.3 补齐四端（归 MOBILE-NATIVE 子集，见 `examples/mini-program/`）\n- 任何\"美化页面 / 优化 UI\"类请求\n\n**不触发**（归其他技能）：\n\n- PPT 演示稿 → `huo15-openclaw-ppt`\n- Word / PDF 文档 → `huo15-openclaw-office-doc`\n- 纯数据分析图表 → 常规 matplotlib / echarts 即可\n\n**产出**：可直接运行的 HTML/CSS/JS（或 React/Vue）代码 + 3 行设计说明 + 可选截图验证命令。\n\n---\n\n## 二、设计思考（动手前必答四问）\n\n| 维度 | 要回答 |\n|------|--------|\n| 目的 | 这个界面解决什么问题？谁是使用者？ |\n| 基调 | 选一个**极端**方向（见 §三） |\n| 约束 | 技术栈 / 性能 / 可访问性 / 目标设备 |\n| 差异点 | 用户会记住**哪一件**事？ |\n\n**硬规则**：**承诺一个极端方向**。极简和极繁同样有效，关键是意图明确，**不要骑墙**。\n\n---\n\n## 三、六大美学流派（必选其一）\n\n| 流派 | 关键特征 | 适合场景 | 参考 |\n|------|---------|---------|------|\n| **BOLD-MINIMAL** 勇敢极简 | 大字号、大留白、2 色系、无装饰 | 科技产品、B 端 SaaS、个人作品集 | Stripe / Linear / Apple |\n| **EDITORIAL** 编辑杂志 | 衬线字、纵向栅格、引号装饰、杂志版式 | 品牌故事、深度内容、报告 | NYT Style / The Verge |\n| **BRUTALIST** 野兽派 | 等宽字、粗黑线、打破网格、刻意粗糙 | 独立工作室、Web3、先锋作品 | Bloomberg / early craigslist |\n| **RETRO-FUTURE** 复古未来 | 像素字、CRT 光晕、80s 霓虹配色 | 游戏、音乐、娱乐 | Vaporwave / Cyberpunk 2077 |\n| **ORGANIC** 有机自然 | 手绘感、暖色、不规则形状、柔边 | 食品、母婴、健康 | Medium 早期 / Notion |\n| **MOBILE-NATIVE** 移动原生 ⭐v2.1 | 遵循平台规范的移动设计：iOS HIG / Material Design 3 / HarmonyOS | APP 原型、H5 落地页、移动 webview | Apple HIG / m3.material.io / 鸿蒙设计指南 |\n\n**如果用户没给方向 ⭐v4.1 升级**：走多流派并行对比流程，详见 [`references/multi-genre-compare.md`](references/multi-genre-compare.md)。\n- **首选**：让 `huo15-openclaw-design-director` 选 3 流派（它有 20 条设计哲学 + 五维矩阵）\n- **次选**：从 [`tokens/_compare-matrix.md`](tokens/_compare-matrix.md) §反差对位选一组（理性/感性/实验、冷峻/温暖/复古、桌面/移动/跨端等）\n- 3 个 Junior pass **必须并行**（用 Explore subagent 隔离 context，不要串行）\n- 截图后由 director 打分推荐 / design-critique 5 维评分 / 用户人眼挑，三选一\n- 用户敲定 → 删掉其他草稿 → 单流派走阶段 3 Full Pass\n\n**MOBILE-NATIVE 的三选一**：用户说\"做 APP / 做 H5\"时，先问目标平台 — iOS（用 `examples/mobile-native/ios/`）/ Android（用 `examples/mobile-native/md3/`）/ HarmonyOS（用 `examples/mobile-native/harmony/`）。多平台需求 → 三套 starter 都给，但产出文件夹分开。\n\n**小程序场景** ⭐v2.2 起，v4.3 补齐四端：归 MOBILE-NATIVE 子集，**不另立第 7 流派**（避免膨胀）。\n- 微信小程序：`examples/mini-program/wechat/`（wxml + wxss + JSON 配置三件套）\n- 支付宝小程序：`examples/mini-program/alipay/`（axml + acss + 配置）\n- 抖音小程序 ⭐v4.2：`examples/mini-program/douyin/`（ttml + ttss + 配置）\n- 快手小程序 ⭐v4.3：`examples/mini-program/kuaishou/`（ksml + 标准 css 后缀 + 配置）\n- **四端同步迭代姿势**：先做微信 → 复制到抖音改 `wx:` → `tt:` → 复制到快手改 `wx:` → `ks:`（两者最相近，各 3 分钟）→ 复制到支付宝改 `wx:` → `a:` / `bindtap` → `onTap`（差异最大，5 分钟）。完整对照表见 [`examples/mini-program/README.md`](examples/mini-program/README.md)。\n\n---\n\n## 四、反 AI Slop 硬红线（违反任一直接判废）\n\n| # | 禁用项 | 为什么 |\n|---|--------|--------|\n| 1 | 默认 **Inter / Roboto / Arial / system-ui** 字体 | 字体即性格，系统字 = 没性格 |\n| 2 | **紫色渐变**（尤其紫色渐变打白底） | 2023 以来 AI 最滥用的视觉陈词滥调 |\n| 3 | **emoji 当图标** | 必须用 Lucide / Phosphor / Tabler / Heroicons 真图标 |\n| 4 | **圆角卡片 + 左侧彩色竖条** | Tailwind 默认范式，设计师都看腻了 |\n| 5 | **CSS 画的伪产品图** | 真产品图用 Unsplash/Picsum 占位，明确标注\"待替换\" |\n| 6 | **默认暗黑 `#121212` + 紫色主题** | 懒，且和 #2 联动犯错 |\n| 7 | **Hero + Features + CTA + Footer** 千篇一律骨架 | 按内容定制结构，不要模板化 |\n| 8 | 全部用 `#007AFF` / `#FF3B30` 这类 iOS 系统色 | 没有记忆点 |\n| 9 | **全局统一 16px / 12px `border-radius`** | Tailwind / shadcn 默认值，工业感 = 没设计 |\n| 10 | 滥用 **`backdrop-blur` 玻璃形态**（每个卡片都磨砂） | 2024 后期开始烂大街，掩盖排版无能 |\n| 11 | **AI 生成的渐变模糊背景**（紫粉 / 蓝青大色块 blur） | 与红线 #2 联动，是 AI Slop 最强信号 |\n| 12 ⭐v2.1 | 移动端**直接套 UI 库默认皮**（Vant / Ant Mobile / NutUI 不改 token） | 没有 brand identity = 没有产品 |\n| 13 ⭐v2.1 | 移动端**缺 `viewport-fit=cover` + `safe-area-inset`**（刘海 / Home indicator 被遮） | 客户拿真机一看就崩，硬 a11y 红线 |\n| 14 ⭐v2.2 / v4.2 / v4.3 扩展 | 小程序**直接套 WeUI / Vant Weapp / TDesign-Mini / Lin-UI / TTUI / Tt-Mini-UI / KSUI / kuaishou-uikit 默认皮**（不改 token） | 四端 1 千个 demo 长一个样，没产品识别 |\n| 15 ⭐v2.2 | 小程序**缺 `<page-meta>` + `safe-area-inset` + `rpx` 适配** | 真机一看顶部胶囊 / 底部 home indicator 重叠，硬适配红线 |\n\n**小程序字体豁免说明** ⭐v2.2：小程序平台**不允许 `@font-face` 加载 web font**（出于性能与审核），无法套用红线 #1 推荐字体（Manrope / DM Sans / IBM Plex Sans）。小程序 wxss / acss 中 `font-family` 优先序：\n1. **PingFang SC**（iOS / 微信）\n2. **Source Han Sans CN** / **思源黑体**（Android / 支付宝端）\n3. **Noto Sans SC** fallback\n4. **禁** `-apple-system, BlinkMacSystemFont` 写法（红线 #1 仍生效，且这些 fallback 链在小程序里其实也只走系统中文字体）\n\n数字 / 英文如需差异化字体，可用 wxss 内联 base64 字体子集（仅 0–9 + A–Z），或干脆**全部用 PingFang SC** 数字部分，靠**字号 / 字重**做区分。\n\n---\n\n## 五、美学要素清单（每项都要想过）\n\n### 5.1 字体 Typography\n- 主字（display）选有性格的：Playfair Display / IBM Plex Serif / Space Mono / Noto Serif SC / DM Serif / Rubik Mono One\n- 副字（body）选考究的：IBM Plex Sans / Source Serif / 思源宋体 / Noto Sans SC\n- **主副反差要大**，避免同字族\n\n### 5.2 颜色 Color\n- 主色 + 锐利强调色，CSS variables 统一管理\n- 优先 **oklch** 色空间（感知均匀，避免灰调）\n- 主色占 60-70%，强调色 5-10%，中性 20-30%\n- 不要 evenly-distributed palette\n\n### 5.3 动效 Motion\n- **页面加载的 staggered reveal > 散落的微交互**\n- `animation-delay` 做级联出场\n- CSS 优先，React 用 Motion（framer-motion）\n- 一个高质量的动效 > 十个微交互\n\n### 5.4 空间 Spatial Composition\n- 不对称 / 重叠 / 对角线 / 打破网格\n- 留白充足 **或** 密集信息，二选一\n- 避免居中对齐一统到底\n\n### 5.5 氛围 Backgrounds & Texture\n- 渐变网格 / 噪点 / 几何图案 / 戏剧阴影\n- 装饰性边框 / 自定义光标 / grain overlay\n- 不要纯色底（除非极简流派明确需要）\n\n### 5.6 Design Tokens ⭐v4.0 / v4.5 加 motion\n- 每个流派一份 [`tokens/<slug>.json`](tokens/)，扁平 1 层 schema：`color` / `colorHex` / `typography` / `spacing` / `radius` / `shadow` / **`motion` ⭐v4.5** / `examplePath` / `redLineWaiver?`\n- **8 个流派**：`bold-minimal` / `editorial` / `brutalist` / `retro-future` / `organic` / `mobile-native-ios` / `mobile-native-md3` / `mobile-native-harmony`\n- **三个导出器**（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)\n- **使用流程**：先在 §六 阶段 3.5 选定流派 → 跑 jq 命令出 CSS vars / Tailwind config → Junior Pass starter HTML 直接 `var(--color-xxx)` / `var(--duration-fast)` 引用\n- schema 详细见 [`tokens/_schema.md`](tokens/_schema.md)；横向对比见 [`tokens/_compare-matrix.md`](tokens/_compare-matrix.md)（含 v4.5 motion 哲学速查）\n\n### 5.7 Motion Tokens ⭐v4.5（动效原则）\n动效不是装饰，是**时间维度的版式**。每个流派的动效原则与该流派静态视觉一致：\n- **bold-minimal / editorial**：克制 / 稳重 — 单一 easing、决不弹跳\n- **brutalist / retro-future**：硬切 / CRT 闪烁 — linear / step easing，禁缓动函数\n- **organic**：弹性 — spring 1.56 超调，模拟手作回落\n- **mobile-native iOS / MD3 / Harmony**：照搬平台 spec（iOS spring / MD3 12 档 emphasized / 鸿蒙 fluid）\n\n**实现**：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)) }`。\n\n**禁忌**（继承 §四 红线）：\n- 禁滥用 motion（每个元素都 hover scale → 头晕）\n- 禁 `transition: all` —— 总是显式列 properties\n- 禁忽略 `prefers-reduced-motion: reduce` —— 媒体查询关掉 stagger / spring\n\n---\n\n## 六、工作流（Junior → Full 两趟渲染）\n\n### 阶段 1 · 理解（Understand）\n- 复述需求 / 目的 / 受众\n- 确认基调和流派\n- 列出硬约束（技术栈、浏览器兼容、a11y）\n- **多流派模式判断 ⭐v4.1**：用户没给明确流派 + 触发词命中\"几个方向 / 三个风格 / 帮我选\" → 走 [`references/multi-genre-compare.md`](references/multi-genre-compare.md) 流程；否则进单流派 Junior pass\n\n### 阶段 2 · Junior Pass（假设占位，快速出骨架）\n- **从 `examples/<流派>/index.html` 起手**，复制到目标文件再改 — 不要从空白起步\n- 同时打开 `references/colors.md` 和 `references/typography.md` 锁配色 / 字体\n- 用占位文案（Lorem Ipsum 或真实类似文案）+ 占位图片（Picsum/Unsplash 链接）\n- 跑通**结构、栅格、主要交互**\n- **诚实标注**每一块占位（`<!-- TODO: 真实文案 -->`）\n- 让用户看到方向再继续\n\n### 阶段 3 · Full Pass（补内容、调细节）\n- 补真实文案（问用户要 或 用 `huo15-openclaw-brand-protocol` 抓品牌资源）\n- 替换真实图片（需要下载时返回 CLI 命令，不用 child_process）\n- 微调字号、行高、字距、间距、阴影层级\n- 加动效\n\n### 阶段 3.5 · Tokens 导出（可选）⭐v4.0\n当用户要把设计落地到既有项目（已有 Tailwind / 已有 Figma 设计系统 / 多产品复用）：\n- 选定流派 → 找到对应 [`tokens/<slug>.json`](tokens/)\n- 跑 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)）\n- 转换产物建议落到 `<用户项目>/generated/tokens/` 入仓\n- **不强制**：纯一次性 H5 / 海报场景跳过本阶段，直接用 `examples/` 起手即可\n\n### 阶段 4 · 自验证（Self-Verify）⭐v3.0 工作流升级\n\n**优先路线**：**Claude in Chrome MCP**，由 Claude 直接驱动浏览器渲染并截图，不需要让用户跑命令。\n- `mcp__Claude_in_Chrome__list_connected_browsers` → 检查浏览器连接\n- `mcp__Claude_in_Chrome__navigate` → 打开 `file://` 或 URL\n- `mcp__Claude_in_Chrome__computer({action:\"screenshot\", save_to_disk:true})` → 截图\n- `mcp__Claude_in_Chrome__read_console_messages` → 抓 oklch fallback / 字体 404 / JS 报错\n- 移动端用 `resize_window` 切到设备 viewport（393×852 / 412×915 / 396×858）\n\n**Fallback 顺序**（按场景降级）：\n1. **MCP 不可用**（`list_connected_browsers` 返 `[]`）→ Playwright CLI（return-cliCmd 让用户执行，延续禁 child_process 铁律）：\n   ```bash\n   # 桌面端\n   npx playwright-core screenshot <URL 或 file:///绝对路径> ~/verify.png --viewport-size=1440,900\n   # 移动端（MOBILE-NATIVE 流派必跑）\n   npx playwright-core screenshot <URL> ~/verify-iphone.png --viewport-size=393,852\n   npx playwright-core screenshot <URL> ~/verify-android.png --viewport-size=412,915\n   ```\n2. **微信小程序场景** → 微信开发者工具打开 `examples/mini-program/wechat/`，编译预览 / 真机调试扫码\n3. **支付宝小程序场景** → 支付宝小程序 IDE 打开 `examples/mini-program/alipay/`，预览扫码\n4. **抖音小程序场景 ⭐v4.2** → 抖音开发者工具打开 `examples/mini-program/douyin/`，编译预览 / 扫码用抖音 App 看真机\n5. **快手小程序场景 ⭐v4.3** → 快手小程序开发者工具打开 `examples/mini-program/kuaishou/`，编译预览 / 扫码用快手 App 看真机\n\n**完整决策树 + 命令清单 + 兼容性矩阵** 见 [`references/self-verify.md`](references/self-verify.md)（v3.0 新增手册）。\n\n**评审接力**：截图回收后由用户人眼审，或调 `huo15-openclaw-design-critique` 5 维打分。MOBILE-NATIVE 流派额外检查：safe-area-inset 上下有效、tab-bar 触达高度 ≥ 44pt / 48dp；小程序检查 `<page-meta>` 存在 + tabBar native + rpx 适配。\n\n**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% 视为可发布。\n\n### 阶段 5 · 可选 · 评审（Review）\n调用 `huo15-openclaw-design-critique` 做 5 维评分 + Keep/Fix/Quick Wins。\n\n---\n\n## 七、产出清单（每次交付必含）\n\n1. **代码文件**（`index.html` / `App.tsx` / `page.vue`），可直接运行\n2. **3 行设计说明**：\n   - 流派（从 §三 五选一）\n   - 关键设计选择（字体 / 主色 / 动效三选一突出）\n   - 差异点（用户会记住什么）\n3. **（可选）截图验证 CLI 命令**\n4. **（可选）已知限制**（占位图未替换 / 未测移动端等）\n\n---\n\n## 八、与其他 huo15 技能的分工\n\n| 能力 | 归属技能 |\n|------|---------|\n| Web UI / HTML 原型 / 落地页 | **本技能** |\n| 设计方向选择（多流派对比） | `huo15-openclaw-design-director` |\n| 品牌规范抓取 + brand-spec | `huo15-openclaw-brand-protocol` |\n| 设计评审 5 维打分 | `huo15-openclaw-design-critique` |\n| PPT 演示稿 | `huo15-openclaw-ppt` |\n| Word / PDF 文档 | `huo15-openclaw-office-doc` |\n\n---\n\n## 九、触发词\n\n**Web 端**\n- 做网站 / 做落地页 / 做官网 / 做仪表盘\n- 做组件 / 做 React 组件 / 做 Vue 组件\n- HTML 原型 / 页面原型 / 前端原型\n- 美化页面 / 优化 UI / 前端设计 / Web 设计\n- 做海报 / 做详情页 / 做信息图 / 产品页\n\n**移动端 ⭐v2.1**\n- 做 APP / 做 APP 原型 / 做 APP 落地页 / 做 APP UI\n- 做 H5 / 做移动 H5 / 做移动落地页\n- iOS 风格 / iOS HIG / iPhone 设计\n- 安卓 / Android / Material Design / MD3 / 安卓风格\n- 鸿蒙 / HarmonyOS / 鸿蒙设计\n\n**小程序 ⭐v2.2 起，v4.3 补齐四端**\n- 做小程序 / 做微信小程序 / 做支付宝小程序 / 做抖音小程序 / 做快手小程序\n- 小程序原型 / 小程序落地页 / 小程序首页\n- wxml / wxss / 微信小程序设计\n- axml / acss / 支付宝小程序设计\n- ttml / ttss / 抖音小程序设计 ⭐v4.2\n- ksml / 快手小程序设计 ⭐v4.3\n- 四端小程序 / 多端同步\n\n**Design Tokens ⭐v4.0**\n- design tokens / 设计 tokens / 设计 token / token 导出\n- 做设计系统 / 设计系统 / design system\n- Tailwind 配色 / Tailwind 主题 / 流派 token\n- Figma tokens / Tokens Studio / Figma 主题\n- jq 转 CSS variables / 多产品共享主题\n\n**多流派对比 ⭐v4.1**\n- 几个方向对比 / 三个风格对比 / 多流派对比\n- 帮我选方向 / 帮我选流派 / 你定方向\n- design direction / 设计方向 / 风格提案 / 方向选型\n- 三套 Junior pass / 三方向草稿\n- 五维矩阵 / 流派打分\n\n**无障碍审计 ⭐v4.4**\n- 无障碍 / a11y / WCAG / WCAG 2.2\n- accessibility / 无障碍审计 / 无障碍合规\n- Lighthouse / axe-core / axe 审计\n- 屏幕阅读器 / 键盘可操作 / 焦点环\n- 对比度 / 触达目标 / alt 文本 / 色盲\n\n**动效 / Motion Tokens ⭐v4.5**\n- 做动效 / 加动效 / 动画 / motion / animation\n- motion tokens / 动效 token / 动画 token\n- duration / easing / 缓动函数 / cubic-bezier\n- spring / 弹簧动效 / staggered / 级联出场\n- prefers-reduced-motion / 减少动效 / 无障碍动效\n\n---\n\n## 十、版本历史\n\n- **v4.5.0（当前 · 2026-04-27）**：动效 tokens。8 个 [`tokens/<slug>.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 化升级。\n- **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 / 多流派对比均不变**，纯无障碍审计能力补齐。\n- **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 / 多流派对比均不变**，纯第四端补齐。\n- **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 / 多流派对比均不变**，纯第三端补齐。\n- **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 已就位）。\n- **v4.0.0（2026-04-26）**：design tokens 系统化。新增 `tokens/` 目录：8 个流派各一份扁平 1 层 JSON（`color` / `colorHex` / `typography` / `spacing` / `radius` / `shadow` \n\nArchive v4.4.0: 53 files, 76398 bytes\n\nFiles: _meta.json (149b), examples/bold-minimal/index.html (3795b), examples/brutalist/index.html (3856b), examples/editorial/index.html (4646b), examples/mini-program/alipay/app.js (116b), examples/mini-program/alipay/app.json (479b), examples/mini-program/alipay/mini.project.json (178b), examples/mini-program/alipay/pages/index/index.js (771b), examples/mini-program/alipay/pages/index/index.json (74b), examples/mini-program/douyin/app.js (109b), examples/mini-program/douyin/app.json (541b), examples/mini-program/douyin/pages/index/index.js (771b), examples/mini-program/douyin/pages/index/index.json (79b), examples/mini-program/douyin/project.config.json (333b), examples/mini-program/kuaishou/app.css (373b), examples/mini-program/kuaishou/app.js (109b), examples/mini-program/kuaishou/app.json (541b), examples/mini-program/kuaishou/pages/index/index.css (2535b), examples/mini-program/kuaishou/pages/index/index.js (771b), examples/mini-program/kuaishou/pages/index/index.json (79b), examples/mini-program/kuaishou/project.config.json (335b), examples/mini-program/README.md (5168b), examples/mini-program/wechat/app.js (109b), examples/mini-program/wechat/app.json (595b), examples/mini-program/wechat/pages/index/index.js (771b), examples/mini-program/wechat/pages/index/index.json (59b), examples/mini-program/wechat/project.config.json (406b), examples/mini-program/wechat/sitemap.json (181b), examples/mobile-native/harmony/index.html (8676b), examples/mobile-native/ios/index.html (8593b), examples/mobile-native/md3/index.html (8631b), examples/organic/index.html (4232b), examples/retro-future/index.html (3906b), references/a11y-checklist.md (7338b), references/colors.md (5019b), references/inspirations.md (6222b), references/multi-genre-compare.md (5789b), references/self-verify.md (6953b), references/typography.md (4031b), SKILL.md (28868b), tokens/_compare-matrix.md (3106b), tokens/_schema.md (1988b), tokens/bold-minimal.json (828b), tokens/brutalist.json (826b), tokens/editorial.json (890b), tokens/exporters/to-css-vars.md (1775b), tokens/exporters/to-figma.md (2376b), tokens/exporters/to-tailwind.md (1805b), tokens/mobile-native-harmony.json (1197b), tokens/mobile-native-ios.json (1151b), tokens/mobile-native-md3.json (1733b), tokens/organic.json (1014b), tokens/retro-future.json (1084b)\n\nArchive v4.3.0: 52 files, 70926 bytes\n\nFiles: _meta.json (149b), examples/bold-minimal/index.html (3795b), examples/brutalist/index.html (3856b), examples/editorial/index.html (4646b), examples/mini-program/alipay/app.js (116b), examples/mini-program/alipay/app.json (479b), examples/mini-program/alipay/mini.project.json (178b), examples/mini-program/alipay/pages/index/index.js (771b), examples/mini-program/alipay/pages/index/index.json (74b), examples/mini-program/douyin/app.js (109b), examples/mini-program/douyin/app.json (541b), examples/mini-program/douyin/pages/index/index.js (771b), examples/mini-program/douyin/pages/index/index.json (79b), examples/mini-program/douyin/project.config.json (333b), examples/mini-program/kuaishou/app.css (373b), examples/mini-program/kuaishou/app.js (109b), examples/mini-program/kuaishou/app.json (541b), examples/mini-program/kuaishou/pages/index/index.css (2535b), examples/mini-program/kuaishou/pages/index/index.js (771b), examples/mini-program/kuaishou/pages/index/index.json (79b), examples/mini-program/kuaishou/project.config.json (335b), examples/mini-program/README.md (5168b), examples/mini-program/wechat/app.js (109b), examples/mini-program/wechat/app.json (595b), examples/mini-program/wechat/pages/index/index.js (771b), examples/mini-program/wechat/pages/index/index.json (59b), examples/mini-program/wechat/project.config.json (406b), examples/mini-program/wechat/sitemap.json (181b), examples/mobile-native/harmony/index.html (8676b), examples/mobile-native/ios/index.html (8593b), examples/mobile-native/md3/index.html (8631b), examples/organic/index.html (4232b), examples/retro-future/index.html (3906b), references/colors.md (5019b), references/inspirations.md (6222b), references/multi-genre-compare.md (5789b), references/self-verify.md (5894b), references/typography.md (4031b), SKILL.md (26633b), tokens/_compare-matrix.md (3106b), tokens/_schema.md (1988b), tokens/bold-minimal.json (828b), tokens/brutalist.json (826b), tokens/editorial.json (890b), tokens/exporters/to-css-vars.md (1775b), tokens/exporters/to-figma.md (2376b), tokens/exporters/to-tailwind.md (1805b), tokens/mobile-native-harmony.json (1197b), tokens/mobile-native-ios.json (1151b), tokens/mobile-native-md3.json (1733b), tokens/organic.json (1014b), tokens/retro-future.json (1084b)\n\nArchive v4.2.0: 45 files, 66568 bytes\n\nFiles: _meta.json (149b), examples/bold-minimal/index.html (3795b), examples/brutalist/index.html (3856b), examples/editorial/index.html (4646b), examples/mini-program/alipay/app.js (116b), examples/mini-program/alipay/app.json (479b), examples/mini-program/alipay/mini.project.json...","readmeExcerpt":"Skill: Huo15 Openclaw Frontend Design Owner: zhaobod1 Summary: 高保真 Web UI / 移动 H5 / iOS / Android / HarmonyOS / 微信 + 支付宝 + 抖音 + 快手 四端小程序 原生风格原型 + 大胆美学方向 + 反 AI Slop 硬红线 + 8 流派 design tokens（含 motion）系统化（CSS vars / Tailwi... Tags: latest:4.7.0 Version history: v4.7.0 | 2026-05-29T05:11:47.832Z | auto **2026 微趋势补丁引入，并强化主流与年代感分层** - 新增2026微趋势补丁（Editorial Tech、Spatial Web、AI-Backlash、Brutalist 2026），为设计提供流派之上的年代感锚点，与desi","codeSnippets":[],"executableExamples":[{"language":"bash","snippet":"# 桌面端\n   npx playwright-core screenshot <URL 或 file:///绝对路径> ~/verify.png --viewport-size=1440,900\n   # 移动端（MOBILE-NATIVE 流派必跑）\n   npx playwright-core screenshot <URL> ~/verify-iphone.png --viewport-size=393,852\n   npx playwright-core screenshot <URL> ~/verify-android.png --viewport-size=412,915"},{"language":"text","snippet":"# 1. 浏览器渲染（已在 self-verify §1.2 完成）\nmcp__Claude_in_Chrome__navigate({ url: \"file:///abs/index.html\", tabId: <id> })\n\n# 2. 注入 axe-core 并执行\nmcp__Claude_in_Chrome__javascript_tool({\n  tabId: <id>,\n  code: `\n    const s = document.createElement('script');\n    s.src = 'https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.10.0/axe.min.js';\n    document.head.appendChild(s);\n    await new Promise(r => s.onload = r);\n    return await axe.run({ runOnly: ['wcag2aa', 'wcag22aa'] });\n  `\n})\n\n# 3. 解析返回的 violations / passes / incomplete，对照本清单标记"},{"language":"bash","snippet":"# 单次跑（return-cliCmd 让用户执行，禁 child_process）\nnpx lighthouse <URL 或 file://> --only-categories=accessibility --output=html --output-path=./a11y-report.html --chrome-flags=\"--headless\"\n\n# 批量跑（多个 examples 对比）\nfor f in examples/*/index.html; do\n  npx lighthouse \"file://$(pwd)/$f\" --only-categories=accessibility --output=json --output-path=\"./reports/$(dirname $f | tr / _).json\" --chrome-flags=\"--headless\"\ndone"},{"language":"text","snippet":"director 选 3 流派 (or 自动取反差对位)\n     ↓\n3 个 Junior pass 并行 (用 Explore subagent 隔离 context)\n     ↓\n3 张截图 (Chrome MCP / Playwright)\n     ↓\ndirector 五维矩阵打分 / design-critique 5 维评分\n     ↓\n用户选定 → 单流派走 §六 阶段 3 Full Pass"},{"language":"text","snippet":"mcp__Claude_in_Chrome__navigate({ url: \"file:///abs/output-bold-minimal.html\", tabId: <id> })\nmcp__Claude_in_Chrome__computer({ action: \"screenshot\", tabId: <id>, save_to_disk: true })\n# 重复对 organic / brutalist"},{"language":"jsonc","snippet":"// director → frontend-design\n{\n  \"task\": \"multi-genre-junior-pass\",\n  \"genres\": [\"bold-minimal\", \"organic\", \"brutalist\"],\n  \"context\": {\n    \"client\": \"<品牌名>\",\n    \"scope\": \"<目标页面 / 组件类型>\",\n    \"differentiator\": \"<差异点一句话>\"\n  },\n  \"briefs\": {\n    \"bold-minimal\": \"<director 写的简报>\",\n    \"organic\": \"...\",\n    \"brutalist\": \"...\"\n  }\n}\n\n// frontend-design → director（截图回流）\n{\n  \"task\": \"multi-genre-junior-pass-done\",\n  \"outputs\": [\n    { \"genre\": \"bold-minimal\", \"html\": \"<rel-path>\", \"screenshot\": \"<rel-path>\" },\n    { \"genre\": \"organic\", \"html\": \"<rel-path>\", \"screenshot\": \"<rel-path>\" },\n    { \"genre\": \"brutalist\", \"html\": \"<rel-path>\", \"screenshot\": \"<rel-path>\" }\n  ]\n}"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: huo15-openclaw-frontend-design\ndisplayName: 火一五前端设计技能\ndescription: 高保真 Web UI / 移动 H5 / iOS / Android / HarmonyOS / 微信 + 支付宝 + 抖音 + 快手 四端小程序 原生风格原型 + 大胆美学方向 + 反 AI Slop 硬红线 + 8 流派 design tokens（含 motion）系统化（CSS vars / Tailwind / Figma 三导出） + 多流派并行对比 + WCAG 2.2 AA 无障碍自动审计 + 动效 tokens + 2026 微趋势补丁（Editorial Tech / Spatial Web / AI-Backlash / Brutalist 2026）。用于构建网站、落地页、仪表盘、APP 移动端、小程序（四端）、React/Vue 组件、HTML 海报、产品详情页、信息图、设计系统、无障碍合规页面、动效系统。配套 6 大美学流派 + 4 条 2026 微趋势 + 小程序子集、15 条硬红线、Junior/Full 两趟渲染、design tokens（color / typography / spacing / radius / shadow / motion）；自验证 Claude in Chrome MCP 优先 + 多路线 fallback + axe-core / Lighthouse a11y 审计；多流派对比与 design-director v3.x 联动。触发词：做网站、做落地页、做 UI、做 APP、做 H5、做小程序、做设计系统、design tokens、做动效、motion tokens、wxml、axml、ttml、ksml、做组件、HTML 原型、页面设计、移动端设计、前端设计、做海报、做详情页、iOS 风格、安卓风格、鸿蒙风格、微信小程序、支付宝小程序、抖音小程序、快手小程序、几个方向对比、风格提案、无障碍、a11y、WCAG、Lighthouse 审计、动画时长、easing、缓动函数、Editorial Tech、Spatial Web、AI-Backlash、Brutalist 2026、2026 微趋势。\nversion: 4.7.0\naliases:\n  - 火一五前端设计技能\n  - 火一五Web设计技能\n  - 火一五APP设计技能\n  - 火一五移动端设计技能\n  - 火一五H5设计技能\n  - 火一五小程序设计技能\n  - 火一五抖音小程序技能\n  - 火一五快手小程序技能\n  - 火一五无障碍审计技能\n  - 火一五动效技能\n  - 火一五设计系统技能\n  - 火一五落地页技能\n  - 火一五UI设计技能\n  - 火一五海报设计技能\n  - 火一五前端设计\n  - 前端设计\n  - UI 设计\n  - 页面设计\n  - HTML 原型\n  - 落地页设计\n  - 海报设计\n  - Web 设计\n  - APP 设计\n  - 移动端设计\n  - H5 设计\n  - 小程序设计\n  - 微信小程序\n  - 支付宝小程序\n  - 抖音小程序\n  - 快手小程序\n  - 无障碍\n  - a11y\n  - WCAG\n  - 动效\n  - motion tokens\n  - 动画 tokens\n  - design tokens\n  - 设计 tokens\n  - 设计系统\n---\n\n# 火一五前端设计技能 v4.7\n\n> 高保真 Web UI + 移动端 / APP / H5 + 微信 / 支付宝 / 抖音 / 快手 四端小程序 + design tokens（含 motion）系统化 + 多流派并行对比 + WCAG 2.2 AA 无障碍审计 + 动效 tokens + Tailwind v4 `@theme` 适配 + **2026 微趋势补丁** 原型生成 — 青岛火一五信息科技有限公司\n> 设计理念对标 Anthropic `frontend-design` skill 与 2026 社区共识，本土化改写、不拷贝官方内容\n> v2.0 起：5 流派 starter HTML（`examples/`）+ 配色 / 字体 / 灵感三件套（`references/`）+ 反 AI Slop 红线扩到 11 条\n> v2.1 起：第 6 流派 `MOBILE-NATIVE`（iOS HIG / Material Design 3 / HarmonyOS 三套 starter）+ 移动端红线 2 条（共 13 条）+ 触发词覆盖 APP / H5 / 移动端\n> v2.2 起：微信小程序 + 支付宝小程序 starter（归 MOBILE-NATIVE 子集）+ 小程序红线 2 条（共 15 条）+ 字体豁免说明 + 触发词覆盖 wxml / axml\n> v3.0 起：自验证工作流升级 — Claude in Chrome MCP 优先，Playwright CLI / 微信开发者工具 / 支付宝 IDE 三路线 fallback；新增 [`references/self-verify.md`](references/self-verify.md) 操作手册\n> v4.0 起：design tokens 系统化 — 8 个流派统一 [`tokens/<slug>.json`](tokens/) 扁平 schema（color / colorHex / typography / spacing / radius / shadow），三导出器 jq 一行转 CSS variables / Tailwind config / Figma Tokens Studio\n> 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` 联动手册\n> v4.2 起：小程序三端齐 — 抖音 starter；红线 #14 UI 库列表扩展\n> v4.3 起：小程序四端齐 — 快手 starter；触发词扩到快手小程序 / ksml\n> v4.4 起：a11y 自动审计 — WCAG 2.2 AA 30 条速查 + axe-core MCP 注入 + Lighthouse CLI fallback\n> v4.5 起：动效 tokens — 8 流派 motion 字段差异化动效原则\n> v4.6 起：Tailwind v4 `@theme {}` 块导出 + oklch 原生支持\n> **v4.7 起**：2026 微趋势补丁 — 新增 §三补 4 条 2026 当代微趋势（Editorial Tech 编辑科技 / Spatial / Depth Web 半 3D"},{"path":"examples/mini-program/README.md","content":"# 小程序 Starter — 火一五前端设计技能 v4.3\n\n> 微信 + 支付宝 + 抖音 + 快手 **四端** starter。**浏览器无法直接渲染** wxml / axml / ttml / ksml，必须用各家 IDE。\n\n## 微信小程序\n\n1. 下载并安装 [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)（Stable v1.06+）\n2. 打开工具 → **项目 → 导入项目** → 目录选 `wechat/`\n3. AppID 选\"测试号\"或填自有；项目名留空走默认\n4. 点**编译**：左侧模拟器看渲染；点**真机调试**扫码看真机\n5. 页面走 `pages/index/index`，全局配置 `app.json`\n\n## 支付宝小程序\n\n1. 下载并安装 [支付宝小程序 IDE](https://opendocs.alipay.com/mini/ide/download)\n2. 打开 IDE → **文件 → 打开项目** → 目录选 `alipay/`\n3. 点**预览**，扫码用支付宝 App 看真机\n4. 配置文件名是 `mini.project.json`（不是 `project.config.json`），别搞混\n\n## 抖音小程序\n\n1. 下载并安装 [抖音开发者工具](https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/developer-instrument/installation/developer-instrument-update-and-download)\n2. 打开工具 → **项目 → 导入项目** → 目录选 `douyin/`\n3. AppID 用\"测试号\"或填自有\n4. 点**编译预览**，扫码用抖音 App 看真机\n5. 模板后缀是 `.ttml` / `.ttss`（与微信 `.wxml` / `.wxss` 95% 同源，仅前缀差异）\n\n## 快手小程序 ⭐v4.3\n\n1. 下载并安装 [快手小程序开发者工具](https://mp.kuaishou.com/docs/develop/developerTools/downloadPath.html)\n2. 打开工具 → **项目 → 导入项目** → 目录选 `kuaishou/`\n3. AppID 用\"测试号\"或填自有\n4. 点**编译预览**，扫码用快手 App 看真机\n5. 模板后缀是 `.ksml` / 样式 `.css`（标准 CSS 后缀，区别于其他端）\n\n## 四端同步迭代姿势 ⭐v4.3 升级\n\n**推荐顺序**：微信 → 抖音 → 快手（最相近）→ 支付宝（差异最大）\n\n### 步骤 1：先在 `wechat/` 改完\n\n`wxml` + `wxss` + 配置全部跑通。开发体验在微信端最顺。\n\n### 步骤 2：复制到 `douyin/` 改前缀（机械替换，3 分钟）\n\n| 微信 | 抖音 |\n|---|---|\n| `wx:for` / `wx:key` / `wx:if` | `tt:for` / `tt:key` / `tt:if` |\n| `wxml` 文件名 | `ttml` |\n| `wxss` 文件名 | `ttss` |\n| `bindtap` / `bindinput` | **保留**（兼容微信 bind 风格） |\n\n### 步骤 3：复制到 `kuaishou/` 改前缀（机械替换，3 分钟）\n\n| 微信 | 快手 |\n|---|---|\n| `wx:for` / `wx:key` / `wx:if` | `ks:for` / `ks:key` / `ks:if` |\n| `wxml` 文件名 | `ksml` |\n| `wxss` 文件名 | `css`（注意：快手用标准 CSS 后缀） |\n| `bindtap` / `bindinput` | **保留** |\n\n### 步骤 4：复制到 `alipay/` 改前缀（机械替换，5 分钟）\n\n| 微信 | 支付宝 |\n|---|---|\n| `wx:for` / `wx:key` / `wx:if` | `a:for` / `a:key` / `a:if` |\n| `bindtap` / `bindinput` / `bindsubmit` | `onTap` / `onInput` / `onSubmit` |\n| `wxml` 文件名 | `axml` |\n| `wxss` 文件名 | `acss` |\n| `<page-meta>` | **不支持**，改 `my.setNavigationBar` API（写在 onLoad） |\n| `enhanced=\"true\"` 等微信特有属性 | 删掉 |\n| `app.json` tabBar `color`/`text` | `textColor`/`name` |\n\n### 步骤 5：四端 ICON / 图片资源建议放 CDN（本地用 base64 或纯色块占位）\n\n## 反 AI Slop 红线（v4.3 扩展 UI 库列表）\n\n| # | 禁用项 | 替代方案 |\n|---|---|---|\n| 14 | 直接套 **WeUI / Vant Weapp / TDesign-Mini / Lin-UI / TTUI / Tt-Mini-UI / KSUI / kuaishou-uikit** 默认皮 | 自定义 token，至少改 5 个变量再用 |\n| 15 | 缺 `<page-meta>` + `safe-area-inset` + `rpx` 适配 | 见本目录 `wechat/pages/index/index.wxml` |\n\n通用红线 #1 字体豁免：小程序里 `font-family` 优先 PingFang SC / Source Han Sans SC / Noto Sans SC（不能加载 Web Font）。\n\n## 视觉风格\n\n四端 starter 共用 ORGANIC 流派暖色调（米白 + 土橙 + 暖卡片），主题\"手作商品列表\"。`hero` + `chips` + 商品 `grid` 三段式，避开千篇一律的\"banner + features + cta\"。\n\n## 引用关系\n\n- 配色逻辑参考 [`references/colors.md`](../../references/colors.md) §5 ORGANIC（用 hex 表达 oklch 等价值，因小程序基础库 < 3.0 不一定支持 oklch）\n- 字体策略参考 [`references/typography.md`](../../references/typography.md) §6 + 小程序豁免说明（见 SKILL.md §四 v2.2 新增段）\n- 多端同步迭代速查见本文 §四端同步迭代姿势\n\n## "},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn7byevkn40d6z4p7ghdb097z983tj33\",\n  \"slug\": \"huo15-openclaw-frontend-design\",\n  \"version\": \"4.7.0\",\n  \"publishedAt\": 1780031507832\n}"},{"path":"references/a11y-checklist.md","content":"# a11y / WCAG 2.2 AA 速查清单 ⭐v4.4\n\n> 30 条速查 + 场景优先级 + 自动检查路线（axe-core / Lighthouse）。本清单**不是**SKILL.md §四\"反 AI Slop 红线\"那种判废级硬规则，而是验证阶段的**门控检查表**：每条标 ✓ 或 ⚠（待修） 或 N/A。\n\n## 1. Perceivable · 可感知（8 条）\n\n| # | 检查点 | 自动可测 | 工具 |\n|---|---|---|---|\n| 1 | 文本对比度 ≥ **4.5:1**（正文）/ **3:1**（大字 18pt+ 或 14pt+ 粗） | ✓ | axe / Lighthouse |\n| 2 | 非文本元素（图标 / UI 控件 / 图表）对比度 ≥ **3:1** | ✓ | axe |\n| 3 | 所有 `<img>` 有 `alt` 属性（装饰图用 `alt=\"\"`） | ✓ | axe / Lighthouse |\n| 4 | 视频有 captions / transcripts（视频内容站） | ✗ | 人审 |\n| 5 | **颜色不是唯一信息载体**（错误状态除颜色外要有图标 / 文字） | ✗ | 人审 |\n| 6 | 自动播放音频 ≤ 3 秒 或 提供暂停 | ✗ | 人审 |\n| 7 | 文本可放大 200% 而不破坏布局（用 rem / em，不全用 px） | ✓ | Lighthouse |\n| 8 | GIF / 视频闪烁频率 < 3 次/秒（防光敏性癫痫） | ✗ | 人审 |\n\n## 2. Operable · 可操作（11 条）\n\n| # | 检查点 | 自动可测 | 工具 |\n|---|---|---|---|\n| 9 | 全部交互**可键盘操作**（Tab / Shift+Tab / Enter / Esc / Space） | ⚠ 部分 | axe + 人审 |\n| 10 | **焦点环可见**（`:focus-visible` 保留浏览器默认或自绘清晰样式） | ✓ | axe |\n| 11 | 没有键盘陷阱（trap） — Tab 进得去也出得来 | ✗ | 人审（Tab 全键过一遍）|\n| 12 | \"Skip to main content\" 链接（首个 Tab 焦点） | ✓ | axe |\n| 13 | 每页有唯一 `<title>` | ✓ | Lighthouse |\n| 14 | heading 层级合理（h1 → h2 → h3 不跳级 / 不重复 h1） | ✓ | axe |\n| 15 | 链接文字描述清晰 — **禁** \"点这里\" / \"查看更多\" 这类无上下文 | ✓ 部分 | axe |\n| 16 ⭐2.2 | 触达目标尺寸 ≥ **24×24px**（按钮 / 链接 / 表单控件） | ✓ | axe + 真机 |\n| 17 ⭐2.2 | 拖拽操作有**键盘 / 单点替代**（slider 可左右键） | ✗ | 人审 |\n| 18 ⭐2.2 | 认证不强制 cognitive test（不让用户记复杂密码 / 解谜） | ✗ | 人审 |\n| 19 ⭐2.2 | 重复表单字段不强制再输入（自动填充 + remember 选项） | ✗ | 人审 |\n\n## 3. Understandable · 可理解（7 条）\n\n| # | 检查点 | 自动可测 | 工具 |\n|---|---|---|---|\n| 20 | `<html lang=\"...\">` 必填（中文 `zh` / `zh-CN`） | ✓ | axe |\n| 21 | 所有表单控件**有 `<label>`** 或 `aria-label` | ✓ | axe |\n| 22 | 错误提示**清晰具体**（不只是\"输入有误\"） | ✗ | 人审 |\n| 23 | 错误**给出纠正建议**（\"邮箱缺少 @\"，不只是\"格式错\"） | ✗ | 人审 |\n| 24 | 表单提交前可**确认 / 撤销**（金额 / 删除等关键操作） | ✗ | 人审 |\n| 25 | 上下文变化（焦点跳转 / 弹窗 / 页面跳转）**用户可预期** | ✗ | 人审 |\n| 26 | 控件文本与功能一致（按钮叫\"提交\"就真的提交） | ✗ | 人审 |\n\n## 4. Robust · 健壮（4 条）\n\n| # | 检查点 | 自动可测 | 工具 |\n|---|---|---|---|\n| 27 | HTML **语义化** — 用 `<nav>` / `<main>` / `<article>` / `<aside>` 而不是全 `<div>` | ✓ | axe |\n| 28 | ARIA 属性正确（`aria-label` / `role` / `aria-expanded` / `aria-current`） | ✓ | axe |\n| 29 | 按钮 / 链接职责正确（提交动作用 `<button>` 不用 `<a href=\"#\">`） | ✓ | axe |\n| 30 | 状态变化通过 `aria-live` region 通知屏幕阅读器 | ⚠ 部分 | axe + 人审 |\n\n---\n\n## 场景优先级速查\n\n不同场景检查重点不同。Junior pass 阶段挑场景 P0 必跑；Full Pass 阶段全跑。\n\n| 场景 | P0 必跑（4-5 条） | P1 应跑 |\n|---|---|---|\n| **B 端 Dashboard** | #9 键盘操作 / #10 焦点环 / #14 heading / #20 lang / #27 语义化 | #1 #2 #21 #28 #30 |\n| **内容站 / 文章** | #1 文本对比 / #3 alt / #14 heading / #15 链接清晰 / #20 lang | #21 #27 |\n| **营销落地页** | #1 / #15 / #21 表单 label / #16 触达 24px | #3 #5 #20 |\n| **移动端 H5（MOBILE-NATIVE）** | #1 / #5 / #16 / #20 / #21 | #2 #7 #9 |\n| **小程序（四端）** | #5 / #16（多数 a11y 由平台 webview 兜底） | #20 #21 |\n\n---\n\n## 自动检查路线（与 [`self-verify.md`](self-verify.md) 联动）\n\n### 路线 A · Claude in Chrome MCP + axe-core（首选 ⭐v4.4）\n\n```\n# 1. 浏览器渲染（已在 self-verify §1.2 完成）\nmcp__Claude_in_Chrome__navigate({ url: \"file:///abs/index.html\", tabId: <id> })\n\n# 2. 注入 axe-core 并执行\nmcp__Claude_in_Chrome__javascript_tool({\n  ta"},{"path":"references/colors.md","content":"# 5 流派配色基线（oklch）\n\n> 全部使用 oklch 色空间。**禁紫渐变、禁 AI 模糊渐变背景**（参见 SKILL.md §四 红线 #2 / #11）。\n>\n> **⭐v4.0 起**：每个流派的配色已落到结构化 [`tokens/<slug>.json`](../tokens/) — 本文档保留可读的人类视角说明，jq 一行可转 CSS variables / Tailwind / Figma。配色硬规则源头仍在本文档。\n\n## 1. BOLD-MINIMAL · 勇敢极简\n\n| 角色 | oklch | 用途 |\n|---|---|---|\n| ink | `oklch(0.18 0 0)` | 主文字、主结构线 |\n| paper | `oklch(0.99 0.005 95)` | 背景，几乎纯白带极淡暖调 |\n| accent | `oklch(0.66 0.20 28)` | 锐利橙红，仅用于强调（hover / em） |\n| mute | `oklch(0.45 0 0)` | 次要文字 |\n\n**比例**：墨黑 20% / 留白 70% / 强调 10%。\n\n## 2. EDITORIAL · 编辑杂志\n\n| 角色 | oklch | 用途 |\n|---|---|---|\n| paper | `oklch(0.97 0.012 75)` | 暖纸色 |\n| ink | `oklch(0.20 0.015 280)` | 偏冷的墨黑 |\n| accent | `oklch(0.50 0.18 25)` | 砖红，首字下沉 / kicker / 引号 |\n| mute | `oklch(0.42 0.02 280)` | 副文字 |\n| rule | `oklch(0.20 0.015 280 / .25)` | 细分隔线 |\n\n**比例**：纸 75% / 墨 18% / 砖红 5% / 灰线 2%。\n\n## 3. BRUTALIST · 野兽派\n\n| 角色 | oklch | 用途 |\n|---|---|---|\n| paper | `oklch(0.985 0 0)` | 近纯白（不做暖偏） |\n| ink | `oklch(0.10 0 0)` | 真黑，6px 粗边 |\n| warn | `oklch(0.78 0.22 105)` | 警示黄，stamp 块 |\n\n**比例**：白 60% / 黑 30% / 警示黄 10%。**只许 3 色**。\n\n## 4. RETRO-FUTURE · 复古未来\n\n| 角色 | oklch | 用途 |\n|---|---|---|\n| bg | `oklch(0.13 0.04 280)` | 深夜紫蓝（注意：纯色，**不是渐变**） |\n| ink | `oklch(0.96 0.04 110)` | 暖白主字 |\n| neon-cyan | `oklch(0.85 0.18 195)` | 霓虹青 |\n| neon-magenta | `oklch(0.72 0.25 5)` | 霓虹洋红（**不是紫**） |\n\n**红线声明**：本流派使用霓虹双色对撞，**不得退化成紫渐变模糊背景**。所有发光必须由 `text-shadow` 多层叠加产生，禁用 `filter: blur()` 大色块当氛围。\n\n## 5. ORGANIC · 有机自然\n\n| 角色 | oklch | 用途 |\n|---|---|---|\n| paper | `oklch(0.96 0.025 85)` | 米白偏暖 |\n| ink | `oklch(0.28 0.04 50)` | 棕墨 |\n| clay | `oklch(0.62 0.13 45)` | 土橙 |\n| moss | `oklch(0.45 0.10 145)` | 森林绿 |\n| sky | `oklch(0.78 0.07 220)` | 雾蓝 |\n\n**比例**：纸 60% / 棕墨 15% / 三原色（土橙 / 苔绿 / 雾蓝）各 8% 左右。\n\n## 6. MOBILE-NATIVE · 移动原生 ⭐v2.1\n\n> 三套对照不是要你\"复制官方默认色\"——而是体现各平台的**色彩语义体系**。\n\n### 6.1 iOS HIG 风（推荐自有 brand color，避开系统蓝）\n\n| 角色 | oklch | 用途 |\n|---|---|---|\n| paper | `oklch(0.985 0.005 75)` | non-grouped 背景（暖中性） |\n| grouped-bg | `oklch(0.94 0.005 75)` | grouped table view 背景 |\n| ink | `oklch(0.18 0.005 280)` | label 主字 |\n| mute | `oklch(0.55 0.01 280)` | secondary label |\n| sep | `oklch(0.88 0.005 280)` | separator 0.5pt |\n| accent | `oklch(0.66 0.16 50)` | brand 强调（暖橙）— **替代 system blue** |\n\n**红线**：禁直接用 `#007AFF`（红线 #8）。Apple 自家 App（Music / Books / News）也都用品牌色而非系统蓝。\n\n### 6.2 Material Design 3（dynamic color，seed 自选）\n\n| 角色 | oklch | 派生方式 |\n|---|---|---|\n| seed | `oklch(0.55 0.13 175)` | **自选**色相（示例青绿，**避开 Material 默认紫**） |\n| primary | `oklch(0.55 0.13 175)` | = seed |\n| primary-container | `oklch(0.88 0.06 175)` | seed L+33 / C-50% |\n| secondary-container | `oklch(0.92 0.04 60)` | seed hue+245 / 低饱和 |\n| tertiary-container | `oklch(0.90 0.05 320)` | seed hue+145 / 低饱和 |\n| surface | `oklch(0.985 0.003 175)` | 近白带极淡 seed 色相 |\n| surface-variant | `oklch(0.93 0.01 175)` | 比 surface 暗 5% |\n| outline | `oklch(0.72 0.01 175)` | mid-tone |\n\n**规则**：seed 选 oklch C ∈ [0.10, 0.18]，避免高饱和（饱和过 → 派生 container 太脏）。\n\n### 6.3 HarmonyOS 鸿蒙（灵动色块）\n\n| 角色 | oklch | 用途 |\n|---|---|---|\n|"}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":null,"editorialQuality":{"score":100,"threshold":65,"status":"thin","wordCount":1703,"uniquenessScore":41,"reasons":["uniqueness-below-45"]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-10T07:46:28.229Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-10T07:46:28.229Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-10T10:49:47.512Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}