frontend-design

设计思维

在编写代码之前，先了解背景，并确定一个大胆的美学方向：

• 目的：这个界面要解决什么问题？谁会使用它？
• 基调：选择一种极致风格：极简粗粝、极繁混沌、复古未来、有机自然、奢华精致、俏皮玩具感、编辑部／杂志风、粗野原始、装饰艺术／几何、柔和粉彩、工业实用主义等。风格选择丰富多样。可以从中汲取灵感，但要设计出真正契合美学方向的作品。
• 约束：技术要求（框架、性能、无障碍）。
• 差异化：怎样才能让人难以忘怀？别人会记住的那一点是什么？

关键：选择清晰的概念方向，并精准地贯彻到底。大胆的极繁主义和精致的极简主义都行得通——关键在于用心，而非强度。

然后编写可运行的代码（HTML/CSS/JS、React、Vue 等），并确保它：

• 达到生产级质量且功能完整
• 视觉效果醒目、令人难忘
• 风格统一，审美立场鲜明
• 每个细节都经过精心打磨

前端美学指南

重点关注：

• 字体排印：选择优美、独特、有趣的字体。避免使用 Arial 和 Inter 等常见字体；应选择能提升前端美感、风格鲜明、富有个性的字体。将独特的展示字体与精致的正文字体搭配使用。
• 色彩与主题：坚持统一的美学风格。使用 CSS 变量保持一致性。相比畏首畏尾、平均分配的配色，主色搭配鲜明点缀色更出彩。
• 动效：使用动画呈现效果和微交互。对于 HTML，优先采用纯 CSS 方案。React 项目可用时，使用 Motion 库。聚焦高影响力的时刻：精心编排页面加载效果，并以错落的动画延迟逐步呈现内容（animation-delay），比零散的微交互更能带来惊喜。运用滚动触发效果和出人意料的悬停状态。
• 空间构图：采用出人意料的布局、不对称、重叠、对角线动线、打破网格的元素，以及宽裕的留白或精心控制的密度。
• 背景与视觉细节：营造氛围和层次，不要默认使用纯色。添加契合整体美学的场景效果和纹理。可以创造性地运用渐变网格、噪点纹理、几何图案、分层透明效果、戏剧化阴影、装饰边框、自定义光标和颗粒叠加效果。

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

发挥创意，做出契合情境、出人意料的选择，体现真实的设计感。每个设计都应独一无二。尝试不同的明暗主题、字体和美学风格。绝不要在每次创作中都趋同于常见选择（例如 Space Grotesk）。

重要：让实现的复杂程度与美学构想相匹配。极繁主义设计需要复杂的代码、丰富的动画和效果。极简或精致的设计则需要克制、精准，并仔细关注间距、字体排印和细微之处。优雅源自对设计构想的出色执行。

请记住：Claude 能够创造非凡的作品。不要有所保留，放开手脚，展示跳出常规思维、全心投入独特构想时真正能创造出什么。