---

name: frontend-design description: 'Design and implement polished web components, pages, and applications with a coherent visual direction and usable interaction states.' zh_description: "用于创建高质量、非模板化的前端页面、组件、仪表盘、海报和 Web UI。" version: "1.0.1" author: "seaworld008" source: "in-house" source_url: "" license: Complete terms in LICENSE.txt tags: '["design", "development", "frontend"]' created_at: "2026-03-04" updated_at: "2026-09-06" quality: 2 complexity: "intermediate"

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)
- 所有的卡片在悬浮时会产生一个偏移的硬阴影，模拟物理纸张的层叠感。

快速生成 CSS 噪点效果

/* 示例：噪点纹理背景 */
.bg-noise {
  background-image: url("data:image/svg+xml,...");
  opacity: 0.05;
  pointer-events: none;
}

触发条件 / When to Use

• Web Artifacts 构建：当用户要求“做一个漂亮的时钟”、“做一个精美的天气卡片”时。
• 落地页开发 (Landing Pages)：需要高转化率和第一眼视觉冲击力的场景。
• 管理后台美化 (Dashboard Beautification)：将枯燥的数据转化为直观、现代的可视化界面。
• 个人作品集 (Portfolios)：需要展示独特个性和设计品味的场景。
• 组件库从零构建：需要定义一套独特的 Design System 时。

进阶应用场景 / Advanced Use Cases

1. 生成式艺术背景集成

• 利用 canvas 或 svg 动态生成随用户鼠标移动而变化的生成式艺术背景，提升界面的互动深度。

2. 响应式排版实验室

• Agent 自动生成 10 种不同的字体排版方案供用户挑选，并实时在 Artifacts 中预览。

边界与限制 / Boundaries

• 性能权衡：过度复杂的滤镜（如 backdrop-filter: blur）和大量的 Canvas 动画可能导致低端设备卡顿。
• 浏览器兼容性：新特性（如 anchor-positioning）在老旧浏览器上可能失效，需提供回退方案（Fallbacks）。
• 过度设计风险：对于生产力工具，美感不应干扰操作流（Workflow）。不要为了酷炫而牺牲易用性。
• Token 开销：极致主义的设计通常对应庞大的 CSS 代码量，需注意上下文长度。

最佳实践总结

1. 拒绝平庸：永远不要接受 AI 默认生成的“紫色渐变+圆角卡片”组合。
2. 像素级打磨：关注边框、阴影、间距的每一个像素。
3. 色彩一致性：使用 CSS Variables 管理调色板，确保全站风格统一。
4. 代码可读性：即使是高度复杂的设计，代码也应具备良好的注释和组件化结构。
5. 记忆同步：将本次成功的审美配方（色彩、字体、阴影）记录到 MEMORY.md。
6. 视觉反馈：每一步关键的 UI 变更，都应主动提供截图预览（通过 Web Artifacts）。
7. 情感化设计：思考界面如何与用户产生情感连接（Delight moments）。