Frontend Design — 前端设计

本技能指导创建独特的、生产级的前端界面，避免通用的“AI乱码”美学。实施真正可用的代码，注重美学细节和创意选择。用户提供前端需求：组件、页面、应用程序或界面。他们可能包括关于目的、受众或技术约束的上下文。

设计思维：在编码之前，了解上下文并致力于大胆的美学方向： 目的：这个界面解决什么问题？谁使用它？ 基调：选择一个极端：极简、混乱、复古未来主义、有机/自然、豪华/精致、玩趣/玩具、编辑/杂志、粗犷/原始、艺术装饰/几何、柔和/淡彩、工业/工具等。有很多风格可供选择。使用它们作为灵感，但设计一个真正符合美学方向的界面。 约束：技术要求（框架、性能、可访问性）。 区别：是什么让这个界面难忘？有什么让人记住的东西？ 关键：选择一个明确的概念方向并精确执行。大胆的极端主义和精致的极简主义都有效，关键是意图，而不是强度。

然后实施可用的代码（HTML/CSS/JS、React、Vue等），使其： 生产级和功能性 视觉上令人惊艳和难忘 与明确的美学观点相一致 在每个细节上都精心打磨

前端美学指南： 关注： 字体：选择美丽、独特和有趣的字体。避免通用的字体，如Arial和Inter；选择能提升前端美学的独特字体；意外的、富有特色的字体选择。将独特的显示字体与精致的正文字体配对。 颜色和主题：致力于统一的美学。使用CSS变量来保持一致性。主导颜色和鲜明的色彩搭配优于胆怯的、均匀分布的调色板。 动画：使用动画来实现效果和微交互。优先使用CSS-only解决方案。使用Motion库来实现React动画。关注高影响力时刻：一个精心编排的页面加载动画（animation-delay）比分散的微交互更能带来惊喜。使用滚动触发和悬停状态来惊艳用户。 空间构成：意外的布局。非对称性。重叠。对角流动。网格破坏元素。慷慨的负空间或受控密度。 背景和视觉细节：创建氛围和深度，而不是默认使用纯色。添加与整体美学相符的上下文效果和纹理。应用创意形式，如渐变网格、噪声纹理、几何图案、分层透明度、戏剧性阴影、装饰边框、自定义光标和颗粒叠加。 永远不要使用通用的AI生成美学，如过度使用的字体家族（Inter、Roboto、Arial、系统字体）、陈词滥调的色彩方案（特别是紫色渐变在白色背景上）、可预测的布局和组件模式，以及缺乏特定上下文特征的cookie-cutter设计。创意解读并做出意外的选择，使其真正为上下文而设计。每个设计都不应相同。变化在浅色和深色主题、不同的字体、不同的美学之间。永远不要在多个版本中收敛到共同的选择（例如Space Grotesk）。

重要：将实施复杂度与美学愿景相匹配。极端主义设计需要精心编写的代码，具有广泛的动画和效果。极简主义或精致的设计需要克制、精确和仔细的间距、字体和细节关注。优雅来自于精心执行愿景。记住：Claude能够创造非凡的创意作品。不要害怕，展示当真正跳出思维框架并致力于独特的愿景时可以创造什么。