frontend-designlisted

此技能指导创建独特的、生产级前端界面，避免千篇一律的 AI 审美。实现真正可工作的代码，注重美学细节和创意选择。 用户提供前端需求：要构建的组件、页面、应用程序或界面。可能包含关于目的、受众或技术约束的上下文。 ## 设计思维 在编码之前，理解上下文并确定一个大胆的审美方向： - **目的**：此界面解决什么问题？谁使用它？ - **风格**：选择一个极端：极致简约、极繁主义、复古未来主义、有机/自然、奢华/精致、玩具/趣味、编辑/杂志、野性/原始、艺术装饰/几何、柔和/淡色、工业/实用，等等。有很多风格可以选择。以此为灵感，但要设计一个符合审美方向的真实方案。 - **约束**：技术要求（框架、性能、可访问性）。 - **差异化**：什么让它令人难忘？人们会记住的一件事是什么？ **关键**：选择一个清晰的概念方向并精确执行。大胆的极繁主义和精致的极简主义都可以——关键是有意的设计，而非强度。 然后实现可工作的代码（HTML/CSS/JS、React、Vue 等），这些代码： - 生产级且功能正常 - 视觉醒目且令人难忘 - 具有清晰的审美观点 - 在每个细节上精心打磨 ## 前端审美指南 专注于： - **字体排版**：选择美观、独特、有趣的字体。避免通用字体如 Arial 和 Inter；选择能够提升前端美学的独特选择；意想不到的、富有特色的字体选择。将独特的展示字体与精致的正文字体搭配。 - **颜色与主题**：致力于一致的审美。使用 CSS 变量保持一致性。主色调搭配尖锐的点缀色优于胆怯的、均匀分布的配色方案。 - **动画**：使用动画效果和微交互。优先为 HTML 使用纯 CSS 解决方案。可用时为 React 使用 Motion 库。专注于高影响力时刻：一个编排良好的页面加载带有交错揭示（animation-delay）比分散的微交互创造更多愉悦。使用滚动触发和令人惊喜的悬停状态。 - **空间构图**：意想不到的布局。非对称。重叠。斜向流动。突破网格的元素。慷慨的留白或受控的密度。 - **背景与视觉细节**：创造氛围和深度，而不是默认纯色。添加符合整体审美的上下文效果和纹理。应用创意形式，如渐变网格、噪点纹理、几何图案、层叠透明度、戏剧性阴影、装饰边框、自定义光标和颗粒叠加。 永远不要使用通用的 AI 生成审美，如过度使用的字体系列（Inter、Roboto、Arial、系统字体）、老套的配色方案（尤其是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏上下文特定性的模板化设计。 富有创意地诠释和做出意想不到的选择，使其感觉是为上下文专门设计的。每个设计都应该不同。在浅色和深色主题、不同字体、不同审美之间变化。永远不要在迭代中趋同于常见选择（例如 Space Grotesk）。 **重要**：将实现复杂度与审美愿景匹配。极繁主义设计需要包含大量动画和效果的复杂代码。极简主义或精致的设计需要克制、精确，以及对间距、字体排版和微妙细节的精心关注。优雅来自于良好执行愿景。 记住：Claude 能够创造非凡的创意作品。不要退缩，展示当跳出框框并完全致力于独特愿景时能够真正创造什么。