@tinkcarlos/skillora 0.2.0

package/.claude/skills/frontend-design/references/ui-styles-full.md

@@ -0,0 +1,383 @@
+# Complete UI Styles Reference
+
+57 UI styles for frontend design, organized by category.
+
+## Modern Styles
+
+### 1. Glassmorphism
+- **Signature**: Frosted glass effect, blur, transparency
+- **CSS**: `backdrop-filter: blur(10px); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);`
+- **Best for**: Cards, modals, overlays, dashboards
+- **Pairs with**: Dark backgrounds, gradient accents
+
+### 2. Neumorphism (Soft UI)
+- **Signature**: Soft shadows creating embossed/debossed effect
+- **CSS**: `box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff; border-radius: 16px;`
+- **Best for**: Buttons, toggles, controls, calculators
+- **Pairs with**: Light monochrome backgrounds
+
+### 3. Claymorphism
+- **Signature**: 3D clay-like elements, soft rounded shapes
+- **CSS**: `border-radius: 24px; background: linear-gradient(145deg, #e6e6e6, #ffffff); box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;`
+- **Best for**: Playful apps, kids content, casual games
+- **Pairs with**: Pastel colors, soft gradients
+
+### 4. Bento Grid
+- **Signature**: Asymmetric card grid inspired by bento boxes
+- **CSS**: `display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;` with varying `grid-column: span X;`
+- **Best for**: Dashboards, portfolios, feature showcases
+- **Pairs with**: Any color scheme, works light or dark
+
+### 5. Aurora UI
+- **Signature**: Animated gradient backgrounds mimicking aurora borealis
+- **CSS**: Animated gradient meshes with `@keyframes aurora { 0% { background-position: 0% 50%; } ... }`
+- **Best for**: Hero sections, landing pages, creative sites
+- **Pairs with**: Dark backgrounds, vibrant gradients
+
+## Bold Styles
+
+### 6. Brutalism
+- **Signature**: Raw, unpolished, intentionally rough
+- **CSS**: `border: 4px solid black; box-shadow: 8px 8px 0 black; font-family: 'Courier New', monospace;`
+- **Best for**: Creative agencies, portfolios, art sites
+- **Pairs with**: High contrast, primary colors, system fonts
+
+### 7. Neo-Brutalism
+- **Signature**: Brutalism + bright colors + thick borders
+- **CSS**: `border: 3px solid #000; box-shadow: 4px 4px 0 #000; background: #FFE500;`
+- **Best for**: Bold brands, youth-oriented, startups
+- **Pairs with**: Yellow, pink, blue primaries
+
+### 8. Maximalism
+- **Signature**: More is more - patterns, colors, textures
+- **CSS**: Multiple backgrounds, gradients, overlapping elements
+- **Best for**: Fashion, entertainment, creative industries
+- **Pairs with**: Bold colors, mixed patterns, eclectic typography
+
+### 9. Cyberpunk
+- **Signature**: Neon on dark, glitch effects, futuristic
+- **CSS**: `background: #0a0a0a; color: #00ff00; text-shadow: 0 0 10px currentColor;`
+- **Best for**: Gaming, tech, sci-fi themes
+- **Pairs with**: Neon cyan, magenta, black backgrounds
+
+### 10. Vaporwave
+- **Signature**: 80s/90s nostalgia, gradients, retro-futurism
+- **CSS**: Pink-to-cyan gradients, grid patterns, chrome text effects
+- **Best for**: Music, entertainment, retro themes
+- **Pairs with**: Pink, cyan, purple, sunset gradients
+
+## Minimal Styles
+
+### 11. Swiss Design (International Style)
+- **Signature**: Grid-based, clean typography, asymmetric layouts
+- **CSS**: Strict grid, sans-serif typography, red accents
+- **Best for**: Corporate, professional services, publications
+- **Pairs with**: Black, white, single accent color
+
+### 12. Japanese Minimalism
+- **Signature**: Extreme white space, subtle details, zen-like
+- **CSS**: `padding: 80px; color: #333; font-weight: 300;`
+- **Best for**: Luxury brands, wellness, premium products
+- **Pairs with**: Muted colors, natural tones
+
+### 13. Scandinavian Design
+- **Signature**: Functional, warm, natural materials feel
+- **CSS**: Soft whites, warm grays, rounded corners
+- **Best for**: Home goods, lifestyle brands, SaaS
+- **Pairs with**: White, light wood tones, muted accents
+
+### 14. Flat Design 2.0
+- **Signature**: Flat colors with subtle shadows/gradients
+- **CSS**: `box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-radius: 8px;`
+- **Best for**: Apps, dashboards, general purpose
+- **Pairs with**: Material-like color palettes
+
+### 15. Monochromatic
+- **Signature**: Single color in various shades
+- **CSS**: Using HSL to create shade variations
+- **Best for**: Portfolios, minimal brands, elegant sites
+- **Pairs with**: Any single hue with white/black
+
+## Classic Styles
+
+### 16. Art Deco
+- **Signature**: Geometric patterns, gold accents, symmetry
+- **CSS**: `background: repeating-linear-gradient(45deg, ...); color: gold;`
+- **Best for**: Luxury, events, hospitality
+- **Pairs with**: Black, gold, geometric patterns
+
+### 17. Retro/Vintage
+- **Signature**: Aged textures, muted colors, classic typography
+- **CSS**: Sepia tones, worn textures, serif fonts
+- **Best for**: Food, crafts, traditional businesses
+- **Pairs with**: Brown, cream, muted reds/greens
+
+### 18. Victorian
+- **Signature**: Ornate details, decorative borders, rich colors
+- **CSS**: Decorative borders, script fonts, flourishes
+- **Best for**: Weddings, antiques, specialty shops
+- **Pairs with**: Deep reds, golds, cream
+
+### 19. Mid-Century Modern
+- **Signature**: Organic shapes, bold colors, atomic age
+- **CSS**: Rounded shapes, starburst patterns, teal/orange
+- **Best for**: Furniture, design studios, retro brands
+- **Pairs with**: Teal, orange, mustard, olive
+
+### 20. Bauhaus
+- **Signature**: Primary colors, geometric shapes, functional
+- **CSS**: Red, blue, yellow on white, circles/squares/triangles
+- **Best for**: Design education, architecture, art
+- **Pairs with**: Primary colors, black, white
+
+## Nature-Inspired
+
+### 21. Organic/Biomorphic
+- **Signature**: Flowing curves, nature shapes, soft forms
+- **CSS**: `border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;`
+- **Best for**: Wellness, eco brands, organic products
+- **Pairs with**: Earth tones, greens, natural textures
+
+### 22. Botanical
+- **Signature**: Plant illustrations, leaf patterns, green palette
+- **CSS**: Leaf motifs, green gradients, natural backgrounds
+- **Best for**: Garden, wellness, natural products
+- **Pairs with**: Various greens, cream, soft gold
+
+### 23. Oceanic
+- **Signature**: Wave patterns, blue gradients, flowing motion
+- **CSS**: Blue color schemes, wave animations, fluid shapes
+- **Best for**: Travel, maritime, relaxation
+- **Pairs with**: Blues, teals, sandy neutrals
+
+### 24. Earth Tones
+- **Signature**: Warm browns, tans, natural palette
+- **CSS**: `background: #D4A574; color: #4A3728;`
+- **Best for**: Coffee shops, outdoor brands, artisan
+- **Pairs with**: Browns, tans, forest greens
+
+### 25. Cosmic/Space
+- **Signature**: Deep purples, star fields, nebula effects
+- **CSS**: Dark gradients with particle effects, glowing accents
+- **Best for**: Technology, astronomy, innovative brands
+- **Pairs with**: Deep purple, blue, star white accents
+
+## Tech-Forward
+
+### 26. Futuristic/Sci-Fi
+- **Signature**: Sleek lines, holographic effects, animated UI
+- **CSS**: Gradients with cyan/magenta, thin lines, glow effects
+- **Best for**: Tech products, AI, innovation
+- **Pairs with**: Cyan, magenta, dark backgrounds
+
+### 27. Material Design 3
+- **Signature**: Dynamic color, adaptive layouts, elevation
+- **CSS**: Following Material 3 guidelines with custom themes
+- **Best for**: Android apps, Google ecosystem
+- **Pairs with**: Generated color schemes
+
+### 28. iOS/Apple Design
+- **Signature**: Blur effects, clean typography, subtle shadows
+- **CSS**: SF Pro font, vibrancy effects, smooth animations
+- **Best for**: Apple ecosystem apps, premium products
+- **Pairs with**: Apple's human interface guidelines
+
+### 29. Developer/Terminal
+- **Signature**: Monospace fonts, dark theme, code-like
+- **CSS**: `font-family: 'JetBrains Mono'; background: #1e1e1e; color: #d4d4d4;`
+- **Best for**: Dev tools, CLI apps, technical products
+- **Pairs with**: VS Code-like themes, green/amber accents
+
+### 30. Data Visualization
+- **Signature**: Charts, graphs, information density
+- **CSS**: Clear hierarchy, consistent color coding, readable labels
+- **Best for**: Dashboards, analytics, reports
+- **Pairs with**: Categorical color palettes
+
+## Playful Styles
+
+### 31. Cartoon/Illustrated
+- **Signature**: Hand-drawn elements, character illustrations
+- **CSS**: Thick strokes, playful colors, bouncy animations
+- **Best for**: Children, education, gaming
+- **Pairs with**: Bright primary/secondary colors
+
+### 32. Memphis Design
+- **Signature**: Geometric shapes, bold colors, patterns
+- **CSS**: Squiggles, dots, triangles as decorative elements
+- **Best for**: Youth brands, creative agencies, events
+- **Pairs with**: Yellow, pink, blue, black
+
+### 33. Kawaii
+- **Signature**: Cute characters, pastels, rounded everything
+- **CSS**: `border-radius: 9999px; background: #FFB6C1;`
+- **Best for**: Kids apps, casual games, cute brands
+- **Pairs with**: Pastels, pinks, soft colors
+
+### 34. Pixel Art
+- **Signature**: 8-bit/16-bit aesthetic, blocky graphics
+- **CSS**: `image-rendering: pixelated; font-family: 'Press Start 2P';`
+- **Best for**: Gaming, retro tech, nostalgic brands
+- **Pairs with**: Limited palettes, CRT effects
+
+### 35. Comic Book
+- **Signature**: Bold outlines, halftone dots, speech bubbles
+- **CSS**: `border: 3px solid black;` with halftone patterns
+- **Best for**: Entertainment, superhero themes, youth
+- **Pairs with**: Primary colors, black outlines
+
+## Professional Styles
+
+### 36. Corporate Modern
+- **Signature**: Clean, professional, trustworthy
+- **CSS**: Blue tones, clean typography, grid layouts
+- **Best for**: B2B, enterprise, financial services
+- **Pairs with**: Blues, grays, white
+
+### 37. Legal/Formal
+- **Signature**: Serif fonts, conservative colors, traditional
+- **CSS**: Serif typography, navy/burgundy, structured layouts
+- **Best for**: Law firms, government, formal institutions
+- **Pairs with**: Navy, burgundy, gold accents
+
+### 38. Medical/Healthcare
+- **Signature**: Clean, reassuring, accessible
+- **CSS**: Light blues, greens, ample white space
+- **Best for**: Healthcare, medical, wellness
+- **Pairs with**: Teal, soft blue, clean white
+
+### 39. Financial/Banking
+- **Signature**: Trust, security, precision
+- **CSS**: Navy, green (money), gold accents, data-rich
+- **Best for**: Banks, fintech, investment
+- **Pairs with**: Navy, forest green, gold
+
+### 40. Real Estate
+- **Signature**: Property showcase, luxury feel, location-based
+- **CSS**: Large imagery, elegant typography, map integration
+- **Best for**: Property listings, architecture, development
+- **Pairs with**: Gold, navy, warm neutrals
+
+## Creative Industry
+
+### 41. Editorial/Magazine
+- **Signature**: Typography-first, column layouts, dramatic spacing
+- **CSS**: Large headlines, text columns, pull quotes
+- **Best for**: Publications, blogs, news sites
+- **Pairs with**: Black, white, single accent
+
+### 42. Photography Portfolio
+- **Signature**: Image-centric, minimal UI, gallery focus
+- **CSS**: Full-bleed images, hidden UI until hover
+- **Best for**: Photographers, visual artists
+- **Pairs with**: Black/white with images providing color
+
+### 43. Fashion/Luxury
+- **Signature**: High contrast, elegant typography, minimal
+- **CSS**: `font-family: 'Didot'; letter-spacing: 0.2em; text-transform: uppercase;`
+- **Best for**: Fashion brands, luxury goods, beauty
+- **Pairs with**: Black, white, gold
+
+### 44. Music/Entertainment
+- **Signature**: Dynamic, expressive, audio-visual
+- **CSS**: Dark themes, neon accents, waveform visuals
+- **Best for**: Musicians, labels, streaming
+- **Pairs with**: Dark with vibrant accents
+
+### 45. Film/Video
+- **Signature**: Cinematic aspect ratios, dramatic lighting
+- **CSS**: Wide layouts, letterbox effects, film grain
+- **Best for**: Film studios, video production
+- **Pairs with**: Cinematic color grades
+
+## E-commerce Styles
+
+### 46. Marketplace
+- **Signature**: Product grids, filters, trust signals
+- **CSS**: Card grids, clear pricing, review stars
+- **Best for**: Multi-vendor platforms
+- **Pairs with**: Neutral with colored CTAs
+
+### 47. Single Product
+- **Signature**: Hero product focus, storytelling scroll
+- **CSS**: Large product shots, benefit sections
+- **Best for**: Product launches, DTC brands
+- **Pairs with**: Brand colors, lifestyle imagery
+
+### 48. Subscription/SaaS
+- **Signature**: Feature comparison, pricing tables, social proof
+- **CSS**: Clear value props, testimonial cards
+- **Best for**: Software, services, memberships
+- **Pairs with**: Tech-forward palettes
+
+## Specialized Styles
+
+### 49. Dashboard/Admin
+- **Signature**: Data-dense, functional, sidebar navigation
+- **CSS**: Fixed sidebars, card widgets, data tables
+- **Best for**: Admin panels, analytics, management
+- **Pairs with**: Neutral with status colors
+
+### 50. Documentation
+- **Signature**: Readable, navigable, code-friendly
+- **CSS**: Wide content area, sticky nav, code blocks
+- **Best for**: Technical docs, API references
+- **Pairs with**: Light themes, subtle accents
+
+### 51. Landing Page
+- **Signature**: Conversion-focused, single CTA, storytelling
+- **CSS**: Hero → benefits → social proof → CTA flow
+- **Best for**: Marketing, campaigns, launches
+- **Pairs with**: Brand colors, high contrast CTAs
+
+### 52. Blog/Content
+- **Signature**: Reading-optimized, comfortable typography
+- **CSS**: Optimal line length (60-80 chars), good line height
+- **Best for**: Articles, blogs, long-form content
+- **Pairs with**: Easy-on-eyes palettes
+
+### 53. Portfolio/Agency
+- **Signature**: Work showcase, case studies, about story
+- **CSS**: Project grids, hover previews, smooth transitions
+- **Best for**: Creative agencies, freelancers
+- **Pairs with**: Bold or minimal depending on work
+
+### 54. Event/Conference
+- **Signature**: Date/location prominent, speaker grid, schedule
+- **CSS**: Countdown timers, speaker cards, agenda timeline
+- **Best for**: Events, conferences, webinars
+- **Pairs with**: Event branding, energetic colors
+
+### 55. Restaurant/Food
+- **Signature**: Menu focus, location/hours, appetizing imagery
+- **CSS**: Menu cards, food photography, reservation CTA
+- **Best for**: Restaurants, cafes, food delivery
+- **Pairs with**: Warm colors, appetizing tones
+
+### 56. Non-Profit
+- **Signature**: Mission-driven, donation prominent, impact stories
+- **CSS**: Emotional imagery, clear donate buttons, impact stats
+- **Best for**: Charities, NGOs, causes
+- **Pairs with**: Trustworthy blues, hopeful greens
+
+### 57. Government/Civic
+- **Signature**: Accessible, informative, service-oriented
+- **CSS**: WCAG compliant, clear navigation, form-heavy
+- **Best for**: Government sites, public services
+- **Pairs with**: Official colors, high accessibility contrast
+
+---
+
+## Style Mixing Guidelines
+
+Effective combinations:
+- Glassmorphism + Dark Mode + Neon accents
+- Minimalism + Editorial typography
+- Brutalism + Bright colors (Neo-Brutalism)
+- Bento Grid + Glassmorphism cards
+- Corporate + Subtle Neumorphism
+
+Avoid mixing:
+- Brutalism + Neumorphism (conflicting philosophies)
+- Maximalism + Minimalism (unless intentionally ironic)
+- Multiple "loud" styles together

