ClawHub 的 OpenClaw 设计技能路由：基于 openclaw-design SKILL.md 的六分支设计决策与共享契约

后端前端AI 技能AI 插件搜索引擎【免费下载链接】clawhubSkill Plugin Registry for OpenClaw项目地址https://gitcode.com/gh_mirrors/mo/clawhub点击查看免费下载本篇以 openclaw-design/SKILL.md 为核心讲解 ClawHub 如何用一个路由层技能把 OpenClaw 的设计工作分发到品牌、产品 UI、营销页面与设计审计四条专业分支以及支撑这套体系的skills-lock.json哈希锁、npx skills1.5.16版本固定安装和scripts/design-audit/自动化审计闭环。读完你可以掌握在改动界面之前如何正确选择技能分支、共享契约的九条规则各自由什么机制兜底、以及审计产物如何生成与验收。1. 为什么设计工作需要一个路由技能ClawHub 是 OpenClaw 的 Skill Plugin 注册表其前端既包含产品应用界面技能目录、发布流程、仪表盘也包含面向公众的落地页与生态页面还有品牌资产Logo、字体、吉祥物插画。不同性质的界面改动其正确依据完全不同改 Logo 应查品牌规范改产品 UI 应查语义 Token 与组件复用规则改落地页结构应查页面模式而日常防漂移则靠设计审计。openclaw-design/SKILL.md 开宗明义给出的原则是Choose one focused branch before changing an interface. Load multiple branches only when the task genuinely crosses them.即改动界面前先选定一个聚焦分支只有任务确实横跨多个领域时才同时加载多个分支。这正是 Agent 驱动开发中的常见问题让 Agent 同时加载所有设计规范既浪费上下文又容易让规则互相稀释。openclaw-design本身不含具体视觉规则它是一张分诊台把请求路由到真正拥有规则的技能上。2. 六分支路由表SKILL.md 的路由表第 11–17 行完整列出了五个分支及各自的适用范围技能适用场景openclaw-brand身份决策、字体排印、Logo、图像、文案语气voice以及非产品类的品牌物料openclaw-carapace应用 UI、语义 Token、主题、组件复用、框架适配器openclaw-design-system为正在升级既有技能锁的项目提供的兼容别名openclaw-marketing-pages公开页面构成、落地页/内容页、导航、SEO 与响应式布局openclaw-design-audit设计漂移、Token 误用、组件被私自替换、可访问性问题与周期性审计这五个分支在仓库中都是真实存在的技能目录各自带有references/参考资料openclaw-brand/SKILL.md定义了 OpenClaw 珊瑚色主色、海玻璃绿辅助色、中性墨色与暖纸底色的身份规则工作流要求先读 references/identity.md 和 references/asset-rights.md并强调状态色只能表达功能含义不能作为装饰。openclaw-carapace/SKILL.md应用 UI 的核心分支工作流第一步就是先读 references/tokens.md 再选颜色、间距、字号、圆角或阴影并按界面类型继续阅读 consumer-adapters.md、application-surfaces.md、terminal-ui.md、embedded-surfaces.md。openclaw-marketing-pages/SKILL.md公开页面分支要求先读 references/page-patterns.md规则强调第一屏必须出现真实品牌/产品/场景、避免没有内容需求的重复 CTA 区块。openclaw-design-audit/SKILL.md审计分支要求把机械性违规与主观判断分开除非有文档化规则否则建议只能作为建议报告。3. 路由决策规则从哪个分支起步路由表之外SKILL.md 的 第 19–23 行 给出了三条具体的起步规则公开网站改动从openclaw-marketing-pages起步只有当任务涉及身份、Logo、图像、字体或语气变化时才追加加载openclaw-brand。产品应用改动如果openclaw-carapace已安装就从它起步。存量升级项目正在升级既有技能锁的项目可以把openclaw-design-system作为v0.1.x的兼容别名使用。第 3 条在 openclaw-design-system/SKILL.md 中有对应说明该技能标识在v0.1.x迁移期间为既有skills-lock.json条目保留新安装应改用openclaw-carapace并且改动导入前要先检查消费方 manifest——已安装openclaw/carapace就用它否则保留旧的openclaw/design-system依赖说明符直到依赖完成迁移。这是一种典型的兼容别名 逐步收敛策略路由表保留了旧技能名的入口避免锁文件升级期间旧项目断链。安装与锁定这些技能从哪里来路由表中的技能不是手写进仓库的而是通过skills工具从openclaw/carapace仓库安装并哈希锁定的。package.json 中的安装脚本完整呈现了这条链路skills:install: npx --yes skills1.5.16 add openclaw/carapace --skill openclaw-design openclaw-brand openclaw-carapace openclaw-design-system openclaw-marketing-pages openclaw-design-audit --agent codex --copy --yes注意skills1.5.16被精确固定——这与 SKILL.md 共享契约中 refresh it withnpx skills1.5.16 update --project --yes 的版本固定是同一套约定Agent 指导的安装/刷新命令都钉死在同一个skills工具版本上避免升级 CLI 本身引入行为差异。skills-lock.json 则记录了全部六个技能的来源与内容哈希例如openclaw-design: { source: openclaw/carapace, sourceType: github, skillPath: openclaw-design/SKILL.md, computedHash: 4a9004e762b08f6c9fc836de7b4db26fc27e7b9a90342884047bbffa51c21732 }六个 OpenClaw 设计技能openclaw-brand、openclaw-carapace、openclaw-design、openclaw-design-audit、openclaw-design-system、openclaw-marketing-pages在锁文件中均指向openclaw/carapace仓库computedHash使每个 SKILL.md 的内容可校验审计与 CI 可以确认本地指导文件没有被意外篡改这正是Install agent guidance from this repositorys default branch and refresh it这一契约的可执行形态。4. 共享契约Shared Contract逐条解析SKILL.md 的 Shared Contract 是整个路由体系的基石——它不归属任何单一分支而是所有分支共同遵守的跨分支约束。共九条下面逐条结合仓库证据展开。1. Agent 指导从默认分支安装用固定版本命令刷新。即上文第 3 节展示的skills:install脚本 npx skills1.5.16 update --project --yes。固定 CLI 版本保证了指导文件这一层本身的变更也是受控的。2. 运行时 CSS 必须钉在语义化发布标签上Keep runtime CSS pinned to a semantic release tag。运行时样式库openclaw/carapace等 npm 包与指导文件是两层指导文件告诉 Agent怎么选运行时 CSS 决定实际渲染什么。钉住语义化标签意味着一次依赖升级是一个显式决策而不是 lockfile 漂移。3. 优先用语义 Token 而非原始色板值Prefer semantic tokens over raw palette values。这一条在消费方代码里有明确落点Carapace 分支要求 tokens.md before choosing colors, spacing, type, radii, or shadows 先行阅读且palette primitives only for documented exceptions。ClawHub 自身的 DESIGN.md 同样是这个契约的体现——品牌色板表格中每个色值都绑定--accent、--ink、--surface等语义 Token并明文规定 Use semantic tokens instead of raw colors。语义 Token 的价值在于主题切换明/暗只需换一层映射业务代码不动。4. 产品特定组件和布局留在消费方仓库Keep product-specific components and layouts in their consumer repository。openclaw-carapace/SKILL.md 的开头就是这个意思Use the shared package for foundations and framework-neutral visual primitives. Keep consumer-specific behavior, data, routes, and layout composition local.共享层只做框架无关的地基与视觉原语路由、数据、布局组合一律本地化。5. 至少两个消费方出现相同界面后才上提共享实现。这与 Carapace 分支的 Ownership 一节 完全一致Keep runtime behavior and framework adapters local until at least two consumers need the same interface and behavior.两个消费方需要相同界面与行为之前运行时行为与框架适配器保持本地。这是防止共享层过早抽象、被单一消费方的偶然需求绑架的标准做法。6. 变更视觉地基时保持消费方行为不变。对应 Carapace 工作流第 5 步 Keep application behavior, routes, and information architecture unchanged unless the task says otherwiseopenclaw-carapace/SKILL.md视觉重构不附带信息架构改动两类变更分开提交审查边界清晰。7. 在真实浏览器中按桌面与移动端尺寸验证渲染页面。real browser 是关键限定——不允许只靠代码走查或无头断言替代目检。这条契约由scripts/design-audit/工具链自动化落地browser-check.ts 负责真实浏览器验证package.json 暴露了四个可独立运行的审计入口design:audit:browser: bun scripts/design-audit/browser-check.ts, design:audit:codex: bun scripts/design-audit/run-codex.ts, design:audit:finalize: bun scripts/design-audit/finalize.ts, design:audit:source: bun scripts/design-audit/source-check.ts8. 消费方支持的主题都要检查明暗两种主题。DESIGN.md 的色板表本身就按 Light/Dark 双列给出如--surface为#ffffff/#121212所以换主题不是加一份新样式而是同一语义 Token 在两套映射下的行为一致性检查。审计分支的 SKILL.md 也把它列为审计工作流的固定步骤Check light and dark themes where supported。9. 没有记录在案的许可不得再分发字体、Logo 或美术资产。这一条直接对应品牌分支工作流的第 2 步——复制/再分发资产前先读 asset-rights.md且 openclaw-brand/SKILL.md 还补了一条防幻觉规则Logo 安全区clearspace只在消费方本地指导文件有明确定义时才检查否则应报告该检查不可用而不是编造一个测量值。5. 审计分支与自动化闭环openclaw-design路由表中的第五个分支openclaw-design-audit负责把契约从人守变成机器查。openclaw-design-audit/SKILL.md 定义了完整工作流先读 rubric.md 并执行全部适用类别 → 记录消费方安装的 Carapace 版本与 commit SHA → 使用与版本匹配的 Token 契约新装读openclaw-carapace升级锁读openclaw-design-system别名→ 先跑确定性源码检查、再做判断型评审 → 桌面/移动端尺寸检查渲染路由 → 明暗主题检查 → 按 report-format.md 输出 JSON 与 Markdown 报告。每个审计发现finding必须携带六个字段文件与行号、类别与严重度、稳定的规则 ID、简明修复建议、Carapace 参考出处、以及机械性还是判断型的定性。其 Curation 一节 还规定了报告的收敛策略所有 error 全量收录warning 排在 informational 之前再按受影响文件数排序精简版报告最多展示 5 条非 error 发现其余按数量汇总零 error、零 warning、不超过 5 条 informational即视为无显著漂移永远不允许编造源码位置或视觉证据。仓库内的自动化实现与这套流程一一对应脚本职责source-check.ts确定性源码检查对应工作流第 5 步 deterministic source checks before judgment-based reviewbrowser-check.ts真实浏览器桌面/移动端渲染验证run-codex.ts驱动判断型评审输出受 codex-output.schema.json 约束report.ts / finalize.ts生成与收尾 JSON/Markdown 报告validate-changes.ts校验修复改动是否越界对应 fix-policy.md 的窄改动策略测试与产物同样可查证design-audit.test.ts 与 design-audit-workflow.test.ts 覆盖审计逻辑本身design-audits/latest/design-audit.json 与 design-audits/latest/design-audit.md 保存了最近一次审计的机器可读与人类可读双格式产物——这正是契约中报告格式可被机器消费要求的直接证据。6. 使用方式小结在 ClawHub 仓库中实践这套路由体系的日常动作是查看当前锁定的技能读 skills-lock.json确认六个 OpenClaw 设计技能条目及哈希未漂移。按任务性质选分支落地页 →openclaw-marketing-pages身份变动时加openclaw-brand产品 UI →openclaw-carapace防漂移评审 →openclaw-design-audit存量锁升级项目 →openclaw-design-system别名。刷新 Agent 指导npx skills1.5.16 update --project --yes版本与 package.json 中skills:install保持一致。改完按契约自检语义 Token 优先、消费方行为不变、真实浏览器桌面移动端验证、明暗双主题、无未授权资产再分发。运行审计闭环bun run design:audit:source→bun run design:audit:browser→bun run design:audit:finalize产物落在 design-audits/latest/再按 rubric.md 的类别逐条复核。这套设计的可取之处在于职责切分得非常克制路由技能只做分诊规则技能只存规则锁文件管版本与完整性审计脚本管执行与验收。对任何需要让多个 Agent/开发者同时维护品牌 产品 UI 营销页 防漂移四类视觉资产的项目这是一个可以直接参照的骨架先定路由表再写共享契约最后用哈希锁和自动化审计把契约钉死。赞分享后端前端AI 技能AI 插件搜索引擎【免费下载链接】clawhubSkill Plugin Registry for OpenClaw项目地址https://gitcode.com/gh_mirrors/mo/clawhub点击查看免费下载相关推荐OpenClaw Carapace 设计体系实战ClawHub 的语义化 Design Token 契约与消费者适配器指南OpenClaw Carapace 设计体系实战ClawHub 的语义化 Design Token 契约与消费者适配器指南 Carapace opencl后端前端AI 技能AI 插件搜索引擎oh-my-claudecode OpenClaw/Clawhip 路由契约解读基于 signal 的统一事件载荷与下游路由实践oh my claudecode OpenClaw/Clawhip 路由契约解读基于 signal 的统一事件载荷与下游路由实践 本篇技术指南围绕 oh my人工智能AI Agent多智能体Agent 编排Agent 工作流AI 技能CLI开发工具如何使用 symfony/routing 实现灵活的 PHP 路由系统基于接口的解耦实践指南如何使用 symfony/routing 实现灵活的 PHP 路由系统基于接口的解耦实践指南 symfony/routing 是一个强大的 PHP 路由库支后端上一篇LiveRecorder文件命名与格式转换FFmpeg封装的最佳实践下一篇GetSubtitles项目架构分析深入理解下载器管理和字幕选择机制创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考