SuperAPI AI 工具集

prototype

设计与创作

查看项目

更新于 10-27 16:23

技能介绍

用途

prototype 是一个“发散型”技能,只做一件事:接收用户描述的一个 UI 片段(例如“一个 toast”“定价卡片”“长按删除按钮”),构建多个真正不同的版本,并放在可视化选择器后面,让用户实时翻看并选出胜出方案。它不审查现有 UI(那是 review-animations),不为现有 UI 规划修复(那是 improve-animations),也不选择依赖(那是 pick-ui-library)。

主要能力

  • 针对单个 UI 片段生成多个真正不同的变体,默认 3 个,用户要求或设计空间足够宽时最多 5 个。
  • 每个变体在一条命名轴上分化:布局、密度、个性、动效或交互模型。构建前必须能用一句话说明每个变体的轴。
  • 每个变体都完整可用:真实交互、真实动效、真实内容(产品形态的文案、合理的名称与数字),不使用 lorem ipsum、没有死按钮、没有“想象这部分”。
  • 每个变体单独满足 Emil Kowalski 的设计工程标准:入场用 ease-out(绝不用 ease-in)、UI 动效低于 300ms、正确的 transform-origin、仅使用 transform/opacity、处理 reduced-motion。
  • 提供可视化选择器,一次渲染一个变体、全尺寸、置于真实周边上下文中(toast 背后要有页面、卡片要有相邻元素、按钮要有表单)。切换即时完成,不加动画。
  • 选择器是“外壳”而非参赛者,其标记、样式、键盘接线与位置严格按 PICKER.md 逐字复制,外观不随项目变化。

使用方式

调用形式与行为:

  • <description>:完整流程——范围界定 → 侦察 → 3 个变体 → 选择器 → 等待选择。
  • <description> x5:同上,但生成指定数量的变体(上限 5)。
  • riff <variant>:新一轮,保留选择器,围绕指定变体的方向生成全新一组。
  • keep <variant>:将该变体提升进代码库并删除原型面。
  • keep <variant>, leave the picker:提升该变体,但保留原型面。

工作流程分六个阶段:

  1. 范围界定:每次只处理一个东西。若描述跨多个组件(如“仪表盘”),收窄到单个最高杠杆的片段,说明选它及原因,其余作为后续运行提供。用一句话重述需求。
  2. 侦察:设计前先摸清变体所立足的地面——技术栈(框架、样式系统、动效库)、设计令牌(颜色、圆角、间距、字体、缓动/时长变量)、产品个性(活泼消费应用还是利落仪表盘)、上下文(渲染位置、背景、邻居、尺寸)。若无项目(空目录或纯探索),跳到阶段 4 的独立分支,采用克制的默认外观:中性灰、一个强调色、系统字体栈。
  3. 选择方向:写代码前列出集合——每个变体的名称与轴。名称描述方向(如“Quiet”“Editorial”“Playful”“Dense”),绝不用“Option A/B/C”。若两个方向仅强调色或文案不同,它们是一个方向,需替换为真正替代方案。完成标准:每个变体都有名称和明确的轴,且没有两个变体共享同一轴位置。
  4. 构建选择器外壳:分两支——有开发服务器的项目用隔离路由或页面(/prototypes/<slug> 或框架等价物),每个变体一个文件加一个小外壳文件,原型面不得被生产代码导入;无项目/静态上下文用单个自包含 HTML 文件(内联 CSS/JS),用户可直接在浏览器打开。选择器的标记、样式、键盘接线与位置逐字取自 PICKER.md。
  5. 验证与交付:运行外壳,确认每个变体渲染、每个交互响应、控制台干净,自己先翻一遍再给用户看。若可用浏览器工具,为每个变体截图。然后呈现集合并停下——选择权属于用户。呈现表格包含:编号、变体、轴、何时是正确选择、其代价。结尾给出选择器运行位置(URL 或文件路径)与翻看按键。完成标准:每个变体都可从选择器到达且行为正确;无控制台错误;表格诚实列出每个变体的取舍。
  6. 选定后提升:用户选择后,按项目现有约定(文件布局、命名、令牌使用)将该变体集成到所属位置,然后按硬规则删除原型面。若用户想要新一轮,保留外壳并重跑阶段 3,围绕其倾向的方向发散。

适用场景

  • 需要为一个 UI 片段探索多个真正不同的设计方向,而非微调同一想法。
  • 希望实时翻看、对比并挑选最终方案,而不是看静态缩略图。
  • 在隔离的原型面上探索,避免污染生产代码。

限制

  • 每次只处理一个 UI 片段,不处理跨多组件的整体(如整个仪表盘)。
  • 不审查现有 UI、不规划修复、不选择依赖。
  • 探索期间绝不触碰生产代码;集成仅在阶段 6 对用户选中的变体进行。
  • 选择器外观固定,不参与设计竞争,也不随项目适配。
  • 变体数量上限为 5,超过会稀释对比。
  • 若两个变体在构建中趋同,应删掉一个并说明——两个真正不同的方向胜过凑到三个。
  • 关于收费、价格、平台支持等具体信息,资料中暂未提供。