Codex 如何做出更好的界面？ui-ux-pro-max-skill 配置教程

让 Codex 做界面时，最容易卡住的不是按钮写不出来，而是页面总带着一种“默认模板味”：大标题居中、几张圆角卡片、蓝紫渐变铺满屏。ui-ux-pro-max-skill 的价值就在这里，它把 UI 风格、配色、字体、图表、页面模式和 UX 检查规则变成 Codex 能调用的设计知识层。配置好以后，给 Codex 的任务就不只是“写页面”，而是“先按产品场景找设计依据，再写页面”。

我会这样判断它适不适合你：如果你经常让 Codex 做落地页、SaaS 后台、管理控制台、移动端原型，或者改掉一个“能用但不好看”的页面，它就值得装。它不是 Figma，不会替代设计师做品牌视觉；它更像给 AI 编程助手补一个审美和交互的检查清单。

配置前先确认两件事

第一，机器上要有 Node.js、npm 和 Python 3。官方 README 写得很清楚，CLI 用 npm 安装，后续的设计系统搜索脚本依赖 Python 3。第二，最好在具体项目目录里初始化，而不是随便找个空目录装一下就忘了。这样 Codex 后续读项目时，能同时读到代码结构和 skill 带来的设计规则。

我会这样试：先在终端运行 node --version、npm --version、python3 --version。这三项都有输出，再进入你的项目根目录。少一步环境确认，后面排查会绕很多弯。

用 CLI 安装到 Codex

官方推荐的安装路径是 CLI。先全局安装 ui-ux-pro-max-cli，它会提供 uipro 命令；然后在项目目录里执行面向 Codex 的初始化命令。常用顺序是：npm install -g ui-ux-pro-max-cli，进入项目后运行 uipro init --ai codex。

如果你的 CLI 版本比较旧，出现不认识 codex、update 或 uninstall 之类的情况，先更新：npm install -g ui-ux-pro-max-cli@latest。如果全局安装因为权限失败，macOS/Linux 可以换 Node 版本管理器，或者临时用 npx ui-ux-pro-max-cli init --ai codex 走一次初始化。

让 Codex 真的按设计系统做界面

装好以后，不要只对 Codex 说“帮我美化一下”。更稳的提示词是把产品类型、目标用户、技术栈、页面任务写清楚。比如：“使用 ui-ux-pro-max-skill，为一个 B2B SaaS 数据看板建立设计系统，技术栈 React + Tailwind，风格低噪音、信息密度高、支持深色模式，然后再实现 Dashboard 页面。”

进阶一点，可以先生成并持久化设计系统。README 里给了 search.py 的设计系统命令，还支持把结果保存到 design-system/MASTER.md 和页面级覆盖文件。对 Codex 来说，这一步很有用：后续做 Settings、Billing、Analytics 这些页面时，先读同一套 MASTER 规则，页面之间就不会一会儿圆润、一会儿赛博、一会儿企业蓝。

给 Codex 的提示词可以这样写

第一个提示词适合从零开始：“请使用 ui-ux-pro-max-skill，先为我的 AI 工具后台生成设计系统，包含颜色、字体、间距、组件密度、表格和表单规则，再实现首页仪表盘。”第二个适合改旧页面：“请先检查当前页面的视觉层级、间距、对比度、移动端溢出和按钮状态，再按 ui-ux-pro-max-skill 的建议重构。”

第三个适合保持多页面一致：“先读取 design-system/MASTER.md，如果存在当前页面的覆盖文件就优先用覆盖规则；没有覆盖文件时，只按 MASTER 做实现。”这句话比“保持风格统一”更管用，因为它告诉 Codex 具体应该读取哪个约束。

完成后怎么检查

我会看五件事：页面是否符合产品类型，颜色和字体是否有明确规则，表格、表单、筛选器这些高频组件是否稳定，移动端有没有文字溢出，最后再看对比度和交互状态。ui-ux-pro-max-skill 能给 Codex 更好的设计起点，但最终仍要用真实页面检查一遍。

如果配置后感觉变化不明显，通常不是 skill 没用，而是提示词太空。把“好看一点”换成“什么产品、什么人用、完成什么任务、用什么技术栈、哪些页面必须统一”，Codex 才能把设计知识用到具体界面上。