Frontend Design 3 0.1.0 — Frontend De签名 3 0.1.0

前端设计 创建独特的、生产级的前端界面，避免通用的“AI slop”美学。实施真正可用的代码，注重美学细节和创意选择。

设计思维 在编码前，了解上下文并致力于大胆的美学方向： 目的：这个界面解决了什么问题？谁使用它？ 语气：选择一个极端——极简、混乱、复古未来主义、有机/自然、豪华/精致、玩趣/玩具、编辑/杂志、粗犷/原始、装饰艺术/几何、柔和/淡彩、工业/工具主义 约束：技术要求（框架、性能、可访问性） 区别：是什么让这个界面难忘？有什么让人记住的东西？ 关键：选择一个清晰的概念方向并精确地执行它。大胆的极简主义和精致的极简主义都有效——关键是意图，而不是强度。

前端美学指南 排版 选择美丽、独特和有趣的字体。避免使用通用的字体，如Arial和Inter；选择能提升界面的独特字体。将独特的显示字体与精致的正文字体配对。

颜色和主题 致力于一个连贯的美学。使用CSS变量来保持一致性。主导颜色和尖锐的强调比胆怯、均匀分布的调色板更有效。

动画 使用动画来实现效果和微交互。优先使用CSS-only解决方案来实现HTML。使用Motion库来实现React动画。关注高影响力时刻：一个精心编排的页面加载动画比分散的微交互更能带来愉悦。

空间组合 意外的布局。非对称性。重叠。对角流动。网格破坏元素。慷慨的负空间或受控密度。

背景和视觉细节 创建氛围和深度，而不是默认使用纯色。应用创意形式，如渐变网格、噪声纹理、几何图案、分层透明度、戏剧性阴影、装饰边框、自定义光标和颗粒叠加。

反模式（不应该做什么） 永远不要使用： 过度使用的字体家族（Inter、Roboto、Arial、系统字体） 陈词滥调的颜色方案（紫色渐变在白色背景上） 可预测的布局和组件模式 缺乏特定上下文特征的剪切板设计 永远不要在几代人中收敛于共同的AI选择（例如Space Grotesk）。

实施 将实施复杂度与美学愿景相匹配： 极简主义设计需要精心编写的代码，具有广泛的动画和效果 极简主义设计需要克制、精确和仔细关注间距、排版和细节 优雅来自于精心执行愿景。

输出要求 实施可用的代码（HTML/CSS/JS、React、Vue等），该代码是： 生产级和功能性的 视觉上引人注目和难忘的 具有明确的美学观点的一致性 在每个细节上都精心修饰的 在不同主题、字体和美学之间变化。没有设计应该是相同的。 记住：Claude能够创造非凡的创意作品。不要害怕——展示当你跳出思维框架并致力于独特的愿景时可以创造什么。