frontend-design

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

用户提供前端需求：需要构建的组件、页面、应用程序或界面。他们可能会提供关于用途、目标受众或技术约束的背景信息。

设计思维

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

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

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

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

• 生产级别且功能完善
• 视觉冲击力强且令人难忘
• 具有清晰美学观点的整体协调性
• 每个细节都精雕细琢

前端美学指南

重点关注：

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

绝不使用千篇一律的 AI 生成审美，如过度使用的字体（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（尤其是白底紫色渐变）、可预测的布局和组件模式，以及缺乏情境特色的模板化设计。

创造性地诠释并做出出人意料的选择，让设计真正契合情境。没有两个设计应该雷同。在浅色和深色主题、不同字体、不同美学之间变换。绝不在多次生成中趋同于常见选择（例如 Space Grotesk）。

重要：让实现复杂度匹配美学愿景。极繁主义设计需要精心编写的代码，包含大量动画和效果。极简主义或精致设计需要克制、精准，并仔细关注间距、字体排版和微妙细节。优雅来自于对愿景的出色执行。

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