ui-anti-slop-codex

UI Anti Slop Codex

强制 Codex 将 UI 工作视为产品设计任务，而非泛泛地填充屏幕。先确定界面类型，锁定视觉规范，依据仓库中的设计依据进行实现，然后在最终交付前验证渲染后的 UI。

工作流

除非用户明确只要求讨论，否则每项 UI 任务都遵循以下顺序。

1. 以仓库现状为准

   • 检查现有 UI 文件、路由、全局样式、组件库、图标库、包管理器、屏幕截图、设计文档和 DESIGN.md。
   • 优先采用现有设计系统和本地组件，而不是另建视觉系统。
   • 如果存在 DESIGN.md，请先阅读，再做视觉决策。如果任务会新建或修改 DESIGN.md，请加载 references/design-md-protocol.md。

2. 界面分类

   • 将工作归为以下一种或多种类型：落地页、营销网站、平台应用、仪表盘、管理或内部工具、编辑器或创作工具、结账或定价页面、文档或开发者关系页面、移动 UI、游戏或交互界面。
   • 加载与该界面类型匹配的 references/surface-contracts.md。
   • 如果检查仓库后界面类型或受众仍确实不明确，请提出一个最关键的问题，并给出建议答案。不要询问仓库中可以找到答案的问题。

3. 选择参考体系

   • 优先采用用户明确指定的参考。
   • 否则，从 references/reference-families.md 中选择与界面类型、受众、业务目标和信息密度相匹配的体系。
   • 将参考视为设计词汇，而非照搬许可。

4. 编辑 UI 前声明视觉规范

   • 保持简洁、可执行：

Visual Contract
- Surface:
- User job:
- Reference family:
- Design source:
- Density:
- Layout:
- CRUD create mode:
- Required states:
- Forbidden tells:
- Verification:

• Design source 必须说明设计依据来自现有仓库 UI、DESIGN.md、用户参考、生成的参考，还是推断出的体系。
• 如果界面包含记录、表格、管理工作流、仪表盘或平台 CRUD，则必须指定 CRUD create mode。注明采用行内、模态框、抽屉还是独立页面，并根据任务复杂度和记录扫描需求说明理由。
• Forbidden tells 必须针对具体界面类型，不得使用泛泛的清单。

5. 依据规范实现

   • 首先构建真正可用的界面。任务是平台页面时，不要交付落地页；任务是公开落地页时，不要交付产品控制台。
   • 如果已有可用方案，请使用现有组件、设计令牌、字体、图标集、图表库、路由和状态模式。
   • 只有当仓库没有可用的设计依据，或用户要求重新设计时，才引入新的视觉语言。

6. 最终交付前进行视觉验证

   • 加载 references/codex-verification.md。
   • 条件允许时运行应用或打开产物。
   • 如果有浏览器工具，请截取桌面和移动端屏幕截图。
   • 对照视觉规范评估渲染结果，并在最终回复前修复可见问题。

核心规则

• 界面优先。视觉风格应服务于屏幕的用途。
• 设计令牌优先。如果存在 DESIGN.md 或设计令牌，它们就是设计事实来源。
• 产品实证胜过装饰。使用真实的产品 UI、真实媒体、真实数据状态或明确的占位内容。避免用 div 伪造截图。
• 信息密度必须匹配使用频率。日常工具需要便于快速浏览。公开页面需要清晰呈现价值主张和实证。
• CRUD 浏览和 CRUD 创建是不同的交互模式。除非行内录入是产品的核心行为，否则不要在主表格或列表旁边或下方放置持久显示的创建表单。
• 每个界面只使用一套视觉系统。不要混用无关的配色方案、图标系列、圆角体系、阴影和字体风格。
• 不要默默采用通用默认样式。禁止使用默认紫色渐变、装饰性卡片、虚假指标、嵌套卡片、含糊的文案、不可见的按钮文字和无法解释的大块留白，除非设计约定有充分理由。
• 验证是任务的一部分。文字重叠、移动端显示异常、图表难以辨读、按钮对比度不足，或设计与设计约定相矛盾时，不要结束任务。

参考资料路由

• 当存在 DESIGN.md、用户提到 DESIGN.md、工作需要创建可复用的设计系统，或大规模重新设计需要持久的视觉规则时，加载 references/design-md-protocol.md。
• 加载 references/surface-contracts.md，以确定界面类型和所需的 UI 行为。
• 选择视觉参考系列，或用户指定某个产品或品牌作为灵感来源时，加载 references/reference-families.md。
• 完成任何视觉 UI 实现或评审前，加载 references/codex-verification.md。

输出规范

• 对于重要的 UI 工作，在修改代码之前说明视觉约定。
• 实施过程中，用户更新应简短，并围绕视觉约定展开。
• 在最终回复中，说明关键的 UI 变更、执行过的验证，以及无法运行的检查。