frontend-design当用户需要构建网页组件、页面、应用程序或任何 Web UI（网站、着陆页、仪表板、React 组件、HTML/CSS 布局）时使用。此 Skill 生成独特、生产级的前端界面，注重高质量设计和避免通用 AI 风格。
Independent GitHub snapshot · Automated classification · Original documentation governs
⚠️ 性能提示: 此 Skill 专注于设计理念和美学规范，不包含具体的实现代码。设计阶段完成后，配合 ReactBestPractices Skill 进行性能优化。
AI 生成的界面往往呈现出一致的"塑料感"特征：过度使用的字体、无特色的配色、可预测的布局。这些特征让界面看起来"正确"但毫无灵魂。
核心原则：每个设计都应该有明确的美学观点，而不是通用的"AI 风格"。
| 反模式 | 问题 | 替代方案 |
|---|---|---|
| 过度使用的字体 | Arial, Inter, Roboto | 选择独特字体：JetBrains Mono, Playfair Display, Space Grotesk |
| 陈腐的配色 | #4F46E5 (蓝紫), 彩虹渐变 | 建立有性格的调色板：单色主导 + 锐利点缀色 |
| 可预测的布局 | 12 栏网格、卡片墙、英雄区 + 功能区 | 不对称、意外的空間构图、大胆的负空间 |
| 通用的动效 | 淡入淡出、基本悬停效果 | 意图明确的微交互、高影响时刻的动画 |
| 缺乏深度 | 纯色背景、无纹理 | 大气背景、微妙渐变、情境细节 |
在编写任何代码之前，必须建立大胆的美学方向：
1. PURPOSE（目的）
- 这个界面解决什么问题？
- 目标用户是谁？
- 用户的情感需求是什么？
2. TONE（调性）
选择一个大胆的美学方向：
- 极简主义（Minimalist）
- 极繁主义（Maximalist）
- 复古未来主义（Retro-Futuristic）
- 粗犷主义（Brutalist）
- 有机自然（Organic）
- 科技感（Tech/Cyberpunk）
- 手工质感（Handcrafted）
3. CONSTRAINTS（限制）
- 技术限制（浏览器支持、性能要求）
- 品牌规范（如果有）
- 无障碍要求（WCAG 等级）
4. DIFFERENTIATION（独特性）
- 什么让这个设计令人难忘？
- 用户离开后会记得什么？
- 有什么意想不到的元素？
CRITICAL: 选择一个清晰的概念方向并精确执行。大胆的极繁主义和精致的极简主义都可以——关键是意图明确，而非强度高低。
核心原则: 字体是设计的声音，选择要有意图
/* ❌ 避免：过度使用的字体 */
font-family: 'Inter', 'Roboto', 'Arial', sans-serif;
/* ✅ 推荐：独特的字体组合 */
/* 科技感 */
font-family: 'JetBrains Mono', 'Fira Code', monospace;
/* 优雅感 */
font-family: 'Playfair Display', 'Cormorant Garamond', serif;
/* 现代感 */
font-family: 'Space Grotesk', 'DM Sans', sans-serif;
/* 实验性 */
font-family: 'Archivo Black', 'Bebas Neue', sans-serif;
排版层次:
clamp() 实现响应式）核心原则: 凝聚的调色板，主导色 + 锐利点缀色
/* ❌ 避免：AI 通用配色 */
--primary: #4F46E5; /* 无处不在的紫蓝色 */
--gradient: linear-gradient(to right, #667eea, #764ba2);
/* ✅ 推荐：有性格的调色板 */
/* 暗黑科技风 */
:root {
--bg-primary: #0a0a0a;
--bg-secondary: #141414;
--text-primary: #fafafa;
--accent: #22d3ee; /* 青色点缀 */
--accent-glow: rgba(34, 211, 238, 0.3);
}
/* 温暖自然风 */
:root {
--bg-primary: #faf8f5;
--bg-secondary: #f0ebe3;
--text-primary: #2d2a26;
--accent: #e07a5f; /* 陶土橙 */
--accent-muted: #f4a261;
}
/* 高对比极简风 */
:root {
--bg-primary: #ffffff;
--text-primary: #000000;
--accent: #ff3366;
}
核心原则: 动画要有意图，聚焦高影响时刻
/* ✅ 推荐：精心设计的动效 */
.page-load {
animation: stagger-reveal 0.6s ease-out forwards;
animation-delay: calc(var(--index) * 100ms);
}
/* ✅ 悬停效果要有惊喜 */
.button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
/* ❌ 避免：通用淡入淡出 */
.fade-in {
animation: fadeIn 0.3s ease-in-out;
}
动效最佳实践:
核心原则: 打破常规，创造意外的视觉节奏
/* ✅ 推荐：不对称布局 */
.hero {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 4rem;
align-items: center;
}
/* ✅ 推荐：大胆的负空间 */
.spacious {
padding: 12rem 8rem;
}
/* ✅ 推荐：重叠元素 */
.overlap {
position: relative;
z-index: 1;
margin-bottom: -3rem;
}
布局突破:
核心原则: 创造氛围和深度，而非默认纯色
/* ✅ 推荐：纹理和深度 */
.gradient-mesh {
background:
radial-gradient(at 40% 20%, hsla(228, 100%, 50%, 0.15) 0px, transparent 50%),
radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 0.15) 0px, transparent 50%),
radial-gradient(at 0% 50%, hsla(355, 100%, 93%, 0.2) 0px, transparent 50%);
}
/* ✅ 推荐：噪点纹理 */
.noise-overlay {
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,..."); /* SVG 噪点 */
opacity: 0.03;
pointer-events: none;
}
/* ✅ 推荐：戏剧性阴影 */
.card {
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(0, 0, 0, 0.05);
}
创意细节:
然后实现可工作的代码（HTML/CSS/JS、React、Vue 等），确保：
IMPORTANT: 设计与实现复杂度要匹配。
/* 深色背景 + 青色点缀 */
--bg: #0a0a0a;
--surface: #141414;
--border: #262626;
--accent: #22d3ee;
--text: #fafafa;
/* 暖白背景 + 大地色点缀 */
--bg: #faf8f5;
--surface: #f5f1eb;
--border: #e8e2d9;
--accent: #e07a5f;
--text: #2d2a26;
/* 纯黑 + 高对比点缀 */
--bg: #ffffff;
--surface: #fafafa;
--border: #000000;
--accent: #000000;
--text: #000000;
NEVER 使用通用的 AI 生成美学：
在完成设计前，检查以下各项：
记住: Claude 有能力创造非凡的创意作品。不要保守，展示当跳出框框思考并完全投入独特愿景时真正能创造的东西。