frontend-design

Frontend Design (高级前端设计)

Frontend Design 技能致力于创建极具辨识度、生产级且具备高审美水准的前端界面。本技能不仅生成可运行的代码，更融入了深厚的“设计思维”，坚决避免平庸的、流水线式的“AI 塑料感”审美，助力开发者打造令人难忘的数字体验。

安装与使用建议

# 无需安装，此为指导性技能
# 在启动 Web Artifact 或前端页面开发前激活

设计思维 (Design Thinking)

在编写代码之前，必须先确定一个 大胆且明确 的审美方向：

• 明确目的 (Purpose)：该界面解决什么问题？受众是谁？是极客工具、奢侈品电商还是艺术展示？
• 选定基调 (Tone)：在极端之间做选择 —— 绝对简约 (Brutally Minimal)、极致主义混乱 (Maximalist Chaos)、复古未来主义 (Retro-futuristic)、有机自然感 (Organic/Natural)、高级精致感 (Luxury/Refined)、玩具感 (Playful/Toy-like)、杂志排版感 (Editorial/Magazine)、新粗犷主义 (Neo-brutalism)。
• 约束边界 (Constraints)：框架要求（React/Vue）、性能阈值、无障碍 (Accessibility) 标准。
• 差异化点 (Differentiation)：什么是该页面的“灵魂”？是一个独特的转场动画、一种从未见过的网格布局，还是极具张力的排版？

关键原则：无论选择哪种风格，执行必须精准。简约不代表简陋，繁复不代表杂乱。意图比强度更重要。

核心能力 / Core Capabilities

1. 突破常规的排版系统 (Advanced Typography)

• 操作步骤：
  1. 放弃 Arial, Inter, Roboto 等通用字体。
  2. 寻找具备性格的字体对：一个极具冲击力的标题字（Display Font）搭配一个极致可读的正文字（Body Font）。
  3. 利用 clamp() 函数实现流式排版（Fluid Typography），确保在任何屏幕上都具备完美的节奏感。
• 最佳实践：使用超大字号作为背景装饰，或尝试垂直/斜向排版。

2. 深度质感与氛围营造 (Atmosphere & Texture)

• 操作步骤：
  1. 放弃纯色背景。
  2. 使用 CSS 渐变网格 (Gradient Meshes)、噪点纹理 (Noise Textures)、几何图案层叠或磨砂玻璃 (Glassmorphism) 效果。
  3. 应用动态光影：利用 box-shadow 的多层堆叠模拟真实的物理深度。
• 最佳实践：添加一个轻微的 grain 滤镜覆盖全页面，消除数码冰冷感。

3. 高级动效与交互微调 (Motion & Micro-interactions)

• 操作步骤：
  1. 优先使用 CSS 动画实现轻量级效果。
  2. 对于复杂交互，引入 Framer Motion (React) 或 GSAP。
  3. 实施“交错揭示” (Staggered Reveals)：通过 animation-delay 让页面加载具备电影感。
• 最佳实践：关注鼠标指针的交互（Custom Cursor）和滚动联动（Scroll-triggering）。

4. 响应式与无障碍闭环 (Responsive & A11y)

• 操作步骤：
  1. 利用容器查询 (Container Queries) 实现更智能的组件自适应。
  2. 严格遵守 WCAG 2.1 对比度标准，确保美观的同时兼顾可用性。
  3. 优化 LCP (最大内容绘制) 和 CLS (累积布局偏移)。

常用命令/模板 / Common Patterns

前端开发任务描述模板 (Project Blueprint)

### 🎨 审美提案 (Aesthetic Pitch)
- **风格**: 新粗犷主义 (Neo-brutalism)
- **核心色**: #FFD600 (高饱和黄) + #000000 (粗边框)
- **字体**: `Clash Display` (标题) + `JetBrains Mono` (正文)

### 🛠️ 技术栈
- React + Tailwind CSS + Framer Motion
- 布局: 12-column Grid, 非对称偏移

### 🌟 记忆点 (The Hook)
- 所有的卡片在悬浮时会产生一个偏移的硬阴影，模拟物理纸张的层叠感。