教程文档人工智能Vibe Coding【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址https://gitcode.com/GitHub_Trending/ea/easy-vibe点击查看免费下载导读在 easy-vibe 课程的 Stage 2初中级开发前端模块中你已经学会用 AI IDE 把设计稿变成代码、用组件库快速搭建界面但很快会发现一个尴尬问题同样的需求AI 生成的页面总是差一点意思——字体是千篇一律的 Inter配色是随处可见的紫色渐变布局是对称得让人打哈欠的卡片网格整页散发着浓烈的AI 味。本文对应 llm-skills-beautiful 课程系统讲解让 AI 生成美观独特界面的两条实战路径精心设计的提示词模板用自然语言描述美学方向与前端 Skills 插件让 AI 自动加载专业设计规范。读完本文你将掌握描述设计风格的 5 大维度、可直接复制的风格模板、3 个主流美化 Skills 的安装与使用以及从零创建自己品牌设计系统 Skill 的完整方法。1. 为什么 AI 默认生成的界面很普通AI 的训练数据包含海量前端代码而其中绝大多数都采用了安全的选择维度AI 的默认选择问题字体Inter、Roboto、Arial太常见没有个性颜色紫色渐变、蓝色主色科技圈过度使用视觉疲劳布局对称网格、卡片堆叠预测性强缺乏惊喜动画淡入淡出、简单的 hover不够精致缺乏层次背景纯色、简单渐变单调缺少质感这些选择单独看都不错但当所有 AI 生成的页面都使用它们时就变成了AI 味。关键洞察AI 不是不会设计而是默认回到统计平均。你需要明确告诉它偏离平均值的方向。这就像去理发店只说帮我剪个头发理发师会给出一个安全但平庸的结果但如果你说我要日系慵懒卷刘海要八字型长度到锁骨层次感明显你就能得到真正符合期待的造型。AI 同样需要你描述出清晰的审美方向才能生成美观独特的界面。在 easy-vibe 课程体系里这一课与 UI 设计基础课 一脉相承前者解决如何看懂、拆解一个优秀页面本课则解决如何把看懂的风格传递给 AI。对照仓库中的示例提示词也能看到差距——trae-block-game 的 prompt.txt 只有一句话帮我做一个像这样的方块小游戏而本文后续给出的结构化提示词会精确到字体字重、色号、圆角和阴影参数。2. 方法一用提示词描述设计风格2.1 设计风格的 5 个维度要生成美观的界面你需要从 5 个维度描述你想要的效果维度描述要点示例关键词字体标题用粗体展示字体正文用易读正文字体Space Grotesk、Playfair Display、JetBrains Mono颜色主色 点缀色避免均匀分布#4F46E5 主色 #F59E0B 点缀布局不对称、重叠、打破网格Bento Grid、不对称分区、浮动元素动画精心编排的页面加载、微交互staggered reveals、滚动触发细节背景、阴影、边框、纹理噪点、几何图案、渐变网格这 5 个维度本质上把风格从玄学变成了可量化的参数正如 UI 设计基础课 反复强调的好的设计可以被量化成数字——色值、字号、间距、圆角、阴影。2.2 眼见为实普通提示词 vs 美化提示词以 AI 写作助手落地页为例先看普通提示词请帮我做一个 AI 写作助手的落地页包含导航栏、首屏、功能展示、定价、页脚再看按 5 维度结构化的美化提示词请帮我做一个 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 生成一个风格鲜明、令人印象深刻的页面。这两类提示词的差异恰好对应 easy-vibe 仓库中 示例提示词照着这张图帮我做一个网页与本文结构化提示词的差距前者依赖 AI 的默认审美后者把审美决策权交还给你。2.3 前端美化 Skills 资源库不要从零开始写提示词这里收集了与前端美化直接相关的 AI Skills仓库名内容Star链接ui-ux-pro-max-skill57 种风格 95 种配色 56 种字体10kGitHubantigravity-awesome-skills避免通用 AI 审美套路-GitHubsuperdesigndev/superdesignAI 原生 UI 开发工具4.7kGitHubanthropics/skills/frontend-designAnthropic 官方前端设计 Skill-GitHub 更多风格提示词请参考文末附录设计风格提示词速查。2.4 三款可直接复用的风格模板模板 1极简主义**美学风格极简主义** **字体** - 标题PP Neue Montreal字重 500-700 - 正文Inter字重 400 **颜色** - 主色#FFFFFF白色 - 文字#1A1A1A近黑 - 强调#3B82F6蓝色少量使用 **布局** - 大量留白padding 最小 64px - 单栏或双栏布局居中对齐 - 元素之间用留白而非分割线 **动画** - 缓慢的淡入效果duration 600ms - hover 时颜色渐变过渡 **细节** - 圆角8px - 阴影subtle0 4px 12px rgba(0,0,0,0.08) - 无背景装饰模板 2玻璃拟态Glassmorphism**美学风格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) - 微妙的渐变光晕效果模板 3Bento 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)三款模板分别覆盖了高端克制科技通透信息陈列三类常见场景可直接复制到你的 AI IDECursor、Trae、Claude Code 等中使用。3. 方法二用 Skills 插件自动加载设计规范每次手动写风格提示词很麻烦。Skills是一种可复用的设计规范包安装后 AI 会自动应用这些规范属于 easy-vibe 课程体系中的核心 Agent 能力。仓库的 Skills 完整教程 对此有深入讲解Skills 本质是存储在文件系统中的能力包由SKILL.md定义文件必选加scripts/、templates/、references/等可选目录组成。当 Claude Code 启动时它会扫描 Skills 目录、解析每个SKILL.md的 YAML frontmatter并把技能内容加入其知识库依据 description 自动匹配触发。3.1 三个让界面变漂亮的 SkillsSkills特点安装命令UI/UX Pro Max67 种风格、96 种配色、57 种字体组合npm install -g uipro-cli uipro init --ai claudefrontend-designAnthropic 官方避免 AI 审美套路npx skills add anthropics/skills/frontend-designSuperDesignIDE 插件生成多个设计变体VS Code 扩展市场搜索 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 字体❌ 紫色渐变背景❌ 对称网格布局❌ 过淡的阴影而是倾向于✅ 独特的字体组合✅ 大胆的主色 锐利的点缀色✅ 不对称、重叠的布局✅ 有质感的背景噪点、几何图案关于 Skills 与 MCP 的区别仓库的 Skills 教程 给出了直观类比如果把 AI 比作一个员工MCP 是给它的工具扳手、电脑、访问权限Skills 则是给它的操作手册如何做代码审查、如何提交代码。设计类 Skills 解决的问题正是如何产出好看的界面这一流程与方法论问题。4. 实战一用美化提示词重新设计落地页让我们把前面学到的知识应用到一个宠物领养平台的落地页上。4.1 普通版本先用普通提示词看看 AI 给什么请帮我做一个宠物领养平台的落地页包含 - 导航栏Logo、链接、注册按钮 - 首屏标题、副标题、CTA 按钮、宠物图片 - 宠物展示三张宠物卡片 - 关于我们 - 页脚生成的页面……能用但很普通。4.2 美化版本现在加上完整的风格描述请帮我做一个宠物领养平台的落地页要求 **美学风格温暖柔和 手绘感** **字体** - 标题Nunito圆体字重 700-800 - 正文Nunito字重 400-600 **颜色** - 主色#FFB347暖橙色 - 次色#FFCCB3浅橙色 - 背景#FFF8F0米白色 - 文字#5D4037棕色 **布局** - 圆润的卡片border-radius: 24px - 卡片略微倾斜旋转不同角度 - 元素浮动、重叠效果 **动画** - 页面加载时元素从两侧滑入 - 宠物卡片 hover 时像宠物摇头rotate 动画 - 按钮 hover 时弹跳效果 **细节** - 所有圆角用 16-24px - 阴影温暖柔和0 8px 24px rgba(255,179,71,0.3) - 背景添加爪印图案装饰 - 图片用不规则裁切clip-path - 手绘风格的图标outline 风格生成的页面会是一个温暖、可爱、让人想领养宠物的界面。对比普通版本可以看出结构只决定了页面有什么风格描述才决定了页面给人的感觉。这与 easy-vibe 的 现代落地页工程作业 中价值表达 视觉质量双线并行的要求是一致的。5. 实战二用 Skills 快速生成仪表盘Skills 特别适合需要大量页面的后台系统——一次安装整套后台页面的设计语言就统一了。5.1 使用 UI/UX Pro Max使用 UI/UX Pro Max 的 Dashboard Dark 风格 帮我做一个 SaaS 产品管理后台的仪表盘页面包含 **顶部** 四个统计卡片用户数、活跃用户、收入、API 调用 **中间** - 左边用户增长折线图最近 7 天 - 右边订阅计划分布饼图 **底部** 最近活动列表时间、用户、操作AI 会自动应用深色仪表盘的设计规范深灰背景#1A1A2E高对比度卡片#16213E鲜艳的数据颜色蓝色、绿色、橙色玻璃拟态效果的悬浮卡片5.2 使用 frontend-design Skill使用 frontend-design skill 帮我做一个个人博客的主页风格要独特、有个性AI 会选择一个非主流的美学方向比如复古未来主义或杂志风格然后用独特的字体、配色、布局来实现彻底跳出AI 味模板。这类场景在 easy-vibe 的 Stage 2 课程索引 中占据了重要位置——从页面和组件到完整 SaaS 后台Skills 正是把前端页面从能用提升到耐看的关键杠杆。6. 实战三创建自己的设计系统 Skill如果你有固定的品牌风格可以创建自己的 Skill让所有 AI 生成的页面都符合你的品牌。这也是仓库 Skills 教程 中项目级 Skills放在项目目录.claude/skills/下、可随 Git 版本控制、可团队共享的实际应用。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用 #1F29376.2 使用自己的 Skill创建后你只需要在提示词中说使用 my-brand skill帮我做一个用户设置页面AI 就会自动应用你定义的所有设计规范。注意SKILL.md的 YAML frontmatter 中name与description是必填字段description写得越具体包含使用场景与触发关键词AI 越容易在合适时机自动匹配并调用该 Skill。7. 两种方法的对比与 Vibe Coding 工作流让 AI 生成漂亮界面有两种方法方法优点缺点适用场景提示词描述灵活、每次可调整需要重复写一次性页面、实验不同风格Skills 插件一次安装、持续生效需要安装配置有固定风格要求的项目Vibe Coding 工作流建议探索阶段用不同的风格提示词实验找到你喜欢的美学方向确定风格后安装对应的 SkillUI/UX Pro Max 或 frontend-design品牌项目创建自己的 Skill统一整个项目的设计语言。练习选择以下任一场景用本节课的方法从零完成用风格提示词为你之前做的一个项目重新设计界面选一种你喜欢的风格安装 UI/UX Pro Max用它的某个风格生成一个新页面创建你自己的设计系统 Skill定义你的品牌颜色和字体。附录设计风格速查表风格关键词适用场景示例产品极简主义留白、单色、简洁高端产品、个人作品集Apple 官网玻璃拟态毛玻璃、渐变、模糊科技产品、SaaS 落地页macOS Big Sur新野兽派粗边框、硬阴影、纯色潮流品牌、艺术类网站BrassiusBento Grid网格、拼贴、卡片信息展示、仪表盘Apple 宣传页复古未来霓虹、渐变、合成器波游戏类、音乐类STRANGER THINGS手绘风格不规则、圆润、插画教育类、儿童产品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品牌规范类 Skill npx skills add anthropics/skills/brand-guidelines # 查看 Claude Code 中已安装的 Skills /help # 或使用命令行 npx skills list附录配色方案推荐配色方案主色点缀色背景风格日落#F97316#FBBF24#FFF7ED温暖、活力海洋#0EA5E9#06B6D4#F0F9FF清新、专业森林#10B981#34D399#ECFDF5自然、健康浆果#8B5CF6#EC4899#FAF5FF浪漫、创意咖啡#78350F#D97706#FFFBEB温暖、复古单石#6B7280#9CA3AF#F9FAFB专业、中性附录设计风格提示词速查让前端页面更好看可以尝试的提示词片段英文关键词更容易被 AI 理解风格关键词英文核心视觉特征提示词示例波普艺术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互动 3D 场景、空间感极强Immersive 3D website, interactive product model in space通过本文的提示词模板与 Skills 插件你可以彻底告别AI 味页面先用 5 大维度描述风格完成探索再用 Skills 固化风格最后用自建设计系统 Skill 统一品牌。这套方法论贯穿 easy-vibe 的 Stage 2 前端课程 与 Skills 进阶教程是你从能生成页面走向能生成好页面的关键一步。赞分享教程文档人工智能Vibe Coding【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址https://gitcode.com/GitHub_Trending/ea/easy-vibe点击查看免费下载相关推荐easy-vibe 实战用提示词与 Skills 让 AI 生成的界面告别AI 味easy vibe 实战用提示词与 Skills 让 AI 生成的界面告别AI 味 在 easy vibe 的 Stage 2 前端课程中我们已经学会了教程文档人工智能Vibe Coding用 LLM 和 Skills 让界面变好看风格提示词与设计规范插件实战指南easy-vibe 前端美化篇用 LLM 和 Skills 让界面变好看风格提示词与设计规范插件实战指南easy vibe 前端美化篇 本文基于开源仓库 Datawhale/easy教程文档ok-ww鸣潮后台自动刷取教程3步跑通一键日常免费不改动游戏文件ok ww鸣潮后台自动刷取教程3步跑通一键日常免费不改动游戏文件 ok ww是一款免费开源的鸣潮自动化工具基于图像识别通过Windows接口模拟用户操作GUI 自动化计算机视觉RPA人工智能上一篇Boring.Notch让MacBook凹口变身终极动态控制中心的革命性应用下一篇Bash Kernel for Jupyter 使用教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 easy-vibe 前端美化实战：用提示词与 Skills 让 AI 生成漂亮界面
教程文档人工智能Vibe Coding【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址https://gitcode.com/GitHub_Trending/ea/easy-vibe点击查看免费下载导读在 easy-vibe 课程的 Stage 2初中级开发前端模块中你已经学会用 AI IDE 把设计稿变成代码、用组件库快速搭建界面但很快会发现一个尴尬问题同样的需求AI 生成的页面总是差一点意思——字体是千篇一律的 Inter配色是随处可见的紫色渐变布局是对称得让人打哈欠的卡片网格整页散发着浓烈的AI 味。本文对应 llm-skills-beautiful 课程系统讲解让 AI 生成美观独特界面的两条实战路径精心设计的提示词模板用自然语言描述美学方向与前端 Skills 插件让 AI 自动加载专业设计规范。读完本文你将掌握描述设计风格的 5 大维度、可直接复制的风格模板、3 个主流美化 Skills 的安装与使用以及从零创建自己品牌设计系统 Skill 的完整方法。1. 为什么 AI 默认生成的界面很普通AI 的训练数据包含海量前端代码而其中绝大多数都采用了安全的选择维度AI 的默认选择问题字体Inter、Roboto、Arial太常见没有个性颜色紫色渐变、蓝色主色科技圈过度使用视觉疲劳布局对称网格、卡片堆叠预测性强缺乏惊喜动画淡入淡出、简单的 hover不够精致缺乏层次背景纯色、简单渐变单调缺少质感这些选择单独看都不错但当所有 AI 生成的页面都使用它们时就变成了AI 味。关键洞察AI 不是不会设计而是默认回到统计平均。你需要明确告诉它偏离平均值的方向。这就像去理发店只说帮我剪个头发理发师会给出一个安全但平庸的结果但如果你说我要日系慵懒卷刘海要八字型长度到锁骨层次感明显你就能得到真正符合期待的造型。AI 同样需要你描述出清晰的审美方向才能生成美观独特的界面。在 easy-vibe 课程体系里这一课与 UI 设计基础课 一脉相承前者解决如何看懂、拆解一个优秀页面本课则解决如何把看懂的风格传递给 AI。对照仓库中的示例提示词也能看到差距——trae-block-game 的 prompt.txt 只有一句话帮我做一个像这样的方块小游戏而本文后续给出的结构化提示词会精确到字体字重、色号、圆角和阴影参数。2. 方法一用提示词描述设计风格2.1 设计风格的 5 个维度要生成美观的界面你需要从 5 个维度描述你想要的效果维度描述要点示例关键词字体标题用粗体展示字体正文用易读正文字体Space Grotesk、Playfair Display、JetBrains Mono颜色主色 点缀色避免均匀分布#4F46E5 主色 #F59E0B 点缀布局不对称、重叠、打破网格Bento Grid、不对称分区、浮动元素动画精心编排的页面加载、微交互staggered reveals、滚动触发细节背景、阴影、边框、纹理噪点、几何图案、渐变网格这 5 个维度本质上把风格从玄学变成了可量化的参数正如 UI 设计基础课 反复强调的好的设计可以被量化成数字——色值、字号、间距、圆角、阴影。2.2 眼见为实普通提示词 vs 美化提示词以 AI 写作助手落地页为例先看普通提示词请帮我做一个 AI 写作助手的落地页包含导航栏、首屏、功能展示、定价、页脚再看按 5 维度结构化的美化提示词请帮我做一个 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 生成一个风格鲜明、令人印象深刻的页面。这两类提示词的差异恰好对应 easy-vibe 仓库中 示例提示词照着这张图帮我做一个网页与本文结构化提示词的差距前者依赖 AI 的默认审美后者把审美决策权交还给你。2.3 前端美化 Skills 资源库不要从零开始写提示词这里收集了与前端美化直接相关的 AI Skills仓库名内容Star链接ui-ux-pro-max-skill57 种风格 95 种配色 56 种字体10kGitHubantigravity-awesome-skills避免通用 AI 审美套路-GitHubsuperdesigndev/superdesignAI 原生 UI 开发工具4.7kGitHubanthropics/skills/frontend-designAnthropic 官方前端设计 Skill-GitHub 更多风格提示词请参考文末附录设计风格提示词速查。2.4 三款可直接复用的风格模板模板 1极简主义**美学风格极简主义** **字体** - 标题PP Neue Montreal字重 500-700 - 正文Inter字重 400 **颜色** - 主色#FFFFFF白色 - 文字#1A1A1A近黑 - 强调#3B82F6蓝色少量使用 **布局** - 大量留白padding 最小 64px - 单栏或双栏布局居中对齐 - 元素之间用留白而非分割线 **动画** - 缓慢的淡入效果duration 600ms - hover 时颜色渐变过渡 **细节** - 圆角8px - 阴影subtle0 4px 12px rgba(0,0,0,0.08) - 无背景装饰模板 2玻璃拟态Glassmorphism**美学风格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) - 微妙的渐变光晕效果模板 3Bento 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)三款模板分别覆盖了高端克制科技通透信息陈列三类常见场景可直接复制到你的 AI IDECursor、Trae、Claude Code 等中使用。3. 方法二用 Skills 插件自动加载设计规范每次手动写风格提示词很麻烦。Skills是一种可复用的设计规范包安装后 AI 会自动应用这些规范属于 easy-vibe 课程体系中的核心 Agent 能力。仓库的 Skills 完整教程 对此有深入讲解Skills 本质是存储在文件系统中的能力包由SKILL.md定义文件必选加scripts/、templates/、references/等可选目录组成。当 Claude Code 启动时它会扫描 Skills 目录、解析每个SKILL.md的 YAML frontmatter并把技能内容加入其知识库依据 description 自动匹配触发。3.1 三个让界面变漂亮的 SkillsSkills特点安装命令UI/UX Pro Max67 种风格、96 种配色、57 种字体组合npm install -g uipro-cli uipro init --ai claudefrontend-designAnthropic 官方避免 AI 审美套路npx skills add anthropics/skills/frontend-designSuperDesignIDE 插件生成多个设计变体VS Code 扩展市场搜索 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 字体❌ 紫色渐变背景❌ 对称网格布局❌ 过淡的阴影而是倾向于✅ 独特的字体组合✅ 大胆的主色 锐利的点缀色✅ 不对称、重叠的布局✅ 有质感的背景噪点、几何图案关于 Skills 与 MCP 的区别仓库的 Skills 教程 给出了直观类比如果把 AI 比作一个员工MCP 是给它的工具扳手、电脑、访问权限Skills 则是给它的操作手册如何做代码审查、如何提交代码。设计类 Skills 解决的问题正是如何产出好看的界面这一流程与方法论问题。4. 实战一用美化提示词重新设计落地页让我们把前面学到的知识应用到一个宠物领养平台的落地页上。4.1 普通版本先用普通提示词看看 AI 给什么请帮我做一个宠物领养平台的落地页包含 - 导航栏Logo、链接、注册按钮 - 首屏标题、副标题、CTA 按钮、宠物图片 - 宠物展示三张宠物卡片 - 关于我们 - 页脚生成的页面……能用但很普通。4.2 美化版本现在加上完整的风格描述请帮我做一个宠物领养平台的落地页要求 **美学风格温暖柔和 手绘感** **字体** - 标题Nunito圆体字重 700-800 - 正文Nunito字重 400-600 **颜色** - 主色#FFB347暖橙色 - 次色#FFCCB3浅橙色 - 背景#FFF8F0米白色 - 文字#5D4037棕色 **布局** - 圆润的卡片border-radius: 24px - 卡片略微倾斜旋转不同角度 - 元素浮动、重叠效果 **动画** - 页面加载时元素从两侧滑入 - 宠物卡片 hover 时像宠物摇头rotate 动画 - 按钮 hover 时弹跳效果 **细节** - 所有圆角用 16-24px - 阴影温暖柔和0 8px 24px rgba(255,179,71,0.3) - 背景添加爪印图案装饰 - 图片用不规则裁切clip-path - 手绘风格的图标outline 风格生成的页面会是一个温暖、可爱、让人想领养宠物的界面。对比普通版本可以看出结构只决定了页面有什么风格描述才决定了页面给人的感觉。这与 easy-vibe 的 现代落地页工程作业 中价值表达 视觉质量双线并行的要求是一致的。5. 实战二用 Skills 快速生成仪表盘Skills 特别适合需要大量页面的后台系统——一次安装整套后台页面的设计语言就统一了。5.1 使用 UI/UX Pro Max使用 UI/UX Pro Max 的 Dashboard Dark 风格 帮我做一个 SaaS 产品管理后台的仪表盘页面包含 **顶部** 四个统计卡片用户数、活跃用户、收入、API 调用 **中间** - 左边用户增长折线图最近 7 天 - 右边订阅计划分布饼图 **底部** 最近活动列表时间、用户、操作AI 会自动应用深色仪表盘的设计规范深灰背景#1A1A2E高对比度卡片#16213E鲜艳的数据颜色蓝色、绿色、橙色玻璃拟态效果的悬浮卡片5.2 使用 frontend-design Skill使用 frontend-design skill 帮我做一个个人博客的主页风格要独特、有个性AI 会选择一个非主流的美学方向比如复古未来主义或杂志风格然后用独特的字体、配色、布局来实现彻底跳出AI 味模板。这类场景在 easy-vibe 的 Stage 2 课程索引 中占据了重要位置——从页面和组件到完整 SaaS 后台Skills 正是把前端页面从能用提升到耐看的关键杠杆。6. 实战三创建自己的设计系统 Skill如果你有固定的品牌风格可以创建自己的 Skill让所有 AI 生成的页面都符合你的品牌。这也是仓库 Skills 教程 中项目级 Skills放在项目目录.claude/skills/下、可随 Git 版本控制、可团队共享的实际应用。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用 #1F29376.2 使用自己的 Skill创建后你只需要在提示词中说使用 my-brand skill帮我做一个用户设置页面AI 就会自动应用你定义的所有设计规范。注意SKILL.md的 YAML frontmatter 中name与description是必填字段description写得越具体包含使用场景与触发关键词AI 越容易在合适时机自动匹配并调用该 Skill。7. 两种方法的对比与 Vibe Coding 工作流让 AI 生成漂亮界面有两种方法方法优点缺点适用场景提示词描述灵活、每次可调整需要重复写一次性页面、实验不同风格Skills 插件一次安装、持续生效需要安装配置有固定风格要求的项目Vibe Coding 工作流建议探索阶段用不同的风格提示词实验找到你喜欢的美学方向确定风格后安装对应的 SkillUI/UX Pro Max 或 frontend-design品牌项目创建自己的 Skill统一整个项目的设计语言。练习选择以下任一场景用本节课的方法从零完成用风格提示词为你之前做的一个项目重新设计界面选一种你喜欢的风格安装 UI/UX Pro Max用它的某个风格生成一个新页面创建你自己的设计系统 Skill定义你的品牌颜色和字体。附录设计风格速查表风格关键词适用场景示例产品极简主义留白、单色、简洁高端产品、个人作品集Apple 官网玻璃拟态毛玻璃、渐变、模糊科技产品、SaaS 落地页macOS Big Sur新野兽派粗边框、硬阴影、纯色潮流品牌、艺术类网站BrassiusBento Grid网格、拼贴、卡片信息展示、仪表盘Apple 宣传页复古未来霓虹、渐变、合成器波游戏类、音乐类STRANGER THINGS手绘风格不规则、圆润、插画教育类、儿童产品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品牌规范类 Skill npx skills add anthropics/skills/brand-guidelines # 查看 Claude Code 中已安装的 Skills /help # 或使用命令行 npx skills list附录配色方案推荐配色方案主色点缀色背景风格日落#F97316#FBBF24#FFF7ED温暖、活力海洋#0EA5E9#06B6D4#F0F9FF清新、专业森林#10B981#34D399#ECFDF5自然、健康浆果#8B5CF6#EC4899#FAF5FF浪漫、创意咖啡#78350F#D97706#FFFBEB温暖、复古单石#6B7280#9CA3AF#F9FAFB专业、中性附录设计风格提示词速查让前端页面更好看可以尝试的提示词片段英文关键词更容易被 AI 理解风格关键词英文核心视觉特征提示词示例波普艺术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互动 3D 场景、空间感极强Immersive 3D website, interactive product model in space通过本文的提示词模板与 Skills 插件你可以彻底告别AI 味页面先用 5 大维度描述风格完成探索再用 Skills 固化风格最后用自建设计系统 Skill 统一品牌。这套方法论贯穿 easy-vibe 的 Stage 2 前端课程 与 Skills 进阶教程是你从能生成页面走向能生成好页面的关键一步。赞分享教程文档人工智能Vibe Coding【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址https://gitcode.com/GitHub_Trending/ea/easy-vibe点击查看免费下载相关推荐easy-vibe 实战用提示词与 Skills 让 AI 生成的界面告别AI 味easy vibe 实战用提示词与 Skills 让 AI 生成的界面告别AI 味 在 easy vibe 的 Stage 2 前端课程中我们已经学会了教程文档人工智能Vibe Coding用 LLM 和 Skills 让界面变好看风格提示词与设计规范插件实战指南easy-vibe 前端美化篇用 LLM 和 Skills 让界面变好看风格提示词与设计规范插件实战指南easy vibe 前端美化篇 本文基于开源仓库 Datawhale/easy教程文档ok-ww鸣潮后台自动刷取教程3步跑通一键日常免费不改动游戏文件ok ww鸣潮后台自动刷取教程3步跑通一键日常免费不改动游戏文件 ok ww是一款免费开源的鸣潮自动化工具基于图像识别通过Windows接口模拟用户操作GUI 自动化计算机视觉RPA人工智能上一篇Boring.Notch让MacBook凹口变身终极动态控制中心的革命性应用下一篇Bash Kernel for Jupyter 使用教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考