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

要让Codex用Product Design插件生成的主页原型从“能跑通”变成“一眼就舒服”的简约风，其实不是靠反复重试拼运气，而是在视觉决策链的关键节点上，做几次精准的干预。先分享几个核心判断：问题不出在“AI不会生成简约设计”，而是在于你没有给它设定边界。好，正式开始。

整个过程可以拆成四个关键节点，逐个击破就行。

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

打开Codex → 新建Project → 选择Product Design插件 → 在对话框第一行直接输入以下三段内容，注意，这个步骤有个关键点：必须一次性写完三段发送，不能分三次来投喂。因为Codex会把这三段当作后续所有视觉方向的硬约束，漏掉任意一条，它就会在“探索阶段”自动引入玻璃拟态或微动效这些非简约元素。

第一段是任务描述：为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）。

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

插件自动生成三个方向后，需要主动干预。不要点击第一个——它总是最“安全”的常规布局，也最容易堆砌元素。这里有两个操作路径可选。

方法一：鼠标悬停在第二张预览图上 → 出现「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会自动触发热更新。第四，去预览区看一眼，是不是出现了无交互反馈的纯静态按钮。

这四步做完，按钮就彻底退化为文本锚点。这恰恰符合简约风“不引导、不打扰”的交互哲学。毕竟，简约不是简单，而是功能与美学的极致克制。