夜雨聆风
AI 做的页面为什么总像同一个模板?给它装上这两个设计大脑
两个让 AI 生成的页面不再”一眼AI”的前端设计技能
一、为啥需要这俩东西？
你肯定遇到过这种情况——让 AI 生成个页面，出来的永远是：蓝紫渐变 + Inter 字体 + 圆角白卡片 + 淡入动画。千篇一律，用户一眼就知道”这是 AI 做的”。
问题不是 AI 不行，是它缺设计知识——它知道 HTML 怎么写，但不知道”SaaS 后台该用什么配色”、”医疗 App 要满足什么无障碍标准”。
这两个技能就是来补这个缺的：
|
|
|
|
|---|---|---|
|
|
Anthropic 官方 | nextlevelbuilder 社区 |
|
|
审美破局者 | 设计智能数据库 |
|
|
|
|
|
|
|
|
|
|
|
|
简单说：frontend-design 是”艺术家”，追求独特和视觉冲击；ui-ux-pro-max 是”设计师”，专业规范、系统化匹配。 两个搭配用效果最好。
二、frontend-design：Anthropic 官方的”审美破局者”
2.1 它怎么想的？
frontend-design 的核心逻辑特别简单：先定美学方向，再写代码。它逼着 AI 在动手之前先想清楚——这个页面要走什么风格？极简？赛博朋克？Art Deco？复古未来？
而且它有一条铁规矩：拒绝 AI 通用审美。以下都是它明确禁止的：
-
• ❌ 禁用 Inter、Roboto、Arial、Space Grotesk 等”AI 烂大街”字体 -
• ❌ 禁止紫色渐变 + 白底卡片的经典 AI 审美 -
• ❌ 禁止千篇一律的圆角卡片 + 淡入动画
它鼓励什么？大胆的、有个性的、令人难忘的设计。
2.2 工作流程
第一步：设计思维阶段 — 理解界面的目的、用户群体，然后选择一个极端的美学方向（极简主义、混乱主义、复古未来主义、有机自然主义、奢华精致主义、杂志编辑风、野兽派、装饰艺术……），并想清楚”什么让这个设计令人难忘”。
第二步：代码实现 — 生成可运行的代码，确保功能完整、视觉冲击力强。
第三步：美学打磨 — 在五个维度上精雕细琢：
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2.3 触发条件
当你说出以下这些需求时，frontend-design 会自动激活：
-
• “帮我建个网站/着陆页/仪表板” -
• “写个 React/Vue 组件” -
• “做个 HTML/CSS 布局” -
• “美化一下这个界面” -
• “创建个海报/视觉作品”
2.4 安装
方式一：Claude Code 插件市场
claude plugin add anthropic/frontend-design方式二：手动安装
# 克隆 Anthropic 官方 Skills 仓库git clone https://github.com/anthropics/skills.git# 把 frontend-design 文件夹复制到 skills 目录# 项目级（推荐）cp -r skills/skills/frontend-design 你的项目/.claude/skills/# 全局cp -r skills/skills/frontend-design ~/.claude/skills/下载地址：github.com/anthropics/skills[1]
2.5 使用示例
示例 1：创建着陆页
帮我创建一个咖啡品牌的着陆页，要有杂志编辑风格，温暖精致AI 会先确定美学方向（杂志编辑风 + 温暖精致），选择有衬线的显示字体搭配干净的正文字体，用温暖的棕色/奶油色调，不对称布局……然后才写代码。
示例 2：仪表板
用 React + Tailwind 做一个数据分析仪表板，要暗黑奢华风格示例 3：代码产出
frontend-design 生成的代码会有这样的特点——CSS 变量管理色彩、独特字体配对、有冲击力的动画：
:root { --bg-deep: #0a0a0f; --surface: #14141f; --accent: #c9a227; /* 金色强调——不是AI那种紫色 */ --text-primary: #f0ece2; --text-muted: #6b6b7b;}/* 交错揭示动画——不是简单的淡入 */@keyframes staggerReveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); }}.card { animation: staggerReveal 0.6s ease-out both;}.card:nth-child(2) { animation-delay: 0.12s; }.card:nth-child(3) { animation-delay: 0.24s; }// frontend-design 生成的组件示例：不对称布局 + 独特字体export default function BrandHero() { return (<section className="relative min-h-screen overflow-hidden" style={{ background: 'var(--bg-deep)' }}> {/* 渐变网格背景——不是纯色 */} <div className="absolute inset-0" style={{ background: 'radial-gradient(ellipse at 20% 50%, rgba(201,162,39,0.08) 0%, transparent 50%)' }} /> <div className="relative grid grid-cols-12 gap-8 px-12 py-24"> {/* 不对称布局：7:5 而不是 6:6 */} <div className="col-span-7 flex flex-col justify-center"> <h1 className="font-display text-7xl leading-none tracking-tight" style={{ fontFamily: 'Playfair Display', color: 'var(--accent)' }}> Crafted with<br />Intention </h1> <p className="mt-8 text-xl max-w-lg" style={{ color: 'var(--text-muted)', fontFamily: 'DM Sans' }}> Every detail tells a story. Every pixel serves a purpose. </p> </div> <div className="col-span-5 flex items-end"> {/* 重叠元素——打破网格 */} <div className="relative -mb-12 ml-8"> <div className="w-64 h-80 rounded-sm overflow-hidden shadow-2xl"> <img src="/hero.jpg" alt="" className="object-cover w-full h-full" /> </div> <div className="absolute -bottom-6 -left-6 w-32 h-32 border-2" style={{ borderColor: 'var(--accent)' }} /> </div> </div> </div> </section> );}三、ui-ux-pro-max：内置设计数据库的”专业设计师”
3.1 它的本质是什么？
ui-ux-pro-max 不是普通的设计插件，它是一个可搜索的 UI/UX 设计智能数据库。当你提出 UI 需求时，它会从内置的知识库里检索最匹配的设计方案，然后综合成代码。
3.2 内置了什么？
|
|
|
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
所有配色都通过 WebAIM Contrast Checker 验证，文本可读性有保障。
3.3 工作流程
关键区别：frontend-design 是”先定方向再执行”，ui-ux-pro-max 是”先搜索匹配再生成“——它背后有个真正的数据库在跑。
搜索是靠内置的 search.py 脚本，用 BM25+Regex 混合搜索：
# AI 在后台自动执行这些搜索python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --domain productpython3 .claude/skills/ui-ux-pro-max/scripts/search.py "modern professional" --domain stylepython3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS business" --domain colorpython3 .claude/skills/ui-ux-pro-max/scripts/search.py "professional trustworthy" --domain typography3.4 支持的技术栈
HTML + Tailwind CSS（默认）、React / Next.js、Vue / Nuxt.js、Svelte、SwiftUI、React Native、Flutter，一共 8+ 个。
3.5 安装
方式一：CLI 工具安装（推荐，最省事）
# 1. 全局安装 CLInpm install -g uipro-cli# 2. 进入你的项目cd /your/project# 3. 初始化（根据你用的 AI 工具选一条）uipro init --ai claude # Claude Codeuipro init --ai cursor # Cursoruipro init --ai windsurf # Windsurfuipro init --ai all # 全部都装# 其他常用命令uipro versions # 查看可用版本uipro update # 更新到最新版uipro init --version v1.0.0 # 装特定版本方式二：Claude Code 插件市场
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill/plugin install ui-ux-pro-max @ui-ux-pro-max-skill方式三：手动安装
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git# 复制到项目 skills 目录cp -r ui-ux-pro-max-skill/.claude/samples/ui-ux-pro-max \ 你的项目/.claude/skills/ui-ux-pro-max/安装后的目录结构：
你的项目/├── .claude/│ └── skills/│ └── ui-ux-pro-max/│ ├── SKILL.md # 技能定义文件│ ├── scripts/│ │ ├── search.py # BM25 搜索脚本│ │ └── core.py # 核心搜索引擎│ └── data/ # 设计数据库│ ├── styles.csv # UI 风格│ ├── colors.csv # 配色方案│ ├── typography.csv # 字体搭配│ └── ux-guidelines.csv # UX 指南验证安装：
# 测试搜索脚本python3 .claude/skills/ui-ux-pro-max/scripts/search.py "minimalism" --domain style# 或者在 Claude Code 里试一下# 帮我创建一个现代化的登录页面# 如果 AI 开始问你产品类型、风格偏好，说明技能生效了3.6 使用示例
示例 1：SaaS 产品着陆页
帮我的数据分析SaaS产品创建一个着陆页，使用React和Tailwind，风格要现代专业AI 的处理过程：
-
1. 识别产品类型：SaaS 着陆页 -
2. 搜索匹配风格：极简主义 + Hero-Centric -
3. 匹配配色：深蓝 #003366（专业信任） + 绿色 CTA #22C55E -
4. 选择字体：Inter（现代清晰） -
5. 确定页面结构：Hero → Features → 社会证明 → 定价 → FAQ → Footer -
6. 生成代码
// ui-ux-pro-max 生成的 Hero 组件export default function Hero() { return (<section className="bg-white"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> <div className="text-center"> <h1 className="text-5xl font-bold text-gray-900 mb-6"> 数据分析，从未如此简单 </h1> <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto"> 专业的数据分析平台，帮助企业快速洞察数据价值 </p> <div className="flex justify-center gap-4"> <button className="bg-green-500 text-white px-8 py-3 rounded-lg hover:bg-green-600 transition-colors"> 免费试用 </button> <button className="border-2 border-gray-900 text-gray-900 px-8 py-3 rounded-lg hover:bg-gray-900 hover:text-white transition-colors"> 观看演示 </button> </div> </div> </div> </section> );}示例 2：金融科技仪表板（深色主题）
/ui-ux-pro-max 重设计「接口哨兵」的异常列表和数据分析页，深色主题，Fintech风格AI 会自动匹配：
-
• 配色： slate-900（背景）+amber-400（强调色） -
• 字体： Inter（正文）+JetBrains Mono（代码/数据） -
• 布局：Bento Grid + 卡片分区 -
• 行高 48px（移动端最小点击区域） -
• 错误状态 #ef4444（WCAG AA 对比度合规）
// 异常列表页关键代码export default function ExceptionList() { return (<div className="bg-slate-900 text-slate-100 p-6 rounded-xl"> <div className="flex justify-between items-center mb-6"> <h1 className="text-2xl font-bold text-amber-400">API 异常列表</h1> <div className="flex gap-3"> <input type="text" placeholder="搜索接口..." className="bg-slate-800 border border-slate-700 rounded px-3 py-2" /> <select className="bg-slate-800 border border-slate-700 rounded px-3 py-2"> <option>全部状态</option><option>错误</option><option>警告</option> </select> </div> </div> {data.length === 0 ? ( <div className="text-center py-12"> <div className="text-slate-500 mb-4">✅ 一切正常</div> <button className="text-amber-400 hover:underline">手动触发检测</button> </div> ) : ( <table className="w-full"> <thead> <tr className="text-left text-slate-400 text-sm"> <th className="pb-3">接口</th><th className="pb-3">状态</th> <th className="pb-3">时间</th><th className="pb-3">操作</th> </tr> </thead> <tbody> {data.map(item => ( <tr key={item.id} className="border-t border-slate-800 hover:bg-slate-850"> <td className="py-3"> <a href="#" className="text-blue-400 hover:underline">{item.endpoint}</a> </td> <td><StatusBadge status={item.status} /></td> <td>{formatTime(item.timestamp)}</td> <td><button className="text-slate-400 hover:text-white">详情</button></td> </tr> ))} </tbody> </table> )} </div> );}// 图表配置——青绿渐变科技感export const errorRateChart = { chart: { background: 'transparent', toolbar: { show: false } }, colors: ['#0ea5e9', '#00c6ff'], stroke: { width: 2, curve: 'smooth' }, xaxis: { labels: { style: { colors: '#94a3b8' } }, axisBorder: { color: '#334155' } }, grid: { borderColor: '#334155', strokeDashArray: 3 }, tooltip: { theme: 'dark', x: { format: 'dd MMM yyyy' } }};示例 3：医疗健康 App（无障碍优先）
设计一个医疗健康数据仪表板，需要高对比度、无障碍友好AI 会自动匹配：
-
• 配色：医疗蓝 #0077B6 + 生态绿 #10B981 -
• 数据色：红/绿/蓝（色盲友好组合） -
• 文本：深灰 #1F2937，7:1 对比度（WCAG AAA） -
• 最小字体 16px，最小点击区域 48×48px -
• ARIA 标签、键盘导航、focus-visible 样式
3.7 自动激活的触发词
当你的对话中出现这些词时，ui-ux-pro-max 会自动激活：
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
四、两个技能怎么搭配用？
|
|
|
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
两个一起用 |
|
搭配使用的提示词示例：
先用 frontend-design 确定一个大胆的美学方向，再用 ui-ux-pro-max 匹配专业的配色和字体方案，帮我做一个创意工作室的官网，React + Tailwind五、自定义与高级技巧
5.1 ui-ux-pro-max 自定义设计系统
在项目里创建 .uipro/custom.yaml 可以覆盖默认配置：
brandColor: "#6366f1" # 自定义主色fontPrimary: "Manrope"spacingUnit: 8 # 8px 基准网格5.2 批量重设计
uipro batch --pages "src/pages/dashboard,src/pages/users"自动扫描指定目录，生成重设计建议。
5.3 与 Figma 协同
虽然不直接连 Figma，但你可以：在 Figma 导出颜色/字体变量 → 填入 custom.yaml → 让 AI 生成完全一致的代码。
六、常见问题
|
|
|
|
|---|---|---|
|
|
|
|
|
|
|
python3 --version
|
|
|
|
|
|
|
|
|
|
|
|
|
七、一键安装脚本
#!/bin/bash# 前端设计 Skills 双件套# 1. frontend-design（Anthropic 官方）claude plugin add anthropic/frontend-design# 2. ui-ux-pro-max（CLI 方式）npm install -g uipro-clicd /your/projectuipro init --ai claudeecho "✅ 双件套装完成！"💡 Skills 不需要全部安装，建议按项目选 2-3 个核心的。装太多会增加上下文负担、拖慢响应速度。
一句话总结：frontend-design 负责让页面”有个性”，ui-ux-pro-max 负责让页面”够专业”。两个搭配，AI 生成的页面就不再是”一眼AI”了。
引用链接
[1] github.com/anthropics/skills: https://github.com/anthropics/skills/tree/main/skills