name: 前端设计
description: 创建具有高设计品质、独特且可用于生产环境的前端界面。当用户要求构建网页组件、页面或应用时使用此技能。生成富有创意、精致的代码，避免通用的人工智能美学。
license: 完整条款见 LICENSE.txt
本技能指导创建独特且可用于生产环境的前端界面，避免通用的“AI 垃圾”美学。实现真正可工作的代码，并特别关注美学细节和创意选择。
用户提供前端需求：需要构建的组件、页面、应用或界面。他们可能包含关于目的、受众或技术限制的背景信息。
在编码之前，理解背景并确定一个大胆的美学方向：
- 目的：这个界面解决了什么问题？谁在使用它？
- 基调：选择一个极端风格：极致简约、混乱的极繁主义、复古未来风、有机/自然风、奢华/精致风、趣味/玩具风、编辑/杂志风、粗野主义/原始风、装饰艺术/几何风、柔和/粉彩风、工业/实用风等。有太多风格可供选择。用这些作为灵感，但设计出符合美学方向的作品。
- 限制：技术要求（框架、性能、可访问性）。
- 差异化：什么让这个界面令人难忘？人们会记住哪一点？
关键：选择一个清晰的概念方向，并精确地执行它。大胆的极繁主义和精致的极简主义都有效——关键在于意图，而非强度。
然后实现可工作的代码（HTML/CSS/JS、React、Vue 等），要求：
- 可用于生产环境且功能完善
- 视觉上引人注目且令人难忘
- 具有清晰美学观点且风格统一
- 每个细节都经过精心打磨
重点关注：
- 排版：选择美观、独特且有趣的字体。避免使用 Arial、Inter 等通用字体；选择能提升前端美感的独特字体；使用出人意料、富有特色的字体选择。将独特的展示字体与精致的正文字体配对使用。
- 色彩与主题：坚持统一的美学风格。使用 CSS 变量确保一致性。大胆的主色调搭配鲜明的点缀色，胜过谨慎、均匀分布的调色板。
- 动效：使用动画实现效果和微交互。对于 HTML，优先使用纯 CSS 解决方案。对于 React，在可用时使用 Motion 库。聚焦于高影响力时刻：一个精心编排的页面加载效果（使用错开显示和 animation-delay）比零散的微交互更能带来愉悦感。使用滚动触发和悬停状态来制造惊喜。
- 空间构成：出人意料的布局。不对称。重叠。对角线流。打破网格的元素。充裕的负空间或受控的密度。
- 背景与视觉细节：营造氛围和深度，而不是默认使用纯色。添加与整体美学匹配的情境效果和纹理。应用创意形式，如渐变网格、噪点纹理、几何图案、分层透明度、戏剧性阴影、装饰性边框、自定义光标和颗粒叠加。
绝不使用通用的人工智能生成美学，例如：过度使用的字体家族（Inter、Roboto、Arial、系统字体）、陈词滥调的色彩方案（尤其是白底紫色渐变）、可预测的布局和组件模式，以及缺乏特定情境特色的千篇一律的设计。
创造性地解读，并做出出人意料的选择，使其感觉真正为特定情境而设计。每个设计都应不同。在明暗主题、不同字体、不同美学风格之间变化。绝不在不同生成中趋同于常见选择（例如 Space Grotesk）。
重要：使实现复杂度与美学愿景相匹配。极繁主义设计需要精心设计的代码，包含丰富的动画和效果。极简主义或精致设计则需要克制、精确，并仔细关注间距、排版和细微细节。优雅来自于对愿景的良好执行。
记住：Claude 能够完成非凡的创意工作。不要退缩，展示当跳出思维定式并完全致力于一个独特愿景时，真正能够创造出什么。