frontend-design

name: frontend-design
description: 创建具有独特风格、生产级品质的前端界面，追求高设计水准。在用户要求构建 Web 组件、页面、制品、海报或应用程序时使用此技能（例如网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或需要对任何 Web UI 进行样式化/美化时）。生成富有创意、代码精良且 UI 设计独特的成果，避免使用千篇一律的 AI 审美风格。
license: Complete terms in LICENSE.txt

本技能指南用于创建独具特色的生产级前端界面，避免使用那种千篇一律的"AI垃圾审美"。请实现真实可用的代码，并对美学细节和创意选择给予超乎寻常的关注。

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

设计思维

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

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

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

然后，实现一个可运行的代码（HTML/CSS/JS、React、Vue等），它必须：

• 达到生产级水准且功能完备
• 视觉上引人注目且令人难忘
• 具有清晰美学观点的一致性设计
• 每个细节都经过精雕细琢

前端美学指南

重点关注：

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

永远不要使用通用的AI生成美学，比如过度使用的字体族（Inter, Roboto, Arial, 系统字体）、陈词滥调的配色方案（特别是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏上下文特定特征的模板化设计。

进行创造性诠释，并做出那些感觉真正为上下文而设计、出人意料的选择。每次设计都不应雷同。在浅色和深色主题、不同字体、不同美学风格之间变化。切勿在不同的生成结果中趋同于常见的选项（例如Space Grotesk）。

重要：将实现的复杂度与美学愿景相匹配。极繁主义设计需要带有广泛动画和效果的精心代码。极简或精致的设计则需要克制、精确，并对间距、排版和微妙细节给予细致关注。优雅来自于完美地执行愿景。

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