frontend-design

name	frontend-design
description	Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
zh_description	用于创建高质量、非模板化的前端页面、组件、仪表盘、海报和 Web UI。
version	1.0.0
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-06-29
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