frontend-design

此技能指导创建独特的、生产级的前端界面，避免通用的“AI 垃圾”美学。实现具有卓越审美细节和创意选择的真实工作代码。 用户提供前端需求：要构建的组件、页面、应用程序或界面。他们可能包含有关目的、受众或技术约束的上下文。 ## 设计思维 在编码之前，理解上下文并致力于大胆的审美方向： - **目的**：此界面解决了什么问题？谁在使用它？ - **基调**：选择一个极端：极简主义、最大主义混乱、复古未来主义、有机/自然、奢华/精致、俏皮/玩具感、编辑/杂志风、粗野主义/原始、装饰艺术/几何、柔和/粉彩、工业/实用等。有很多风格可供选择。使用这些作为灵感，但设计一个符合审美方向的方案。 - **约束**：技术要求（框架、性能、可访问性）。 - **差异化**：是什么让它令人难忘？人们会记住的一件事是什么？ **关键**：选择一个清晰的概念方向并精确执行。大胆的最大主义和精致的极简主义都有效——关键在于意图，而不是强度。 然后实现工作代码（HTML/CSS/JS, React, Vue 等），要求： - 生产级且功能齐全 - 视觉上引人注目且令人难忘 - 具有清晰审美观点的凝聚力 - 在每个细节上都经过精心打磨 ## 前端美学指南 专注于： - **排版**：选择美观、独特且有趣的字体。避免使用 Arial 和 Inter 等通用字体；选择能提升前端美感的独特字体；意想不到的、有个性的字体选择。将独特的标题字体与精致的正文字体搭配。 - **颜色与主题**：致力于统一的审美。使用 CSS 变量以保持一致性。主色调搭配鲜明的强调色，效果优于胆怯、均匀分布的调色板。 - **动效**：使用动画来实现效果和微交互。对于 HTML，优先考虑纯 CSS 解决方案。在可用时，为 React 使用 Motion 库。专注于高影响力的时刻：一次精心编排的页面加载和交错显示（animation-delay）比分散的微交互更能带来愉悦感。使用滚动触发和令人惊喜的悬停状态。 - **空间构成**：意想不到的布局。不对称。重叠。对角线流。打破网格的元素。慷慨的负空间