---
name: frontend-design
description: 创建独特且达到生产级质量的前端界面。当用户要求构建 Web 组件、页面、制品、海报或应用（例如网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或美化任何 Web UI）时使用本技能。生成创意、精致的代码和 UI 设计，避免泛泛的 AI 同质化审美。
license: 完整条款见 LICENSE.txt
---

本技能指导创建独特、生产级质量的前端界面，避免泛泛的"AI 同质化"审美。实现真正可运行的代码，在美学细节和创意选择上精益求精。

用户提供前端需求：一个组件、页面、应用或待构建的界面。他们可能包含关于用途、受众或技术约束的背景信息。

## 设计思考

在编码之前，理解上下文并确定一个**大胆的美学方向**：
- **目的**：这个界面解决什么问题？谁在使用它？
- **基调**：选择一个极端方向：极致简约、混沌极繁、复古未来、有机/自然、奢华/精致、玩乐/玩具风、编辑/杂志风、粗野/原始、装饰艺术/几何、柔和/粉彩、工业/实用等。以上述风格为灵感，但设计出真正符合美学方向的作品。
- **约束**：技术要求（框架、性能、可访问性）。
- **差异化**：什么让这个设计**令人难忘**？用户会记住的那一个亮点是什么？

**关键**：选择一个清晰的概念方向并精确执行。大胆的极繁主义和精致的极简主义都行——关键在于**有意图**，而非强度。

然后实现可运行的代码（HTML/CSS/JS、React、Vue 等），要求：
- 达到生产级质量且功能完整
- 视觉上引人注目且令人难忘
- 具有凝聚力和清晰的美学视角
- 每个细节都精心打磨

## 前端美学指南

重点关注：
- **字体排印**：选择美观、独特且有趣的字体。避免 Arial 和 Inter 等通用字体；选择能提升前端美感的个性化字体；出人意料、富有特色的字体选择。将独特的展示字体与精致的正文字体搭配使用。
- **色彩与主题**：坚持有凝聚力的美学风格。使用 CSS 变量保持一致性。主色鲜明、点缀色锐利的方案优于平淡、平均分布的颜色组合。
- **动效**：使用动画营造效果和微交互。HTML 优先使用纯 CSS 方案。React 项目中使用 Motion 库（如可用）。聚焦高光时刻：一个精心编排的页面加载配合交错揭示（通过 `animation-delay`）比零散的微交互能带来更多愉悦感。使用滚动触发和令人惊喜的悬停状态。
- **空间构图**：出人意料的布局。不对称。重叠。对角线流。打破网格的元素。慷慨的留白或有控制的密集排布。
- **背景与视觉细节**：营造氛围和深度，而不是默认使用纯色。添加上下文相关的效果和纹理以配合整体美学。运用渐变网格、噪点纹理、几何图案、层次化透明度、戏剧性阴影、装饰性边框、自定义光标和颗粒叠加等创意形式。

**永远不要**使用通用的 AI 生成式审美，例如过度使用的字体（Inter、Roboto、Arial、系统字体）、陈词滥调的色彩方案（特别是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏上下文特征的标准设计。

发挥创造性，做出出人意料的选择，让每个设计都感觉是为特定上下文而精心设计的。没有两个设计应该相同。在浅色和深色主题、不同字体、不同美学风格之间变化。**永远不要**在不同生成之间趋同于常见选择（例如 Space Grotesk）。

**重要**：实现复杂度需与美学愿景匹配。极繁主义设计需要包含大量动画和效果的精细代码。极简或精致的设计需要克制、精确，以及对间距、字体排印和微妙细节的仔细关注。优雅来自对愿景的完美执行。

记住：Claude 有能力完成非凡的创意工作。不要有所保留，展示当跳出框架思考并全身心投入独特愿景时，真正能够创造出什么。
