适用场景与两种形态（A/B）

不是所有需求都适合做成百度搜索小工具，也不是所有小工具都长得一样。本章先划清适用边界，再介绍框架定义的两种标准形态，帮你一开始就选对方向。

适用的典型场景

百度官方把小工具大致归为五大类，偏「可视化轻交互」：

• 计算工具：个税计算器、满减划算器、世界时钟换算等。
• 休闲娱乐：幸运转盘、像素画板、今日抽签等。
• 知识探索：元素周期表、光学混色实验等。
• 命理运势：生肖配对卡等。
• 生活服务：垃圾分类查询等。

它们的共同特征：一个明确输入 → 一段本地计算/查询 → 一个直观结果。这正是 GenUI 最舒服的甜区。

不适合的场景

以下诉求应当绕行或改用其他形态：

• 强后端、实时联网查询（平台禁止运行时联网）。
• 需要用户登录、账号体系、持久化个人数据（禁止 localStorage / IndexedDB）。
• 大量后台二进制处理、Worker / WASM 计算密集型任务。
• 把整个网站原样塞进去（直接打开网站被明确禁止）。

两种标准形态

GenUI 规范定义了两种视觉形态，二选一：

形态 A：画布 + 操作区

左侧（或主区）是一块「画布」展示结果，右侧（或下方）是「操作区」放输入控件。适合生成器、预览器类工具——用户操作在侧，结果在视觉主区呈现。

实战：二维码生成器、万象云档书目速查都采用了形态 A 的骨架（照搬官方 layout.html）。

形态 B：整屏画布

整个展示区就是一块全屏画布，交互直接在画布上进行。适合全屏沉浸式工具，如像素画板、混色实验这类需要大面积操作空间的应用。

选型的硬约束

无论选哪种形态，都要满足几个通用约束：

• 1:1 正方形响应式：展示区按正方形自适应。
• 表头规范：顶部表头文案为「小工具 · 项目名」，长度 ≤ 10 字，高 45px。
• 控件克制：滑动条 ≤ 4 个、按钮 ≤ 2 个，避免操作区过载。

一句话：先用「输入→计算→结果」的轻交互模型判断自己是否适合，再按「要不要大画布」在形态 A / B 之间二选一，最后守住 1:1、表头、控件数量三条硬线。