用途:prototype 是一个“发散型”技能,只做一件事——接收一段 UI 描述(如“一个 toast”“定价卡片”“长按删除按钮”),构建若干个真正不同的版本,放进可视化选择器供用户实时翻看并选出胜出方案。它不审查现有 UI,不规划修复,也不选择依赖库。
主要能力:默认生成 3 个变体,用户要求或设计空间足够宽时可到 5 个,超过 5 个会稀释对比。每个变体必须沿一个明确命名的轴发散,例如布局、密度、个性、动效或交互模型,且每个变体都能独立作为可上线的方向。变体共享项目 token,但不应趋同。每个变体都要完整可用:真实交互、真实动效、真实内容,不使用占位文本或死按钮。
使用方式:工作流分六个阶段。范围界定:一次只处理一个组件,若描述跨多个组件则收窄到最高杠杆的那一个。侦察:确认技术栈、样式系统、动效库、设计 token、产品个性与渲染上下文;若无项目则走独立分支并使用克制的默认外观。选择方向:先列出每个变体的名称与轴,名称描述方向而非“选项 A/B/C”。构建选择器:在有开发服务器的项目中用隔离路由(如 /prototypes/<slug>),无项目时用单个自包含 HTML 文件;选择器外观与行为按 PICKER.md 原样复制,不随项目变化。验证与交付:运行并逐一检查所有变体、交互与控制台,然后以表格呈现每个变体的适用时机与代价,等待用户选择。提升:用户选定后按项目惯例整合该变体,并删除原型界面。
调用形式:<description> 走完整流程;<description> x5 指定变体数量(上限 5);riff <variant> 保留选择器并围绕该方向生成新一轮;keep <variant> 将其提升进代码库并删除原型界面;keep <variant>, leave the picker 提升但保留原型界面。
限制:探索期间绝不触碰生产代码,所有内容只存在于隔离的原型界面中;选择器是外壳而非参赛者,其外观不是设计决策;每个变体需满足动效标准(入场用 ease-out、UI 动效低于 300ms、正确的 transform-origin、仅用 transform/opacity、处理 reduced-motion);变体切换不加动画。若两个变体在构建中趋同,应删掉一个并说明。资料未提供具体收费、平台或价格信息。