frontend-ui

前端 UI 设计

创建视觉上独具特色、美观悦目的前端界面，避免千篇一律的“AI 垃圾”风格。

适用场景

在以下情况下使用此技能：

• 用户请求创建前端 UI（HTML、CSS、JavaScript 或 React）
• 用户要求构建网页、落地页或 Web 界面
• 用户想要创建视觉组件或布局
• 用户提到设计、美感或“让它看起来更好看”
• 用户请求创建仪表板、作品集或应用 UI

核心原则

重要：如果没有明确的美学指导，Claude 默认会生成普通、保守的设计（白色背景、紫色点缀、Inter/Roboto 字体、可预测的布局）。此技能提供了基于研究的策略，帮助创建独具特色、视觉效果出众的界面。

四个设计维度

创建前端 UI 时，始终关注以下四个方面：

1. 排版

避免使用这些过度常见的字体：

• Inter、Roboto、Arial、Helvetica、系统字体

使用独具特色的替代字体：

• 等宽字体：JetBrains Mono、Fira Code、IBM Plex Mono、Space Mono
• 展示/几何字体：Space Grotesk、Clash Display、Epilogue、Syne
• 衬线字体：Playfair Display、Crimson Pro、Libre Baskerville、Merriweather
• 现代无衬线字体：Outfit、Manrope、General Sans、Satoshi

排版最佳实践：

• 使用高对比度搭配：展示字体 + 等宽字体、衬线字体 + 几何无衬线字体
• 采用极端字重变化：100/200 对比 800/900（而非仅使用 400 和 600）
• 打造显著的字号跳跃：差异达到 3 倍以上，而非 1.5 倍
• 从 Google Fonts 加载字体，并在编码前明确说明字体选择

搭配示例：

Heading: Clash Display (800 weight, 4rem)
Body: JetBrains Mono (300 weight, 0.9rem)
Accent: Space Grotesk (700 weight, 1.2rem)

2. 色彩与主题

避免使用这些陈词滥调的配色方案：

• 白色背景上的紫色渐变
• 千篇一律的蓝白企业配色
• 缺乏表现力、均匀分布的色彩
• 带有微妙点缀、可预测的浅色模式

使用 CSS 变量打造统一美感：

• 确定一个主题：赛博朋克、太阳朋克、粗野主义、新东京、复古未来、终端、蒸汽波
• 以主色为主，并搭配醒目的点缀色：不要让所有颜色占比相同
• 从 IDE 主题中汲取灵感：Dracula、Nord、Gruvbox、Tokyo Night、Monokai
• 文化美学风格：日式极简主义、瑞士设计、孟菲斯风格

色彩策略：

1. 定义 CSS 自定义属性，确保风格统一
2. 选择 2–3 种主色和 1–2 种醒目的点缀色
3. 深色主题和浅色主题都应纳入考虑
4. 谨慎使用渐变，但使用时应大胆

主题示例（赛博朋克）：

--bg-primary: #0a0e27;
--bg-secondary: #16213e;
--accent-neon: #00ff9f;
--accent-pink: #ff006e;
--text-primary: #e0e0e0;
--text-muted: #8892b0;

3. 动效

实现方式：

• HTML：使用纯 CSS 动画
• React：条件允许时使用 Framer Motion 库
• 注重高影响力的时刻，而非零散的微交互
• 页面加载时采用精心编排的交错显示，胜过大量细碎动画

动效最佳实践：

• 使用 animation-delay 实现交错效果
• 在挂载或页面加载时播放动画，增强视觉冲击
• 保持动画流畅（ease-out、ease-in-out）
• 大多数过渡动画时长设为 0.4s–0.8s

交错显示示例：

.fade-in {
  animation: fadeIn 0.6s ease-out forwards;
  opacity: 0;
}

.fade-in:nth-child(1) { animation-delay: 0.1s; }
.fade-in:nth-child(2) { animation-delay: 0.2s; }
.fade-in:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeIn {
  to { opacity: 1; transform: translateY(0); }
  from { opacity: 0; transform: translateY(20px); }
}

4. 背景

避免：纯白或单一纯色背景

营造氛围与层次感：

• 分层 CSS 渐变：叠加多个透明度各异的渐变
• 几何图案：网格线、圆点、斜纹
• 环境效果：噪点纹理、颗粒感、微妙动画
• 主题元素：与整体美学风格相符（科技主题使用电路，自然主题使用有机形状）

背景技巧：

