企业官网建设流程全解析

用 LLM 与 Skills 让 AI 界面告别"AI 味"：提示词模板与插件实战指南（easy-vibe Stage 2）

【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding，项目制学习项目地址: https://gitcode.com/datawhalechina/easy-vibe

AI 生成的前端页面总是"一眼 AI"——Inter 字体、紫色渐变、对称卡片网格，功能齐全却毫无记忆点。本指南基于 easy-vibe 项目 Stage 2 前端章节，为你拆解问题的根因，并给出两条可落地的解决方案：用 5 个维度写"带审美方向"的提示词，以及用 Skills 插件让 AI 自动加载专业设计规范。读完你将掌握 3 套可直接复制的风格模板、3 款开箱即用的美化 Skills，以及打造自己品牌设计系统 Skill 的完整方法。

1. 为什么 AI 默认生成的界面总是"普通"？

在 easy-vibe 课程 的上一节中，你已经学会了用 AI IDE 将设计稿转成代码、用组件库快速搭界面。但很快会发现一个尴尬的问题：同样的需求，AI 生成的页面总像缺了点什么——字体永远是 Inter，配色永远是紫色渐变，布局永远是四平八稳的对称卡片网格，整页散发着浓烈的"AI 味"。

这并非 AI 能力不足，而是你从未告诉它你想要的风格是什么。就像理发：只说"剪个头发"，理发师只能给你一个安全但平庸的结果；而说出"日系慵懒波浪卷、八字刘海、长度到锁骨、层次分明"，你才更可能得到符合预期的效果。

AI 的训练数据里包含海量前端代码，其中绝大多数采用的是"安全"选项：

这些选项单独看都不错，但当每一张 AI 生成的页面都同时用上它们时，就形成了"AI 味"。

💡核心洞察：AI 不是不会设计，而是默认会回归"统计平均"。你的任务，就是明确告诉它如何偏离这个平均。

2. 方法一：用提示词描述设计风格

2.1 设计风格的 5 个描述维度

要生成有视觉张力的界面，需要从 5 个维度描述你想要的观感：

2.2 眼见为实：普通提示词 vs 美化提示词

以"AI 写作助手落地页"为例对比效果。

普通提示词：

请帮我创建一个 AI 写作助手的落地页，包含导航栏、首屏、功能展示、定价、页脚

美化提示词：

请帮我创建一个 AI 写作助手的落地页，需求如下： **审美风格：新粗野主义（Neubrutalism）** **字体：** - 标题：Space Grotesk，字重 700-900 - 正文：IBM Plex Sans，字重 400 **颜色：** - 主色：#000000（纯黑） - 强调色：#FF6B00（橙色） - 背景：#FFFDF0（奶油白） - 边框：3px 实心黑 **布局：** - 非对称排版，区块间用粗黑分隔线 - 卡片带硬阴影（box-shadow: 8px 8px 0px #000） - 大胆留白形成对比 **动效：** - 页面加载时元素从下方弹出 - 按钮 hover 时向上位移 2px **细节：** - 所有圆角设为 0px（直角） - 按钮带强烈 3D 效果 - 背景叠加轻微噪点纹理

同一个需求，第二段提示词能让 AI 生成一张风格鲜明、令人印象深刻的页面。

2.3 前端美化 Skills 资源库

不必从零发明风格提示词！这里是一批直接面向前端美化的 AI Skills 资源：

💡 更多风格提示词请参阅文末 附录：风格提示词速查表。

2.4 三套可直接复用的风格模板

以下是三套经过验证的模板，复制后微调即可直接使用。

模板一：极简主义（Minimalism）

**审美风格：极简主义** **字体：** - 标题：PP Neue Montreal，字重 500-700 - 正文：Inter，字重 400 **颜色：** - 主色：#FFFFFF（白） - 文字：#1A1A1A（近黑） - 强调色：#3B82F6（蓝，少量使用） **布局：** - 大面积留白（区块 padding 至少 64px） - 单栏或双栏居中布局 - 用留白而非分隔线来划分区块 **动效：** - 缓慢淡入（时长 600ms） - hover 时柔和的颜色过渡 **细节：** - 圆角：8px - 阴影：轻量（0 4px 12px rgba(0,0,0,0.08)） - 无装饰性背景元素

模板二：玻璃拟态（Glassmorphism）

