前端界面设计(装了这个 Skill 后,Claude Code 写的前端页面终于没程序员审美了!)

前端界面设计(装了这个 Skill 后,Claude Code 写的前端页面终于没程序员审美了!)
装了这个 Skill 后,Claude Code 写的前端页面终于没程序员审美了!

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

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

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

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

前端界面设计(装了这个 Skill 后,Claude Code 写的前端页面终于没程序员审美了!)

装完之后说一句"帮我做个 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-clicd /path/to/your/projectuipro init --ai cursor      # Cursoruipro init --ai windsurf     # Windsurfuipro init --ai codex        # Codex CLIuipro init --ai copilot      # GitHub Copilotuipro init --ai gemini       # Gemini CLIuipro 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 编程工具绑定。

反模式检查是个亮点

每个行业的推理规则里都有一项"Anti-Patterns",专门列了该行业不该做什么

比如银行类产品不该用"AI 紫粉渐变",儿童教育类不该用深色模式,企业级 SaaS 不该用夸张的动画。

这个很实用,AI 写前端最容易犯的错误不是功能写不出来,而是审美踩雷。

配色太花、动画太浮夸、风格跟产品调性不搭,这些问题有了反模式规则之后能避免大半。

还有一份交付前检查清单:不用 emoji 当图标(用 SVG)、所有可点击元素加 cursor-pointer、hover 动画 150-300ms、文字对比度不低于 4.5:1、尊重 prefers-reduced-motion,都是容易忽略但影响体验的细节。

写在最后

AI 写代码的能力已经很强了,但"好看"这件事一直是短板。

根本原因是 AI 缺少设计领域的结构化知识,它知道怎么写 CSS,但不知道什么场景该用什么风格。

UI UX Pro Max 的做法是把设计师脑子里的经验变成规则,塞进 AI 的上下文里。161 个行业、67 种风格、161 套配色,听起来是堆数据,但这些数据组合起来就是一个能自动出方案的设计系统。

下次用 AI 写前端的时候,先装上这个试试。至少配色不会再是 AI 最爱的紫粉渐变了。

文章版权声明:除非注明,否则均为边学边练网络文章,版权归原作者所有

相关阅读