name: 前端设计 description: 创建独特、生产级别的前端界面，具有高设计质量。当用户要求构建Web组件、页面或应用程序时使用此技能。生成创意、精美的代码，避免通用AI美学。 license: MIT
此技能指导创建独特、生产级别的前端界面，避免通用“AI垃圾”美学。实现真实可工作的代码，特别注重美学细节和创意选择。
用户提供前端需求：要构建的组件、页面、应用程序或界面。他们可能包括关于目的、受众或技术约束的上下文。
设计思维
在编码之前，理解上下文并承诺一个大胆的美学方向：
- 目的：这个界面解决什么问题？谁使用它？
- 基调：选择一个极端：极度简约、最大主义混乱、复古未来主义、有机/自然、奢华/精致、好玩/玩具式、编辑/杂志、粗野主义/原始、装饰艺术/几何、柔和/淡色、工业/实用主义等。有多种风格可选。用这些作为灵感，但设计一个忠实于美学方向。
- 约束：技术要求（框架、性能、可访问性）。
- 差异化：什么使这个界面令人难忘？人们会记住的一件事是什么？
关键：选择一个清晰的概念方向并精确执行。大胆的最大主义和精致的简约都有效——关键是意图性，而非强度。
然后实现可工作的代码（HTML/CSS/JS、React、Vue等），使其：
- 生产级别且功能齐全
- 视觉上引人注目且令人难忘
- 与清晰的美学观点协调一致
- 在每个细节上都精心优化
前端美学指南
关注：
- 排版：选择美丽、独特且有趣的字体。避免通用字体如Arial和Inter；选择提升前端美学的独特、意外、有特色的字体选择。配对一个独特的展示字体与精致的正文字体。
- 颜色与主题：承诺一个协调的美学。使用CSS变量以确保一致性。主导色与鲜明强调色优于胆怯、均匀分布的调色板。
- 动画：使用动画进行效果和微交互。优先使用纯CSS解决方案用于HTML。在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对比度检查器。
布局问题
问题：可预测、模板布局 解决方案：实验不对称、重叠元素、对角线流、打破网格的组件。创造性使用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=""）。
设计验证清单
创建设计后，验证：
视觉质量
- [ ] 颜色对比度满足WCAG AA标准（文本4.5:1）
- [ ] 排版独特且可读
- [ ] 视觉层次清晰（标题、正文、强调）
- [ ] 设计有清晰的美学方向（非通用）
- [ ] 间距和对齐一致
- [ ] 无过度使用的AI模式（紫色渐变、Inter字体等）
响应式设计
- [ ] 在移动断点（320px-480px）测试
- [ ] 在平板断点（768px-1024px）测试
- [ ] 在桌面断点（1440px+）测试
- [ ] 文本在所有尺寸下保持可读
- [ ] 图像和媒体适当缩放
- [ ] 小屏幕上无水平滚动
可访问性
- [ ] 所有交互元素键盘可访问
- [ ] 焦点状态可见且清晰
- [ ] 整个使用语义HTML
- [ ] 图像有替代文本
- [ ] 颜色不是唯一指示器（为色盲用户）
- [ ] 动画尊重
prefers-reduced-motion
性能
- [ ] 动画使用GPU加速属性（
transform、opacity） - [ ] 无动画引起的布局抖动
- [ ] 图像优化（WebP、适当尺寸）
- [ ] 字体高效加载（font-display: swap）
- [ ] 关键CSS内联以加快首次绘制
代码质量
- [ ] 使用CSS变量进行主题一致性
- [ ] 清洁、语义类名
- [ ] 无硬编码魔术数字
- [ ] 注释解释复杂决策
- [ ] 无需JavaScript工作（渐进增强）
浏览器兼容性
- [ ] 在Chrome/Edge（Chromium）测试
- [ ] 在Firefox测试
- [ ] 在Safari（WebKit）测试
- [ ] 为现代CSS功能（Grid、clamp等）提供后备
测试你的设计
视觉测试
# 测试响应式断点
# 打开浏览器DevTools → 切换设备工具栏
# 测试：320px、768px、1024px、1440px、1920px
可访问性测试
# 检查颜色对比度
# 使用WebAIM对比度检查器：https://webaim.org/resources/contrastchecker/
# 测试键盘导航
# 通过所有交互元素Tab键导航
# 验证可见焦点状态
# 使用屏幕阅读器测试（Mac上的VoiceOver，Windows上的NVDA）
性能测试
# 打开浏览器DevTools → 性能标签
# 记录页面加载和交互
# 查找布局偏移（CLS）
# 验证动画以60fps运行
# 检查长动画的内存泄漏
跨浏览器测试
- Chrome/Edge：主要测试
- Firefox：验证CSS Grid/Flexbox行为
- Safari：测试WebKit特定问题
- 移动浏览器：测试触摸交互和视口