Codex Product Design插件风格微调：简约风主页迭代优化技巧【说明】

要让Codex生成的主页原型达成“一眼就舒服”的简约风，需在设计brief、视觉探索、原型生成、交互微调四阶段精准干预：首段用三句话锁定任务、要求与设计系统；第二步强制选用方向2；第三步用两行代码覆盖样式；最后删除所有hover/focus伪类。

你需要让Codex用Product Design插件生成的主页原型，从“能跑通”变成“一眼就舒服”的简约风，不是靠反复重试，而是控制它在视觉决策链的关键节点做精准干预。

确认设计brief阶段：用三句话封死模糊地带

打开Codex → 新建Project → 选择Product Design插件 → 在对话框第一行直接输入：

【任务描述】为SaaS工具“NexusFlow”设计首页，面向技术决策者（CTO/DevOps负责人），核心诉求是降低认知负荷，不展示功能列表，只呈现价值锚点和可信信号。

【具体要求】1. 禁用所有装饰性图标、渐变色块、悬浮动效；2. 所有文字仅使用系统默认字体（-apple-system, BlinkMacSystemFont, "Segoe UI"）；3. 行高固定为1.6，段落间距统一为1.8rem。

【设计系统上下文】- 组件库: src/components/ui/（含Button、Card、Hero）；- 设计变量: src/styles/tokens.css（重点复用--color-gray-900、--color-gray-100、--spacing-8）。

这一步必须一次性写完三段，不能分三次发送。Codex会把这三段作为后续所有视觉方向的硬约束，漏掉任意一条，它就会在“探索阶段”自动引入玻璃拟态或微动效等非简约元素。

视觉方向探索阶段：强制跳过默认方案，直选第二版

插件自动生成三个方向后，不要点击第一个——它总是最“安全”的常规布局，也最容易堆砌元素。

方法一：鼠标悬停在第二张预览图上 → 出现「Select this direction」按钮 → 点击确认。

方法二：在预览图下方输入指令：“跳过方向1，基于方向2生成可运行原型，移除所有卡片阴影、边框和内边距，仅保留文字层级对比。”

【方向2通常采用单栏垂直流+留白主导，是简约风最可靠的起点】

原型生成阶段：用两行代码覆盖默认样式

当Codex输出HTML/CSS代码后，在右侧预览区点击「Edit in IDE」→ 打开src/pages/index.tsx（或对应文件）→ 找到根容器元素（通常是div#root或main标签）。

在该元素的className中追加：bg-white text-gray-900（若使用Tailwind）或直接添加内联样式：style="background:#fff;color:#111;"。

紧接着，在同一文件顶部的CSS区块里，插入这段覆盖规则：

:root { --spacing-4: 1rem; --spacing-8: 2rem; --font-size-lg: 1.125rem; }

这条规则会压倒插件自带的响应式断点定义，避免它在tablet尺寸下偷偷增加侧边栏或双列布局。

交互微调阶段：删掉所有hover和focus伪类

第一步：在项目文件树中定位到src/components/ui/Button.tsx（或类似路径）。

第二步：搜索:hover → 删除整段hover样式块（包括背景色变化、阴影、transform位移）。

第三步：搜索:focus → 将outline: 2px solid #007AFF;替换为outline: none;。

第四步：保存文件 → Codex会自动触发热更新，预览区立刻显示无交互反馈的纯静态按钮。

这四步做完，按钮就彻底退化为文本锚点，符合简约风“不引导、不打扰”的交互哲学。