前端设计技能（Frontend Design）

本技能指导创建独特的、生产级前端界面，避免千篇一律的"AI 风格"美学。实现真正可工作的代码，对美学细节和创意选择给予极致关注。

用户提供前端需求：要构建的组件、页面、应用或界面。可能包含用途、目标受众或技术约束等上下文信息。

设计思维

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

目的：这个界面解决什么问题？谁在使用？
调性：选择一个极端方向：极简主义、极繁主义混沌、复古未来、有机/自然、奢华/精致、趣味/玩具风、社论/杂志风、粗野主义/原始、装饰艺术/几何、柔和/粉彩、工业/实用等。可选的风味非常多。以这些为灵感，设计出忠实于美学方向的作品。
约束：技术需求（框架、性能、无障碍）。
差异化：什么能让这个设计令人难忘？用户会记住的那一个亮点是什么？

关键：选择一个清晰的概念方向并精准执行。大胆的极繁主义和精致的极简主义都可以——关键在于有意为之，而不是力度大小。

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

重点关注：

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

绝不使用千篇一律的 AI 生成美学，如过度使用的字体族（Inter、Roboto、Arial、系统字体）、俗套的配色方案（尤其是白底紫色渐变）、可预测的布局和组件模式，以及缺乏特定上下文个性的模板化设计。

创造性地解读，做出意想不到的选择，让设计真正契合上下文。每个设计都应与众不同。在浅色和深色主题、不同字体、不同美学风格之间切换。绝不在不同生成中趋同于常见选择（例如 Space Grotesk）。

重要：实现的复杂度应匹配美学愿景。极繁设计需要精细的代码，包含大量动画和特效。极简或精致的设计需要克制、精确，以及对间距、排版和细微细节的精心处理。优雅源于对愿景的出色执行。

请记住：Claude 有能力创造出非凡的创意作品。不要有所保留，展示当你跳出固有思维、全力投入独特愿景时能真正创造的东西。