Easy-Vibe开发篇阅读笔记（四）——前端开发之结合 Agent Skills 美化界面

码途漫谈2026-04-30 23:19

阅读原文：用 LLM 和 Skills 让界面变好看：提示词与插件实战

一、本章核心学习目标

  • 理解为什么 AI 默认生成的界面很普通，学会怎么打破 "AI 味"

  • 掌握从 5 个维度描述设计风格的方法，学会用提示词让 AI 生成美观界面

  • 学会用 Skills 插件自动加载设计规范，不用每次都写长提示词

  • 掌握实战技巧，用提示词 + 插件快速生成美观的落地页、仪表盘

  • 学会创建自己的品牌设计 Skill，统一整个项目的设计语言

二、为什么 AI 默认生成的界面 "很普通"？

AI 训练数据里，大部分代码都用了最 "安全" 的默认选择，所以生成的页面都千篇一律，充满了 "AI 味"：

维度 AI 的默认选择 问题
字体 Inter、Roboto、Arial 太常见，没有个性
颜色 紫色渐变、蓝色主色 过度使用，视觉疲劳
布局 对称网格、卡片堆叠 太 predictable，缺乏惊喜
动画 简单淡入淡出 不够精致，没有层次
背景 纯色、简单渐变 单调，缺少质感

💡 关键洞察：AI 不是不会设计，而是默认回到 "统计平均"。你需要明确告诉它，要偏离平均值的方向。

三、方法一：用提示词描述设计风格

最简单的方法，就是用自然语言，把你想要的风格告诉 AI，就像你去理发店，要讲清楚你要的发型，而不是只说 "剪个头发"。

2.1 设计风格的 5 个维度

要描述清楚风格，要从这 5 个维度来，不能只说 "要好看"：

维度 描述要点 示例
字体 标题和正文的字体搭配，字重 Space Grotesk 标题，IBM Plex Sans 正文
颜色 主色、点缀色、背景色，避免均匀分布 #000 主色，#FF6B00 强调，#FFFDF0 背景
布局 布局结构，是对称还是不对称 Bento Grid、不对称分区、浮动元素
动画 页面加载、交互的动效 staggered reveals、滚动触发动画
细节 背景纹理、阴影、边框这些小细节 噪点纹理、硬阴影、粗边框

2.2 三款常用风格模板

不用从零写提示词，直接用这三个经过验证的模板，改改就能用：

模板 1：极简主义
Plain 复制代码 
**美学风格：极简主义**

**字体：**
- 标题：PP Neue Montreal，字重 500-700
- 正文：Inter，字重 400

**颜色：**
- 主色：#FFFFFF（白色）
- 文字：#1A1A1A（近黑）
- 强调：#3B82F6（蓝色，少量使用）

**布局：**
- 大量留白（padding 最小 64px）
- 单栏/双栏居中布局
- 用留白代替分割线

**动画：**
- 缓慢淡入（600ms）
- hover 颜色渐变过渡

**细节：**
- 圆角：8px
- 阴影：subtle（0 4px 12px rgba(0,0,0,0.08)）
模板 2：玻璃拟态
Plain 复制代码 
**美学风格：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)
模板 3：Bento Grid（便当盒）
Plain 复制代码 
**美学风格：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)）

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

每次手动写长提示词太麻烦，Skills 是可复用的设计规范包，安装一次，AI 就会自动应用这些规范，不用每次都写。

3.1 三个常用的美化 Skills

Skills 特点 安装命令
UI/UX Pro Max 最全面，67 种风格、96 种配色、57 种字体 npm install \-g uipro\-cli \&\& uipro init \-\-ai claude
frontend-design Anthropic 官方，解决 AI 审美套路 npx skills add anthropics/skills/frontend\-design
SuperDesign IDE 插件，生成多个设计变体 VSCode 扩展市场搜索 "SuperDesign"

3.2 UI/UX Pro Max（最推荐）

这是目前最全面的设计规范 Skill，安装后，你只需要在提示词里加一句话：

Plain 复制代码 
使用 UI/UX Pro Max 的 Glassmorphism 风格，帮我做一个 AI 写作助手落地页

AI 就会自动应用对应的字体、颜色、布局规范，不用你自己写。

3.3 frontend-design Skill

这个是 Anthropic 官方的，专门解决 "AI 味" 的问题，安装后，AI 会自动避开那些烂大街的默认选择：

  • ❌ 不会再用 Inter、Roboto 字体

  • ❌ 不会再用紫色渐变背景

  • ❌ 不会再用对称网格

    而是给你独特的字体、大胆的配色、不对称的布局。

五、实战案例

4.1 实战 1：用提示词美化落地页

普通的提示词，生成的页面很普通：

Plain 复制代码 
请帮我做一个宠物领养平台的落地页，包含导航栏、首屏、宠物展示、关于我们、页脚

加上风格描述后，就会变成温暖可爱的界面：

Plain 复制代码 
请帮我做一个宠物领养平台的落地页，要求：

**美学风格：温暖柔和 + 手绘感**

**字体：**
- 标题：Nunito（圆体），字重 700-800
- 正文：Nunito，字重 400-600

**颜色：**
- 主色：#FFB347（暖橙色）
- 次色：#FFCCB3（浅橙色）
- 背景：#FFF8F0（米白色）
- 文字：#5D4037（棕色）

**布局：**
- 圆润卡片，24px圆角
- 卡片略微倾斜旋转
- 元素浮动重叠

**动画：**
- 加载时元素从两侧滑入
- 宠物卡片 hover 时摇头动画
- 按钮 hover 弹跳效果

