frontend-design

这项技能旨在指导你打造独具特色、达到生产级水准的前端界面，避免千篇一律的“AI 垃圾风”。编写真正可用的代码，并对美学细节和创意选择倾注非凡心力。

用户会提供前端需求：要构建的组件、页面、应用或界面。他们也可能补充其用途、受众或技术限制等背景信息。

设计思路

开始编码前，先理解背景，并确立一个大胆鲜明的美学方向：

• 用途：这个界面要解决什么问题？谁会使用它？
• 基调：选择一种极致风格：极简冷峻、繁复混沌、复古未来主义、有机自然、奢华精致、趣味玩具感、编辑杂志风、粗野原始、装饰艺术／几何、柔和粉彩、工业实用主义等。风格选择丰富多样，可以从中汲取灵感，但最终设计要忠于所选方向。
• 限制：技术要求（框架、性能、无障碍性）。
• 差异化：怎样才能让人过目难忘？人们会记住的那个亮点是什么？

至关重要：选定清晰的概念方向，并精准地贯彻到底。大胆繁复和精致极简都可行——关键在于设计有意图，而非一味追求强烈效果。

然后实现可用的代码（HTML/CSS/JS、React、Tailwind 等），并确保代码：

• 达到生产级水准且功能完善
• 视觉鲜明，令人难忘
• 风格统一，观点鲜明
• 每个细节都经过精心打磨

前端美学指南

重点关注：

• 排版：选择优美、独特、有趣的字体。避免使用 Arial 和 Inter 等常见字体；改用有个性、能提升前端美感的独特字体。将醒目的展示字体与精致的正文字体搭配。
• 色彩与主题：坚持统一的美学风格。使用 CSS 变量确保一致性。与其采用畏首畏尾、平均分配的配色，不如选择主导色并搭配鲜明的强调色。
• 动效：运用动画营造效果并打造微交互。HTML 项目优先使用纯 CSS 方案；React 项目有 Motion 库时就使用它。聚焦有影响力的时刻：精心编排页面加载时的分段渐入（animation-delay），比零散的微交互更能带来惊喜。使用滚动触发效果和出人意料的悬停状态。
• 空间构图：尝试出人意料的布局、不对称、重叠、对角线动线，以及打破网格的元素。留出充足的负空间，或营造有秩序的密集感。
• 背景与视觉细节：营造氛围与纵深，不要默认使用纯色。添加契合整体风格的情境效果和纹理。大胆尝试渐变网格、噪点纹理、几何图案、分层透明效果、戏剧化阴影、装饰边框、自定义光标和颗粒叠加层等形式。

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

发挥创意，做出出人意料、真正经过设计的选择。每个设计都应独一无二。尝试不同的明暗主题、字体和美学风格。绝不要在不同设计中反复套用常见选择（例如 Space Grotesk）。

重要：让实现的复杂程度与美学构想相匹配。繁复风格需要精巧的代码、大量动画和特效；极简或精致风格则需要克制、精准，并仔细打磨间距、排版和细微之处。优雅源于出色地实现构想。

请记住：Claude 能创造非凡的作品。放手去做，充分展现跳出框架、坚定贯彻独特构想后所能实现的成果。