**审美风格：玻璃拟态** **字体：** - 标题：Outfit，字重 600-800 - 正文：Plus Jakarta Sans，字重 400-500 **颜色：** - 背景：#667eea 到 #764ba2 渐变 - 卡片背景：rgba(255, 255, 255, 0.1) - 文字：#FFFFFF **布局：** - 悬浮卡片设计 - 卡片之间轻微交错重叠 **动效：** - 页面加载时卡片错峰浮现（staggered） - hover 时卡片放大 1.05 倍 **细节：** - 圆角：20px - 背景模糊：backdrop-blur-xl - 边框：1px rgba(255, 255, 255, 0.2) - 轻微渐变光晕效果

模板三：Bento Grid（便当盒网格）

**审美风格：Bento Grid** **字体：** - 标题：SF Pro Display，字重 700 - 正文：SF Pro Text，字重 400 **颜色：** - 背景：#F5F5F7（浅灰） - 卡片：#FFFFFF（白） - 强调色：#0071E3（苹果蓝） **布局：** - 网格化布局，大小不一的卡片拼合 - 卡片间距 gap 16px - 圆角 24px **动效：** - hover 时卡片轻微上浮 - 点击时有按压反馈 **细节：** - 大卡片承载主要内容 - 小卡片展示次要信息 - 用图标替代部分文字 - 干净阴影（0 4px 24px rgba(0,0,0,0.06)）

3. 方法二：用 Skills 插件自动加载设计规范

每次手写风格提示词太麻烦。Skills 是可复用的设计规范包，安装一次后 AI 会自动应用，这正是 easy-vibe 课程 Skills 完整指南 所介绍的核心机制。

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+ 条设计规则：间距、圆角、阴影等规范

安装步骤：

# 1. 全局安装 CLI npm install -g uipro-cli # 2. 初始化（选择你使用的 AI 工具） uipro init --ai claude # 或 uipro init --ai cursor # 或 uipro init --ai trae

安装后，只需在提示词里加一句话：

使用 UI/UX Pro Max 的 Glassmorphism 风格，帮我创建一个 AI 写作助手的落地页

AI 会自动应用对应的字体、配色与布局规范。

3.3 安装 Anthropic 官方 frontend-design

这是 Anthropic 官方的前端设计 Skill，专门用于解决"AI 审美模板化"问题：

# 在 Claude Code 中执行 npx skills add anthropics/skills/frontend-design

安装后，AI 会自动规避：

• ❌ Inter、Roboto、Arial 字体
• ❌ 紫色渐变背景
• ❌ 对称网格布局
• ❌ 过软的阴影

转而倾向：

• ✅ 更有辨识度的字体组合
• ✅ 强烈主色 + 锐利强调色
• ✅ 非对称、交错的布局
• ✅ 带质感的背景（噪点、几何图案）

4. 实战一：用美化提示词重做落地页

把刚学的知识用起来，让一张普通的落地页变好看。

4.1 普通版本

先用普通提示词看看 AI 给什么：

请帮我创建一个宠物领养平台的落地页，包含： - 导航栏（Logo、链接、注册按钮） - 首屏（主标题、副标题、CTA 按钮、宠物图片） - 宠物展示（三张宠物卡片） - 关于我们 - 页脚

生成出来的页面能用，但很普通。

4.2 美化版本

现在加上风格描述：

请帮我创建一个宠物领养平台的落地页，需求如下： **审美风格：温暖柔和 + 手绘感** **字体：** - 标题：Nunito（圆体），字重 700-800 - 正文：Nunito，字重 400-600 **颜色：** - 主色：#FFB347（暖橙） - 次色：#FFCCB3（浅橙） - 背景：#FFF8F0（奶油白） - 文字：#5D4037（棕色） **布局：** - 圆角卡片（border-radius: 24px） - 卡片微微倾斜，角度各不相同 - 悬浮、交错的元素 **动效：** - 页面加载时元素从两侧滑入 - 宠物卡片 hover 时像小动物歪头一样旋转 - 按钮 hover 时弹跳 **细节：** - 整体圆角 16-24px - 温暖柔和的阴影（0 8px 24px rgba(255,179,71,0.3)） - 背景加爪印装饰 - 用 clip-path 做不规则裁切图片 - 手绘描边风格图标

这版提示词会生成一张温暖可爱、让人想立刻领养宠物的界面。

5. 实战二：用 Skills 快速生成数据看板

Skills 尤其适合需要大量页面、且风格统一的运营后台和内部系统。

5.1 使用 UI/UX Pro Max

使用 UI/UX Pro Max 的 Dashboard Dark 风格， 帮我创建一个 SaaS 管理后台的看板页面，包含： **顶部：** 四张统计卡片（用户数、活跃用户、营收、API 调用量） **中部：** - 左侧：近 7 天用户增长折线图 - 右侧：订阅套餐分布饼图 **底部：** 最近动态列表（时间、用户、操作）