package/.claude/skills/frontend-design/references/ui-styles-rating.md

@@ -0,0 +1,191 @@
+# UI Styles Rating Reference
+
+每种 UI 风格的详细评级，帮助选择最适合项目需求的风格。
+
+---
+
+## 评级说明
+
+| 评级 | 含义 |
+|------|------|
+| ⭐⭐⭐⭐⭐ | 优秀 (5/5) |
+| ⭐⭐⭐⭐ | 良好 (4/5) |
+| ⭐⭐⭐ | 中等 (3/5) |
+| ⭐⭐ | 较差 (2/5) |
+| ⭐ | 差 (1/5) |
+
+---
+
+## Modern Styles
+
+### Glassmorphism
+| 维度 | 评级 | 说明 |
+|------|------|------|
+| 性能 | ⭐⭐⭐ | backdrop-filter 有性能开销 |
+| 可访问性 | ⭐⭐⭐ | 需注意对比度 |
+| 移动友好 | ⭐⭐⭐⭐ | 触摸友好，但需优化模糊 |
+| 转化率 | ⭐⭐⭐⭐ | 现代感强，吸引用户 |
+| 深色模式 | ⭐⭐⭐⭐⭐ | 非常适合 |
+| 浅色模式 | ⭐⭐⭐ | 需要深色背景衬托 |
+
+**适用**: 仪表盘, 卡片, 模态框
+**避免**: 大量文本内容, 低端设备
+
+---
+
+### Neumorphism
+| 维度 | 评级 | 说明 |
+|------|------|------|
+| 性能 | ⭐⭐⭐⭐ | 仅使用 box-shadow |
+| 可访问性 | ⭐⭐ | 对比度低，难以区分 |
+| 移动友好 | ⭐⭐⭐ | 触摸反馈不明显 |
+| 转化率 | ⭐⭐⭐ | 新颖但可能困惑用户 |
+| 深色模式 | ⭐⭐⭐ | 需要调整阴影颜色 |
+| 浅色模式 | ⭐⭐⭐⭐⭐ | 最佳效果 |
+
+**适用**: 按钮, 开关, 计算器
+**避免**: 复杂表单, 数据密集界面
+
+---
+
+### Brutalism
+| 维度 | 评级 | 说明 |
+|------|------|------|
+| 性能 | ⭐⭐⭐⭐⭐ | 极简，无复杂效果 |
+| 可访问性 | ⭐⭐⭐⭐⭐ | 高对比度 |
+| 移动友好 | ⭐⭐⭐⭐ | 大触摸目标 |
+| 转化率 | ⭐⭐⭐ | 两极分化，需要目标用户 |
+| 深色模式 | ⭐⭐⭐⭐ | 适合 |
+| 浅色模式 | ⭐⭐⭐⭐⭐ | 经典效果 |
+
+**适用**: 创意作品集, 艺术网站
+**避免**: 企业网站, 医疗/金融
+
+---
+
+### Bento Grid
+| 维度 | 评级 | 说明 |
+|------|------|------|
+| 性能 | ⭐⭐⭐⭐⭐ | CSS Grid 原生支持 |
+| 可访问性 | ⭐⭐⭐⭐ | 清晰的内容分区 |
+| 移动友好 | ⭐⭐⭐⭐ | 响应式堆叠 |
+| 转化率 | ⭐⭐⭐⭐⭐ | 信息层次清晰 |
+| 深色模式 | ⭐⭐⭐⭐⭐ | 通用 |
+| 浅色模式 | ⭐⭐⭐⭐⭐ | 通用 |
+
+**适用**: 仪表盘, 作品集, 功能展示
+**避免**: 线性内容流
+
+---
+
+### Cyberpunk
+| 维度 | 评级 | 说明 |
+|------|------|------|
+| 性能 | ⭐⭐⭐ | 发光效果有开销 |
+| 可访问性 | ⭐⭐ | 霓虹色可能刺眼 |
+| 移动友好 | ⭐⭐⭐ | 效果在小屏幕减弱 |
+| 转化率 | ⭐⭐⭐⭐ | 目标用户高参与度 |
+| 深色模式 | ⭐⭐⭐⭐⭐ | 必须深色 |
+| 浅色模式 | ⭐ | 不适用 |
+
+**适用**: 游戏, 科技, 娱乐
+**避免**: 企业, 医疗, 金融
+
+---
+
+## Minimal Styles
+
+### Minimalism
+| 维度 | 评级 | 说明 |
+|------|------|------|
+| 性能 | ⭐⭐⭐⭐⭐ | 最轻量 |
+| 可访问性 | ⭐⭐⭐⭐⭐ | 清晰简洁 |
+| 移动友好 | ⭐⭐⭐⭐⭐ | 完美适配 |
+| 转化率 | ⭐⭐⭐⭐ | 聚焦内容 |
+| 深色模式 | ⭐⭐⭐⭐⭐ | 通用 |
+| 浅色模式 | ⭐⭐⭐⭐⭐ | 通用 |
+
+**适用**: 任何项目
+**避免**: 需要强烈视觉冲击的场景
+
+---
+
+### Swiss Design
+| 维度 | 评级 | 说明 |
+|------|------|------|
+| 性能 | ⭐⭐⭐⭐⭐ | 纯排版驱动 |
+| 可访问性 | ⭐⭐⭐⭐⭐ | 网格系统清晰 |
+| 移动友好 | ⭐⭐⭐⭐ | 需要调整网格 |
+| 转化率 | ⭐⭐⭐⭐ | 专业可信 |
+| 深色模式 | ⭐⭐⭐⭐ | 适合 |
+| 浅色模式 | ⭐⭐⭐⭐⭐ | 经典效果 |
+
+**适用**: 企业, 出版, 专业服务
+**避免**: 休闲娱乐
+
+---
+
+## Bold Styles
+
+### Neo-Brutalism
+| 维度 | 评级 | 说明 |
+|------|------|------|
+| 性能 | ⭐⭐⭐⭐⭐ | 简单效果 |
+| 可访问性 | ⭐⭐⭐⭐⭐ | 高对比度 |
+| 移动友好 | ⭐⭐⭐⭐ | 大按钮友好 |
+| 转化率 | ⭐⭐⭐⭐ | 吸引年轻用户 |
+| 深色模式 | ⭐⭐⭐⭐ | 需调整颜色 |
+| 浅色模式 | ⭐⭐⭐⭐⭐ | 最佳效果 |
+
+**适用**: 初创公司, 年轻品牌
+**避免**: 传统企业
+
+---
+
+## 快速选择指南
+
+### 按性能需求
+
+| 需求 | 推荐风格 |
+|------|----------|
+| 最高性能 | Minimalism, Swiss Design, Brutalism |
+| 中等性能 | Bento Grid, Neo-Brutalism, Flat Design |
+| 可接受性能开销 | Glassmorphism, Neumorphism |
+| 高端设备专用 | Cyberpunk, 3D Effects |
+
+### 按可访问性需求
+
+| 需求 | 推荐风格 |
+|------|----------|
+| WCAG AAA | Minimalism, Swiss Design |
+| WCAG AA | Brutalism, Bento Grid, Flat Design |
+| 需要额外注意 | Glassmorphism, Neumorphism |
+| 特定用户群 | Cyberpunk, Vaporwave |
+
+### 按转化率优化
+
+| 目标 | 推荐风格 |
+|------|----------|
+| 通用高转化 | Minimalism, Bento Grid |
+| 年轻用户 | Neo-Brutalism, Cyberpunk |
+| 专业用户 | Swiss Design, Corporate Modern |
+| 创意用户 | Brutalism, Maximalism |
+
+---
+
+## 风格组合建议
+
+### 安全组合
+- Minimalism + Glassmorphism 卡片
+- Bento Grid + Neumorphism 按钮
+- Swiss Design + 微妙动画
+
+### 大胆组合
+- Brutalism + 霓虹色彩
+- Cyberpunk + Glassmorphism
+- Neo-Brutalism + 3D 元素
+
+### 避免组合
+- Neumorphism + Brutalism (哲学冲突)
+- Minimalism + Maximalism (除非刻意对比)
+- 多种"响亮"风格叠加