7.3 KiB
前端设计与 Gemini 协作方案
更新：2026-09-16。取代 9 月 9–11 日的前端视觉、布局建议，后续直接更新本文，不再按日期追加同类建议文件。
这是设计任务说明；工程规范以根目录 AGENTS.md 为准。具体任务若已有更新的专门方案，以专门方案为准。
1. 当前起点
本次核对基于 3f71ddfcb 的代码与计划，没有重新进行浏览器视觉验收。
- 配方已经有独立容器和工具栏，笔记有自己的标题，不再把“拆开创作工作台”列为待办。
- 提示词工坊已经独立。继续使用现有工坊，不恢复旧嵌入式组合面板，也不拿早期的简单组合设想限制现在已有的能力。
- 文件夹与配方覆盖层的定位问题已有修复，不重复下发修复任务。
- 工具箱已有入口；快捷栏自定义是待实施计划，见 工具箱与快捷栏方案。不要把计划当作已经实现的功能。
- 当前配方包导入按钮处于禁用状态。设计可以解释不可用原因，不能为了演示效果直接启用、伪造成功或隐藏这个限制。
以上用于避免重复劳动，不代表所有关联功能已经验收通过。旧审查报告中的问题需要复现后判断，不能整份搬成当前待办，也不能直接宣布全部解决。
2. 怎样发挥 Gemini 的优势
让 Gemini 负责视觉层次、排版、密度、图标、过渡和响应式细节，并完成对应前端实现。不给每个像素下指令，也不要求每个小调整都等待批准。
任务边界和操作语义先明确：用户从哪里进入、想完成什么、写入什么、如何取消、完成后去哪里。Codex 可以负责梳理这些约束与检查数据、节点和生命周期；Gemini 做实现时也必须覆盖它们，不能把操作闭环全部留给下一位补。
每轮交付一条完整操作流程。 “把工具箱做漂亮”范围模糊；“让用户从工具箱固定一个工具，再移除或取消，且任何时候都能恢复默认”才是可完成的任务。
3. 统一的设计方向
目标是清楚、紧凑、有质感的 ComfyUI 创作工具。图片和用户内容是视觉重点，装饰只辅助识别。
| 区域 | 设计职责 |
|---|---|
| 顶部导航 | 模型、图库、工作流配方；进入和返回的位置稳定 |
| 模型文件夹 | 只负责模型目录，不承担全局导航 |
| 左下工具区 | 默认保留素材库；工具箱是完整目录，快捷栏是常用入口。自定义行为遵循专门方案 |
| 列表工具栏 | 搜索、筛选、结果数、主操作；窄窗口可换行，控件不能互相挤没 |
| 内容卡片 | 图片、名称、类型和一项主操作。技术细节按需要展开，次操作可集中到“更多” |
| 详情与编辑 | 返回路径明确；区分查看、编辑、应用，明确应用到哪个节点或画布 |
不要为了统一外观强行让所有卡片显示同样字段。模型用于选择资产，配方用于复用工作流，素材用于复用内容，信息重点各不相同。
外观由 Gemini 在现有主题内自行发挥：统一按钮层级、间距、圆角与文字密度；选中、警告、禁用和键盘焦点要清楚。普通按钮不加持续发光或跳动。两套主题共享布局与操作规则，不能各自长出一套交互。
不把新的全站导航重构与本轮工具箱改动捆绑实施。发现其他页面需要调整时，写一句后续项即可。
4. 防止只考虑一个局部
动手前用几行列出本次操作链，并填下面这张表。只检查与本次变更有关的部分，不做每轮全仓审查。
| 必须想清楚的事 | 交付时需要回答 |
|---|---|
| 入口与出口 | 从哪个页面进入？关闭、返回、再次打开后分别是什么状态？ |
| 正常与边界状态 | 加载、空内容、筛选无结果、失败、禁用、取消是否可理解？没有此状态的说明不适用 |
| 关联影响 | 改了共享按钮或浮层，哪些相邻页面、主题、提示框会受影响？ |
| 操作对象 | 当前改的是快捷入口、素材数据、节点参数还是画布？文案是否说清楚？ |
| 尺寸与输入 | 普通窗口、侧边停靠、长中文/英文、鼠标与键盘是否能完成同一任务？ |
| 离开后的行为 | 悬浮预览、拖动、视频和请求会不会在关闭后继续活动或写错对象？ |
例如“更多”菜单变漂亮，仍必须考虑靠右时是否出界、被父容器裁切、滚动时是否漂移，以及 Esc 关闭的是菜单还是整个浏览器。选择一个代表页面打磨公共样式后，再核对受影响页面，不要求一次重做它们。
5. 性能怎么兼顾
- 默认采用静态布局与局部短过渡。大面积模糊、连续光效、鼠标移动驱动全页动画必须有实际价值，否则不用。
- 大列表继续按现有分页、缩略图和懒加载策略工作；不能为视觉预览一次性加载全部原图、详情和视频。
- 工具提示随内容和交互更新，不为一小段文字增加持续轮询。隐藏页面的事件、预览和请求按照已有生命周期释放。
- 验证本次增加的成本：是否多了持续任务、重复请求或重复监听，滚动和拖动是否出现明显卡顿。需要声称性能提升时提供同一条件下的测量；没有测量就不报百分比，也不猜显存变化。
6. 推荐工作顺序
第一轮：完成工具箱与快捷栏专门方案。 这是明确的当前任务单；视觉与交互一起完成，包含正常放置、拖回、取消、重复固定、容量已满和恢复默认，不顺手改其他页面导航。
第二轮：统一受影响的公共控件。 以工具箱的按钮、提示、选中和禁用状态为起点，检查它们在模型、配方、素材库中的实际使用。修改原规则，清掉本次替代的旧声明。
第三轮：逐页优化信息密度。 先选一个真实使用频繁的页面，完整处理列表、详情、返回和失败反馈，再决定下一页。无需为了执行本文件同时美化全插件。
每轮完成后更新状态，删除已完成待办。验证发现的新问题直接修复；超出本轮范围的只记录具体触发条件，避免积累泛泛的“以后再优化”。
7. 可直接发给 Gemini 的任务模板
先阅读 GEMINI.md、AGENTS.md，以及 docs/plans/frontend-design-brief.md。本轮只完成【具体操作流程】，具体规则以【对应方案】为准。
先简述入口、正常操作、取消/失败、返回路径，以及会受影响的相邻界面，然后直接实施。颜色、排版和细节由你在现有主题内决定，不必逐项询问。
交付完整交互，不只做正常状态的截图。保留真实数据和操作语义，覆盖相关的窄窗口、主题、键盘与关闭路径。发现接口或业务阻塞时明确说明，不能用演示数据、假成功或静默隐藏功能替代。
完成后用简短清单说明：改变了什么、实际验证了哪些路径、哪些未验证、剩余的具体问题和本地提交。验证范围与改动相称，不默认跑全部测试；未完成项不得写成已完成。
这样用户主要判断“是否顺手、是否好看”，无需每次替实现者补齐所有边界情况。