企业官网建设流程全解析

• 后端
• 前端
• AI 技能
• AI 插件
• 搜索引擎

本篇以 openclaw-design/SKILL.md 为核心，讲解 ClawHub 如何用一个"路由层"技能把 OpenClaw 的设计工作分发到品牌、产品 UI、营销页面与设计审计四条专业分支，以及支撑这套体系的skills-lock.json哈希锁、npx skills@1.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 行）完整列出了五个分支及各自的适用范围：

这五个分支在仓库中都是真实存在的技能目录，各自带有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 行 给出了三条具体的起步规则：

1. 公开网站改动：从openclaw-marketing-pages起步；只有当任务涉及身份、Logo、图像、字体或语气变化时，才追加加载openclaw-brand。
2. 产品应用改动：如果openclaw-carapace已安装，就从它起步。
3. 存量升级项目：正在升级既有技能锁的项目可以把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 skills@1.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"

注意skills@1.5.16被精确固定——这与 SKILL.md 共享契约中 "refresh it withnpx skills@1.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 repository's default branch and refresh it"这一契约的可执行形态。

4. 共享契约（Shared Contract）逐条解析

SKILL.md 的 Shared Contract 是整个路由体系的基石——它不归属任何单一分支，而是所有分支共同遵守的跨分支约束。共九条，下面逐条结合仓库证据展开。

1. Agent 指导从默认分支安装，用固定版本命令刷新。即上文第 3 节展示的skills:install脚本 +npx skills@1.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 otherwise"（openclaw-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.ts"

8. 消费方支持的主题都要检查明暗两种主题。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"即视为无显著漂移；永远不允许编造源码位置或视觉证据。

仓库内的自动化实现与这套流程一一对应：

测试与产物同样可查证：design-audit.test.ts 与 design-audit-workflow.test.ts 覆盖审计逻辑本身；design-audits/latest/design-audit.json 与 design-audits/latest/design-audit.md 保存了最近一次审计的机器可读与人类可读双格式产物——这正是契约中"报告格式可被机器消费"要求的直接证据。

6. 使用方式小结

在 ClawHub 仓库中实践这套路由体系的日常动作是：

1. 查看当前锁定的技能：读 skills-lock.json，确认六个 OpenClaw 设计技能条目及哈希未漂移。
2. 按任务性质选分支：落地页 →openclaw-marketing-pages（身份变动时加openclaw-brand）；产品 UI →openclaw-carapace；防漂移评审 →openclaw-design-audit；存量锁升级项目 →openclaw-design-system别名。
3. 刷新 Agent 指导：npx skills@1.5.16 update --project --yes（版本与 package.json 中skills:install保持一致）。
4. 改完按契约自检：语义 Token 优先、消费方行为不变、真实浏览器桌面+移动端验证、明暗双主题、无未授权资产再分发。
5. 运行审计闭环：bun run design:audit:source→bun run design:audit:browser→bun run design:audit:finalize，产物落在 design-audits/latest/，再按 rubric.md 的类别逐条复核。

这套设计的可取之处在于职责切分得非常克制：路由技能只做分诊，规则技能只存规则，锁文件管版本与完整性，审计脚本管执行与验收。对任何需要让多个 Agent/开发者同时维护"品牌 + 产品 UI + 营销页 + 防漂移"四类视觉资产的项目，这是一个可以直接参照的骨架：先定路由表，再写共享契约，最后用哈希锁和自动化审计把契约钉死。

• 后端
• 前端
• AI 技能
• AI 插件
• 搜索引擎