后端前端AI 技能AI 插件搜索引擎【免費(fèi)下載鏈接】clawhubSkill Plugin Registry for OpenClaw項(xiàng)目地址https://gitcode.com/gh_mirrors/mo/clawhub點(diǎn)擊查看免費(fèi)下載本篇以 openclaw-design/SKILL.md 為核心講解 ClawHub 如何用一個(gè)路由層技能把 OpenClaw 的設(shè)計(jì)工作分發(fā)到品牌、產(chǎn)品 UI、營銷頁面與設(shè)計(jì)審計(jì)四條專業(yè)分支以及支撐這套體系的skills-lock.json哈希鎖、npx skills1.5.16版本固定安裝和scripts/design-audit/自動(dòng)化審計(jì)閉環(huán)。讀完你可以掌握在改動(dòng)界面之前如何正確選擇技能分支、共享契約的九條規(guī)則各自由什么機(jī)制兜底、以及審計(jì)產(chǎn)物如何生成與驗(yàn)收。1. 為什么設(shè)計(jì)工作需要一個(gè)路由技能ClawHub 是 OpenClaw 的 Skill Plugin 注冊表其前端既包含產(chǎn)品應(yīng)用界面技能目錄、發(fā)布流程、儀表盤也包含面向公眾的落地頁與生態(tài)頁面還有品牌資產(chǎn)Logo、字體、吉祥物插畫。不同性質(zhì)的界面改動(dòng)其正確依據(jù)完全不同改 Logo 應(yīng)查品牌規(guī)范改產(chǎn)品 UI 應(yīng)查語義 Token 與組件復(fù)用規(guī)則改落地頁結(jié)構(gòu)應(yīng)查頁面模式而日常防漂移則靠設(shè)計(jì)審計(jì)。openclaw-design/SKILL.md 開宗明義給出的原則是Choose one focused branch before changing an interface. Load multiple branches only when the task genuinely crosses them.即改動(dòng)界面前先選定一個(gè)聚焦分支只有任務(wù)確實(shí)橫跨多個(gè)領(lǐng)域時(shí)才同時(shí)加載多個(gè)分支。這正是 Agent 驅(qū)動(dòng)開發(fā)中的常見問題讓 Agent 同時(shí)加載所有設(shè)計(jì)規(guī)范既浪費(fèi)上下文又容易讓規(guī)則互相稀釋。openclaw-design本身不含具體視覺規(guī)則它是一張分診臺把請求路由到真正擁有規(guī)則的技能上。2. 六分支路由表SKILL.md 的路由表第 11–17 行完整列出了五個(gè)分支及各自的適用范圍技能適用場景openclaw-brand身份決策、字體排印、Logo、圖像、文案語氣voice以及非產(chǎn)品類的品牌物料openclaw-carapace應(yīng)用 UI、語義 Token、主題、組件復(fù)用、框架適配器openclaw-design-system為正在升級既有技能鎖的項(xiàng)目提供的兼容別名openclaw-marketing-pages公開頁面構(gòu)成、落地頁/內(nèi)容頁、導(dǎo)航、SEO 與響應(yīng)式布局openclaw-design-audit設(shè)計(jì)漂移、Token 誤用、組件被私自替換、可訪問性問題與周期性審計(jì)這五個(gè)分支在倉庫中都是真實(shí)存在的技能目錄各自帶有references/參考資料openclaw-brand/SKILL.md定義了 OpenClaw 珊瑚色主色、海玻璃綠輔助色、中性墨色與暖紙底色的身份規(guī)則工作流要求先讀 references/identity.md 和 references/asset-rights.md并強(qiáng)調(diào)狀態(tài)色只能表達(dá)功能含義不能作為裝飾。openclaw-carapace/SKILL.md應(yīng)用 UI 的核心分支工作流第一步就是先讀 references/tokens.md 再選顏色、間距、字號、圓角或陰影并按界面類型繼續(xù)閱讀 consumer-adapters.md、application-surfaces.md、terminal-ui.md、embedded-surfaces.md。openclaw-marketing-pages/SKILL.md公開頁面分支要求先讀 references/page-patterns.md規(guī)則強(qiáng)調(diào)第一屏必須出現(xiàn)真實(shí)品牌/產(chǎn)品/場景、避免沒有內(nèi)容需求的重復(fù) CTA 區(qū)塊。openclaw-design-audit/SKILL.md審計(jì)分支要求把機(jī)械性違規(guī)與主觀判斷分開除非有文檔化規(guī)則否則建議只能作為建議報(bào)告。3. 路由決策規(guī)則從哪個(gè)分支起步路由表之外SKILL.md 的 第 19–23 行 給出了三條具體的起步規(guī)則公開網(wǎng)站改動(dòng)從openclaw-marketing-pages起步只有當(dāng)任務(wù)涉及身份、Logo、圖像、字體或語氣變化時(shí)才追加加載openclaw-brand。產(chǎn)品應(yīng)用改動(dòng)如果openclaw-carapace已安裝就從它起步。存量升級項(xiàng)目正在升級既有技能鎖的項(xiàng)目可以把openclaw-design-system作為v0.1.x的兼容別名使用。第 3 條在 openclaw-design-system/SKILL.md 中有對應(yīng)說明該技能標(biāo)識在v0.1.x遷移期間為既有skills-lock.json條目保留新安裝應(yīng)改用openclaw-carapace并且改動(dòng)導(dǎo)入前要先檢查消費(fèi)方 manifest——已安裝openclaw/carapace就用它否則保留舊的openclaw/design-system依賴說明符直到依賴完成遷移。這是一種典型的兼容別名 逐步收斂策略路由表保留了舊技能名的入口避免鎖文件升級期間舊項(xiàng)目斷鏈。安裝與鎖定這些技能從哪里來路由表中的技能不是手寫進(jìn)倉庫的而是通過skills工具從openclaw/carapace倉庫安裝并哈希鎖定的。package.json 中的安裝腳本完整呈現(xiàn)了這條鏈路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 指導(dǎo)的安裝/刷新命令都釘死在同一個(gè)skills工具版本上避免升級 CLI 本身引入行為差異。skills-lock.json 則記錄了全部六個(gè)技能的來源與內(nèi)容哈希例如openclaw-design: { source: openclaw/carapace, sourceType: github, skillPath: openclaw-design/SKILL.md, computedHash: 4a9004e762b08f6c9fc836de7b4db26fc27e7b9a90342884047bbffa51c21732 }六個(gè) OpenClaw 設(shè)計(jì)技能openclaw-brand、openclaw-carapace、openclaw-design、openclaw-design-audit、openclaw-design-system、openclaw-marketing-pages在鎖文件中均指向openclaw/carapace倉庫computedHash使每個(gè) SKILL.md 的內(nèi)容可校驗(yàn)審計(jì)與 CI 可以確認(rèn)本地指導(dǎo)文件沒有被意外篡改這正是Install agent guidance from this repositorys default branch and refresh it這一契約的可執(zhí)行形態(tài)。4. 共享契約Shared Contract逐條解析SKILL.md 的 Shared Contract 是整個(gè)路由體系的基石——它不歸屬任何單一分支而是所有分支共同遵守的跨分支約束。共九條下面逐條結(jié)合倉庫證據(jù)展開。1. Agent 指導(dǎo)從默認(rèn)分支安裝用固定版本命令刷新。即上文第 3 節(jié)展示的skills:install腳本 npx skills1.5.16 update --project --yes。固定 CLI 版本保證了指導(dǎo)文件這一層本身的變更也是受控的。2. 運(yùn)行時(shí) CSS 必須釘在語義化發(fā)布標(biāo)簽上Keep runtime CSS pinned to a semantic release tag。運(yùn)行時(shí)樣式庫openclaw/carapace等 npm 包與指導(dǎo)文件是兩層指導(dǎo)文件告訴 Agent怎么選運(yùn)行時(shí) CSS 決定實(shí)際渲染什么。釘住語義化標(biāo)簽意味著一次依賴升級是一個(gè)顯式?jīng)Q策而不是 lockfile 漂移。3. 優(yōu)先用語義 Token 而非原始色板值Prefer semantic tokens over raw palette values。這一條在消費(fèi)方代碼里有明確落點(diǎn)Carapace 分支要求 tokens.md before choosing colors, spacing, type, radii, or shadows 先行閱讀且palette primitives only for documented exceptions。ClawHub 自身的 DESIGN.md 同樣是這個(gè)契約的體現(xiàn)——品牌色板表格中每個(gè)色值都綁定--accent、--ink、--surface等語義 Token并明文規(guī)定 Use semantic tokens instead of raw colors。語義 Token 的價(jià)值在于主題切換明/暗只需換一層映射業(yè)務(wù)代碼不動(dòng)。4. 產(chǎn)品特定組件和布局留在消費(fèi)方倉庫Keep product-specific components and layouts in their consumer repository。openclaw-carapace/SKILL.md 的開頭就是這個(gè)意思Use the shared package for foundations and framework-neutral visual primitives. Keep consumer-specific behavior, data, routes, and layout composition local.共享層只做框架無關(guān)的地基與視覺原語路由、數(shù)據(jù)、布局組合一律本地化。5. 至少兩個(gè)消費(fèi)方出現(xiàn)相同界面后才上提共享實(shí)現(xiàn)。這與 Carapace 分支的 Ownership 一節(jié) 完全一致Keep runtime behavior and framework adapters local until at least two consumers need the same interface and behavior.兩個(gè)消費(fèi)方需要相同界面與行為之前運(yùn)行時(shí)行為與框架適配器保持本地。這是防止共享層過早抽象、被單一消費(fèi)方的偶然需求綁架的標(biāo)準(zhǔn)做法。6. 變更視覺地基時(shí)保持消費(fèi)方行為不變。對應(yīng) Carapace 工作流第 5 步 Keep application behavior, routes, and information architecture unchanged unless the task says otherwiseopenclaw-carapace/SKILL.md視覺重構(gòu)不附帶信息架構(gòu)改動(dòng)兩類變更分開提交審查邊界清晰。7. 在真實(shí)瀏覽器中按桌面與移動(dòng)端尺寸驗(yàn)證渲染頁面。real browser 是關(guān)鍵限定——不允許只靠代碼走查或無頭斷言替代目檢。這條契約由scripts/design-audit/工具鏈自動(dòng)化落地browser-check.ts 負(fù)責(zé)真實(shí)瀏覽器驗(yàn)證package.json 暴露了四個(gè)可獨(dú)立運(yùn)行的審計(jì)入口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. 消費(fèi)方支持的主題都要檢查明暗兩種主題。DESIGN.md 的色板表本身就按 Light/Dark 雙列給出如--surface為#ffffff/#121212所以換主題不是加一份新樣式而是同一語義 Token 在兩套映射下的行為一致性檢查。審計(jì)分支的 SKILL.md 也把它列為審計(jì)工作流的固定步驟Check light and dark themes where supported。9. 沒有記錄在案的許可不得再分發(fā)字體、Logo 或美術(shù)資產(chǎn)。這一條直接對應(yīng)品牌分支工作流的第 2 步——復(fù)制/再分發(fā)資產(chǎn)前先讀 asset-rights.md且 openclaw-brand/SKILL.md 還補(bǔ)了一條防幻覺規(guī)則Logo 安全區(qū)clearspace只在消費(fèi)方本地指導(dǎo)文件有明確定義時(shí)才檢查否則應(yīng)報(bào)告該檢查不可用而不是編造一個(gè)測量值。5. 審計(jì)分支與自動(dòng)化閉環(huán)openclaw-design路由表中的第五個(gè)分支openclaw-design-audit負(fù)責(zé)把契約從人守變成機(jī)器查。openclaw-design-audit/SKILL.md 定義了完整工作流先讀 rubric.md 并執(zhí)行全部適用類別 → 記錄消費(fèi)方安裝的 Carapace 版本與 commit SHA → 使用與版本匹配的 Token 契約新裝讀openclaw-carapace升級鎖讀openclaw-design-system別名→ 先跑確定性源碼檢查、再做判斷型評審 → 桌面/移動(dòng)端尺寸檢查渲染路由 → 明暗主題檢查 → 按 report-format.md 輸出 JSON 與 Markdown 報(bào)告。每個(gè)審計(jì)發(fā)現(xiàn)finding必須攜帶六個(gè)字段文件與行號、類別與嚴(yán)重度、穩(wěn)定的規(guī)則 ID、簡明修復(fù)建議、Carapace 參考出處、以及機(jī)械性還是判斷型的定性。其 Curation 一節(jié) 還規(guī)定了報(bào)告的收斂策略所有 error 全量收錄warning 排在 informational 之前再按受影響文件數(shù)排序精簡版報(bào)告最多展示 5 條非 error 發(fā)現(xiàn)其余按數(shù)量匯總零 error、零 warning、不超過 5 條 informational即視為無顯著漂移永遠(yuǎn)不允許編造源碼位置或視覺證據(jù)。倉庫內(nèi)的自動(dòng)化實(shí)現(xiàn)與這套流程一一對應(yīng)腳本職責(zé)source-check.ts確定性源碼檢查對應(yīng)工作流第 5 步 deterministic source checks before judgment-based reviewbrowser-check.ts真實(shí)瀏覽器桌面/移動(dòng)端渲染驗(yàn)證run-codex.ts驅(qū)動(dòng)判斷型評審輸出受 codex-output.schema.json 約束report.ts / finalize.ts生成與收尾 JSON/Markdown 報(bào)告validate-changes.ts校驗(yàn)修復(fù)改動(dòng)是否越界對應(yīng) fix-policy.md 的窄改動(dòng)策略測試與產(chǎn)物同樣可查證design-audit.test.ts 與 design-audit-workflow.test.ts 覆蓋審計(jì)邏輯本身design-audits/latest/design-audit.json 與 design-audits/latest/design-audit.md 保存了最近一次審計(jì)的機(jī)器可讀與人類可讀雙格式產(chǎn)物——這正是契約中報(bào)告格式可被機(jī)器消費(fèi)要求的直接證據(jù)。6. 使用方式小結(jié)在 ClawHub 倉庫中實(shí)踐這套路由體系的日常動(dòng)作是查看當(dāng)前鎖定的技能讀 skills-lock.json確認(rèn)六個(gè) OpenClaw 設(shè)計(jì)技能條目及哈希未漂移。按任務(wù)性質(zhì)選分支落地頁 →openclaw-marketing-pages身份變動(dòng)時(shí)加openclaw-brand產(chǎn)品 UI →openclaw-carapace防漂移評審 →openclaw-design-audit存量鎖升級項(xiàng)目 →openclaw-design-system別名。刷新 Agent 指導(dǎo)npx skills1.5.16 update --project --yes版本與 package.json 中skills:install保持一致。改完按契約自檢語義 Token 優(yōu)先、消費(fèi)方行為不變、真實(shí)瀏覽器桌面移動(dòng)端驗(yàn)證、明暗雙主題、無未授權(quán)資產(chǎn)再分發(fā)。運(yùn)行審計(jì)閉環(huán)bun run design:audit:source→bun run design:audit:browser→bun run design:audit:finalize產(chǎn)物落在 design-audits/latest/再按 rubric.md 的類別逐條復(fù)核。這套設(shè)計(jì)的可取之處在于職責(zé)切分得非常克制路由技能只做分診規(guī)則技能只存規(guī)則鎖文件管版本與完整性審計(jì)腳本管執(zhí)行與驗(yàn)收。對任何需要讓多個(gè) Agent/開發(fā)者同時(shí)維護(hù)品牌 產(chǎn)品 UI 營銷頁 防漂移四類視覺資產(chǎn)的項(xiàng)目這是一個(gè)可以直接參照的骨架先定路由表再寫共享契約最后用哈希鎖和自動(dòng)化審計(jì)把契約釘死。贊分享后端前端AI 技能AI 插件搜索引擎【免費(fèi)下載鏈接】clawhubSkill Plugin Registry for OpenClaw項(xiàng)目地址https://gitcode.com/gh_mirrors/mo/clawhub點(diǎn)擊查看免費(fèi)下載相關(guān)推薦OpenClaw Carapace 設(shè)計(jì)體系實(shí)戰(zhàn)ClawHub 的語義化 Design Token 契約與消費(fèi)者適配器指南OpenClaw Carapace 設(shè)計(jì)體系實(shí)戰(zhàn)ClawHub 的語義化 Design Token 契約與消費(fèi)者適配器指南 Carapace opencl后端前端AI 技能AI 插件搜索引擎oh-my-claudecode OpenClaw/Clawhip 路由契約解讀基于 signal 的統(tǒng)一事件載荷與下游路由實(shí)踐oh my claudecode OpenClaw/Clawhip 路由契約解讀基于 signal 的統(tǒng)一事件載荷與下游路由實(shí)踐 本篇技術(shù)指南圍繞 oh my人工智能AI Agent多智能體Agent 編排Agent 工作流AI 技能CLI開發(fā)工具如何使用 symfony/routing 實(shí)現(xiàn)靈活的 PHP 路由系統(tǒng)基于接口的解耦實(shí)踐指南如何使用 symfony/routing 實(shí)現(xiàn)靈活的 PHP 路由系統(tǒng)基于接口的解耦實(shí)踐指南 symfony/routing 是一個(gè)強(qiáng)大的 PHP 路由庫支后端上一篇LiveRecorder文件命名與格式轉(zhuǎn)換FFmpeg封裝的最佳實(shí)踐下一篇GetSubtitles項(xiàng)目架構(gòu)分析深入理解下載器管理和字幕選擇機(jī)制創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考