name: unshipdescription: “Compare AI agent-made UI variants locally in a real app, then keep one and clean up unused temporary code.”category: developmentrisk: criticalsource: communitysource_repo: mbenhard/unshipsource_type: communitydate_added: “2026-06-07”author: Marcus Benhardtags: [ui-variants, frontend, local-first, coding-agents]tools: [claude-code, antigravity, cursor, gemini-cli, codex-cli, opencode]license: “MIT”license_source: “https://github.com/mbenhard/unship/blob/main/LICENSE”plugin:targets:codex: blockedclaude: blockedUnship概述Unship 是一种本地工作流用于在真实应用中比较 AI 生成的 UI 备选方案而不是一次只接受一个生成的版本。它会添加临时的源码级变体显示本地浏览器选择器并在用户做出选择后清理未使用的选项。此技能用于配合编码代理进行前端迭代。它不是生产环境的 A/B 测试、分析、特性开关或托管实验服务。何时使用此技能当用户想要比较多个 UI、布局、文案、状态、流程或设计系统备选方案时使用。当编码代理应在真实源代码中创建多个临时选项并让用户在运行中的本地应用里评判它们时使用。当用户选出一个可见选项并希望在发布前移除落选的临时代码时使用。何时不要使用此技能用户需要生产环境实验、流量拆分、分析或特性开关时。应用因重复的活动 ID、全局脚本、分析触发、焦点陷阱、破坏性操作或自动播放副作用而无法安全地渲染隐藏的非活动变体时。用户未授权本地源代码修改时。工作原理1. 安装或复用 Unship如果存在项目本地二进制文件优先使用./node_modules/.bin/unship doctor--json--no-update-check否则将经过审查的、固定版本的 CLI 安装到项目中然后运行本地二进制文件npminstall--save-dev unship/clireviewed-version./node_modules/.bin/unship doctor--json--no-update-check如果本地选择器需要设置请运行./node_modules/.bin/unship setup--json仅修补在本地预览中加载选择器所需的最小开发专用挂载点。2. 创建临时变体检查相关页面、组件、路由或渲染产物。添加最小的源码级对比让用户能在上下文中评判真实选项。使用 Unship 标记sectiondata-unship-pickHerodivdata-unship-optionCurrent.../divdivdata-unship-optionProof-ledhidden.../divdivdata-unship-optionVisualhidden.../div/section保持选项标签简短且可见。除非用户要求特定数量否则优先提供 2-4 个有意义的备选方案。3. 验证对比就绪状态在交给用户之前请检查预期的data-unship-pick分组存在预期的选项标签存在选项是该分组的直接子元素初始时恰好有一个选项可见隐藏的非活动选项保持隐藏。4. 让用户选择告诉用户分组标签、选项标签、设置状态以及任何检测到的本地预览服务器提示。用户在聊天中通过说出一个可见选项标签来进行选择。5. 选择后清理当用户选出胜出选项时保留该选项的真实源代码并移除该分组的落选选项。从已确定的源码中移除临时的data-unship-*属性。发布前的最终清理移除所有 Unship 产物并运行./node_modules/.bin/unship check--json在检查报告干净之前不要声称清理已完成。最佳实践让 Unship 工作保持本地化和临时性。除非用户明确要求不同的方向否则保留现有应用的设计语言。在变体处于临时状态时避免不相关的重构。不要将自定义标签页、应用偏好或永久切换器放入产品 UI 中用于 Unship 对比。保持非活动选项安全避免重复的活动 ID、提交控件、全局脚本、分析触发、焦点陷阱、破坏性副作用和有状态的提供者。局限性Unship 不会决定哪个变体胜出由人来选择。Unship 不能替代设计审查、浏览器 QA、无障碍检查或生产发布验证。Unship 不适用于生产流量、远程分析或持久化的产品实验。安全与注意事项仅在用户授权你修改的本地项目中运行命令。不要在自动化代理工作流中运行npx unship/clilatest或任何未固定版本的远程 CLI。先固定并审查包版本然后执行项目本地二进制文件。将生成的变体视为必须在发布前清理的临时代码。在进行破坏性清理之前如果用户的选择有歧义请确认所选选项标签。如果在 Unship 编辑之前基线构建或类型检查已经失败请报告该基线状态并保持变体工作隔离。常见陷阱问题隐藏变体被 CSS 覆盖了hidden。解决方案在需要时在变体专用 CSS 附近保留[hidden] { display: none !important; }。问题用户在更多更改后说保留第二个。解决方案在编辑源代码之前确认确切的分组和选项标签。问题对比演变成大规模重新设计。解决方案将范围缩小到可以在运行中的应用中评判的最小部分、状态或流程。相关技能webapp-testing- 前端更改后进行基于浏览器的功能检查时使用。mobile-design- 比较移动端专用 UI 模式和平台约束时使用。