motherduck-design-dive

设计 MotherDuck Dive

使用此技能为 Dive 设计视觉系统和交互。搭配 motherduck-create-dive 使用，了解最新的 React 和 useSQLQuery 机制；如果任务还包括定义分析故事和 SQL，则搭配 motherduck-build-dashboard 使用。

设计默认规范

创建新的 Dive 或全面重新设计时，除非用户的设计要求另有规定，否则请采用以下默认规范。对于范围有限的编辑，应保留现有视觉系统，并检查受影响的状态。

• 从 320 px 视口开始设计，再逐步增强
• 使用流式容器和响应式网格，而非固定的桌面宽度
• 提供明暗主题切换控件，图表和 UI 颜色使用基于设计令牌的配色；条件允许时，以系统偏好作为初始默认值
• 预留布局可预测的筛选区域：在宽屏上直接显示，在窄屏上使用抽屉或底部弹层
• 将图表放在有界的响应式容器中，确保所有断点下标签都清晰易读
• 采用克制的商业分析视觉风格：中性色表面、紧凑的层级、清晰的坐标轴、低调的边框和少量装饰
• 让每个 KPI 组件都能独立提供价值：包含数值、标签、比较背景，并在数据支持时辅以小型趋势图或进度指示
• 通过数据、标签、徽标和主题令牌体现客户差异，而不是改变信息架构
• 支持键盘操作、清晰可见的焦点、44 px 的触控目标、足够的对比度，以及不依赖颜色的状态提示

避免使用装饰性渐变、玻璃效果、发光点缀、超大主视觉指标、装饰性便当盒布局、过多药丸标签、浮动形状，以及听起来像营销落地页的文案。

工作流

1. 在提出布局方案前，检查现有 Dive、提供的设计稿、截图和实时架构。
2. 如果可以使用 MotherDuck MCP，请在编写 Dive 代码前，以及每次调用 save_dive 或 update_dive 前，调用 get_dive_guide。除非用户要求采用不同方向，否则请遵循保留的 dives Guide 主题中提供的相关约定。通用样式示例与用户明确的设计要求冲突时，使用此技能设计响应式外壳。
3. 明确目标受众、首要决策、指标层级、筛选维度和复用边界。
4. 先绘制 320 px 下的布局：页头、筛选触发器、紧凑的单列或双列 KPI 组、主要图表、辅助区域和详情视图。
5. 在不改变阅读顺序的前提下，将布局扩展为平板和桌面网格。
6. 实现语义化设计令牌、主题切换、可复用卡片、响应式图表容器和筛选状态。
7. 分别验证查询正确性，然后预览完整 Dive 在加载、无数据、错误、长标签和密集数据等状态下的表现。
8. 检查受影响视口和主题下的渲染结果。对于新设计、大范围重新设计或用户要求提供证据交接的任务，请使用完整的视觉 QA 参考；标签或 SQL 编辑无需生成新的设计报告。

对于答复、审查或规划请求，请返回所要求的设计产物，不要更改 Dive。对于构建或重新设计请求，请实现并预览范围内的 Dive；只有当请求包含保存或更新操作时，才保存或更新。

交付物

返回已实施的更改或所要求的设计、已执行的检查，以及任何具体限制。对于完整的设计交接，请包含层级、筛选行为、响应式规则、主题令牌、组件边界，以及视觉 QA 参考中描述的证据。

不能仅凭响应式 CSS 就称其适合移动设备。请报告实际检查过的视口和状态。

参考资料

仅阅读当前任务所需的参考章节。

• 阅读 references/RESPONSIVE_DIVE_DESIGN_SYSTEM.md，了解布局网格、组件结构、主题令牌、筛选模型、反模式和 QA 检查清单。
• 阅读 references/VISUAL_QA_PLAYBOOK.md，了解可重复执行的截图、视觉检查、迭代和审查者交接流程。

相关技能

仅在缺少所需能力时加载相关技能；复用已有上下文。

• motherduck-create-dive：了解当前组件契约、预览、保存/更新和所需资源
• motherduck-build-dashboard：了解分析故事、各版块查询和端到端仪表板工作流
• motherduck-explore：发现真实维度和筛选候选项
• motherduck-query：验证各视觉状态背后的 SQL