good-ui-bobby

Good UI Bobby

将此技能作为 good-ui 的个人执行层。在保留 good-ui 对产品的判断、克制、无障碍设计和对现有系统的尊重的基础上使用它。如果项目没有提出更严格的约束，请采用此处的默认规则。

优先级

按以下顺序处理决策：

1. 用户的明确指示和实际项目约束。
2. 功能正确性、无障碍设计、平台惯例和现有产品语言。
3. good-ui 的通用设计指导。
4. 此技能中的默认规则。

如果默认规则会损害可用性、无障碍性、性能或产品既有语言，请予以变通。不要仅为遵守规则而另创一套视觉系统。

Bobby 的绝对要求

• 负责每个可见 UI 元素的外观。不要交付未经样式处理的浏览器控件、库的演示默认样式、占位样式、通用表面或意外的原生界面样式。通过项目的设计令牌和视觉语言自定义呈现方式，同时保留可靠的原生语义和行为。
• 只使用真正的图标。绝不要使用 Unicode 字符、表情符号、ASCII 艺术字或 +、x、->、check 等文本符号代替视觉图标。应使用现有的图标组件、内联 SVG、本地 SVG 资源或平台图标系统。
• 将意外焦点视为严重缺陷。为键盘操作和必要的焦点转换保留可见焦点，但不要抢夺焦点、随意自动聚焦、给非交互式容器添加 tabindex，也不要在 :focus-visible 可以区分输入方式时，为普通的指针交互显示键盘焦点样式。
• 让内容和控件与组件边界保持适当间距。除非明确的通边变体另有要求，否则不要让文字、图标、点击区域、焦点环或嵌套表面看起来紧贴边缘。

按需查阅

只阅读任务所需的参考资料：

任务	参考资料
网格、控件尺寸、点击区域、状态、动效或 shadcn	交互默认设置
设计令牌、基础组件、组件 API、组件展示页或开发覆盖层	组件系统
Git 设置、检查点、环境变量或 OpenRouter	项目工作流

对于新产品或重大重新设计，实施前请阅读全部三份参考资料。

工作流程

1. 了解项目。 检查现有技术栈、路由、设计令牌、组件、依赖项、Git 状态和真实数据。保留有意为之的工作，避免无关重写。
2. 建立系统。 在组合大范围界面之前，先定义或扩展设计令牌和可复用基础组件。使用生产组件，而不是仅用于截图的近似实现。
3. 构建界面。 优先实现主要任务。为每个交互元素提供清晰可见的边界、足够大的点击区域、完整的状态模型和有意义的动效过程。
4. 保护边缘。 检查每个有边界的表面与其四周最靠近的可见内容之间的间距。将内边距视为组件结构的一部分，而不是使用位置的临时补丁。
5. 展示系统。 对于重要工作，创建仅供开发使用的组件评审界面，引入实际的生产组件，并单独展示其变体和状态。
6. 检查并修正。 渲染具有代表性的宽、中、窄布局。根据需要测试鼠标、触控、键盘、焦点恢复、减少动态效果、加载、空状态、错误和溢出状态。至少进行一轮修正。
7. 设立检查点。 对临时探索控件进行门控或将其移除。在仓库处于活跃开发期间，提交有意义的里程碑。

完成门槛

完成大量 UI 工作前，请确认：

• 间距遵循 4px 基础网格和 8px 节奏，除非有已记录的限制要求另作处理。
• 可视控件尺寸采用 24/32/40/48/56px 比例；绝不会仅为保留较小的可视形状而缩小有效点击区域。
• 交互元素具有恰当的悬停、焦点可见、按下、选中、禁用、加载和错误状态。
• 状态变化应保留空间身份；当动画有助于理解时，应使用动画，并遵循减少动态效果偏好。
• 组件评审界面展示的是真实组件，而非平行重制品。
• 不会将开发覆盖层、测试数据、虚假控件或密钥意外当作生产行为。
• 每个可见元素都采用符合项目风格的定制呈现；不再残留默认浏览器、库演示或虚假图标样式。
• 文本和图标边缘留白经过审慎设计；任何有边界的控件、字段、菜单、卡片或嵌套表面都不会显得紧贴边界、过于局促。
• 焦点只会因真实的键盘操作或上下文变化而出现，不会因意外指针事件、挂载时机、悬停或焦点被窃取而出现。
• 已检查键盘顺序、触控访问、焦点恢复、内容适应能力和响应式行为。