/* Layered gradients */
background:
  radial-gradient(circle at 20% 50%, rgba(120, 0, 255, 0.3) 0%, transparent 50%),
  radial-gradient(circle at 80% 80%, rgba(0, 255, 200, 0.2) 0%, transparent 50%),
  linear-gradient(135deg, #0a0e27 0%, #16213e 100%);

/* Grid pattern */
background-image:
  linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 50px 50px;

/* Dots pattern */
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 20px 20px;

严重警告：避免“AI 垃圾内容”

跳出固有思维！ 以下几点至关重要：

• ✅ 交替使用浅色和深色主题（不要默认使用浅色主题）
• ✅ 每次使用不同的字体（避免总是使用 Space Grotesk）
• ✅ 尝试不同的美学风格（赛博朋克、粗野主义、复古、极简主义）
• ❌ 绝不要使用：Inter、Roboto、Arial 作为主要字体
• ❌ 绝不要默认使用：白色背景搭配紫色点缀
• ❌ 避免：千篇一律的布局、可预测的组件模式
• ❌ 不要创建：缺乏特定情境个性的通用设计

工作流

创建前端 UI 时，请遵循以下流程：

步骤 1：了解背景

询问以下方面的澄清问题：

• 界面的用途
• 目标受众
• 希望营造的氛围或感受
• 是否有特定的美学偏好

步骤 2：选择美学方向

根据背景选择协调统一的主题：

• 科技/开发：终端、赛博朋克、黑客美学
• 创意：蒸汽波、孟菲斯风格、粗野主义
• 专业：瑞士设计、极简主义、编辑风格
• 自然：太阳朋克、自然灵感、暖色调

步骤 3：明确说明设计决策

编写代码前，声明：

Theme: [chosen aesthetic]
Fonts: [heading font], [body font], [accent font]
Colors: [dominant colors and accents]
Motion: [key animations planned]
Background: [approach chosen]

步骤 4：采用最佳实践进行实现

技术要求：

• 按要求使用原生 HTML、CSS、JavaScript 或 React
• 适当时加入 Tailwind CSS
• 单文件交付时，将所有 CSS 和 JavaScript 内联
• 从 Google Fonts 加载字体
• 使用 CSS 自定义属性实现主题
• 确保响应式设计（采用移动端优先的方法）

步骤 5：打造令人印象深刻的时刻

• 编排页面加载动画
• 为内容添加交错显示效果
• 添加响应灵敏的悬停状态
• 谨慎考虑添加滚动触发动画

示例

示例 1：开发者作品集（深色主题）

明确说明的设计：

• 主题：终端/黑客美学，搭配绿色点缀
• 字体：全文使用 JetBrains Mono，通过不同字重建立层级
• 色彩：深色背景（#0d1117）、绿色点缀色（#39ff14）、柔和的灰色文本
• 动效：主视觉文本采用打字动画，项目采用交错淡入效果
• 背景：细微网格图案，搭配扫描线效果

主要特性：

• 全程使用等宽字体
• 带扫描线的 CRT 显示器美学
• 绿色荧光粉发光效果
• 终端风格导航

示例 2：创意机构落地页（浅色主题）

明确说明的设计：

• 主题：瑞士粗野主义，搭配醒目字体
• 字体：标题使用 Clash Display（字重 900），正文使用 Space Grotesk（字重 300）
• 色彩：米白色（#f5f5f0）、黑色，以及一种鲜明的红色点缀（#ff0000）
• 动效：醒目元素在页面加载时从边缘滑入
• 背景：米白色，带有细微的噪点纹理

主要特性：

• 超大字号（主视觉文字至少 6rem）
• 不对称网格布局
• 以锐利的几何形状作为点缀
• 高对比度的黑白搭配，少量使用红色

示例 3：应用仪表板（深色主题）

明确说明的设计：

• 主题：新东京夜景，搭配粉色/青色点缀
• 字体：标题使用 Outfit（字重 700），数据/数字使用 IBM Plex Mono
• 色彩：深海军蓝（#0a1128）、粉色（#ff006e）、青色（#00f5ff）
• 动效：卡片悬停时平滑过渡，数据采用递增动画
• 背景：深色背景，带有细微的径向渐变和网格

主要特性：

• 交互元素采用霓虹风格点缀
• 卡片使用毛玻璃效果和背景模糊
• 所有数值数据均使用等宽字体
• 聚焦状态下显示发光边框

隔离维度提示

如需针对性控制，可以单独指定某个维度：

仅调整字体排版

“保持所有其他设计元素不变，仅调整字体排版：标题使用 Crimson Pro，正文使用 Fira Code，并采用极强的字重对比。”

仅调整主题

“将美学风格固定为太阳朋克主题：暖和的土色调、有机形状、自然灵感图案、绿色/金色点缀，以及乐观的未来感。”

仅使用动效进行增强

“添加编排良好的页面加载序列：先渐显主视觉区域（0.5s），然后导航项依次错开显示（间隔 0.2s），最后内容卡片从下到上显现。”

字体轮换策略

为避免大家都选用相同字体，请轮换使用以下风格鲜明的组合：

组合 1 - 终端美学：

• JetBrains Mono + IBM Plex Mono

组合 2 - 现代编辑风格：

• Playfair Display + Space Grotesk

组合 3 - 几何粗体：

• Clash Display + Manrope

组合 4 - 复古未来风：

• Space Mono + Outfit

组合 5 - 优雅科技风：

• Crimson Pro + Fira Code

组合 6 - 新粗野主义：

• Syne + General Sans

质量检查清单

交付前，请确认：

• 字体不是 Inter、Roboto、Arial 或系统字体
• 配色方案不是白色背景搭配紫色点缀
• 字体粗细差异极大（100-200 对比 800-900）
• 字号跨度达到 3 倍以上，以形成层级对比
• 背景富有层次感（渐变、图案或特效）
• 动效经过精心编排（错落有致、目的明确）
• 主题协调统一，且符合上下文
• 使用 CSS 自定义属性，确保一致性
• 设计避免千篇一律的套路
• 美学风格鲜明且令人印象深刻

说明

• 来源：基于 Anthropic 的“Prompting for Frontend Aesthetics”研究
• 多样性至关重要：在不同项目中有意识地改变主题、字体和设计方法
• 上下文很重要：让美学风格契合用途（活泼或专业、技术或创意）
• 大胆选择：与其安全平庸，不如风格鲜明
• 性能：确保动画性能良好（使用 CSS 变换，而不是改变布局）
• 无障碍性：确保对比度充足，字体大小易于阅读

参考资料

如需深入了解，请参阅 REFERENCE.md，其中包含：

• 更多字体搭配
• 详细的调色板示例
• 动画示例集
• 背景图案方案
• 主题架构示例