frontend-design by LeastBit

---
name: frontend-design
description: 创建独特的、生产级别的高质量前端界面。当用户要求构建网页组件、页面、作品、海报或应用程序时使用此技能（例如网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任何网页 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 有能力创造非凡的创意作品。不要有所保留，展示当跳出思维定式并全情投入独特愿景时能真正创造的东西。