要让Codex生成页面符合项目设计规范，需四步：一、用四要素指令锚定规范起点；二、注入真实代码或AGENTS.md上下文；三、用网址通过Open Design反向提取设计参数；四、生成后强制覆盖关键样式并删除伪类。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
让Codex生成的页面与你项目里已有的设计规范保持一致，不是靠反复重试或手动调CSS，而是把规范变成它能读、能执行、不忽略的结构化输入。它不会主动翻你仓库里的tokens.css，也不会猜你“简约”到底指留白多还是字体细。
第一步：用四要素指令锚定规范起点
在每次向Codex发起生成请求前，把这四行内容**严格放在Prompt最开头**，不换行、不加空格、不解释：
【Goal:生成符合当前项目规范的用户注册页;Context:位于src/pages/auth/register.tsx,复用src/components/ui/下所有组件;Constraints:颜色仅限--color-primary-600/--color-gray-900/--color-gray-100,圆角统一为rounded-lg,间距使用scale-4(=1rem),禁止出现任何内联style;Done when:所有按钮使用ButtonFeature组件，标题层级严格为h1→h2→p，无font-size硬编码】
这一步必须前置。写在中间或末尾，Codex会当成普通描述忽略。它没有记忆回溯能力，只认第一眼看到的硬约束。
第二步：注入真实项目上下文
方法一：贴出2段你项目里真实存在的代码
这是Hero组件的写法（注意--spacing-8调用+无padding类）：
export const HeroFeature = () => (
【div className="flex flex-col items-center py-16 px-4 md:px-8"】
NexusFlow
专为技术决策者设计的SaaS平台
);
这是按钮禁用态逻辑（注意disabled属性+opacity-50）：
const ButtonFeature = ({ disabled }: { disabled?: boolean }) => (
);
方法二：强制它读取AGENTS.md
通过本地 Codex 或 OpenClaw OAuth 凭证直接调用 ChatGPT/Codex Responses 的 image_generation 工具来生成或编辑光栅图像，然后保存
请先读取./AGENTS.md中的「视觉规范」和「组件约束」两节，特别注意「禁止使用Tailwind的bg-gradient-to-r」「所有卡片默认带shadow-sm但移动端移除」这两条，再生成注册页HTML结构。
【注意：AGENTS.md文件必须真实存在于项目根目录，且路径大小写完全匹配，否则Codex静默跳过】
第三步：用网址反向提取已有网站的设计上下文
如果你已有上线页面但没整理规范文档，直接输入网址：
https://nexusflow.com/landing
Open Design会自动解析该页面的字体堆栈、主色系、字号比例、行高值、间距密度，并生成可选的设计上下文包。它会把「#1e40af作为primary-600」「Inter为display-font」「body line-height: 1.6」这些拆成独立条目，而不是给你一张截图让你自己猜。
解析完成后，在Codex Prompt中追加一句：“基于Open Design提取的nexusflow.com上下文生成，禁用所有渐变、阴影和border-radius > 0.25rem。”
第四步：生成后强制覆盖关键样式
1. 在Codex输出的HTML中定位到最外层容器（通常是main或div#root）；
2. 找到其className属性；
3. 在className末尾追加：【bg-white text-gray-900】（Tailwind）或内联style="background:#fff;color:#111;"（原生CSS）；
4. 删除所有:hover、:focus、:active伪类声明——简约风原型里它们90%是冗余干扰项。
这一步不能省。Codex生成的默认样式常带悬停动效和过渡，而你的设计规范可能明确禁用交互反馈。手动删比让模型记住更可靠。
