frontend-design

这项技能旨在指导你创建独具特色、达到生产级水准的前端界面，避免千篇一律的“AI 垃圾感”美学。编写真正可用的代码，并格外注重美学细节与创意选择。

用户会提供前端需求：要构建的组件、页面、应用或界面。他们也可能会补充用途、受众或技术限制等背景信息。

设计思路

开始编码前，先理解背景，并选定一个大胆鲜明的美学方向：

• 目的：这个界面要解决什么问题？谁会使用它？
• 基调：选择一种极端风格：极致极简、极繁混乱、复古未来主义、有机自然、奢华精致、俏皮玩具感、编辑杂志风、粗野原始、装饰艺术／几何风、柔和粉彩、工业实用主义等。可供选择的风格数不胜数。把这些风格作为灵感，但最终设计要忠于选定的美学方向。
• 限制：技术要求（框架、性能、无障碍）。
• 差异化：怎样才能让人难以忘怀？人们会记住它的哪一点？

至关重要：选定清晰的概念方向，并精准贯彻。大胆繁复和精致极简都行得通——关键在于有意识地设计，而非追求强烈的视觉效果。

然后编写可用的代码（HTML/CSS/JS、React、Vue 等），要求：

• 达到生产级水准且功能完善
• 视觉醒目、令人难忘
• 风格统一，具有鲜明的美学主张
• 每个细节都经过细致打磨

前端美学指南

重点关注：

• 字体排印：选择优美、独特、有趣的字体。避免 Arial 和 Inter 等常见字体，改用能提升前端美感的别具一格的字体；选择出人意料、富有个性的字体。将独特的展示字体与精致的正文字体搭配使用。
• 色彩与主题：坚持统一的美学风格。使用 CSS 变量保持一致性。鲜明的主色搭配醒目的强调色，胜过犹豫不决、平均分配的调色板。
• 动效：通过动画实现视觉效果和微交互。HTML 优先使用纯 CSS 方案；React 项目可用时使用 Motion 库。聚焦高影响力的时刻：通过错落出现（animation-delay）精心编排一次页面加载动画，比零散的微交互更令人愉悦。加入滚动触发效果和出人意料的悬停状态。
• 空间构图：采用出人意料的布局、不对称、重叠、对角线流动、打破网格的元素，以及大面积留白或经过控制的密集布局。
• 背景与视觉细节：营造氛围与层次，而非默认使用纯色。添加符合整体美学的情境效果与纹理。运用富有创意的形式，例如渐变网格、噪点纹理、几何图案、多层透明效果、戏剧化阴影、装饰边框、自定义光标和颗粒叠加效果。

绝不要采用千篇一律的 AI 生成美学，例如过度使用的字体家族（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（尤其是白底紫色渐变）、可预测的布局和组件模式，以及缺乏情境特色的模板化设计。

发挥创意，做出出人意料、真正经过设计的选择，并贴合具体情境。每个设计都应有所不同。尝试切换明暗主题、不同字体和不同美学风格。绝不要在不同生成结果中反复采用常见选择（例如 Space Grotesk）。

重要：让实现复杂度与美学构想相匹配。繁复设计需要复杂代码，以及丰富的动画和效果；极简或精致设计则需要克制、精准，并仔细处理间距、字体排印和细微之处。优雅源自对构想的出色贯彻。

请记住：Claude 能够创作非凡的作品。大胆放手，跳出常规思维，全情投入，展现真正的创作潜力。

常见设计问题

字体排印问题

问题：字体选择过于普通（Inter、Arial、Roboto） 解决方案：使用 Google Fonts 中别具特色的字体搭配或自定义字体。例如，将展示字体（Playfair Display、Bebas Neue、Archivo Black）与精致的正文字体（Source Serif、Crimson Text、Work Sans）搭配使用。

问题：层次不清晰，可读性差 解决方案：使用 CSS 变量建立明确的字号比例。通过字号、字重和间距营造视觉层次。

色彩与主题问题

