★ FEATURED ARTICLE 后端前端AI 技能AI 插件搜索引擎【免费下载链接】clawhubSkill Plugin Registry for OpenClaw项目地址https://gitcode.com/gh_mirrors/mo/clawhub点击查看免费下载ClawHub 是 OpenClaw 的 Skill Plugin Registry其技能详情页的安装体验在 2026-04-22-skill-install-surface-design.md 中完成了从把安装信息埋在元数据块里到折叠区以上的第一优先级操作的重新设计并已在仓库前端代码中落地实现。本文将完整还原这份设计文档的核心决策并结合 SkillInstallSurface.tsx、skillDetailUtils.ts 等源码讲清Install with OpenClaw 提示词流 CLI Commands 双面板的实现细节、提示词构造规则、降级策略与测试覆盖。读完本文你将掌握 ClawHub 技能安装面的信息架构、可复制提示词与命令的生成原理以及如何把这类远程会话友好的安装交互复用到自己的产品中。一、设计背景为什么安装必须成为页面主角设计文档开篇点明了两个核心问题技能详情页没有把安装当作主操作。插件详情页已经把直接的安装命令放在显眼位置但技能页把安装相关信息埋在密集的元数据块中对打开页面就想立刻安装的用户很不友好。OpenClaw 缺少一等公民的提示词驱动安装流。在远程会话和服务端环境中更好的用户体验往往是复制一段提示词到 OpenClaw让它自己完成安装和引导而不是手动拼装命令与需求清单。在此基础上设计文档确立了如下目标Goals让安装成为技能页折叠区以上above-the-fold的显著操作保持精确的安装命令可见、可复制、可信新增基于可复制提示词的 OpenClaw 安装流支持两种提示词范围Install Only与Install Setup保持流程透明用户在使用前就能看到将要复制的内容。同时明确划定了非目标Non-Goals防止范围蔓延不提供直达 OpenClaw 的深链、握手或自动执行不做后端 / Convex 改动不在本次切片中重设计插件详情页不在 ClawHub 内部自动完成 setup不做用户无法检视的隐藏提示词生成。二、最终 UX 方向双面板分栏安装面设计文档给出的最终方案是在技能 hero 区顶部附近新增一个Install区块采用分栏布局Install with OpenClawOpenClaw 提示词安装面板CLI CommandsCLI 命令面板桌面端两个面板作为兄弟面板并排渲染在一个安装面内移动端纵向堆叠且Install with OpenClaw优先显示。该区块成为页面的主安装面primary install surface。原有的运行时要求、依赖元数据、链接和安装声明install specs全部降级为下方支撑信息不再是主 CTA。在仓库中这个拆分的落地方式非常清晰Install with OpenClaw面板由 SkillInstallSurface.tsx 中的SkillInstallSurface组件负责CLI Commands由同文件导出的SkillCommandLineCard负责并在 SkillDetailPageView.tsx 中挂载到详情页 hero 区域。三、Install with OpenClaw 面板提示词菜单与预览3.1 结构组成OpenClaw 面板包含四部分一段简短说明该路径最适合远程或引导式安装一个带菜单行为的Copy Prompt触发器两个提示词选项Install Only与Install Setup一个提示词预览区展示即将复制到剪贴板的精确文本。源码中的PROMPT_OPTIONS数组SkillInstallSurface.tsx正是这两个选项的数据源每条都带 label 与 descriptionconst PROMPT_OPTIONS: Array{ description: string; label: string; mode: SkillPromptMode; } [ { mode: install-only, label: Install Only, description: Install the skill and stop there., }, { mode: install-and-setup, label: Install Setup, description: Install first, then help finish setup from skill metadata., }, ];SkillPromptMode类型在 skillDetailUtils.ts 中定义type SkillPromptMode install-only | install-and-setup;。3.2 交互模型菜单触发器而非盲复制按钮设计文档强调Copy Prompt应该是菜单触发器menu trigger而不是一个直接复制的按钮。打开后展示Install Only复制一段提示词指示 OpenClaw 安装该技能后即停Install Setup复制一段提示词指示 OpenClaw 安装技能、检视技能元数据并帮助用户完成后续 setup。选择某个选项后需要依次更新提示词预览区将对应提示词写入剪贴板给出清晰的成功或失败反馈。预览区在选择后保持可见让复制内容始终可检视。在实现中SkillInstallSurface用useStateSkillPromptMode(install-and-setup)维护当前模式默认install-and-setup用selectPromptMode统一处理选中逻辑SkillInstallSurface.tsx先调用formatOpenClawPrompt生成该模式的提示词文本更新状态后再异步执行copyText并根据结果设置promptCopyState为copied或failed。反馈文本通过aria-livepolite的 span 呈现const promptFeedback promptCopyState copied ? ${selectedPrompt.label} prompt copied. : promptCopyState failed ? Copy failed. Try again. : Previewing ${selectedPrompt.label}.;复制状态在 2 秒后自动复位setTimeout(..., 2000)与InstallCopyButton的复位节奏保持一致避免状态堆积。3.3 提示词内容规则两条提示词都必须包含具体的技能身份标识而不是含糊的散文式描述。设计文档明确要求优先包含规范安装目标owner/slug规范技能页 URL足够的 setup 上下文避免歧义或不安全的后续行为。Install Only 提示词指示 OpenClaw从 ClawHub 安装该技能将动作严格限定在该技能上安装完成后即停不做任何 setup 变更。Install Setup 提示词指示 OpenClaw从 ClawHub 安装该技能检视技能元数据与安装要求帮助用户完成 setup 步骤例如必需的 env vars必需的 binaries配置文件或后续说明避免无关变更在做出更大范围的环境变更前先询问用户。这条提示词是全服务但受约束的它引导 OpenClaw 走一条窄范围的 setup 流程而不是含糊的什么都干请求。3.4 源码里的提示词生成器formatOpenClawPrompt 完整实现了上述规则。它的生成逻辑可以归纳为固定骨架 模式分支 元数据注入三层第一层安全前置检查两条模式共有const lines [ Before installing anything, inspect the ClawHub skill metadata and setup requirements., If the skill asks you to install a third-party package or CLI, verify its source, maintainer, and package contents before running the install command., Install the skill ${displayName} (${target}) from ClawHub only after those checks pass., ];第二层身份与边界信息if (pageUrl) { lines.push(Skill page: ${pageUrl}); } lines.push(Keep the work scoped to this skill only.);第三层模式分支install-only追加Stop after the skill is installed.后直接返回install-and-setup追加After install, help me finish setup from verified skill metadata.然后从clawdis元数据中注入实际 requirementsif (requiredEnvVars.size 0) { lines.push(Required env vars: ${Array.from(requiredEnvVars).join(, )}); } if (clawdis?.requires?.bins?.length) { lines.push(Required binaries: ${clawdis.requires.bins.join(, )}); } if (clawdis?.requires?.config?.length) { lines.push(Config paths to check: ${clawdis.requires.config.join(, )}); }第四层约束收尾lines.push( Use only the metadata you can verify from ClawHub; do not invent missing requirements., ); lines.push(Ask before making any broader environment changes.);值得注意的细节requiredEnvVars是一个Set同时收集clawdis.requires.env与clawdis.envVars中required ! false的变量skillDetailUtils.ts保证 env 变量不重复、且只有真正必需的才进入提示词。技能身份标识的生成来自两个纯函数skillDetailUtils.tsexport function buildSkillInstallTarget(ownerHandle, _ownerId, slug) { const handle ownerHandle?.trim(); if (handle) return ${handle.replace(/^/, )}/${slug}; return slug; } export function buildSkillPageUrl(ownerHandle, ownerId, slug) { const handle ownerHandle?.trim(); const owner handle || (ownerId ? String(ownerId) : null); if (!owner) return null; const path buildSkillDetailHref(owner, slug); return new URL(path, getClawHubSiteUrl()).toString(); }这里体现了设计文档中的missing canonical owner降级策略有 owner handle 时生成owner/slug没有时退化为裸 slug绝不捏造一个假的owner/slug路径。四、CLI Commands 面板两条命令链路CLI 面板保留原始安装路径的可见性与可复制性包含两个命令块OpenClaw CLIClawHub CLI。每个命令块都有独立的复制操作。设计文档还要求不要用纯 tooltip 形式隐藏真实命令——命令文本必须始终可见。4.1 OpenClaw CLI 命令主格式为openclaw skills install owner/slug降级规则若规范的 owner handle 不可用则回退到页面路由已经在使用的、最好的规范标识若无法安全构造 owner 限定的目标则回退到裸 slug 命令而不是编造一个坏掉的 owner 路径。源码中formatOpenClawInstallCommandskillDetailUtils.ts非常简单export function formatOpenClawInstallCommand(slug: string) { return openclaw skills install ${slug}; }其中slug实参就是buildSkillInstallTarget的产物owner/slug或slug降级逻辑在目标构建阶段完成。组件层还有一个加分实现OpenClawCliInstallCommandSkillInstallSurface.tsx用正则^(openclaw (?:skills|plugins) install)( .)$把命令拆成动词 目标两段动词以弱化样式呈现、目标高亮让用户一眼看清要装的是什么。它的单测覆盖在 SkillInstallSurface.test.tsx验证了openclaw plugins install clawhub:demo-plugin这类插件命令同样能正确拆分。4.2 ClawHub CLI 命令与包管理器切换设计文档要求保留包管理器灵活性而不是硬编码某一种。预期行为是复用技能页上已有的包管理器切换模式默认保持npm选中维持切换器现有行为复制的命令完全显式。示例变体npx clawhublatest install slug pnpm dlx clawhublatest install slug bunx clawhublatest install slug源码中的formatClawHubInstallCommandskillDetailUtils.ts按npm | pnpm | bun三种包管理器分别生成未支持的值会走到assertNever抛出异常从类型层面锁死枚举范围export function formatClawHubInstallCommand(slug: string, pm: SkillPackageManager) { switch (pm) { case npm: return npx clawhublatest install ${slug}; case pnpm: return pnpm dlx clawhublatest install ${slug}; case bun: return bunx clawhublatest install ${slug}; } return assertNever(pm); }此外仓库还提供一条由页面 URL 驱动的安装通道npx skills add skillPageUrlskillDetailUtils.ts作为SkillCommandLineCard的secondaryInstall标签页出现默认 tab 仍是cli对应openclaw skills install。五、支撑元数据退居二线的信息面板设计文档明确要求现有元数据驱动的安装详情不能消失而是移动到新安装面下方、承担清晰的次要角色包括运行时要求runtime requirements依赖dependencies技能声明的安装规格install specs相关链接links。用户应能先在 hero 区立即安装再滚动查看 requirements 和元数据获取更深层的运维细节。这个角色由收窄后的SkillInstallCard承担。源码中的buildSkillInstallTabsSkillInstallCard.tsx把元数据按runtime / dependencies / install / links四个 tab 组织runtime平台OS、必需工具requires.bins、至少其一工具requires.anyBins、配置路径requires.config、凭证与环境变量合并requires.env、envVars与primaryEnv并用 required / optional / not declared 三种徽标区分状态dependencies每个依赖的名称、类型徽标、版本与 Package/Source 链接install技能声明的安装规格install数组由formatInstallCommandskillDetailUtils.ts按brew / node / go / uv四种 kind 渲染真实命令如brew install tap/formula、npm i -g pkg、go install module、uv tool install pkglinkshomepage / repository / docs / changelog。四个 tab 都为空时返回空数组详情页不会渲染一个空壳面板——这与设计文档sparse metadata 也要优雅降级的要求一致。六、信息架构安装面之上的页面层级设计文档给出的变更后页面层级为技能标题与摘要skill header and summary主安装面primary install surface安全扫描等信任信号security scan and other trust signals支撑元数据面板supporting metadata panelsREADME、文件、评论、版本、对比、owner 工具。若现有 hero 组合需要调整相邻区块以避免拥挤优先保证安装清晰度而不是死守原有顺序。这条原则的本质是安装是详情页的第一工作流一切影响安装可见性的元素都为其让路。七、组件级设计单一职责拆分设计文档推荐如下组件拆分目标是避免出现一个同时混装 hero 布局、提示词生成、复制逻辑和元数据面板的超大组件SkillInstallSurface拥有新安装区、布局、复制交互与提示词预览状态。SkillPromptMenu或等价局部子组件 拥有提示词选项选择与菜单渲染实现中直接复用了 Radix 风格的DropdownMenu见 ui/dropdown-menu 的使用。InstallCopyButton命令与提示词共用的复制按钮行为复用插件页的复制反馈模式。skillDetailUtils.ts中的小型纯函数 构建规范命令与提示词文本。现有的SkillInstallCard被收窄为只做支撑元数据面板新的主安装面放在独立组件中使提示词生成、复制状态与 hero 布局不再和依赖元数据渲染纠缠在一起。InstallCopyButtonInstallCopyButton.tsx正是设计文档所说的复用插件页复制反馈模式的载体它维护idle / copied / failed三种复制状态复制成功显示对勾 Copied失败显示Copy Failed2 秒后复位同时支持aria-label、tooltip、variant、size等 props供命令卡片内联使用showLabel{false}的图标态。八、复制能力与错误处理8.1 剪贴板降级路径设计文档要求剪贴板写入失败时先用现有 fallback 复制路径两条机制都失败则展示失败反馈。源码copyTextInstallCopyButton.tsx实现了完整的两级降级export async function copyText(text: string) { if (navigator.clipboard?.writeText) { await navigator.clipboard.writeText(text); return true; } if (typeof document undefined || typeof document.execCommand ! function) { return false; } const textarea document.createElement(textarea); textarea.value text; textarea.setAttribute(readonly, ); textarea.style.position fixed; textarea.style.opacity 0; textarea.style.pointerEvents none; document.body.appendChild(textarea); textarea.select(); textarea.setSelectionRange(0, text.length); try { return document.execCommand(copy); } finally { document.body.removeChild(textarea); } }首选navigator.clipboard.writeText不可用时回退到隐藏 textarea document.execCommand(copy)的传统方案两者皆失败则返回false由调用方设置failed状态。设计文档要求的手工验证项之一正是在有无navigator.clipboard的浏览器中分别验证复制行为。8.2 缺失元数据若部分元数据缺失导致无法生成完整的 setup 引导仍然允许复制提示词生成当前可用的最受约束提示词不凭空发明页面并不知道的 requirements。源码中这一条由formatOpenClawPrompt的条件注入天然保证requiredEnvVars.size 0、bins.length、config.length均为可选分支元数据为空时这些行根本不出现提示词骨架依然成立且末尾始终带有use only the metadata you can verify from ClawHub; do not invent missing requirements的约束语句。8.3 缺失规范 owner若 owner 限定的目标无法可靠构建优雅降级到最安全的可用安装目标保持复制文本准确不渲染误导性的owner/slug语法。这正是buildSkillInstallTarget中if (handle) return ...; return slug;的逻辑有 handle 用owner/slug没有就用裸 slug绝不拼出/slug这类坏路径。九、文案与无障碍规范9.1 复制文案OpenClaw 复制label 为Copy Prompt菜单项为Install Only/Install Setup预览区显示将被复制的精确文本CLI 复制label 保持字面量Copy不把命令藏在 tooltip-only 的表面之后。9.2 语气UI 文案要求直接、可操作、去营销化。推荐用语Install with OpenClawCopy PromptInstall SetupOpenClaw CLIClawHub CLI避免模糊的自动化承诺、夸大措辞、暗示 ClawHub 会替用户执行任何操作的文案。实现中SkillInstallSurface面板的说明文字Best for remote or guided setup. Copy the exact prompt, then paste it into OpenClaw...正是这种克制语气的示例。9.3 无障碍要求新安装面必须保持键盘可用、屏幕阅读器可读提示词菜单触发器键盘可访问DropdownMenuTrigger基于按钮实现天然支持聚焦与 Enter/Space 打开菜单项暴露清晰的 label 与描述PROMPT_OPTIONS每项都带description并渲染在菜单里复制成功反馈不能只靠颜色InstallCopyButton用文字Copied/Copy Failedaria-livepolite播报同时带data-copy-state供测试与样式钩子使用命令文本在小宽度下仍可选中、可读命令块使用可聚焦的pre tabIndex{0}移动端堆叠无横向裁剪面板按article分块skill-install-panel与skill-install-command-card各自独立布局。十、测试策略10.1 单元测试为以下内容新增或更新测试命令构建器formatOpenClawInstallCommand、formatClawHubInstallCommand、formatSkillsCliInstallCommand提示词构建器formatOpenClawPrompt的两种模式规范 owner 降级行为buildSkillInstallTarget复制状态转换若抽成可复用 helper。10.2 组件测试为以下内容新增或更新测试新安装面在技能详情页的渲染提示词菜单打开与选项选择提示词预览更新OpenClaw 与 ClawHub 命令的可见性复制成功反馈路径。仓库中的 SkillInstallSurface.test.tsx 已覆盖大部分场景例如默认渲染Install Setup预览点击Install Only后断言写入剪贴板的文本包含Stop after the skill is installed.L40-L72SkillCommandLineCard默认选中 CLI tabaria-pressed为 true命令被拆分为 verb 与 target 两段点击Copy OpenClaw CLI command后剪贴板收到openclaw skills install steipete/weather切换到 Prompt tab 后复制到包含Before installing anything的完整提示词L74-L121插件命令openclaw plugins install clawhub:demo-plugin的拆分高亮L123-L128。10.3 手工验证清单设计文档要求验证桌面端布局移动端堆叠长owner/slug值元数据稀疏的技能页有无navigator.clipboard两种情况下的复制行为。十一、发布范围纪律设计文档强调该功能应作为聚焦的 UI 切片发布范围保持克制不直接握手 OpenClaw不在 ClawHub 内执行任何操作除非为保持组件边界干净所必需不在技能详情页安装面之外做大范围重构。对应的Open Questions Resolved结论可视为实现的验收清单主布局采用分栏安装面而非单个合并大框OpenClaw 只走可复制提示词提示词流同时支持Install Only与Install SetupCopy Prompt控件负责揭示这两个提示词选项原始 CLI 命令始终可见地位于 OpenClaw 流之下。结语从 设计文档 到 SkillInstallSurface.tsx 的落地ClawHub 把安装从技能页的附属信息提升为折叠区以上的主工作流Install with OpenClaw用可检视、可复制的提示词覆盖远程会话场景CLI Commands用openclaw skills install、npx/pnpm/bunx clawhublatest install与npx skills add三条链路覆盖本地命令行场景而 requirements / dependencies / install specs / links 则退居二线成为运维细节的支撑面板。整条链路以skillDetailUtils.ts的纯函数为骨架以InstallCopyButton的两级剪贴板降级为可靠性底座并用组件测试锁死交互契约。这一设计思路——把安装做成第一公民操作、用受约束的提示词引导 Agent、让降级路径始终诚实——同样值得其他以 Agent 为中心的目录类产品参考。赞分享后端前端AI 技能AI 插件搜索引擎【免费下载链接】clawhubSkill Plugin Registry for OpenClaw项目地址https://gitcode.com/gh_mirrors/mo/clawhub点击查看免费下载相关推荐ClawHub 落地 OpenClaw 公开页面规范openclaw-marketing-pages 技能与 Carapace 设计契约ClawHub 落地 OpenClaw 公开页面规范openclaw marketing pages 技能与 Carapace 设计契约 本文围绕 ClawH后端前端AI 技能AI 插件搜索引擎完整备份QQ空间历史说说GetQzonehistory 快速上手指南完整备份QQ空间历史说说GetQzonehistory 快速上手指南 换电脑、换新手机或者想把多年前在QQ空间发过的说说整理出来——手动一条条复制不现实。G网页爬虫数据分析参考 UI 设计规范设计页面与按钮从 Apple HIG、Material、Fluent 到 AI 提示词实战参考 UI 设计规范设计页面与按钮从 Apple HIG、Material、Fluent 到 AI 提示词实战 在 Easy Vibevibe coding教程文档人工智能Vibe Coding上一篇深入Jupyter元包发版流程tbump如何自动更新版本号并发布到PyPI下一篇APlayer音频播放历史记录终极指南如何实现智能记忆播放功能创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
