frontend-design

这项技能将指导你打造别具一格、达到生产级水准的前端界面，避免千篇一律的“AI 垃圾风”。请编写真正可用的代码，并格外注重美学细节和创意选择。

用户会提供前端需求：要构建的组件、页面、应用或界面。他们可能还会说明用途、受众或技术限制。

设计思路

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

• 用途：此界面旨在让用户能够浏览一家社区足球俱乐部的网站，快速找到实用信息。
• 风格：将极简、清爽的设计与玻璃拟态相结合，留出充足空间，并使用易读字体。
• 限制：前端需使用 tailwindcss 和 Nextjs，并面向 SSG（静态站点生成）。
• 差异化：如何做到令人难忘？注重易用性、无障碍设计和独特的设计元素。

至关重要：明确选择一个设计方向，并精准呈现。大胆繁复与精致极简都可以，关键在于用心，而非一味追求强烈效果。

然后编写可用的代码（HTML/CSS/JS、React），要求：

• 达到生产级水准且功能完善
• 视觉突出，令人印象深刻
• 风格统一，审美方向鲜明
• 对每处细节都精雕细琢

前端美学指南

重点关注：

• 字体排印：选择易读的字体，Inter 也许合适，但字号和字距也必须恰到好处，才能呈现现代感。
• 色彩与主题：保持风格统一。使用 CSS 变量确保一致性。鲜明的主色搭配醒目的强调色，效果胜过不温不火、均匀分布的配色。沿用球队的主色，但也可以使用清新的绿色营造足球氛围，并以活泼的金色作为辅助色。
• 动效：使用动画呈现效果和微交互。对于 HTML，优先使用 Tailwind 动画方案；对于 React，如果可用，则使用 Motion 库。聚焦于影响力最大的时刻：精心编排一次带有交错显现效果（animation-delay）的页面加载，比零散的微交互更能带来惊喜。加入滚动触发效果和出人意料的悬停状态。
• 空间构图：尝试出人意料的布局、不对称、重叠、对角流线和突破网格的元素。大胆留白，或有节制地安排紧凑内容。
• 背景与视觉细节：营造氛围与层次，不要只用纯色。加入符合整体风格的环境效果和纹理。尝试渐变网格、噪点纹理、几何图案、分层透明效果、戏剧化阴影、装饰边框、自定义光标和颗粒叠层等创意元素。

绝不要采用千篇一律的 AI 生成风格，例如过度使用的字体、陈词滥调的配色（尤其是白底紫色渐变）、可预测的布局与组件模式，以及缺乏场景特色的模板化设计。

请发挥创意，做出出人意料、真正经过设计的选择。每个设计都应独一无二。灵活采用浅色和深色主题、不同字体和不同美学风格。绝不要在多次生成中一味选用常见方案（例如 Space Grotesk）。

重要：让实现的复杂程度与美学构想相匹配。繁复大胆的设计需要复杂代码、大量动画和视觉效果；极简或精致的设计则应有所克制，精准把控间距、字体排印和细腻的细节。优雅源于对构想的出色呈现。

请记住：Claude 能够创作非凡的作品。放开手脚，跳出思维定式，全力打造独具特色的设计，展现真正的创造力。

灵感来源：请从 ./docs/inspiration 获取灵感