Skill 会自动应用一套统一的深色看板规范：

• 深灰背景（#1A1A2E）
• 高对比卡片（#16213E）
• 明快的数据色（蓝、绿、橙）
• 带轻微玻璃拟态的悬浮卡片

5.2 使用 frontend-design

使用 frontend-design skill， 帮我创建个人博客首页，风格要独特、有性格

AI 会选择一个非主流的审美方向（如复古未来主义、杂志编辑风），并用独特的字体、配色与布局将其落地，彻底跳出通用模板。

6. 实战三：创建你自己的设计系统 Skill

如果你的产品已有固定的品牌风格，可以创建专属 Skill，让 AI 生成的所有页面自动遵循品牌规范。

6.1 创建 Skill 文件

在项目中创建.claude/skills/my-brand/SKILL.md：

--- name: my-brand description: 我的项目专属设计系统，确保所有 UI 遵循统一视觉语言 --- # 我的项目设计系统 ## 品牌色 - 主色：#6366F1（Indigo 500） - 次色：#8B5CF6（Violet 500） - 成功：#10B981 - 警告：#F59E0B - 错误：#EF4444 - 背景：#F9FAFB - 卡片：#FFFFFF ## 字体系统 - 标题：Plus Jakarta Sans - H1: 700, 48px - H2: 600, 36px - H3: 600, 24px - 正文：Inter - Body: 400, 16px - Small: 400, 14px ## 间距系统 - 基础单位：4px - 组件内边距：8px / 12px / 16px - 区块间距：24px / 32px / 48px - 页面边距：64px ## 圆角 - 按钮：8px - 卡片：12px - 输入框：8px - 弹窗：16px ## 阴影 - 小：0 1px 3px rgba(0,0,0,0.1) - 中：0 4px 12px rgba(0,0,0,0.1) - 大：0 8px 24px rgba(0,0,0,0.12) ## 动效 - 过渡时长：150ms / 300ms - 缓动函数：cubic-bezier(0.4, 0, 0.2, 1) - hover 效果：轻微放大（scale-105） ## 禁用样式 - 不使用紫色渐变背景 - 正文不使用 Inter 以外的字体 - 不使用大于 16px 的圆角 - 不使用纯黑（#000000），改用 #1F2937

根据 easy-vibe 课程对 SKILL.md 文件结构 的讲解，该文件由两部分组成：YAML frontmatter 元数据（name会被注册为/my-brand命令，description用于 AI 自动匹配触发）与正文设计规范。你可以按需补充scripts/、templates/、references/、examples/子目录。该 Skill 放在项目目录.claude/skills/下即为项目级 Skills，可由团队通过 Git 共享；放在~/.claude/skills/下则为全局 Skills，适用于个人所有项目。

6.2 使用自己的 Skill

创建完成后，只需在提示词中说：

使用 my-brand skill，帮我创建一个用户设置页面

AI 就会自动应用你定义的颜色、字体、间距体系与所有设计约束。

7. 总结

让 AI 生成漂亮界面有两条路：

Vibe Coding 工作流建议：

1. 探索阶段：尝试不同的风格提示词，找到自己喜欢的审美方向
2. 确定风格后：安装对应的 Skill（UI/UX Pro Max 或 frontend-design）
3. 品牌项目：创建自己的 Skill，让整个项目保持视觉统一

练习

任选以下场景，用本课方法从零完成：

1. 用风格提示词重做之前的一个项目界面（选一个你喜欢的风格）
2. 安装 UI/UX Pro Max，用它的某个风格生成一个新页面
3. 创建自己的设计系统 Skill，定义你的品牌色和字体

附录：风格速查表

附录：Skills 安装速查

# UI/UX Pro Max npm install -g uipro-cli uipro init --ai claude # Anthropic frontend-design npx skills add anthropics/skills/frontend-design # Anthropic brand-guidelines npx skills add anthropics/skills/brand-guidelines # 在 Claude Code 中查看已安装的 Skills /help

附录：推荐配色方案

附录：风格提示词速查表 {#style-prompts}

让前端网页更美的提示词：

风格分类

本课位于 easy-vibe Stage 2 前端模块，完整课程脉络可参考 Stage 2 目录；Skills 机制的系统讲解见 Claude Code Skills 完整指南。

【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding，项目制学习项目地址: https://gitcode.com/datawhalechina/easy-vibe