装了这个 Skill 之后，Claude Code 写出来的前端页面终于不像程序员审美了！

还有一份交付前检查清单：不用 emoji 当图标（用 SVG）、所有可点击元素加 cursor-pointer、hover 动画 150-300ms、文字对比度不低于 4.5:1、尊重 prefers-reduced-motion，都是容易忽略但影响体验的细节。装完之后说一句"帮我做个 SaaS 的落地页"，它会先根据你的产品类型自动推理出应该用什么设计风格、配什么颜色、选什么字体、页面怎么排，然

Sitin涛哥

1612人浏览 · 2026-03-30 22:01:05

Sitin涛哥 · 2026-03-30 22:01:05 发布

点击上方卡片关注我

设置星标学习更多AI出海知识

用 AI 写前端代码，功能实现没问题，但出来的界面……一言难尽。

配色要么灰蒙蒙一片，要么 AI 最爱的紫粉渐变；排版像是把组件往页面上随手一摆；字体永远是默认的 sans-serif。

不是 AI 写不了前端，是它缺一套专业的设计直觉。

最近用到有个叫 UI UX Pro Max 的项目，做的事情很直接：给 AI 编程助手装一套设计系统的"知识库"。

装完之后说一句"帮我做个 SaaS 的落地页"，它会先根据你的产品类型自动推理出应该用什么设计风格、配什么颜色、选什么字体、页面怎么排，然后再动手写代码。

它到底做了什么

传统流程是自己去 Dribbble 找参考、去 Coolors 配色、去 Google Fonts 选字体，然后告诉 AI"按这个来"。

UI UX Pro Max 把这些设计决策全自动化了，它内置了一套推理引擎，核心数据量很大：

161 条行业推理规则 — 从 SaaS、金融科技、医疗健康到电商、餐饮、游戏，每个行业该用什么设计模式、该避免什么坑，全部写成了规则
67 种 UI 风格 — Glassmorphism、Brutalism、Neumorphism、Bento Grid、Cyberpunk、AI-Native UI……不是让你自己选，是它根据你的产品类型自动匹配
161 套配色方案 — 跟 161 个行业分类一一对应
57 组字体搭配 — 标题字体 + 正文字体的组合，带 Google Fonts 链接
99 条 UX 规范 — 可访问性、反模式检查、响应式断点
25 种图表类型推荐 — 做 Dashboard 的时候用

实际跑起来是什么效果

在 Claude Code 里说：

帮我做一个美容 SPA 的落地页

它不会直接开始写代码，而是先跑 5 路并行搜索：产品类型匹配 → 风格推荐 → 配色选择 → 落地页模式 → 字体搭配。

输出一份完整的设计系统方案：

页面模式： Hero-Centric + Social Proof（情感驱动 + 信任元素）
UI 风格： Soft UI Evolution（柔和阴影、有机形状、高级感）
配色： 柔粉 #E8B4B8 + 鼠尾草绿 #A8D5BA + 金色 CTA #D4AF37
字体： Cormorant Garamond（标题）+ Montserrat（正文）
要避免的： 霓虹色、生硬动画、深色模式、AI 紫粉渐变

然后才开始写代码，而且写出来的代码已经带上了正确的颜色、字体、间距和交互效果。

安装方式

支持主流 AI 编程工具，装法各不同：

Claude Code（推荐，支持最完整）：

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

其他工具用 CLI：

npm install -g uipro-cli
cd /path/to/your/project

uipro init --ai cursor      # Cursor
uipro init --ai windsurf     # Windsurf
uipro init --ai codex        # Codex CLI
uipro init --ai copilot      # GitHub Copilot
uipro init --ai gemini       # Gemini CLI
uipro init --ai all          # 全部安装

需要 Python 3.x 跑搜索脚本。

支持 13 种技术栈

不只是 Web，移动端也覆盖了：

Web： HTML + Tailwind（默认）、React、Next.js、Vue、Nuxt.js、Svelte、Astro、shadcn/ui
iOS： SwiftUI
Android： Jetpack Compose
跨平台： React Native、Flutter

在 prompt 里提一句用什么技术栈就行，它会给出对应的代码规范，不提的话默认用 HTML + Tailwind。

也能单独当设计系统生成器用

不通过 AI 编程工具也能跑。直接命令行调用搜索脚本：

# 生成完整设计系统
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown

# 只搜风格
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style

# 只搜字体
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant serif" --domain typography

适合设计师自己用来快速生成设计方案，不一定要跟 AI 编程工具绑定。