用提示词和Skills让AI生成原型界面更美观
很多小伙伴已经学会用 AI IDE 把设计稿变成代码、用组件库快速搭建界面。可能也发现了一个尴尬的问题：同样的需求，AI 生成的页面总觉得差点意思——字体是千篇一律的 Inter，配色是随处可见的紫色渐变，布局是对称得让人打哈欠的卡片网格，整个页面散发着浓烈的"AI 味"。
方法一：用提示词描述设计风格
2.1 设计风格的 5 个维度
要生成美观的界面，你需要从 5 个维度描述你想要的效果：
#bMFZLuNCTrDU text { white-space: pre; }#bMFZLuNCTrDU .fb0 { stroke: var(--N900-FG, 0.15); }#bMFZLuNCTrDU .fb0 {stroke: rgba(31,35,41, 0.15)}#bMFZLuNCTrDU .fx0 { stroke-miterlimit: 10; }#bMFZLuNCTrDU .fx0 {stroke-miterlimit: 10}#bMFZLuNCTrDU .fa1 { fill: rgb(187, 191, 196); }#bMFZLuNCTrDU .fa1 {fill: rgb(187, 191, 196)}#bMFZLuNCTrDU .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#bMFZLuNCTrDU .fx1 {font-style: normal}#bMFZLuNCTrDU .fx2 { text-anchor: middle; }#bMFZLuNCTrDU .fx2 {text-anchor: middle}#bMFZLuNCTrDU .fx3 { dominant-baseline: central; }#bMFZLuNCTrDU .fx3 {dominant-baseline: central}#bMFZLuNCTrDU .fx4 { stroke: none; }#bMFZLuNCTrDU .fx4 {stroke: none}#bMFZLuNCTrDU .fc0 { fill: var(--text-caption); }#bMFZLuNCTrDU .fc0 {fill: #646a73}#bMFZLuNCTrDU .fa2 { fill: var(--text-link-disabled); }#bMFZLuNCTrDU .fa2 {fill: rgb(187, 191, 196)}#bMFZLuNCTrDU .fa3 { fill: rgb(225, 234, 255); }#bMFZLuNCTrDU .fa3 {fill: rgb(225, 234, 255)}#bMFZLuNCTrDU .fx5 { font: 400 16px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#bMFZLuNCTrDU .fx5 {font-style: normal}#bMFZLuNCTrDU .fx6 { text-anchor: start; }#bMFZLuNCTrDU .fx6 {text-anchor: start}#bMFZLuNCTrDU .fx7 { dominant-baseline: alphabetic; }#bMFZLuNCTrDU .fx7 {dominant-baseline: alphabetic}#bMFZLuNCTrDU .fc1 { fill: rgb(31, 35, 41); }#bMFZLuNCTrDU .fc1 {fill: rgb(31, 35, 41)}#bMFZLuNCTrDU .fx8 { font: 400 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#bMFZLuNCTrDU .fx8 {font-style: normal}#bMFZLuNCTrDU .fb1 { fill: var(--N900-FG, 0.15); }#bMFZLuNCTrDU .fb1 {fill: rgba(31,35,41, 0.15)}#bMFZLuNCTrDU .fb2 { fill: rgb(226, 226, 227); }#bMFZLuNCTrDU .fb2 {fill: rgb(226, 226, 227)}#bMFZLuNCTrDU .fa4 { fill: var(--bg-body); }#bMFZLuNCTrDU .fa4 {fill: #fff}ABC123456维度描述要点示例关键词字体颜色布局动画细节标题用粗体展示字体，正文用易读正文字体主色 + 点缀色，避免均匀分布不对称、重叠、打破网格精心编排的页面加载、微交互背景、阴影、边框、纹理Space Grotesk、Playfair Display、JetBrains Mono#4F46E5 主色 + #F59E0B 点缀Bento Grid、不对称分区、浮动元素staggered reveals、滚动触发噪点、几何图案、渐变网格
2.2 眼见为实：普通提示词 vs 美化提示词
让我们用一个落地页示例来对比效果：
普通提示词：
请帮我做一个 AI 写作助手的落地页，包含导航栏、首屏、功能展示、定价、页脚
美化提示词：
代码块
Markdown
请帮我做一个 AI 写作助手的落地页，要求：
**美学风格：新野兽派（Neubrutalism）**
**字体：**
- 标题：Space Grotesk，字重 700-900
- 正文：IBM Plex Sans，字重 400
**颜色：**
- 主色：#000000（纯黑）
- 强调色：#FF6B00（橙色）
- 背景：#FFFDF0（米白色）
- 边框：3px 黑色实线
**布局：**
- 不对称布局，元素之间用粗黑线分隔
- 卡片有硬阴影（box-shadow: 8px 8px 0px #000）
- 大胆的留白对比
同样的需求，第二个提示词能让 AI 生成一个风格鲜明、令人印象深刻的页面。
2.3 前端美化 Skills 资源库
不要从零开始写提示词！这里收集了与前端美化直接相关的 AI Skills：
#oUciMmeIUqex text { white-space: pre; }#oUciMmeIUqex .fb0 { stroke: var(--N900-FG, 0.15); }#oUciMmeIUqex .fb0 {stroke: rgba(31,35,41, 0.15)}#oUciMmeIUqex .fx0 { stroke-miterlimit: 10; }#oUciMmeIUqex .fx0 {stroke-miterlimit: 10}#oUciMmeIUqex .fa1 { fill: rgb(187, 191, 196); }#oUciMmeIUqex .fa1 {fill: rgb(187, 191, 196)}#oUciMmeIUqex .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#oUciMmeIUqex .fx1 {font-style: normal}#oUciMmeIUqex .fx2 { text-anchor: middle; }#oUciMmeIUqex .fx2 {text-anchor: middle}#oUciMmeIUqex .fx3 { dominant-baseline: central; }#oUciMmeIUqex .fx3 {dominant-baseline: central}#oUciMmeIUqex .fx4 { stroke: none; }#oUciMmeIUqex .fx4 {stroke: none}#oUciMmeIUqex .fc0 { fill: var(--text-caption); }#oUciMmeIUqex .fc0 {fill: #646a73}#oUciMmeIUqex .fa2 { fill: var(--text-link-disabled); }#oUciMmeIUqex .fa2 {fill: rgb(187, 191, 196)}#oUciMmeIUqex .fa3 { fill: rgb(225, 234, 255); }#oUciMmeIUqex .fa3 {fill: rgb(225, 234, 255)}#oUciMmeIUqex .fc1 { stroke: var(--B500); }#oUciMmeIUqex .fc1 {stroke: #336df4}#oUciMmeIUqex .fx5 { font: 400 16px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#oUciMmeIUqex .fx5 {font-style: normal}#oUciMmeIUqex .fx6 { text-anchor: start; }#oUciMmeIUqex .fx6 {text-anchor: start}#oUciMmeIUqex .fx7 { dominant-baseline: alphabetic; }#oUciMmeIUqex .fx7 {dominant-baseline: alphabetic}#oUciMmeIUqex .fc2 { fill: rgb(31, 35, 41); }#oUciMmeIUqex .fc2 {fill: rgb(31, 35, 41)}#oUciMmeIUqex .fx8 { font: 400 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#oUciMmeIUqex .fx8 {font-style: normal}#oUciMmeIUqex .fc3 { fill: var(--B500); }#oUciMmeIUqex .fc3 {fill: #336df4}#oUciMmeIUqex .fb1 { fill: var(--N900-FG, 0.15); }#oUciMmeIUqex .fb1 {fill: rgba(31,35,41, 0.15)}#oUciMmeIUqex .fb2 { fill: rgb(226, 226, 227); }#oUciMmeIUqex .fb2 {fill: rgb(226, 226, 227)}#oUciMmeIUqex .fa4 { fill: var(--bg-body); }#oUciMmeIUqex .fa4 {fill: #fff}ABCD12345仓库名内容Star链接ui-ux-pro-max-skillantigravity-awesome-skillssuperdesigndev/superdesignanthropics/skills/frontend-design57种风格 + 95种配色 + 56种字体避免通用 AI 审美套路AI 原生 UI 开发工具Anthropic 官方前端设计 Skill10k+-4.7k-GitHubGitHubGitHubGitHub
💡
更多风格提示词请参考文章末设计风格提示词速查
2.5 三款常用风格模板
这里给你三款经过验证的风格模板，直接复制修改使用：
模板 1：极简主义
代码块
Markdown
**美学风格：极简主义**
**字体：**
- 标题：PP Neue Montreal，字重 500-700
模板 2：玻璃拟态
代码块
Markdown
**美学风格：Glassmorphism（玻璃拟态）**
**字体：**
- 标题：Outfit，字重 600-800
- 正文：Plus Jakarta Sans，字重 400-500
**颜色：**
- 背景：渐变 #667eea 到 #764ba2
- 卡片背景：rgba(255, 255, 255, 0.1)
- 文字：#FFFFFF
**布局：**
- 浮动卡片设计
- 卡片之间有重叠
模板 3：Bento Grid（便当盒）
代码块
Markdown
**美学风格：Bento Grid**
**字体：**
- 标题：SF Pro Display，字重 700
- 正文：SF Pro Text，字重 400
方法二：用 Skills 插件自动加载设计规范
每次手动写风格提示词很麻烦。Skills 是一种可复用的设计规范包，安装后 AI 会自动应用这些规范。
3.1 三个让界面变漂亮的 Skills
3.2 安装 UI/UX Pro Max（最推荐）
UI/UX Pro Max 是目前最全面的设计规范 Skills，它预置了：
•
67 种 UI 风格：Glassmorphism、Neumorphism、Brutalism、Bento Grid...
•
96 种配色方案：按行业分类（SaaS、电商、社交...）
•
57 种字体搭配：专业设计师验证的组合
•
100+ 条设计规则：间距、圆角、阴影的规范
安装步骤：
代码块
Plain Text
# 1. 全局安装 CLI
npm install -g uipro-cli
# 2. 初始化（选择你用的 AI 工具）
uipro init --ai claude
# 或者
uipro init --ai cursor
# 或者
uipro init --ai trae
安装后，你只需要在提示词中加一句话：
代码块
Plain Text
使用 UI/UX Pro Max 的 Glassmorphism 风格，帮我做一个 AI 写作助手落地页
AI 就会自动应用对应的字体、颜色、布局规范。
3.3 安装 Anthropic 官方 frontend-design
这是 Anthropic 官方出品的前端设计 Skill，专门解决"AI 审美套路"问题：
代码块
Plain Text
# 在 Claude Code 中执行npx skills add anthropics/skills/frontend-design
安装后，AI 会自动避免：
•
❌ Inter、Roboto、Arial 字体
•
❌ 紫色渐变背景
•
❌ 对称网格布局
•
❌ 过淡的阴影
而是倾向于：
•
✅ 独特的字体组合
•
✅ 大胆的主色 + 锐利的点缀色
•
✅ 不对称、重叠的布局
•
✅ 有质感的背景（噪点、几何图案）
实战一：用美化提示词重新设计落地页
让我们用前面学到的知识，把一个普通的落地页变得好看。
4.1 普通版本
先用普通提示词看看 AI 给什么：
代码块
Plain Text
请帮我做一个宠物领养平台的落地页，包含：
- 导航栏（Logo、链接、注册按钮）
- 首屏（标题、副标题、CTA 按钮、宠物图片）
- 宠物展示（三张宠物卡片）
- 关于我们
- 页脚
生成的页面...能用，但很普通。
4.2 美化版本
现在加上风格描述：
代码块
Markdown
请帮我做一个宠物领养平台的落地页，要求：
生成的页面会是一个温暖、可爱、让人想领养宠物的界面。
实战二：用 Skills 快速生成仪表盘
Skills 特别适合需要大量页面的后台系统。
5.1 使用 UI/UX Pro Max
代码块
Plain Text
AI 会自动应用深色仪表盘的设计规范：
•
深灰背景（#1A1A2E）
•
高对比度卡片（#16213E）
•
鲜艳的数据颜色（蓝色、绿色、橙色）
•
玻璃拟态效果的悬浮卡片
5.2 使用 frontend-design Skill
代码块
Plain Text
使用 frontend-design skill，帮我做一个个人博客的主页，风格要独特、有个性
AI 会选择一个非主流的美学方向（比如复古未来主义或杂志风格），然后用独特的字体、配色、布局来实现。
实战三：创建自己的设计系统 Skill
如果你有固定的品牌风格，可以创建自己的 Skill，让所有 AI 生成的页面都符合你的品牌。
6.1 创建 Skill 文件
在项目中创建 .claude/skills/my-brand/SKILL.md：
代码块
Markdown
6.2 使用自己的 Skill
创建后，你只需要在提示词中说：
代码块
Plain Text
使用 my-brand skill，帮我做一个用户设置页面
AI 就会自动应用你定义的所有设计规范。
小结
让 AI 生成漂亮界面有两种方法：
🗂️
Vibe Coding 工作流建议：
探索阶段：用不同的风格提示词实验，找到你喜欢的美学方向
确定风格后：安装对应的 Skill（UI/UX Pro Max 或 frontend-design）
品牌项目：创建自己的 Skill，统一整个项目的设计语言
练习
选择以下任一场景，用本节课的方法从零完成：
用风格提示词为你之前做的一个项目重新设计界面（选一种你喜欢的风格）
安装 UI/UX Pro Max，用它的某个风格生成一个新页面
创建你自己的设计系统 Skill，定义你的品牌颜色和字体
附录：设计风格速查表
附录：Skills 安装速查
代码块
Markdown
# UI/UX Pro Max
npm install -g uipro-cli
uipro init --ai claude
# Anthropic frontend-design
npx skills add anthropics/skills/frontend-design
附录：配色方案推荐
附录：设计风格提示词速查
让前端页面更好看可以尝试的提示词：
风格类别