frontend-design

此技能指导创建独特、生产级的前端界面，避免通用的”AI垃圾”美学。实现真正可用的代码，对美学细节和创意选择给予非凡的关注。

用户提供前端需求：要构建的组件、页面、应用程序或界面。他们可能包括关于目的、受众或技术约束的上下文。

设计思维

在编码之前，理解上下文并致力于大胆的美学方向：

• 目的：此界面解决什么问题？谁使用它？
• 基调：选择一个极端：残酷极简、最大主义混乱、复古未来主义、有机/自然、奢华/精致、顽皮/玩具般、编辑/杂志、野兽派/原始、装饰艺术/几何、柔和/粉彩、工业/实用主义等。有太多风味可供选择。使用这些作为灵感，但设计一个真正符合美学方向的。
• 约束：技术要求（框架、性能、可访问性）。
• 差异化：什么让它令人难忘？有一件事某人会记住？

关键：选择清晰的概念方向并精确执行。大胆的最大主义和精致的极简主义都有效——关键是有意性，而不是强度。

然后实现可用的代码（HTML/CSS/JS、React、Vue等），它是：

• 生产级和功能性的
• 视觉上引人注目和难忘的
• 具有清晰美学观点的连贯性
• 在每个细节上精心精炼

前端美学指南

专注于：

• 排版：选择美丽、独特和有趣的字体。避免通用字体如Arial和Inter；选择提升前端美学的独特选择；意想不到的、有性格的字体选择。将独特的显示字体与精致的正文字体配对。
• 颜色和主题：致力于连贯的美学。使用CSS变量以保持一致性。具有鲜明强调色的主导颜色胜过胆怯、均匀分布的调色板。
• 运动：使用动画进行效果和微交互。对于HTML，优先使用仅CSS解决方案。对于React，在可用时使用Motion库。专注于高影响力的时刻：一个精心编排的页面加载，带有交错显示（animation-delay）比分散的微交互创造更多乐趣。使用令人惊讶的滚动触发和悬停状态。
• 空间构图：意想不到的布局。不对称。重叠。对角线流动。打破网格的元素。慷慨的负空间或受控的密度。
• 背景和视觉细节：创造氛围和深度，而不是默认为纯色。添加与整体美学匹配的上下文效果和纹理。应用创意形式，如渐变网格、噪点纹理、几何图案、分层透明度、戏剧性阴影、装饰边框、自定义光标和颗粒叠加。

绝不使用通用的AI生成美学，如过度使用的字体系列（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（特别是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏特定上下文特征的千篇一律的设计。

创造性地解释并做出感觉真正为上下文设计的意想不到的选择。没有设计应该是相同的。在浅色和深色主题、不同字体、不同美学之间变化。绝不在几代中收敛于常见选择（例如，Space Grotesk）。

重要：将实现复杂性与美学愿景相匹配。最大主义设计需要具有广泛动画和效果的精心代码。极简主义或精致设计需要克制、精度和对间距、排版和微妙细节的仔细关注。优雅来自于很好地执行愿景。

记住：Claude能够做出非凡的创意工作。不要退缩，展示当跳出思维定式并完全致力于独特愿景时可以真正创造什么。