用 Codex 生成可解释的 AI 推荐设置 UI：预览、确认与撤销的 6 步教程

admin 设计创意 4小时前

40 0

Meta 新公布的 Your algorithm 提醒了一个设计问题：用户说“少看夸张标题”，产品究竟把这句话改成了什么规则？本文不复刻 Facebook，也不宣称实测其算法；我们用一个虚构的“灵感流”页面，给出可在现有 Web 项目里交给 Codex 实现的原创工作流。目标是让自然语言偏好变成可预览、可确认、可撤销的 UI，而不是做一只会聊天的设置框。

本站原创示意：从用户表达偏好，到预览拟议更改，再由用户确认 — 自然语言只提出意图；系统不能在未解释时悄悄修改推荐规则。

适用场景与事前边界

适合内容流、素材推荐、工作台筛选和任何允许用户调整偏好的产品。准备已有的 React/Vue/原生组件项目、设计 token、可运行的本地预览，以及一份真实但匿名化的内容类型清单。本教程只设计前端交互契约；推荐算法、用户身份、持久化 API 和审核规则需要项目方提供。没有这些接口时，用可重置的本地模拟数据演示，不能把模拟成功写成线上生效。

第一步：把一句话拆成可审阅的“意图卡”

示例输入是“少看夸张标题，多看带步骤的 UI 设计案例”。界面不要立即提交；先展示系统理解的两条候选偏好、作用范围和生效时长。不要把“少看”翻成“永久屏蔽”，也不要擅自扩大到搜索、邮件或广告。用户需要能逐条删除、修改或取消。

输入：少看夸张标题，多看带步骤的 UI 设计案例
预览卡 A：降低「夸张标题」内容的推荐权重（仅灵感流）
预览卡 B：提高「分步骤 UI 案例」的推荐权重（仅灵感流）
默认：尚未应用；按钮「应用这 2 项」/「取消」
应用后：展示已生效清单和「撤销本次更改」

本站原创状态图：草稿、预览、应用、错误与撤销 — 先画失败和恢复路径，再决定用什么颜色与动效。

第二步：写状态合同，尤其是失败路径

至少区分 idle、parsing、preview、applying、applied、error 与 undoing。parsing 期间保留原句；preview 不能伪装成已生效；applying 禁止重复提交但允许明确取消；error 显示可重试和未生效状态；撤销成功后回到更改前列表。每次状态变化都要有文字提示，并让键盘焦点进入可预期的位置。颜色、声音和微动效只能辅助。

type PreferenceDraft = {
  id: string; label: string; action: "more" | "less";
  scope: "inspiration-feed"; confidence?: number;
};
// 以上仅是前端预览数据结构，不代表服务端已保存。
// 保存与撤销的 API、冲突处理和权限应由项目契约定义。

第三步：先让 Codex 只读审计，再做单组件实现

下面的提示词可以直接复制，替换方括号里的路径与命令。OpenAI 的前端设计建议强调事先提供设计系统、约束与视觉参考；本文进一步把修改范围和验收写死，防止它顺手改掉全站推荐逻辑。

第一轮，只读：
读取 [AGENTS.md]、[偏好设置组件]、[设计 token] 和相关测试。
梳理现有文案、键盘路径、API 契约与错误处理。
只报告最小改动方案，不修改文件，不假设不存在的服务端接口。

第二轮，实现：
仅修改 [偏好设置组件]、其样式和直接相关测试。
用本地模拟数据完成“输入 → 两张意图预览卡 → 确认 → 已生效列表 → 撤销”闭环。
保留原句，不将“少看”解释为永久屏蔽；预览与已应用要有明显文案区分。
支持 Tab、Enter、Escape 和清晰焦点；异步状态有可读提示；不新增 UI 库。
不要接入真实推荐 API，不要更改其他页面。交付文件清单、测试结果、三种视口截图和限制。

第三轮，验收：
检查 390/768/1440px，键盘和屏幕阅读器可读性，空输入、歧义输入、网络失败和撤销失败。
列出每一项可复现步骤与证据；未通过的项目不要标记完成。

本站原创流程图：Codex 的只读审计、有限实现与独立验收 — 给代理一个有边界的任务，比一句“做个智能设置页”更稳。

第四步：组件最小结构，确保用户知道当前状态

实现时至少有输入区、意图卡列表、作用范围、确认操作、已应用清单与撤销入口。预览卡可以有“减少 / 增加”视觉标识，但还必须写成文本。异步结果可用状态区域传达；危险或无法撤销的动作不该藏在通用“应用”按钮后。下面是一段框架无关的结构提示，不是完整生产代码。

<section aria-labelledby="preference-title">
  <h2 id="preference-title">调整灵感流偏好</h2>
  <label for="intent">你想多看或少看什么？</label>
  <textarea id="intent"></textarea>
  <!-- 解析后先展示可编辑的意图卡；默认未应用 -->
  <div role="status" aria-live="polite">已生成 2 项预览，尚未应用</div>
  <button type="button">应用这 2 项</button>
  <button type="button">取消</button>
</section>

第五步：用可复现的测试拆穿“看起来能用”

先用固定样例验证“少看”不会变“彻底屏蔽”，歧义词会让用户选择而不是盲猜。再模拟保存失败：预览仍在、已应用列表不变、错误说明可读。模拟撤销失败：原设置仍在，按钮可重试。Playwright 的定位器与断言可用于这些稳定状态；视觉快照要固定浏览器、字体与设备像素比，不能拿一张桌面截图替代移动端验证。

import { test, expect } from "@playwright/test";

test("preview is not silently applied", async ({ page }) => {
  await page.goto("http://localhost:3000/preferences");
  await page.getByLabel("你想多看或少看什么？").fill("少看夸张标题");
  await page.getByRole("button", { name: "预览更改" }).click();
  await expect(page.getByText("尚未应用")).toBeVisible();
  await expect(page.getByRole("button", { name: /应用这/ })).toBeVisible();
});
// 另补保存失败、撤销失败、键盘路径与三视口用例。