用 LLM 与 Skills 让 AI 界面告别AI 味提示词模板与插件实战指南easy-vibe Stage 2【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址: https://gitcode.com/datawhalechina/easy-vibeAI 生成的前端页面总是一眼 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 的默认选择问题字体Inter、Roboto、Arial过于常见没有性格颜色紫色渐变、蓝色主色科技圈过度使用视觉疲劳布局对称网格、卡片堆叠可预测性太强缺乏惊喜动效淡入淡出、简单 hover不够精致缺少层次背景纯色、简单渐变单调缺乏质感这些选项单独看都不错但当每一张 AI 生成的页面都同时用上它们时就形成了AI 味。核心洞察AI 不是不会设计而是默认会回归统计平均。你的任务就是明确告诉它如何偏离这个平均。2. 方法一用提示词描述设计风格2.1 设计风格的 5 个描述维度要生成有视觉张力的界面需要从 5 个维度描述你想要的观感维度描述要点示例关键词字体标题用宽体展示字体正文用可读性强的字体Space Grotesk、Playfair Display、JetBrains Mono颜色主色 强调色避免均匀分布主色#4F46E5 强调色#F59E0B布局非对称、交错、打破网格Bento Grid、不对称分区、悬浮元素动效精心设计的页面加载与微交互staggered reveals错峰显现、随滚动触发细节背景、阴影、边框、纹理噪点、几何图案、渐变网格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 资源仓库内容Stars链接ui-ux-pro-max-skill57 种风格 95 套配色 56 组字体10kGitHub: nextlevelbuilder/ui-ux-pro-max-skillantigravity-awesome-skills帮助规避通用 AI 审美模板-GitHub: sickn33/antigravity-awesome-skillssuperdesigndev/superdesign面向 AI 的原生 UI 开发工具4.7kGitHub: superdesigndev/superdesignanthropics/skills/frontend-designAnthropic 官方前端设计 Skill-GitHub: anthropics/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 插件Skills核心亮点安装命令UI/UX Pro Max67 种风格、96 套配色、57 组字体组合npm install -g uipro-cli uipro init --ai claudefrontend-designAnthropic 官方专治AI 审美模板化npx skills add anthropics/skills/frontend-designSuperDesignIDE 插件形态一次生成多个设计变体在 VSCode 插件市场搜索SuperDesign3.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 遵循统一视觉语言 --- # 我的项目设计系统 ## 品牌色 - 主色#6366F1Indigo 500 - 次色#8B5CF6Violet 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 生成漂亮界面有两条路方法优点缺点适用场景提示词描述灵活每次可调整需要重复书写一次性页面、风格探索Skills 插件安装一次持续生效需要安装配置风格稳定的项目Vibe Coding 工作流建议探索阶段尝试不同的风格提示词找到自己喜欢的审美方向确定风格后安装对应的 SkillUI/UX Pro Max 或 frontend-design品牌项目创建自己的 Skill让整个项目保持视觉统一练习任选以下场景用本课方法从零完成用风格提示词重做之前的一个项目界面选一个你喜欢的风格安装 UI/UX Pro Max用它的某个风格生成一个新页面创建自己的设计系统 Skill定义你的品牌色和字体附录风格速查表风格关键词适用场景示例产品极简主义留白、单色、简洁高端产品、个人作品集Apple 官网玻璃拟态磨砂玻璃、模糊、渐变SaaS 落地页、科技工具macOS Big Sur新粗野主义粗边框、硬阴影、纯色填充创意品牌、艺术网站BrassiusBento Grid模块化卡片、拼贴布局看板、功能展示Apple 营销页复古未来主义霓虹、合成波、暗色对比游戏、音乐、娱乐《怪奇物语》美学手绘风不规则、柔和、插画感教育、儿童产品Duolingo杂志编辑风大字号、不对称、留白博客、内容站Medium 式排版暗黑奢华深色调、金色点缀、精致细节高端、奢侈品奢侈品牌官网附录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附录推荐配色方案配色主色强调色背景氛围落日#F97316#FBBF24#FFF7ED温暖、活力海洋#0EA5E9#06B6D4#F0F9FF清新、专业森林#10B981#34D399#ECFDF5自然、健康浆果#8B5CF6#EC4899#FAF5FF浪漫、创意咖啡#78350F#D97706#FFFBEB温暖、复古岩石#6B7280#9CA3AF#F9FAFB中性、专业附录风格提示词速查表 {#style-prompts}让前端网页更美的提示词风格分类风格英文关键词核心视觉特征示例提示词片段波普艺术Pop Art大胆撞色、黑色描边、网点纹理Pop art style website, bold colors and comic dots, vibrant极简主义Minimalism大量留白、极少装饰Minimalist web design, ample white space, geometric, serene抽象表现主义Abstract Expressionism充满张力的笔触、泼洒色彩Abstract expressionism background, dynamic paint splashes, emotional复古风格Retro / Vintage复古字体、做旧质感、复古配色Retro 80s website design, neon grid and synthwave color palette赛博朋克Cyberpunk暗底霓虹高对比、故障艺术Cyberpunk UI, neon lights on dark background, glitch effects新拟物Neumorphism柔和高光与阴影、凸起/凹陷表面Neumorphism design style, soft shadows, clean and modern生成艺术Generative Art算法生成的流动形态与图案Generative art background, flowing algorithmic patterns, digital酸性设计Acid Graphics金属质感、玻璃感、混乱字体Acid graphics web layout, glass morphism, chaotic typography沉浸式 3DImmersive 3D强空间感的场景与产品纵深Immersive 3D website, interactive product model in space本课位于 easy-vibe Stage 2 前端模块完整课程脉络可参考 Stage 2 目录Skills 机制的系统讲解见 Claude Code Skills 完整指南。【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址: https://gitcode.com/datawhalechina/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 用 LLM 与 Skills 让 AI 界面告别“AI 味“：提示词模板与插件实战指南（easy-vibe Stage 2）
用 LLM 与 Skills 让 AI 界面告别AI 味提示词模板与插件实战指南easy-vibe Stage 2【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址: https://gitcode.com/datawhalechina/easy-vibeAI 生成的前端页面总是一眼 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 的默认选择问题字体Inter、Roboto、Arial过于常见没有性格颜色紫色渐变、蓝色主色科技圈过度使用视觉疲劳布局对称网格、卡片堆叠可预测性太强缺乏惊喜动效淡入淡出、简单 hover不够精致缺少层次背景纯色、简单渐变单调缺乏质感这些选项单独看都不错但当每一张 AI 生成的页面都同时用上它们时就形成了AI 味。核心洞察AI 不是不会设计而是默认会回归统计平均。你的任务就是明确告诉它如何偏离这个平均。2. 方法一用提示词描述设计风格2.1 设计风格的 5 个描述维度要生成有视觉张力的界面需要从 5 个维度描述你想要的观感维度描述要点示例关键词字体标题用宽体展示字体正文用可读性强的字体Space Grotesk、Playfair Display、JetBrains Mono颜色主色 强调色避免均匀分布主色#4F46E5 强调色#F59E0B布局非对称、交错、打破网格Bento Grid、不对称分区、悬浮元素动效精心设计的页面加载与微交互staggered reveals错峰显现、随滚动触发细节背景、阴影、边框、纹理噪点、几何图案、渐变网格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 资源仓库内容Stars链接ui-ux-pro-max-skill57 种风格 95 套配色 56 组字体10kGitHub: nextlevelbuilder/ui-ux-pro-max-skillantigravity-awesome-skills帮助规避通用 AI 审美模板-GitHub: sickn33/antigravity-awesome-skillssuperdesigndev/superdesign面向 AI 的原生 UI 开发工具4.7kGitHub: superdesigndev/superdesignanthropics/skills/frontend-designAnthropic 官方前端设计 Skill-GitHub: anthropics/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 插件Skills核心亮点安装命令UI/UX Pro Max67 种风格、96 套配色、57 组字体组合npm install -g uipro-cli uipro init --ai claudefrontend-designAnthropic 官方专治AI 审美模板化npx skills add anthropics/skills/frontend-designSuperDesignIDE 插件形态一次生成多个设计变体在 VSCode 插件市场搜索SuperDesign3.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 遵循统一视觉语言 --- # 我的项目设计系统 ## 品牌色 - 主色#6366F1Indigo 500 - 次色#8B5CF6Violet 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 生成漂亮界面有两条路方法优点缺点适用场景提示词描述灵活每次可调整需要重复书写一次性页面、风格探索Skills 插件安装一次持续生效需要安装配置风格稳定的项目Vibe Coding 工作流建议探索阶段尝试不同的风格提示词找到自己喜欢的审美方向确定风格后安装对应的 SkillUI/UX Pro Max 或 frontend-design品牌项目创建自己的 Skill让整个项目保持视觉统一练习任选以下场景用本课方法从零完成用风格提示词重做之前的一个项目界面选一个你喜欢的风格安装 UI/UX Pro Max用它的某个风格生成一个新页面创建自己的设计系统 Skill定义你的品牌色和字体附录风格速查表风格关键词适用场景示例产品极简主义留白、单色、简洁高端产品、个人作品集Apple 官网玻璃拟态磨砂玻璃、模糊、渐变SaaS 落地页、科技工具macOS Big Sur新粗野主义粗边框、硬阴影、纯色填充创意品牌、艺术网站BrassiusBento Grid模块化卡片、拼贴布局看板、功能展示Apple 营销页复古未来主义霓虹、合成波、暗色对比游戏、音乐、娱乐《怪奇物语》美学手绘风不规则、柔和、插画感教育、儿童产品Duolingo杂志编辑风大字号、不对称、留白博客、内容站Medium 式排版暗黑奢华深色调、金色点缀、精致细节高端、奢侈品奢侈品牌官网附录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附录推荐配色方案配色主色强调色背景氛围落日#F97316#FBBF24#FFF7ED温暖、活力海洋#0EA5E9#06B6D4#F0F9FF清新、专业森林#10B981#34D399#ECFDF5自然、健康浆果#8B5CF6#EC4899#FAF5FF浪漫、创意咖啡#78350F#D97706#FFFBEB温暖、复古岩石#6B7280#9CA3AF#F9FAFB中性、专业附录风格提示词速查表 {#style-prompts}让前端网页更美的提示词风格分类风格英文关键词核心视觉特征示例提示词片段波普艺术Pop Art大胆撞色、黑色描边、网点纹理Pop art style website, bold colors and comic dots, vibrant极简主义Minimalism大量留白、极少装饰Minimalist web design, ample white space, geometric, serene抽象表现主义Abstract Expressionism充满张力的笔触、泼洒色彩Abstract expressionism background, dynamic paint splashes, emotional复古风格Retro / Vintage复古字体、做旧质感、复古配色Retro 80s website design, neon grid and synthwave color palette赛博朋克Cyberpunk暗底霓虹高对比、故障艺术Cyberpunk UI, neon lights on dark background, glitch effects新拟物Neumorphism柔和高光与阴影、凸起/凹陷表面Neumorphism design style, soft shadows, clean and modern生成艺术Generative Art算法生成的流动形态与图案Generative art background, flowing algorithmic patterns, digital酸性设计Acid Graphics金属质感、玻璃感、混乱字体Acid graphics web layout, glass morphism, chaotic typography沉浸式 3DImmersive 3D强空间感的场景与产品纵深Immersive 3D website, interactive product model in space本课位于 easy-vibe Stage 2 前端模块完整课程脉络可参考 Stage 2 目录Skills 机制的系统讲解见 Claude Code Skills 完整指南。【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址: https://gitcode.com/datawhalechina/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考