出海圈都说好用的 Claude Skills，我用 Codex 试了一遍：UI/UX 直接起飞

大家好，我是孟健。

最近我研究了一下出海圈很多人都在用、并且口碑很好的一个 Claude Skill：ui-ux-pro-max。

仓库地址（先收藏）：

https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

它目前 Star 已经非常高（我看到的时候是 12.7k），核心作用一句话总结就是：

把「AI 直出页面的那股 AI 味」压下去，用一套更工程化、更审美化、更可复用的流程，让UI/UX 设计质量显著提升。

我这篇文章会做两件事：

1.

带你快速体验它能带来什么（以及如何在 Codex 上用起来）

2.

拆解它的思路：它到底靠什么把 UI 做得“更像人做的”

1）为什么我选 Codex 来试：Claude 封号太凶了

不少朋友都知道，Claude 最近封号很严，我就干脆在 Codex 上试验了一下，结果发现：Codex 也完全支持 Skills，而且体验很顺滑。

所以如果你也在做出海站点、落地页、产品官网这一类，想把 UI 质量往上抬一档，这条路非常值得试一下。

2）安装与验证：3 条命令就搞定

安装方式非常简单，作者提供了 CLI。

先全局安装：

npm install -g uipro-cli

然后进入个人根目录初始化（这里我用的是 Codex）：

cd ~
uipro init --ai codex

如果安装成功，进入 ~/.codex/skills 会看到一个新的 Skill 目录。

接下来你就可以让 Codex 在做设计/实现时自动调用它了。

3）快速体验：我让它做了一个 pngtosvg 站点

我让它做了个很简单但很常见的出海站点需求：做一个 pngtosvg 工具站（Landing Page + 核心功能页）。

可以看到它在生成过程中会明确显示调用了这个 Skill，产物如下：

我的直观感受是：

• 整体比 AI 直出要稍微强一点
• 组件间距、排版、层级关系更干净
• hover、边框、卡片阴影、按钮状态这些小细节更完整
• 很多常见的“AI 设计坑”被提前规避了

4）拆解这个 Skill：它是怎么做到“去 AI 味”的？

接下来我们拆一下 ui-ux-pro-max 的核心结构，你会发现它其实不神秘，只是把流程抽象了。

4.1 先定角色：它不是“提示词”，它把自己定义成“设计智能体”

Skill 的 Description 第一段就很关键：它明确说自己是一个 UI/UX 设计智能体。

并且强调这不是单一维度的“审美提示词”，而是一个复合体：

设计 × 工程 × 审美 × 组件生态

它把能力拆成了几块：设计语言、视觉系统、技术栈、组件能力、行为动作、应用场景。

设计资源的覆盖也非常广（这也是它能稳定输出风格化页面的根本原因）：

• 50 styles（设计风格）
• 21 palettes（配色方案）
• 50 font pairings（字体组合）
• 20 charts（图表类型）
• 9 大 UI 技术栈/生态
• 覆盖几乎所有常见产品形态
• 组件 + UI 设计维度（不是只生成一张“图”，而是可落地的页面结构）

4.2 主体内容：它要求先有 Python 依赖

Skill 主体里写明了前置依赖：Python 技术栈。

4.3 How To Use：什么时候应该调用它？

How To Use 里，作者把触发范围写得很清晰：当你要做 UI/UX 相关工作时，比如：

• design
• build
• create
• implement
• review
• fix
• improve

这也很符合我们日常：从“做新页面”到“改老页面”，它都能介入。

4.4 Step 1：强制做需求结构化（从人话里提取 4 个关键信息）

它先做需求分析：从用户输入里强制提取 4 类关键信息：

• Product type（产品形态）
• Style keywords（视觉风格）
• Industry（行业）
• Stack（技术栈）

你可以把它理解为：先把“设计要素”对齐，否则后面全部会跑偏。

4.5 Step 2：用 search.py 检索到“上下文足够”为止（关键在“召回”）

第二步是检索：用 search.py 多次搜索，一直搜索到「上下文足够」。

它的实现方式也很有意思：不是联网搜，也不是调用外部向量数据库。

作者写了一个本地的 BM25 搜索算法，去匹配知识库（CSV）里的相关特征进行召回。

如果你对工程实现感兴趣，可以去翻源码看看，会很有启发：把“设计知识库”变成可检索的结构化数据，这是它稳定输出的核心。

搜索还有明确的优先级顺序（这点很像资深设计师的工作流）：

• Product（产品）
• Style（样式）
• Typography（字体排版）
• Color（颜色）
• Landing（落地页结构）
• Chart（图表）
• UX（用户体验）
• Stack（技术栈）

这一步其实就是：把页面“设计系统”的各个维度定下来。

4.6 Step 3：兜底策略（没指定技术栈就用 HTML + Tailwind）

第三步是兜底：如果用户没有指定技术栈，它默认用 html + tailwind。

4.7 资源清单：每个维度都是一份独立 CSV

Skill 接下来列出了所有可搜索的资源（每个都是独立 CSV）。

总体可以理解为：

• product：决定产品整体设计方向
• style：决定视觉语言
• typography：字体搭配与排版气质
• color：完整配色方案（不是随便挑个主色）
• landing：落地页结构（信息架构/模块组织）
• chart：图表类型与呈现方式
• ux：交互展现的最佳实践
• prompt：最佳提示词（更像“工作指令集”）

5）最精华的地方：通用设计规约 + Checklist（把“经验”写死）

如果说前面的内容是“检索 + 选型”，那真正把页面质量拉开差距的，是后面的两块：

1）通用设计****规约（Design Rules）

2）质量 Checklist（逐项自检）

这两块我认为是去 AI 味的精华，值得你反复读、甚至抄到自己的团队规范里。

5.1 规约：专门针对 AI 的“常见坑”

比如 AI 很爱生成 emoji 图标，这里直接规定：用 SVG icons。

还有一堆“人类会下意识注意，但 AI 经常忽略”的细节：

• hover 状态必须完整
• logo/icon 的比例要合理
• 鼠标手型、可点击反馈要明确
• 动画要平滑、别晃眼
• 玻璃质感不要脏
• 文字亮度对比要够
• 边框要可见（别隐形）
• 导航栏间距、内容间距要一致
• 最大宽度要统一（别一会儿 1200 一会儿 1440）

这些基本都是我们拿 AI 直出页面之后，需要“二次人工修”的地方。

而作者做的事情是：把这些坑提前变成硬规则。

5.2 Checklist：五个维度逐项检查

Checklist 进一步把验收流程写成了可执行的清单，从五个维度检查：

• 视觉质量
• 交互
• 亮色/暗色模式
• 布局
• 可访问性