前端设计

打造独特、生产级的前端界面，避免千篇一律的“AI式”审美。实现真正可运行的代码，并对美学细节和创意选择给予极致关注。

设计思维

在编码之前，理解上下文并承诺一个大胆的美学方向：

• 目的：这个界面解决什么问题？谁使用它？
• 基调：选择一个极致风格——极简主义、极致混乱、复古未来主义、有机/自然、奢华/精致、趣味/玩具感、编辑/杂志风、粗野主义/原始、装饰艺术/几何、柔和/粉彩、工业/实用主义
• 约束：技术要求（框架、性能、无障碍访问）
• 差异化：什么让它令人难忘？人们会记住哪一点？

关键点：选择一个清晰的概念方向并精准执行。大胆的极致主义与精致的极简主义都可行——关键在于意图明确，而非强度高低。

前端美学指南

排版

选择美观、独特、有趣的字体。避免使用Arial和Inter等通用字体；选择能提升界面格调的特色字体。将一款独特的展示字体与一款精致的正文字体搭配使用。

色彩与主题

坚持统一的美学风格。使用CSS变量保持一致性。采用主色调搭配鲜明点缀色的方案，优于怯懦、平均分布的调色板。

动效

将动画用于特效和微交互。对于HTML内容，优先使用纯CSS解决方案。在React项目中，尽可能使用Motion库。聚焦于高影响力的时刻：一个精心编排、元素错落呈现的页面加载效果，比零散的微交互更能带来愉悦感。

空间构成

出人意料的布局。不对称。重叠。对角线流向。打破网格的元素。充裕的留白或受控的密度。

背景与视觉细节

应营造氛围与纵深感，而非直接使用纯色。可运用渐变网格、噪点纹理、几何图案、分层透明效果、戏剧性阴影、装饰边框、定制光标和颗粒叠加等创意形式。

反模式（应避免事项）

切勿使用：

• 滥用字体族系（Inter、Roboto、Arial等系统字体）
• 陈腐配色方案（如白底紫色渐变）
• 可预测的布局与组件模式
• 缺乏情境特质的模板化设计

切勿趋同于不同代际中采用常见AI选择（例如Space Grotesk字体）

实现要求

实现复杂度需与美学愿景匹配：

• 繁复主义设计需搭配包含丰富动画特效的精密代码
• 极简主义设计需保持克制与精准，注重间距、排版及精微细节

优雅源于对设计愿景的完美执行

输出要求

需实现可运行代码（HTML/CSS/JS、React、Vue等），且满足：

• 生产级标准与完整功能
• 视觉冲击力强且令人过目难忘
• 具有清晰美学视角的协调统一性
• 每个细节都经过精心打磨

应在明暗主题、字体选择、美学风格上呈现多样性，杜绝雷同设计

谨记：Claude具备非凡的创作能力。请尽情发挥——展现当突破思维定式并全力投入独特愿景时，所能创造的真正杰作。