mty-frontend-design-zh

本技能指导创建独特、可用于生产的前端界面，避免千篇一律的「AI 风格」审美。实现真正可用的代码，并特别关注美学细节与创意选择。

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

设计思路#

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

• 目的：该界面解决什么问题？谁在使用？
• 调性：选择一种极致风格：极简、极繁、复古未来、有机自然、奢华精致、趣味玩具感、杂志编辑风、粗野主义、装饰艺术几何、柔和粉彩、工业实用主义等。用这些作为灵感，但设计出忠于所选美学方向的作品。
• 约束：技术要求（框架、性能、无障碍）。
• 差异化：什么让人 过目不忘？用户会记住的那一点是什么？

关键：选择清晰的概念方向并精准执行。大胆的极繁与克制的极简都可行——核心是刻意与意图，而非强度。

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

• 可用于生产、功能完整
• 视觉冲击力强、令人难忘
• 风格统一、有明确美学观点
• 细节打磨到位

前端美学指南#

关注：

• 字体：选择美观、独特、有趣的字体。避免 Arial、Inter 等通用字体；选择能提升前端美感的、有特色的字体；出其不意、有性格的字体搭配。将特色展示字体与精致正文字体搭配。
• 色彩与主题：坚持统一的美学。用 CSS 变量保证一致性。主色 + 鲜明点缀色优于 timid、均匀分布的配色。
• 动效：用动画做效果与微交互。HTML 优先用纯 CSS 方案。React 可用 Motion 库。聚焦高影响力时刻：一次编排得当的页面加载（staggered reveals、animation-delay）比零散的微交互更能带来愉悦。用滚动触发和 hover 状态制造惊喜。
• 空间与布局：非常规布局。不对称。重叠。斜向流动。打破网格的元素。大量留白或受控的密度。
• 背景与视觉细节：营造氛围与层次，而非默认纯色。添加与整体美学匹配的情境效果与纹理。运用渐变网格、噪点纹理、几何图案、分层透明、戏剧性阴影、装饰边框、自定义光标、颗粒叠加等创意形式。

禁止 使用通用 AI 审美：过度使用的字体（Inter、Roboto、Arial、系统字体）、陈词滥调的配色（尤其是白底紫渐变）、可预测的布局与组件模式、缺乏情境特色的套娃设计。

创造性解读并做出出人意料的选择，让设计真正贴合情境。每个设计都应不同。在明暗主题、不同字体、不同美学之间变化。 切勿 在多次生成中趋同于常见选择（例如 Space Grotesk）。

重要：实现复杂度要与美学愿景匹配。极繁设计需要更丰富的代码、大量动画与效果。极简或精致设计需要克制、精准，以及对方距、字体和细微细节的精心把控。优雅来自对愿景的良好执行。

记住：Claude 具备出色的创意能力。不要保守，充分展现跳出框架思考、全力投入独特愿景时能创造出的成果。