⚠️ Performance Tip: This Skill focuses on design philosophy and aesthetic specifications, and does not include specific implementation code. After the design phase is complete, pair it with the ReactBestPractices Skill for performance optimization.
Core Design Philosophy: Reject "AI Plastic Feel"
What is the "AI Plastic Feel"?
AI-generated interfaces often exhibit a consistent "plastic feel": overused fonts, featureless color schemes, predictable layouts. These characteristics make interfaces look "correct" but soulless.
Core Principle: Every design should have aclear aesthetic point of view, rather than a generic "AI style".
"AI Plastic Feel" Characteristics That Must Be Avoided
| Anti-pattern | Problem | Alternative |
|---|---|---|
| Overused fonts | Arial, Inter, Roboto | Choose distinctive fonts: JetBrains Mono, Playfair Display, Space Grotesk |
| Stale color schemes | #4F46E5 (blue-purple), rainbow gradients | Build a palette with character: monochrome dominant + sharp accent color |
| Predictable layouts | 12-column grid, card walls, hero section + feature section | Asymmetry, unexpected spatial composition, bold negative space |
| Generic motion effects | Fade in/out, basic hover effects | Purposeful micro-interactions, animation for high-impact moments |
| Lack of depth | Solid color backgrounds, no texture | Atmospheric backgrounds, subtle gradients, contextual details |
Design Thinking Framework (Design Before Code)
Before writing any code, you must establish abold aesthetic direction：
Four Core Questions
1. PURPOSE（目的）
- 这个界面解决什么问题？
- 目标用户是谁？
- 用户的情感需求是什么？
2. TONE（调性）
选择一个大胆的美学方向：
- 极简主义（Minimalist）
- 极繁主义（Maximalist）
- 复古未来主义（Retro-Futuristic）
- 粗犷主义（Brutalist）
- 有机自然（Organic）
- 科技感（Tech/Cyberpunk）
- 手工质感（Handcrafted）
3. CONSTRAINTS（限制）
- 技术限制（浏览器支持、性能要求）
- 品牌规范（如果有）
- 无障碍要求（WCAG 等级）
4. DIFFERENTIATION（独特性）
- 什么让这个设计令人难忘？
- 用户离开后会记得什么？
- 有什么意想不到的元素？
CRITICAL: Choose a clear conceptual direction and execute it precisely. Bold maximalism and refined minimalism are both fine—the key is clear intent, not level of intensity.
The Five Pillars of Frontend Aesthetics
1. Typography
Core Principle: Fonts are the voice of design, choose with intention
/* ❌ 避免：过度使用的字体 */
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;
Typographic Hierarchy:
- Use 2-3 fonts (heading + body + optional accent)
- Establish a clear font size scale (use
clamp()to achieve responsiveness) - Strong font weight contrast (400 vs 700+)
- Line height with breathing room (1.5-1.75 for body text)
2. Color & Theme
Core Principle: Cohesive palette, dominant color + sharp accent color
/* ❌ 避免：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;
}
3. Motion & Interaction
Core Principle: Animation should be intentional, focusing on high-impact moments
/* ✅ 推荐：精心设计的动效 */
.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;
}
Motion Best Practices:
- One carefully choreographed page load animation is more delightful than scattered micro-interactions
- Use scroll triggers and hover states to create surprise
- Prefer CSS-only solutions
- For React projects, use the Motion library (formerly framer-motion)
4. Spatial Composition
Core Principles: Break conventions, create unexpected visual rhythm
/* ✅ 推荐：不对称布局 */
.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;
}
Layout Breakthroughs:
- Asymmetrical grids
- Element overlap
- Diagonal flow
- Grid-breaking elements
- Bold negative space OR controlled density
5. Backgrounds & Visual Details
Core Principles: Create atmosphere and depth, rather than defaulting to solid colors
/* ✅ 推荐：纹理和深度 */
.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);
}
Creative Details:
- Gradient meshes
- Noise textures
- Geometric patterns
- Layered transparency
- Dramatic shadows
- Decorative borders
- Custom cursors
- Grain overlays
Implementation Guide
Then implement working code (HTML/CSS/JS, React, Vue, etc.), ensuring:
- Production-grade and functional: Code runs, follows best practices
- Visually impactful and memorable: Has a unique aesthetic point of view
- Highly cohesive: Every detail serves the overall vision
- Meticulously polished: Spacing, contrast, and animation are all carefully considered
Implementation Complexity Matching
IMPORTANT: Design and implementation complexity must match.
- Maximalist design: Requires meticulously crafted code, including extensive animations and effects
- Minimalist design: Requires restraint, precision, and careful attention to spacing, typography, and subtle details
- Elegance comes from execution: Good design lies in precise execution, not adding more elements
Common Design Pattern Reference
Tech-feel interface
/* 深色背景 + 青色点缀 */
--bg: #0a0a0a;
--surface: #141414;
--border: #262626;
--accent: #22d3ee;
--text: #fafafa;
Warm natural interface
/* 暖白背景 + 大地色点缀 */
--bg: #faf8f5;
--surface: #f5f1eb;
--border: #e8e2d9;
--accent: #e07a5f;
--text: #2d2a26;
Minimalist high-end interface
/* 纯黑 + 高对比点缀 */
--bg: #ffffff;
--surface: #fafafa;
--border: #000000;
--accent: #000000;
--text: #000000;
Prohibited List
NEVER use generic AI-generated aesthetics:
- ❌ Overused font families (Inter, Roboto, Arial, system fonts)
- ❌ Cliched color schemes (especially purple gradients on white backgrounds)
- ❌ Predictable layouts and component patterns
- ❌ Cookie-cutter designs lacking context-specific character
- ❌ Common choices like Space Grotesk (maintain diversity across generations)
Quality Checklist
Before completing the design, check the following items:
- Font choice: Is it unique and meaningful?
- Color system: Is there a clear palette?
- Motion design: Is it intentional and focused?
- Spatial layout: Does it break conventions?
- Visual details: Is there depth and atmosphere?
- Accessibility: Does it meet WCAG standards?
- Responsive: Does it adapt elegantly to various screens?
Remember: Claude has the ability to create extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and fully committing to a unique vision.