教程文档人工智能Vibe Coding【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址https://gitcode.com/GitHub_Trending/ea/easy-vibe点击查看免费下载这篇指南源自 Easy-Vibe 课程 Junior Developer 阶段 的前端课程第 3 讲「Make Interfaces Beautiful with LLMs and Skills」解决的是 AI 编程中最常见的一个痛点同样的需求AI 生成的页面总带着浓烈的AI 味——千篇一律的 Inter 字体、随处泛滥的紫色渐变、对称得令人打哈欠的卡片网格。读完本文你将掌握两套可落地的方案用五维度风格提示词精确描述你想要的审美方向以及用前端 Skills 插件让 AI 自动加载可复用的专业设计规范并通过三个实战场景落地页美化、仪表盘生成、自定义设计系统把它们应用到真实项目中。1. 为什么 AI 默认生成的界面很普通AI 在训练时接触了海量前端代码而其中绝大多数代码都在使用一批安全但缺乏个性的选择。Easy-Vibe 课程把这批默认选择归纳为五个维度维度AI 的默认选择问题字体Inter、Roboto、Arial太常见没有个性颜色紫色渐变、蓝色主色科技圈过度使用视觉疲劳布局对称网格、卡片堆叠预测性强缺乏惊喜动画淡入淡出、简单的 hover不够精致缺乏层次背景纯色、简单渐变单调缺少质感这些选择单独看都不算错但当所有 AI 生成的页面都同时使用它们时就成了AI 味。关键洞察AI 不是不会设计而是默认回到统计平均。你的任务是明确告诉它偏离平均值的方向。就像去理发店只说帮我剪个头发只会得到安全但平庸的结果而说我要日系慵懒卷、八字刘海、长度到锁骨、层次感明显才能得到真正想要的效果——AI 同样需要清晰的审美方向。这一判断在 Easy-Vibe 仓库里有直观的佐证在 examples/trae-linear-dashboard/ 目录下prompt.txt 只有一句话做一个像这样的数据看板但生成出的 index.html 却是一个完整的 Linear 风格深色仪表盘。因为 prompt 里隐含了像这样的视觉参照模型便偏离了统计平均输出了一套个性化的设计语言。这正是本课方法论在真实仓库中的一次落地。2. 方法一用提示词描述设计风格2.1 设计风格的 5 个维度要生成美观的界面需要从 5 个维度描述你想要的效果缺一不可维度描述要点示例关键词字体标题用有展示性的粗体字体正文用易读字体Space Grotesk、Playfair Display、JetBrains Mono颜色主色 点缀色避免均匀分布#4F46E5主色 #F59E0B点缀布局不对称、重叠、打破网格Bento Grid、不对称分区、浮动元素动画精心编排的页面加载、微交互staggered reveals、滚动触发动画细节背景、阴影、边框、纹理噪点、几何图案、渐变网格2.2 眼见为实普通提示词 vs 美化提示词用同一个落地页需求对比两组提示词差异一目了然。普通提示词Please build a landing page for an AI writing assistant. Include a navbar, hero section, feature section, pricing section, and footer.美化提示词Please build a landing page for an AI writing assistant with the following style requirements: **Aesthetic style: Neubrutalism** **Typography:** - Headings: Space Grotesk, weight 700-900 - Body: IBM Plex Sans, weight 400 **Colors:** - Primary: #000000 - Accent: #FF6B00 - Background: #FFFDF0 - Borders: 3px solid black **Layout:** - Asymmetrical composition - Bold black dividers between regions - Cards with hard shadows (box-shadow: 8px 8px 0px #000) - Strong contrast through generous whitespace **Motion:** - Elements pop in from below on page load - Buttons shift upward by 2px on hover **Details:** - All corners set to 0px - Buttons should feel strongly 3D - Add subtle grain texture to the background同样的需求第二组提示词给了 AI 足够的视觉方向产出的是风格鲜明、令人印象深刻的页面而不是一个能用但平庸的功能页。注意这里提示词的价值不只是描述好看而是把审美翻译成了可执行的 CSS 级指令——圆角数值、阴影偏移、边框粗细、动画位移都被显式指定模型无需猜测。2.3 前端美化 Skills 资源库不需要每次都从零编写风格提示词。Easy-Vibe 课程整理了与前端美化直接相关的 Skills 资源以下按课程原文收录Star 数据以课程发布时为准仓库名内容Starui-ux-pro-max-skill57 种风格 95 种配色 56 种字体搭配10kantigravity-awesome-skills帮助避免通用 AI 视觉套路-superdesigndev/superdesignAI 原生的 UI 开发工具4.7kanthropics/skills/frontend-designAnthropic 官方前端设计 Skill- 更多风格提示词请参考本文末尾的附录设计风格提示词速查。2.4 三款经过验证的风格模板以下是三款可以直接复制修改使用的模板覆盖了最常见的审美方向。模板 1极简主义Minimalism**Aesthetic style: Minimalism** **Typography:** - Headings: PP Neue Montreal, weight 500-700 - Body: Inter, weight 400 **Colors:** - Primary: #FFFFFF - Text: #1A1A1A - Accent: #3B82F6, used sparingly **Layout:** - Large amounts of whitespace (minimum 64px section padding) - One-column or two-column centered layout - Use spacing instead of divider lines **Motion:** - Slow fade-in transitions (duration 600ms) - Soft color transitions on hover **Details:** - Radius: 8px - Shadows: subtle (0 4px 12px rgba(0,0,0,0.08)) - No decorative background elements模板 2玻璃拟态Glassmorphism**Aesthetic style: Glassmorphism** **Typography:** - Headings: Outfit, weight 600-800 - Body: Plus Jakarta Sans, weight 400-500 **Colors:** - Background: gradient from #667eea to #764ba2 - Card background: rgba(255, 255, 255, 0.1) - Text: #FFFFFF **Layout:** - Floating card design - Slight overlap between cards **Motion:** - Cards appear in staggered sequence on page load - Cards scale to 1.05x on hover **Details:** - Radius: 20px - Blur: backdrop-blur-xl - Border: 1px rgba(255, 255, 255, 0.2) - Subtle glow effects模板 3Bento Grid便当盒网格**Aesthetic style: Bento Grid** **Typography:** - Headings: SF Pro Display, weight 700 - Body: SF Pro Text, weight 400 **Colors:** - Background: #F5F5F7 - Cards: #FFFFFF - Accent: #0071E3 **Layout:** - Grid-based composition with mixed card sizes - 16px gaps - 24px radius **Motion:** - Subtle hover lift - Press feedback on click **Details:** - Large cards for primary content - Smaller cards for secondary info - Use icons to replace some text - Clean shadows (0 4px 24px rgba(0,0,0,0.06))3. 方法二用 Skills 插件自动加载设计规范每次手动编写风格提示词很麻烦。Skills是一种可复用的设计规范包——安装一次之后 AI 在生成页面时就会自动加载并遵守这些规范。它与 Easy-Vibe 课程中另一条主线高度呼应在 现代组件库课程 里你是在 prompt 中点名某个组件库来获得一致性而 Skills 把这一思路推进一步把整套设计语言配色、字体、间距、圆角、动效都封装成 AI 自动执行的规则。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安装后只需在提示词中加一句话Use UI/UX Pro Maxs Glassmorphism style to build me a landing page for an AI writing assistant.AI 就会自动套用对应的字体、颜色与布局规范无需你再逐条描述。3.3 安装 Anthropic 官方 frontend-design Skill这是 Anthropic 官方出品的前端设计 Skill专门解决AI 审美套路问题# 在 Claude Code 中执行 npx skills add anthropics/skills/frontend-design安装后AI 会自动避免以下默认套路❌ Inter、Roboto、Arial 字体❌ 紫色渐变背景❌ 对称网格布局❌ 过淡、缺乏层次的阴影同时倾向于更有辨识度的选择✅ 独特的字体组合✅ 大胆的主色 锐利的点缀色✅ 不对称、重叠的布局✅ 有质感的背景噪点、几何图案4. 实战一用美化提示词重新设计落地页结合前两节的知识把普通落地页改造成有情感的落地页。以宠物领养平台为例。4.1 普通版本先看普通提示词的产出Please build a landing page for a pet adoption platform. Include: - a navbar (logo, links, sign-up button) - a hero section (headline, subheadline, CTA button, pet image) - a pet gallery (three pet cards) - an about-us section - a footer结果能用但结构千篇一律、缺乏情感张力。4.2 美化版本现在加上风格描述Please build a landing page for a pet adoption platform with the following design requirements: **Aesthetic style: warm, soft, with a hand-drawn feeling** **Typography:** - Headings: Nunito, weight 700-800 - Body: Nunito, weight 400-600 **Colors:** - Primary: #FFB347 - Secondary: #FFCCB3 - Background: #FFF8F0 - Text: #5D4037 **Layout:** - Rounded cards (border-radius: 24px) - Slightly tilted cards at different angles - Floating and overlapping elements **Motion:** - Elements slide in from both sides on page load - Pet cards slightly rotate on hover like an animal tilting its head - Buttons bounce on hover **Details:** - Use 16-24px radii throughout - Warm soft shadows (0 8px 24px rgba(255,179,71,0.3)) - Add paw-print decorations in the background - Use irregular image crops via clip-path - Use outline-style hand-drawn icons这版提示词把温暖柔和 手绘感这一抽象风格翻译成了字体、色值、圆角范围、阴影、动效、装饰元素等具体参数生成的页面会是一个温暖、可爱、让人愿意停留的界面。在 Easy-Vibe 课程的 UI 设计课程 中这一思路被系统化为拆解页面 → 记录参数 → 翻译成 AI 能理解的语言的完整流程并给出了同样的结构化描述范式结构、颜色、字体、间距、圆角、阴影逐项列出。本课与其互为补充前者教你如何从优秀页面中提取设计规格本课则教你如何把这些规格注入生成过程。5. 实战二用 Skills 快速生成仪表盘Skills 特别适合后台管理系统这类大量页面共享同一套设计语言的场景。5.1 使用 UI/UX Pro MaxUse UI/UX Pro Maxs Dashboard Dark style and build a dashboard page for a SaaS admin panel that includes: **Top:** Four stats cards (users, active users, revenue, API calls) **Middle:** - Left: 7-day user growth line chart - Right: subscription plan distribution pie chart **Bottom:** a recent activity list showing time, user, and actionAI 会自动应用深色仪表盘的设计规范深灰背景如#1A1A2E高对比度卡片如#16213E鲜艳的数据颜色蓝色、绿色、橙色带轻微玻璃拟态效果的悬浮卡片这正是 Easy-Vibe 仓库中 trae-linear-dashboard 示例 所展示的效果生成结果的 CSS 变量区 把整套设计语言收敛成了--accent: #5e6ad2、--radius: 6px等设计令牌字体栈 则优先使用系统字体并指定了 Inter 回退。你可以把它当作参考驱动 设计令牌固化的模板先让 AI 按某一风格生成首版再要求它把关键样式抽成 CSS 变量后续所有页面都能复用同一套语言。5.2 使用 frontend-design SkillUse the frontend-design skill and build a homepage for a personal blog. Make it distinctive and full of personality.AI 会自动选择一个非主流的美学方向比如复古未来主义或杂志编辑风并用独特的字体、配色、布局来实现——这正是该 Skill 的设计目标让输出跳出统计平均。6. 实战三创建自己的设计系统 Skill如果产品已有固定的品牌风格可以创建自己的 Skill让之后所有 AI 生成的页面都自动遵循它。这也是从每次写提示词走向一次配置、持续生效的关键一步。6.1 创建 Skill 文件在项目根目录创建.claude/skills/my-brand/SKILL.md--- name: my-brand description: My projects custom design system, ensuring every UI follows a consistent visual language --- # My Project Design System ## Brand Colors - Primary: #6366F1 (Indigo 500) - Secondary: #8B5CF6 (Violet 500) - Success: #10B981 - Warning: #F59E0B - Error: #EF4444 - Background: #F9FAFB - Card: #FFFFFF ## Typography - Headings: Plus Jakarta Sans - H1: 700, 48px - H2: 600, 36px - H3: 600, 24px - Body: Inter - Body: 400, 16px - Small: 400, 14px ## Spacing - Base unit: 4px - Component padding: 8px / 12px / 16px - Section spacing: 24px / 32px / 48px - Page margin: 64px ## Radius - Buttons: 8px - Cards: 12px - Inputs: 8px - Modals: 16px ## Shadows - Small: 0 1px 3px rgba(0,0,0,0.1) - Medium: 0 4px 12px rgba(0,0,0,0.1) - Large: 0 8px 24px rgba(0,0,0,0.12) ## Motion - Transition duration: 150ms / 300ms - Easing: cubic-bezier(0.4, 0, 0.2, 1) - Hover effect: slight scale-up (scale-105) ## Forbidden Styles - Do not use purple gradient backgrounds - Do not use fonts other than Inter for body text - Do not use radii larger than 16px - Do not use pure black (#000000); use #1F2937 instead这份文件的结构与 Easy-Vibe UI 设计课程 中提出的DESIGN.md color tokens typography rules spacing rhythm component styles usage conventions完全同构——它本质上是把设计系统写成了 AI 能逐条读取和执行的规范文件。注意其中禁止使用的样式Forbidden Styles一节尤其有价值明确告诉 AI不要做什么能有效压制回归统计平均的倾向。6.2 使用自己的 Skill创建完成后只需在提示词中说Use my-brand skill to build me a user settings page.AI 就会自动应用你定义的颜色、字体、间距系统及其他设计约束整个项目的视觉语言因此保持一致。7. 小结让 AI 生成漂亮界面有两条互补的路径方法优点缺点适用场景提示词描述灵活每次可调整需要重复编写一次性页面、探索不同风格Skills 插件一次安装、持续生效需要安装配置有固定风格要求的项目推荐的 Vibe Coding 工作流探索阶段用不同的风格提示词做实验找到你喜欢的美学方向确定风格后安装对应的 Skill如 UI/UX Pro Max 或frontend-design让风格可复用品牌项目创建自己的 Skillmy-brand让整个项目保持统一的视觉语言。这条工作流也是 Easy-Vibe 课程体系的有机一环此前你已经在 设计稿转代码 中学会把设计变成代码、在 现代组件库 中学会用组件库快速搭建界面本课补上的正是让界面好看且有辨识度这一层后续的 UI 设计课程 则进一步教你如何从优秀页面中反向提取设计规格并固化为DESIGN.md。练习建议任选其一完成用风格提示词为你之前做过的项目重新设计界面选一种你喜欢的风格安装 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强空间感的互动 3D 场景Immersive 3D website, interactive product model in space赞分享教程文档人工智能Vibe Coding【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址https://gitcode.com/GitHub_Trending/ea/easy-vibe点击查看免费下载相关推荐ok-ww鸣潮后台自动刷取教程3步跑通一键日常免费不改动游戏文件ok ww鸣潮后台自动刷取教程3步跑通一键日常免费不改动游戏文件 ok ww是一款免费开源的鸣潮自动化工具基于图像识别通过Windows接口模拟用户操作GUI 自动化计算机视觉RPA人工智能用 LLM 和 Skills 让界面变好看风格提示词与设计规范插件实战指南easy-vibe 前端美化篇用 LLM 和 Skills 让界面变好看风格提示词与设计规范插件实战指南easy vibe 前端美化篇 本文基于开源仓库 Datawhale/easy教程文档用 LLM 与 Skills 让 AI 界面告别AI 味提示词模板与插件实战指南easy-vibe Stage 2用 LLM 与 Skills 让 AI 界面告别AI 味提示词模板与插件实战指南easy vibe Stage 2 AI 生成的前端页面总是一眼 A教程文档上一篇ReactPy打印组件终极指南简单实现Python前端完美打印功能下一篇StackGAN-v2进阶应用自定义数据集训练与模型微调技巧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 用 LLM 与 Skills 让界面变好看：Easy-Vibe 中的提示词模板与插件实战指南
教程文档人工智能Vibe Coding【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址https://gitcode.com/GitHub_Trending/ea/easy-vibe点击查看免费下载这篇指南源自 Easy-Vibe 课程 Junior Developer 阶段 的前端课程第 3 讲「Make Interfaces Beautiful with LLMs and Skills」解决的是 AI 编程中最常见的一个痛点同样的需求AI 生成的页面总带着浓烈的AI 味——千篇一律的 Inter 字体、随处泛滥的紫色渐变、对称得令人打哈欠的卡片网格。读完本文你将掌握两套可落地的方案用五维度风格提示词精确描述你想要的审美方向以及用前端 Skills 插件让 AI 自动加载可复用的专业设计规范并通过三个实战场景落地页美化、仪表盘生成、自定义设计系统把它们应用到真实项目中。1. 为什么 AI 默认生成的界面很普通AI 在训练时接触了海量前端代码而其中绝大多数代码都在使用一批安全但缺乏个性的选择。Easy-Vibe 课程把这批默认选择归纳为五个维度维度AI 的默认选择问题字体Inter、Roboto、Arial太常见没有个性颜色紫色渐变、蓝色主色科技圈过度使用视觉疲劳布局对称网格、卡片堆叠预测性强缺乏惊喜动画淡入淡出、简单的 hover不够精致缺乏层次背景纯色、简单渐变单调缺少质感这些选择单独看都不算错但当所有 AI 生成的页面都同时使用它们时就成了AI 味。关键洞察AI 不是不会设计而是默认回到统计平均。你的任务是明确告诉它偏离平均值的方向。就像去理发店只说帮我剪个头发只会得到安全但平庸的结果而说我要日系慵懒卷、八字刘海、长度到锁骨、层次感明显才能得到真正想要的效果——AI 同样需要清晰的审美方向。这一判断在 Easy-Vibe 仓库里有直观的佐证在 examples/trae-linear-dashboard/ 目录下prompt.txt 只有一句话做一个像这样的数据看板但生成出的 index.html 却是一个完整的 Linear 风格深色仪表盘。因为 prompt 里隐含了像这样的视觉参照模型便偏离了统计平均输出了一套个性化的设计语言。这正是本课方法论在真实仓库中的一次落地。2. 方法一用提示词描述设计风格2.1 设计风格的 5 个维度要生成美观的界面需要从 5 个维度描述你想要的效果缺一不可维度描述要点示例关键词字体标题用有展示性的粗体字体正文用易读字体Space Grotesk、Playfair Display、JetBrains Mono颜色主色 点缀色避免均匀分布#4F46E5主色 #F59E0B点缀布局不对称、重叠、打破网格Bento Grid、不对称分区、浮动元素动画精心编排的页面加载、微交互staggered reveals、滚动触发动画细节背景、阴影、边框、纹理噪点、几何图案、渐变网格2.2 眼见为实普通提示词 vs 美化提示词用同一个落地页需求对比两组提示词差异一目了然。普通提示词Please build a landing page for an AI writing assistant. Include a navbar, hero section, feature section, pricing section, and footer.美化提示词Please build a landing page for an AI writing assistant with the following style requirements: **Aesthetic style: Neubrutalism** **Typography:** - Headings: Space Grotesk, weight 700-900 - Body: IBM Plex Sans, weight 400 **Colors:** - Primary: #000000 - Accent: #FF6B00 - Background: #FFFDF0 - Borders: 3px solid black **Layout:** - Asymmetrical composition - Bold black dividers between regions - Cards with hard shadows (box-shadow: 8px 8px 0px #000) - Strong contrast through generous whitespace **Motion:** - Elements pop in from below on page load - Buttons shift upward by 2px on hover **Details:** - All corners set to 0px - Buttons should feel strongly 3D - Add subtle grain texture to the background同样的需求第二组提示词给了 AI 足够的视觉方向产出的是风格鲜明、令人印象深刻的页面而不是一个能用但平庸的功能页。注意这里提示词的价值不只是描述好看而是把审美翻译成了可执行的 CSS 级指令——圆角数值、阴影偏移、边框粗细、动画位移都被显式指定模型无需猜测。2.3 前端美化 Skills 资源库不需要每次都从零编写风格提示词。Easy-Vibe 课程整理了与前端美化直接相关的 Skills 资源以下按课程原文收录Star 数据以课程发布时为准仓库名内容Starui-ux-pro-max-skill57 种风格 95 种配色 56 种字体搭配10kantigravity-awesome-skills帮助避免通用 AI 视觉套路-superdesigndev/superdesignAI 原生的 UI 开发工具4.7kanthropics/skills/frontend-designAnthropic 官方前端设计 Skill- 更多风格提示词请参考本文末尾的附录设计风格提示词速查。2.4 三款经过验证的风格模板以下是三款可以直接复制修改使用的模板覆盖了最常见的审美方向。模板 1极简主义Minimalism**Aesthetic style: Minimalism** **Typography:** - Headings: PP Neue Montreal, weight 500-700 - Body: Inter, weight 400 **Colors:** - Primary: #FFFFFF - Text: #1A1A1A - Accent: #3B82F6, used sparingly **Layout:** - Large amounts of whitespace (minimum 64px section padding) - One-column or two-column centered layout - Use spacing instead of divider lines **Motion:** - Slow fade-in transitions (duration 600ms) - Soft color transitions on hover **Details:** - Radius: 8px - Shadows: subtle (0 4px 12px rgba(0,0,0,0.08)) - No decorative background elements模板 2玻璃拟态Glassmorphism**Aesthetic style: Glassmorphism** **Typography:** - Headings: Outfit, weight 600-800 - Body: Plus Jakarta Sans, weight 400-500 **Colors:** - Background: gradient from #667eea to #764ba2 - Card background: rgba(255, 255, 255, 0.1) - Text: #FFFFFF **Layout:** - Floating card design - Slight overlap between cards **Motion:** - Cards appear in staggered sequence on page load - Cards scale to 1.05x on hover **Details:** - Radius: 20px - Blur: backdrop-blur-xl - Border: 1px rgba(255, 255, 255, 0.2) - Subtle glow effects模板 3Bento Grid便当盒网格**Aesthetic style: Bento Grid** **Typography:** - Headings: SF Pro Display, weight 700 - Body: SF Pro Text, weight 400 **Colors:** - Background: #F5F5F7 - Cards: #FFFFFF - Accent: #0071E3 **Layout:** - Grid-based composition with mixed card sizes - 16px gaps - 24px radius **Motion:** - Subtle hover lift - Press feedback on click **Details:** - Large cards for primary content - Smaller cards for secondary info - Use icons to replace some text - Clean shadows (0 4px 24px rgba(0,0,0,0.06))3. 方法二用 Skills 插件自动加载设计规范每次手动编写风格提示词很麻烦。Skills是一种可复用的设计规范包——安装一次之后 AI 在生成页面时就会自动加载并遵守这些规范。它与 Easy-Vibe 课程中另一条主线高度呼应在 现代组件库课程 里你是在 prompt 中点名某个组件库来获得一致性而 Skills 把这一思路推进一步把整套设计语言配色、字体、间距、圆角、动效都封装成 AI 自动执行的规则。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安装后只需在提示词中加一句话Use UI/UX Pro Maxs Glassmorphism style to build me a landing page for an AI writing assistant.AI 就会自动套用对应的字体、颜色与布局规范无需你再逐条描述。3.3 安装 Anthropic 官方 frontend-design Skill这是 Anthropic 官方出品的前端设计 Skill专门解决AI 审美套路问题# 在 Claude Code 中执行 npx skills add anthropics/skills/frontend-design安装后AI 会自动避免以下默认套路❌ Inter、Roboto、Arial 字体❌ 紫色渐变背景❌ 对称网格布局❌ 过淡、缺乏层次的阴影同时倾向于更有辨识度的选择✅ 独特的字体组合✅ 大胆的主色 锐利的点缀色✅ 不对称、重叠的布局✅ 有质感的背景噪点、几何图案4. 实战一用美化提示词重新设计落地页结合前两节的知识把普通落地页改造成有情感的落地页。以宠物领养平台为例。4.1 普通版本先看普通提示词的产出Please build a landing page for a pet adoption platform. Include: - a navbar (logo, links, sign-up button) - a hero section (headline, subheadline, CTA button, pet image) - a pet gallery (three pet cards) - an about-us section - a footer结果能用但结构千篇一律、缺乏情感张力。4.2 美化版本现在加上风格描述Please build a landing page for a pet adoption platform with the following design requirements: **Aesthetic style: warm, soft, with a hand-drawn feeling** **Typography:** - Headings: Nunito, weight 700-800 - Body: Nunito, weight 400-600 **Colors:** - Primary: #FFB347 - Secondary: #FFCCB3 - Background: #FFF8F0 - Text: #5D4037 **Layout:** - Rounded cards (border-radius: 24px) - Slightly tilted cards at different angles - Floating and overlapping elements **Motion:** - Elements slide in from both sides on page load - Pet cards slightly rotate on hover like an animal tilting its head - Buttons bounce on hover **Details:** - Use 16-24px radii throughout - Warm soft shadows (0 8px 24px rgba(255,179,71,0.3)) - Add paw-print decorations in the background - Use irregular image crops via clip-path - Use outline-style hand-drawn icons这版提示词把温暖柔和 手绘感这一抽象风格翻译成了字体、色值、圆角范围、阴影、动效、装饰元素等具体参数生成的页面会是一个温暖、可爱、让人愿意停留的界面。在 Easy-Vibe 课程的 UI 设计课程 中这一思路被系统化为拆解页面 → 记录参数 → 翻译成 AI 能理解的语言的完整流程并给出了同样的结构化描述范式结构、颜色、字体、间距、圆角、阴影逐项列出。本课与其互为补充前者教你如何从优秀页面中提取设计规格本课则教你如何把这些规格注入生成过程。5. 实战二用 Skills 快速生成仪表盘Skills 特别适合后台管理系统这类大量页面共享同一套设计语言的场景。5.1 使用 UI/UX Pro MaxUse UI/UX Pro Maxs Dashboard Dark style and build a dashboard page for a SaaS admin panel that includes: **Top:** Four stats cards (users, active users, revenue, API calls) **Middle:** - Left: 7-day user growth line chart - Right: subscription plan distribution pie chart **Bottom:** a recent activity list showing time, user, and actionAI 会自动应用深色仪表盘的设计规范深灰背景如#1A1A2E高对比度卡片如#16213E鲜艳的数据颜色蓝色、绿色、橙色带轻微玻璃拟态效果的悬浮卡片这正是 Easy-Vibe 仓库中 trae-linear-dashboard 示例 所展示的效果生成结果的 CSS 变量区 把整套设计语言收敛成了--accent: #5e6ad2、--radius: 6px等设计令牌字体栈 则优先使用系统字体并指定了 Inter 回退。你可以把它当作参考驱动 设计令牌固化的模板先让 AI 按某一风格生成首版再要求它把关键样式抽成 CSS 变量后续所有页面都能复用同一套语言。5.2 使用 frontend-design SkillUse the frontend-design skill and build a homepage for a personal blog. Make it distinctive and full of personality.AI 会自动选择一个非主流的美学方向比如复古未来主义或杂志编辑风并用独特的字体、配色、布局来实现——这正是该 Skill 的设计目标让输出跳出统计平均。6. 实战三创建自己的设计系统 Skill如果产品已有固定的品牌风格可以创建自己的 Skill让之后所有 AI 生成的页面都自动遵循它。这也是从每次写提示词走向一次配置、持续生效的关键一步。6.1 创建 Skill 文件在项目根目录创建.claude/skills/my-brand/SKILL.md--- name: my-brand description: My projects custom design system, ensuring every UI follows a consistent visual language --- # My Project Design System ## Brand Colors - Primary: #6366F1 (Indigo 500) - Secondary: #8B5CF6 (Violet 500) - Success: #10B981 - Warning: #F59E0B - Error: #EF4444 - Background: #F9FAFB - Card: #FFFFFF ## Typography - Headings: Plus Jakarta Sans - H1: 700, 48px - H2: 600, 36px - H3: 600, 24px - Body: Inter - Body: 400, 16px - Small: 400, 14px ## Spacing - Base unit: 4px - Component padding: 8px / 12px / 16px - Section spacing: 24px / 32px / 48px - Page margin: 64px ## Radius - Buttons: 8px - Cards: 12px - Inputs: 8px - Modals: 16px ## Shadows - Small: 0 1px 3px rgba(0,0,0,0.1) - Medium: 0 4px 12px rgba(0,0,0,0.1) - Large: 0 8px 24px rgba(0,0,0,0.12) ## Motion - Transition duration: 150ms / 300ms - Easing: cubic-bezier(0.4, 0, 0.2, 1) - Hover effect: slight scale-up (scale-105) ## Forbidden Styles - Do not use purple gradient backgrounds - Do not use fonts other than Inter for body text - Do not use radii larger than 16px - Do not use pure black (#000000); use #1F2937 instead这份文件的结构与 Easy-Vibe UI 设计课程 中提出的DESIGN.md color tokens typography rules spacing rhythm component styles usage conventions完全同构——它本质上是把设计系统写成了 AI 能逐条读取和执行的规范文件。注意其中禁止使用的样式Forbidden Styles一节尤其有价值明确告诉 AI不要做什么能有效压制回归统计平均的倾向。6.2 使用自己的 Skill创建完成后只需在提示词中说Use my-brand skill to build me a user settings page.AI 就会自动应用你定义的颜色、字体、间距系统及其他设计约束整个项目的视觉语言因此保持一致。7. 小结让 AI 生成漂亮界面有两条互补的路径方法优点缺点适用场景提示词描述灵活每次可调整需要重复编写一次性页面、探索不同风格Skills 插件一次安装、持续生效需要安装配置有固定风格要求的项目推荐的 Vibe Coding 工作流探索阶段用不同的风格提示词做实验找到你喜欢的美学方向确定风格后安装对应的 Skill如 UI/UX Pro Max 或frontend-design让风格可复用品牌项目创建自己的 Skillmy-brand让整个项目保持统一的视觉语言。这条工作流也是 Easy-Vibe 课程体系的有机一环此前你已经在 设计稿转代码 中学会把设计变成代码、在 现代组件库 中学会用组件库快速搭建界面本课补上的正是让界面好看且有辨识度这一层后续的 UI 设计课程 则进一步教你如何从优秀页面中反向提取设计规格并固化为DESIGN.md。练习建议任选其一完成用风格提示词为你之前做过的项目重新设计界面选一种你喜欢的风格安装 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强空间感的互动 3D 场景Immersive 3D website, interactive product model in space赞分享教程文档人工智能Vibe Coding【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址https://gitcode.com/GitHub_Trending/ea/easy-vibe点击查看免费下载相关推荐ok-ww鸣潮后台自动刷取教程3步跑通一键日常免费不改动游戏文件ok ww鸣潮后台自动刷取教程3步跑通一键日常免费不改动游戏文件 ok ww是一款免费开源的鸣潮自动化工具基于图像识别通过Windows接口模拟用户操作GUI 自动化计算机视觉RPA人工智能用 LLM 和 Skills 让界面变好看风格提示词与设计规范插件实战指南easy-vibe 前端美化篇用 LLM 和 Skills 让界面变好看风格提示词与设计规范插件实战指南easy vibe 前端美化篇 本文基于开源仓库 Datawhale/easy教程文档用 LLM 与 Skills 让 AI 界面告别AI 味提示词模板与插件实战指南easy-vibe Stage 2用 LLM 与 Skills 让 AI 界面告别AI 味提示词模板与插件实战指南easy vibe Stage 2 AI 生成的前端页面总是一眼 A教程文档上一篇ReactPy打印组件终极指南简单实现Python前端完美打印功能下一篇StackGAN-v2进阶应用自定义数据集训练与模型微调技巧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 RELATED READING
延伸阅读
更多一线实战笔记与深度复盘，助您持续精进