问题：配色方案陈旧（白底紫色渐变） 解决方案：选择大胆且符合语境的配色。使用 CSS 变量保持一致性。可以考虑：单色搭配一种强调色、高对比度粗野主义风格、柔和的大地色调、鲜艳的互补色组合。

问题：对比度过低，影响可访问性 解决方案：确认颜色对比度符合 WCAG AA 标准（正文文本为 4.5:1，大号文本为 3:1）。使用 WebAIM Contrast Checker 等工具。

布局问题

问题：布局千篇一律、缺乏变化 解决方案：尝试不对称布局、元素重叠、对角线布局和突破网格的组件。灵活运用 CSS Grid 和 Flexbox。

问题：响应式断点失效 解决方案：在 320px、768px、1024px、1440px 下进行测试。使用流式排版（clamp()）和容器查询。

动画问题

问题：动画过多或令人突兀 解决方案：使用微妙且有明确目的的动画。尊重 prefers-reduced-motion 设置。专注于精心编排的页面加载效果，而不是分散的微交互。

问题：动画导致性能问题 解决方案：优先使用 CSS 动画，而非 JavaScript。使用 transform 和 opacity（由 GPU 加速）。避免为 width、height、top、left 添加动画。

可访问性违规

问题：缺少键盘导航 解决方案：确保所有交互元素都可通过键盘访问。添加清晰可见的焦点状态。

问题：HTML 语义不佳 解决方案：使用语义标签（<nav>、<main>、<article>、<section>）。在需要时添加 ARIA 标签。

问题：图片缺少 alt 文本 解决方案：为图片添加描述性 alt 文本。装饰性图片使用空 alt（alt=""）。

设计验证清单

完成设计后，请检查：

视觉质量

• 颜色对比度符合 WCAG AA 标准（正文文本为 4.5:1）
• 字体排印别具特色且易于阅读
• 视觉层次清晰（标题、正文、强调元素）
• 设计具有明确的美学方向（不流于普通）
• 间距和对齐方式保持一致
• 不存在过度使用的 AI 设计模式（紫色渐变、Inter 字体等）

响应式设计

• 已在移动端断点（320px-480px）进行测试
• 已在平板端断点（768px-1024px）进行测试
• 已在桌面端断点（1440px+）进行测试
• 所有尺寸下的文本均易于阅读
• 图片和媒体内容均按比例缩放
• 小屏幕上没有水平滚动

可访问性

• 所有交互元素均可通过键盘访问
• 焦点状态清晰可见
• 全文使用语义化 HTML
• 图片均有 alt 文本
• 颜色并非唯一的指示方式（方便色盲用户）
• 动画尊重 prefers-reduced-motion 设置

性能

• 动画使用由 GPU 加速的属性（transform、opacity）
• 动画不会导致布局抖动
• 图片已优化（WebP、尺寸设置恰当）
• 字体加载效率良好（font-display: swap）
• 内联关键 CSS，以加快首次绘制

代码质量

• 使用 CSS 变量，确保主题风格一致
• 类名简洁且具有语义
• 没有硬编码的神奇数字
• 注释说明了复杂决策
• 无 JavaScript 时也能正常工作（渐进增强）

浏览器兼容性

• 已在 Chrome/Edge（Chromium）中测试
• 已在 Firefox 中测试
• 已在 Safari（WebKit）中测试
• 为现代 CSS 特性（Grid、clamp 等）提供回退方案

测试设计

视觉测试

# Test responsive breakpoints
# Open browser DevTools → Toggle device toolbar
# Test at: 320px, 768px, 1024px, 1440px, 1920px

可访问性测试

# Check color contrast
# Use WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/

# Test keyboard navigation
# Tab through all interactive elements
# Verify visible focus states
# Test with screen reader (VoiceOver on Mac, NVDA on Windows)

性能测试

# Open browser DevTools → Performance tab
# Record page load and interactions
# Look for layout shifts (CLS)
# Verify animations run at 60fps
# Check for memory leaks with long animations

跨浏览器测试

• Chrome/Edge：主要测试
• Firefox：验证 CSS Grid/Flexbox 行为
• Safari：测试 WebKit 特有问题
• 移动浏览器：测试触控交互和视口