**细节：**
- 背景加爪印装饰
- 图片不规则裁切
- 手绘风格图标

4.2 实战 2：用 Skills 快速生成仪表盘

Skills 特别适合后台系统，比如：

Plain 复制代码 
使用 UI/UX Pro Max 的 Dashboard Dark 风格，
帮我做一个 SaaS 产品管理后台的仪表盘，包含：
- 顶部四个统计卡片（用户数、活跃用户、收入、API调用）
- 中间：用户增长折线图 + 订阅分布饼图
- 底部：最近活动列表

AI 会自动应用深色仪表盘的规范，生成专业的后台界面。

4.3 实战 3：创建自己的品牌设计 Skill

如果你有固定的品牌风格，可以自己做一个 Skill，让所有 AI 生成的页面都符合你的品牌：

  1. 在项目里创建 \.claude/skills/my\-brand/SKILL\.md

  2. 把你的品牌规范写进去，比如颜色、字体、间距、圆角

  3. 之后写提示词的时候，加一句使用 my\-brand skill，AI 就会自动应用所有规范。

示例的品牌规范：

markdown 复制代码 
---
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
- 正文：Inter
 - Body: 400, 16px
 - Small: 400, 14px

## 间距系统
- 基础单位：4px
- 组件内边距：8px / 12px / 16px
- 区块间距：24px / 32px / 48px

## 圆角
- 按钮：8px
- 卡片：12px
- 输入框：8px

## 禁止使用的样式
- 不要使用紫色渐变背景
- 不要使用 Inter 以外的字体
- 不要使用大于 16px 的圆角

六、本章总结

让 AI 生成漂亮界面，有两种方法，按需选择：

方法 优点 缺点 适用场景
提示词描述 灵活，每次都能调整 需要重复写提示词 一次性页面、实验不同风格
Skills 插件 一次安装，持续生效 需要安装配置 有固定风格的项目

工作流建议：

  1. 探索阶段：用不同的风格提示词实验，找到你喜欢的美学方向

  2. 确定风格后：安装对应的 Skill，不用每次写长提示词

  3. 品牌项目：创建自己的 Skill，统一整个项目的设计语言

附录：实用速查表

设计风格速查表

风格 关键词 适用场景
极简主义 留白、单色、简洁 高端产品、作品集
玻璃拟态 毛玻璃、渐变、模糊 科技产品、SaaS 落地页
新野兽派 粗边框、硬阴影、纯色 潮流品牌、艺术网站
Bento Grid 网格拼贴、大小卡片 信息展示、仪表盘
手绘风格 不规则、圆润、插画 教育、儿童产品
杂志风 大字体、不对称、留白 内容网站、博客

配色方案推荐

配色 主色 点缀色 背景 风格
日落 #F97316 #FBBF24 #FFF7ED 温暖活力
海洋 #0EA5E9 #06B6D4 #F0F9FF 清新专业
森林 #10B981 #34D399 #ECFDF5 自然健康
浆果 #8B5CF6 #EC4899 #FAF5FF 浪漫创意
咖啡 #78350F #D97706 #FFFBEB 温暖复古

风格提示词速查

风格 英文关键词
波普艺术 Pop art style, bold colors, comic dots
复古 80s Retro 80s, neon grid, synthwave palette
赛博朋克 Cyberpunk UI, neon lights, glitch effects
新拟态 Neumorphism, soft shadows, clean modern
酸性设计 Acid graphics, glass morphism, chaotic typography
沉浸式 3D Immersive 3D website, interactive product model
相关推荐
易连EDI—EasyLink1 小时前
易连EDI–EasyLink实现OCR智能数据采集
网络·人工智能·安全·汽车·ocr·edi
冬奇Lab1 小时前
RAG 系列（二）：用 LangChain 搭建你的第一个 RAG Pipeline
人工智能·langchain·llm
学习论之费曼学习法2 小时前
多模态大模型实战：用 GPT-4o API 打造 AI 助手，能看、能听、能说！
人工智能
昨夜见军贴06162 小时前
IACheck与AI报告审核，开启供应商资质核验报告审核新篇章
人工智能
GitCode官方2 小时前
小米 MiMo‑V2.5 系列开源，正式入驻 AtomGit！旗舰模型完成全球多家主流芯⽚⼚商深度适配
开源·小米·atomgit
m0_726365832 小时前
Ai漫剧系统 几分钟，让AI 把一篇小说变成了一部漫剧成片：从剧本到视频的全流程系统实现
人工智能·语言模型·ai作画·音视频
AIwenIPgeolocation2 小时前
出海应用合规与风控平衡术：可信ID的全球安全实践
人工智能·安全
WordPress学习笔记2 小时前
镌刻中式美学的高端WordPress主题
大数据·人工智能·wordpress
Mr_sst2 小时前
Claude Code 部署与使用保姆级教程（2026 最新）
python·ai
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档032026年4月AI大事件深度解读：大模型竞争进入“深水区“04近期有什么ai的新消息，新动态？ 2026.4月05【AI】2026 年具身智能模型和世界模型总结062026年AI编程工具终极横评：Cursor vs Claude Code vs Copilot07实测可用｜小米 MiMo 百万亿 Token 免费领，开发者速冲08在Windows 11上安装Docker的踩坑记录09裂开！ChatGPT 居然开始要手机号验证，附详细解决方法10要裂开了！ChatGPT要手机号验证了？注册Codex要求验证电话号码怎么办？2026年登陆Codex要手机号验证的解决办法