lijiaming123/frontend-design

本技能用于指导创建具有辨识度、可用于生产环境的前端界面，避免泛化、模板化的“AI 味”视觉风格。请实现真实可运行的代码，并在审美细节与创意选择上做到极致打磨。

用户会提供前端需求：可能是组件、页面、应用，或某个界面。需求中也可能包含使用目的、目标人群和技术约束等上下文。

设计思路

编码前先理解上下文，并确定一个大胆且明确的审美方向：

• 目的（Purpose）：这个界面要解决什么问题？谁会使用它？
• 调性（Tone）：选择一种足够鲜明的风格方向，例如：极简冷峻、极繁张扬、复古未来、有机自然、奢雅精致、玩具感活泼、杂志编辑风、野蛮主义、装饰艺术几何、柔和粉彩、工业实用等。可借鉴但不要照抄，最终设计必须忠于你选定的风格。
• 约束（Constraints）：技术要求（框架、性能、可访问性等）。
• 差异化（Differentiation）：这个设计最“令人难忘”的点是什么？用户离开后会记住什么？

关键要求（CRITICAL）：先选清晰的概念方向，再高精度执行。无论是大胆的极繁还是克制的极简都可行，关键在于“有意图地设计”，而不是一味堆强度。

然后实现可运行代码（HTML/CSS/JS、React、Vue 等），并确保：

• 可用于生产环境，功能完整
• 视觉上有冲击力且可被记住
• 审美观点统一，风格表达清晰
• 每个细节都经过精细打磨

前端美学指南

重点关注：

• 字体（Typography）：选用美观、独特、有性格的字体。避免 Arial、Inter 这类泛用选择；优先使用能抬升气质的字体搭配。建议用有表现力的展示字体 + 克制易读的正文字体。
• 色彩与主题（Color & Theme）：坚持统一的审美体系。通过 CSS 变量保持一致性。与平均分配色彩相比，“主色明确 + 强强调色”通常更有表现力。
• 动效（Motion）：用动画增强氛围和微交互。纯 HTML 场景优先 CSS 动画；React 场景可使用 Motion 库。把精力放在高价值时刻：一次编排精良、分层次揭示的入场动画（如 animation-delay 级联）通常比零散小动效更打动人。加入滚动触发与悬停惊喜。
• 空间构图（Spatial Composition）：尝试非预期布局、非对称、重叠、对角线动势、打破网格的元素；可以是大留白，也可以是高密度但受控的视觉组织。
• 背景与视觉细节（Backgrounds & Visual Details）：不要默认纯色背景，要主动营造氛围和层次。叠加与风格一致的纹理和特效，例如渐变网格、噪点纹理、几何图案、透明叠层、戏剧化阴影、装饰边框、自定义光标、胶片颗粒等。

绝不要使用泛化的 AI 生成审美：如被过度使用的字体（Inter、Roboto、Arial、系统字体）、俗套配色（尤其“白底紫渐变”）、可预测的布局与组件套路，以及缺乏场景个性的模板式设计。

要进行创造性解读，做出“出乎意料但合理”的选择，让设计真正像是为该场景定制。每次设计都应不同；在明暗主题、字体、审美方向上主动变化。不要反复收敛到同一套常见选择（例如每次都用 Space Grotesk）。

重要（IMPORTANT）：实现复杂度必须匹配审美愿景。极繁设计需要足够丰富的代码、动画和视觉效果；极简或精致风格则需要克制、精准，以及对间距、字体和细微差异的严格把控。优雅来自“把方向执行到位”。

请记住：你具备产出高水平创意作品的能力。不要保守，跳出常规，完整投入到一个独特且一致的设计愿景中，展示真正有辨识度的作品。