大家好，我是孟健。
最近我研究了一下出海圈很多人都在用、并且口碑很好的一个 Claude Skill：ui-ux-pro-max。
仓库地址（先收藏）：
它目前 Star 已经非常高（我看到的时候是 12.7k），核心作用一句话总结就是：
把「AI 直出页面的那股 AI 味」压下去，用一套更工程化、更审美化、更可复用的流程，让 UI**/UX 设计质量显著提升。**
我这篇文章会做两件事：
-
带你快速体验它能带来什么（以及如何在 Codex 上用起来）
-
拆解它的思路：它到底靠什么把 UI 做得"更像人做的"
1）为什么我选 Codex 来试：Claude 封号太凶了
不少朋友都知道，Claude 最近封号很严，我就干脆在 Codex 上试验了一下，结果发现：Codex 也完全支持 Skills，而且体验很顺滑。
所以如果你也在做出海站点、落地页、产品官网这一类，想把 UI 质量往上抬一档，这条路非常值得试一下。
2）安装与验证：3 条命令就搞定
安装方式非常简单，作者提供了 CLI。
先全局安装：
npm install -g uipro-cli然后进入个人根目录初始化（这里我用的是 Codex）：
bash
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 进一步把验收流程写成了可执行的清单，从五个维度检查：
-
视觉质量
-
交互
-
亮色/暗色模式
-
布局
-
可访问性
结语
好了，今天的 Skill 分享和分析就到这里了。
如果你在做出海站点、落地页、SaaS 官网，我强烈建议你亲自跑一遍这个 Skill 的流程。
大家看完有什么收获、或者你希望我下一期拆解哪个 Skill / 哪套工作流，欢迎留言。
我们下期再见。
🚀 想要与更多AI爱好者交流，共同成长吗？