ui-prototype

UI 原型

Vendored from mattpocock/skills · MIT © 2026 Matt Pocock · upstream 6eeb81b · 已汉化并完成 VoidTech 插件内自包含适配。LICENSE 见 ../_vendor-licenses/mattpocock-LICENSE

在单个路由上生成几种明显不同的 UI 方案，通过浮动底栏切换。用户在浏览器中比较各方案，选择一个完整方案或组合其中的部分设计，然后删除未采用的代码。

适用场景

• "这个页面应该长什么样？"
• "我想在确定方案前先看几个仪表盘设计。"
• "给设置页试一个不同的布局。"
• 任何需要先看到多个可操作方案才能确定方向的场景。

两种实现方式

UI 原型放进现有应用后更容易判断，因为它会使用真实的页头、侧栏、数据和信息密度。孤立页面缺少这些上下文，往往会让每个方案看起来都不错。只要有合适的现有页面可以承载变体，就选择方案 A；确实无处放置时才选择方案 B。

方案 A：在现有页面中比较（首选）

路由已经存在时，让方案渲染在同一路由上，通过 ?variant= URL 查询参数切换。保留现有的数据获取、参数和鉴权，只替换渲染部分。这是默认选择。

如果原型内容尚不存在，但它明显属于某个现有页面（例如仪表盘新区块、设置页新卡片或现有流程的新步骤），仍使用方案 A，把各方案放入该页面。

方案 B：创建临时页面

仅当被做原型的东西确实没有任何现有页面可以归属时才用它——例如一个全新的顶层界面，或一个无处可合理嵌入的流程。

遵循项目已有的路由约定，创建一个一次性的路由——不要发明新的顶层结构。给它取个一眼能看出是原型的名字（例如在路径或文件名里包含 prototype 一词）。用同样的 ?variant= 模式。

选择方案 B 前再次确认：是否真的没有现有页面可以嵌入？缺少真实内容的空页面可能会掩盖布局和信息层级问题。

两个方案里，浮动的底部栏完全相同。

流程

1. 陈述问题并确定方案数量

默认生成 3 个变体，最多 5 个。数量再多会增加比较成本，通常无法带来新的设计方向。

把计划用一行写下来，写在原型所在处或文件顶部的注释里：

"设置页的三个变体，通过 ?variant= 切换，挂在现有的 /settings 路由上。"

无论用户是否在场提出反对意见，都先按这个计划推进。

2. 生成截然不同的变体

起草每个变体。让每个都达到：

• 页面的用途，以及它能访问到的数据。
• 项目现有的组件库或样式系统（TailwindCSS、shadcn、MUI、纯 CSS 等）。
• 一个清晰的导出组件名，例如 VariantA、VariantB、VariantC。

变体必须在结构上不同：布局、信息层级或主要操作方式至少有一项明显差异，而不能只换颜色。如果两个方案过于相似，给其中一个增加明确约束，例如“不要使用卡片网格”，然后重新设计。

3. 接入路由

在路由上创建单个切换器组件：

// pseudo-code — adapt to the project's framework
const variant = searchParams.get('variant') ?? 'A';
return (
  <>
    {variant === 'A' && <VariantA {...data} />}
    {variant === 'B' && <VariantB {...data} />}
    {variant === 'C' && <VariantC {...data} />}
    <PrototypeSwitcher variants={['A','B','C']} current={variant} />
  </>
);

对于方案 A（现有页面）：把所有现有的数据获取保留在切换器之上；每个变体只改变被渲染的子树。

对于方案 B（新页面）：/prototype/<name> 下的一次性路由挂载同一个切换器。

4. 构建浮动切换器

屏幕底部居中的一个小小的固定定位栏，含三个部件：

• 左箭头 —— 切到上一个变体（循环回绕）。
• 方案标签 —— 显示当前方案键；如果方案有名称，也一并显示。例如 B — Sidebar layout。
• 右箭头 —— 向前切换（循环回绕）。

行为：