aiskillstore Frontend Design Skill
此技能指导创建独特的生产级前端界面，避免平庸的"AI 粗糙"美学。实现真正可用的代码，并高度关注美学细节和创意选择。
When to Use This Skill
使用此技能当用户请求：
- 构建 Web 组件、页面或完整应用程序
- 创建着陆页、仪表盘或营销页面
- 设计 React、Vue 或原生 HTML/CSS 界面
- 美化或重新设计现有的 Web UI
- 创建海报、素材或视觉设计元素（用于 Web）
- 需要高设计品质和独特美学的任何前端项目
关键触发词: Web 组件、页面、应用、网站、着陆页、仪表盘、React 组件、HTML/CSS、UI 设计、美化、前端
核心原则
在编写代码之前，必须进行深入的设计思考。每个界面都应该是独特的、有意图的、令人难忘的。
设计思维流程
在实现任何代码之前，回答以下问题：
1. 目的 (Purpose)
- 问题: 此界面解决什么问题？
- 用户: 谁使用它？在什么情境下使用？
- 目标: 用户需要完成什么任务？
2. 风格方向 (Style Direction)
选择一个明确且大胆的美学方向。不要选择"现代简约"这样的通用描述，而是选择极致的风格：
风格选项（但不限于这些）：
- 极简主义: 极度克制，大量留白，精准排版
- 极致混乱: 密集布局，重叠元素，视觉冲击
- 复古未来主义: 80年代霓虹色，网格，合成波风格
- 有机/自然: 流动形状，自然色调，柔和曲线
- 奢华/精致: 优雅字体，金色点缀，精细细节
- 俏皮/玩具感: 明亮色彩，圆角，趣味动画
- 编辑/杂志风格: 大胆排版，网格系统，黑白为主
- 粗犷/原始: 单色，硬边，实用主义
- 装饰艺术/几何: 对称图案，几何形状，高对比度
- 柔和/粉彩: 温和色彩，渐变，梦幻感
- 工业/实用: 系统字体，单色，功能优先
- 新拟态: 柔和阴影，浮雕效果，微妙深度
- 玻璃态: 模糊背景，透明度，光感
关键: 选择清晰的概念方向并精准执行。大胆的极致主义和精致的极简主义都有效——关键在于意图，而不是强度。
3. 技术限制 (Constraints)
- 使用什么框架？（React, Vue, 原生 HTML/CSS）
- 性能要求？（动画复杂度，文件大小）
- 可访问性要求？（ARIA 标签，键盘导航，色彩对比度）
- 浏览器兼容性？
4. 差异化 (Differentiation)
- 记忆点: 是什么让它令人难忘？
- 独特性: 用户会记住哪一个细节？
- 惊喜: 哪里会让用户眼前一亮？
前端美学指南
1. 排版 (Typography)
原则: 字体选择是设计的灵魂。
Do:
- ✅ 选择独特且有个性的字体
- ✅ 标题使用引人注目的字体，正文使用易读字体
- ✅ 尝试意想不到的字体配对
- ✅ 使用字体变体（font-weight, font-style）创造层次
- ✅ 精确控制字间距（letter-spacing）和行高（line-height）
Don't:
- ❌ 使用通用字体：Arial, Helvetica, Inter, Roboto, 系统字体
- ❌ 所有文本使用相同的字体和大小
- ❌ 忽略字体加载性能（使用 font-display: swap）
推荐字体来源:
- Google Fonts (选择小众、独特的字体)
- 自定义字体（如果项目允许）
示例字体组合:
/* 极简编辑风格 */
--font-heading: 'Playfair Display', serif;
--font-body: 'Source Sans Pro', sans-serif;
/* 现代科技风格 */
--font-heading: 'Space Mono', monospace;
--font-body: 'DM Sans', sans-serif;
/* 优雅奢华风格 */
--font-heading: 'Cormorant Garamond', serif;
--font-body: 'Lato', sans-serif;
2. 颜色与主题 (Color & Theme)
原则: 颜色定义情绪和品牌。
Do:
- ✅ 使用 CSS 变量保持一致性
- ✅ 主色调 + 鲜明点缀色的组合
- ✅ 考虑色彩心理学（蓝色=信任，红色=紧迫，绿色=成功）
- ✅ 使用渐变营造深度（但要有品味）
- ✅ 保持色彩对比度（WCAG AA 标准：至少 4.5:1）
Don't:
- ❌ 俗套配色：白色背景 + 紫色渐变
- ❌ 过多颜色（3-5 个主色已足够）
- ❌ 忽略可访问性
示例主题:
:root {
/* 极简黑白 */
--color-primary: #000000;
--color-secondary: #ffffff;
--color-accent: #ff3366;
/* 复古未来 */
--color-primary: #1a1a2e;
--color-secondary: #16213e;
--color-accent: #00fff5;
--color-highlight: #ff006e;
/* 自然有机 */
--color-primary: #2d6a4f;
--color-secondary: #52b788;
--color-accent: #ffc857;
}
3. 动效 (Animation & Motion)
原则: 动画应该增强体验，而不是分散注意力。
Do:
- ✅ 优先使用 CSS 动画（性能更好）
- ✅ 设计页面加载动画（首次印象）
- ✅ 使用
animation-delay实现元素逐个显示 - ✅ 悬停状态添加微妙过渡
- ✅ 滚动触发动画（Intersection Observer）
- ✅ 对于 React，使用 Framer Motion 或 React Spring
Don't:
- ❌ 过度使用动画（每个元素都在动）
- ❌ 动画持续时间过长（> 500ms 会让人不耐烦）
- ❌ 忽略
prefers-reduced-motion媒体查询
示例动画:
/* 页面加载 - 元素逐个淡入 */
.fade-in-up {
animation: fadeInUp 0.6s ease-out forwards;
opacity: 0;
}
.fade-in-up:nth-child(1) { animation-delay: 0.1s; }
.fade-in-up:nth-child(2) { animation-delay: 0.2s; }
.fade-in-up:nth-child(3) { animation-delay: 0.3s; }
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 悬停效果 */
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
4. 空间构成 (Spatial Composition)
原则: 布局应该引导视线，创造视觉节奏。
Do:
- ✅ 尝试不对称布局
- ✅ 使用重叠元素创造深度
- ✅ 对角线流程引导视线
- ✅ 打破网格的元素（但有意图）
- ✅ 宽敞的留白或精心控制的密度
- ✅ 使用 Grid 和 Flexbox 创造复杂布局
Don't:
- ❌ 所有元素居中对齐
- ❌ 均匀分布的网格（无聊）
- ❌ 忽略响应式设计
示例布局技巧:
/* 不对称网格 */
.grid-asymmetric {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 40px;
}
/* 重叠效果 */
.overlap-container {
position: relative;
}
.overlap-item {
position: absolute;
z-index: 2;
transform: translate(-20%, -20%);
}
/* 对角线流程 */
.diagonal-section {
transform: skewY(-3deg);
padding: 100px 0;
}
.diagonal-section > * {
transform: skewY(3deg);
}
5. 背景和视觉细节 (Background & Visual Details)
原则: 背景营造氛围和深度。
Do:
- ✅ 渐变网格
- ✅ 噪点纹理
- ✅ 几何图案
- ✅ 分层透明度
- ✅ 戏剧性阴影
- ✅ 装饰性边框
- ✅ 自定义光标（如果适合风格）
- ✅ 颗粒叠加效果
Don't:
- ❌ 纯色背景（除非极简风格）
- ❌ 低质量或不相关的库存图片
- ❌ 过度使用阴影（box-shadow 污染）
示例背景效果:
/* 渐变网格背景 */
.gradient-grid {
background:
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-size: 50px 50px, 50px 50px, 100% 100%;
}
/* 噪点纹理 */
.noise-texture {
position: relative;
}
.noise-texture::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
pointer-events: none;
}
/* 玻璃态效果 */
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
避免通用 AI 美学
绝对禁止的元素:
- ❌ 过度使用的字体：Inter, Roboto, Arial, 系统字体
- ❌ 俗套配色：白色背景 + 紫色渐变
- ❌ 可预测的布局模式（居中卡片网格）
- ❌ 缺乏特定上下文特征的千篇一律设计
如何避免:
- ✅ 为每个项目选择不同的字体
- ✅ 在浅色/深色主题之间变化
- ✅ 尝试不同的布局结构
- ✅ 添加独特的品牌元素和个性
实现复杂性与美学匹配
关键原则: 代码复杂度应与设计愿景相匹配。
极繁主义设计 → 复杂代码
- 大量动画和过渡效果
- 多层叠加元素
- 复杂的交互状态
- 详细的视觉效果（粒子、渐变、纹理）
// 示例：复杂的动画卡片
<motion.div
initial={{ opacity: 0, scale: 0.8, rotateX: -15 }}
animate={{ opacity: 1, scale: 1, rotateX: 0 }}
whileHover={{
scale: 1.05,
rotateY: 5,
boxShadow: "0 25px 50px rgba(0,0,0,0.2)"
}}
transition={{
type: "spring",
stiffness: 300,
damping: 20
}}
>
{/* 复杂内容 */}
</motion.div>
极简主义设计 → 精准代码
- 克制的动画（仅在关键时刻）
- 精确的间距和排版
- 细微的过渡效果
- 关注细节而非数量
/* 示例：精致的极简主义 */
.minimal-card {
padding: 60px;
background: #ffffff;
border: 1px solid rgba(0,0,0,0.08);
transition: border-color 0.3s ease;
}
.minimal-card:hover {
border-color: rgba(0,0,0,0.2);
}
.minimal-card h2 {
font-family: 'Cormorant Garamond', serif;
font-size: 2.5rem;
font-weight: 300;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 0 20px 0;
}
工作流程
第 1 步：理解需求
- 阅读用户请求，提取关键信息
- 确定项目类型（组件、页面、完整应用）
- 识别技术栈（React、Vue、原生 HTML/CSS）
第 2 步：设计思考
- 回答设计思维流程中的 4 个问题
- 选择明确的美学方向
- 在心中可视化最终效果
第 3 步：技术决策
- 选择框架和工具
- 决定动画库（Framer Motion、CSS、React Spring）
- 确定字体来源
第 4 步：实现
- 编写语义化 HTML 结构
- 实现 CSS 样式（使用 CSS 变量）
- 添加交互和动画
- 确保响应式设计
第 5 步：精细化
- 调整间距和排版
- 优化动画时间
- 测试不同屏幕尺寸
- 确保可访问性（ARIA、键盘导航）
示例场景
场景 1: 创建着陆页
用户请求: "帮我创建一个 SaaS 产品的着陆页"
设计思考:
- 目的：展示产品价值，吸引用户注册
- 风格：现代科技 + 编辑风格，使用 Space Grotesk 字体，黑白 + 蓝色点缀
- 布局：不对称，英雄区域占据 70% 屏幕，对角线流程
- 差异化：独特的字体配对，大胆的排版层次
实现重点:
- Hero section 使用大字号标题（4-6rem）
- 滚动触发的淡入动画
- 玻璃态 CTA 按钮
- 响应式网格展示功能
场景 2: 设计仪表盘
用户请求: "创建一个数据分析仪表盘"
设计思考:
- 目的：清晰展示数据，支持快速决策
- 风格：实用主义 + 精致，使用 IBM Plex Sans，深色主题
- 布局：网格系统，卡片式布局，数据可视化优先
- 差异化：微妙的动画过渡，悬停显示详细信息
实现重点:
- 深色背景减少眼睛疲劳
- 卡片使用柔和阴影和边框
- 图表使用鲜明的点缀色
- 加载状态使用骨架屏
场景 3: React 组件库
用户请求: "创建一套自定义按钮组件"
设计思考:
- 目的：可复用、可定制的按钮系统
- 风格：灵活，支持多种变体
- 技术：使用 styled-components 或 CSS modules
- 差异化：独特的悬停效果和加载状态
实现重点:
- 主按钮、次要按钮、文本按钮变体
- 大小变体（small, medium, large）
- 加载和禁用状态
- 平滑的过渡动画
代码质量标准
必须遵守:
- ✅ 语义化 HTML（
<header>,<nav>,<main>,<article>） - ✅ BEM 命名规范或 CSS Modules
- ✅ CSS 变量用于颜色和间距
- ✅ 移动优先的响应式设计
- ✅ 可访问性（ARIA 标签，键盘导航）
- ✅ 性能优化（图片懒加载，字体优化）
禁止:
- ❌ 内联样式（除非动态值）
- ❌ 不必要的
!important - ❌ 硬编码的颜色值（使用 CSS 变量）
- ❌ 未优化的图片
- ❌ 无意义的类名（
.box1,.container2）
技术栈参考
推荐工具:
- 字体: Google Fonts, Font Squirrel
- 颜色: Coolors.co, Adobe Color
- 动画: Framer Motion (React), Anime.js, GreenSock
- 图标: Heroicons, Lucide, Phosphor Icons
- CSS 框架: Tailwind CSS (自定义配置), styled-components
避免:
- ❌ Bootstrap, Material-UI（容易产生通用外观）
- ❌ 默认 Tailwind 配置（需要自定义）
检查清单
在完成实现后，验证以下内容:
- 选择了独特的字体组合（不是 Inter/Roboto/Arial）
- 颜色方案有明确的美学方向
- 至少有 1-2 处精心设计的动画
- 布局不是简单的居中网格
- 有独特的视觉细节（背景、纹理、阴影）
- 响应式设计在手机和桌面都好看
- 可访问性标准达标（对比度、ARIA）
- 代码清晰、可维护
- 性能良好（无卡顿动画，快速加载）
最后提醒
创造性诠释是关键。不要问用户"你想要什么颜色？"，而是基于上下文做出大胆的设计决策。每个设计都应该是独一无二的。在不同项目之间变化浅色/深色主题、字体和美学风格。
追求卓越，而非完美。一个有强烈个性的设计胜过一个"安全"但平庸的设计。敢于尝试，为用户带来惊喜。