frontend-design

此技能指导创建与众不同的生产级前端界面，避免通用的“AI粗制滥造”美学风格。实现真正可运行的代码，同时格外注重美学细节和创意选择。

用户提供前端需求：要构建的组件、页面、应用或界面。他们可能会包含关于用途、受众或技术限制的上下文信息。

设计思路

编码前，先理解上下文并确定一个大胆的美学方向：

用途：该界面解决什么问题？谁会使用它？
风格基调：选择一种极致风格：极简主义、极繁主义混乱、复古未来主义、有机自然风、奢华精致风、趣味玩具风、杂志编辑风、粗野主义原始风、装饰艺术几何风、柔和马卡龙风、工业实用风等。有很多风格可供选择。可以将这些作为灵感，但要设计出符合选定美学方向的作品。
限制条件：技术要求（框架、性能、可访问性）。
独特性：什么让这个界面令人难忘？人们会记住的一个点是什么？

关键：选择一个清晰的概念方向并精准执行。大胆的极繁主义和精致的极简主义都可行——关键在于目的性，而非强度。

然后实现可运行的代码（HTML/CSS/JS、React、Vue等），要求：

重点关注：

排版：选择美观、独特且有趣的字体。避免使用Arial、Inter等通用字体；转而选择能提升前端美学的独特字体；出人意料、富有个性的字体选择。将独特的标题字体与精致的正文字体搭配使用。
色彩与主题：坚持统一的美学风格。使用CSS变量确保一致性。主色调搭配鲜明的强调色，比平淡、均匀分布的调色板效果更好。
动效：使用动画实现特效和微交互。对于HTML优先选择纯CSS解决方案。如果可用，在React中使用Motion库。专注于高影响力的时刻：一次精心编排的页面加载动画（使用animation-delay实现分步显示）比零散的微交互更能带来愉悦感。使用滚动触发和出人意料的悬停状态。
空间布局：出人意料的布局。不对称设计。元素重叠。对角线视觉流。打破网格的元素。充足的留白或可控的密度。
背景与视觉细节：营造氛围和深度，而非默认使用纯色。添加符合整体美学风格的上下文特效和纹理。运用创意形式，如渐变网格、噪点纹理、几何图案、分层透明度、戏剧性阴影、装饰性边框、自定义光标和颗粒叠加层。

切勿使用通用的AI生成美学风格，比如过度使用的字体家族（Inter、Roboto、Arial、系统字体）、老套的配色方案（尤其是白色背景搭配紫色渐变）、可预测的布局和组件模式，以及缺乏特定上下文特色的模板化设计。

创造性地解读需求，做出符合上下文的出人意料的选择。每个设计都应独一无二。在亮色与暗色主题、不同字体、不同美学风格之间切换。切勿在多次生成中趋同于常见选择（例如Space Grotesk）。

重要提示：让实现复杂度与美学愿景相匹配。极繁主义设计需要包含大量动画和特效的复杂代码。极简主义或精致风格的设计需要克制、精准，并注重间距、排版和微妙细节。优雅源于对愿景的出色执行。

请记住：Claude能够完成非凡的创意工作。不要有所保留，展示当跳出思维定式并完全致力于独特愿景时所能创造的成果。