SuperAPI AI 工具集

prototype

设计与创作

查看项目

更新于 10-16 09:31

技能介绍

用途:这是一个“发散”技能,只做一件事——接收你描述的一个 UI 片段(如 toast、定价卡片、长按删除按钮),构建多个真正不同的版本,并放在可视化选择器中供你实时切换、挑选胜出方案。它不审查现有 UI、不规划修复、不选择依赖。

主要能力:默认生成 3 个变体,用户要求或设计空间足够宽时可到 5 个。每个变体必须沿一个明确轴(布局、密度、个性、动效、交互模型)发散,且各自都达到 Emil Kowalski 的设计工程标准:入场用 ease-out、UI 动效低于 300ms、正确的 transform-origin、只用 transform/opacity、处理 reduced-motion。每个变体都完整可用,使用真实交互、真实动效和贴近产品的文案与数据,不用占位文本或死按钮。

使用方式:工作流分六阶段——界定范围(每次只做一个组件)、侦察(技术栈、设计令牌、产品个性、渲染上下文)、选择方向(为每个变体命名并说明轴)、搭建选择器(有开发服务器时用隔离路由 /prototypes/<slug>,无项目时用单个自包含 HTML 文件;选择器样式与行为须逐字照搬 PICKER.md)、验证并交付(逐个切换确认无控制台错误,并列出每个变体的适用场景与代价)、选定后集成(按项目惯例整合所选变体并删除原型界面)。调用形式包括:<description>、<description> x5、riff <variant>、keep <variant>、keep <variant>, leave the picker。

适用场景:需要为某个 UI 组件探索多个可行设计方向并现场对比时。

限制:探索期间绝不触碰生产代码;变体必须共享项目令牌但沿不同轴发散;选择器外观不随项目变化;超过 5 个变体会稀释对比;若两个变体趋同应删掉一个。首次调用时仅回复指定语句,不提供其他信息。