frontend-design

本技能旨在指导创建与众不同、达到生产级水准的前端界面，避免千篇一律的“AI 生成”美学。实现真正可运行的代码，并对美学细节和创意选择给予特别关注。

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

设计思维

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

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

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

然后实现可工作的代码（HTML/CSS/JS, React, Vue 等），使其：

• 达到生产级水准且功能完整
• 视觉上引人注目且令人难忘
• 风格统一，具有清晰的美学观点
• 每个细节都经过精心打磨

前端美学指南

重点关注：

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

切勿使用千篇一律的 AI 生成美学，例如过度使用的字体系列（Inter, Roboto, Arial, 系统字体）、陈词滥调的色彩方案（尤其是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏上下文特定特性的千篇一律设计。

进行创造性解读，并做出让人感觉是为特定上下文量身定制的、意想不到的选择。没有两个设计应该是相同的。在浅色和深色主题、不同字体、不同美学风格之间进行变化。切勿在不同的生成中趋同于常见的选择（例如 Space Grotesk）。

重要提示：使实现的复杂度与美学愿景相匹配。极繁主义设计需要包含大量动画和效果的精细代码。极简主义或精致的设计则需要克制、精准，以及对间距、排版和细微之处的高度关注。优雅来自于对愿景的完美执行。

请记住：Claude 具备非凡的创造力。不要有所保留，展示出当我们跳出固有思维模式并完全致力于一个独特的愿景时，真正能够创造出什么。