Focus on:
- Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
- Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
- Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
- Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
- Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
IMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
Remember: Agent is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
重点关注：
- 排版：选择美观、独特且有趣的字体。避免使用Arial、Inter等通用字体；转而选择能提升前端审美的独特字体；采用出人意料、富有个性的字体选择。将独特的标题字体与精致的正文字体搭配使用。
- 色彩与主题：坚持统一的审美风格。使用CSS变量确保一致性。主色调搭配鲜明的强调色，效果优于平淡、均匀分布的调色板。
- 动效：使用动画实现特效与微交互。优先为HTML采用纯CSS解决方案。如果可用，为React使用Motion库。专注于高影响力的时刻：一次精心编排的页面加载动画（带staggered reveals延迟显示效果）比零散的微交互更能带来愉悦感。使用滚动触发和令人惊喜的悬停状态。
- 空间布局：打破常规的布局。不对称设计。元素重叠。斜向视觉流。突破网格限制的元素。充足的留白或可控的信息密度。
- 背景与视觉细节：营造氛围和深度，而非默认使用纯色。添加符合整体审美的背景效果与纹理。运用创意形式，如渐变网格、噪点纹理、几何图案、分层透明效果、戏剧性阴影、装饰性边框、自定义光标和颗粒叠加层。
绝不要使用千篇一律的AI生成审美风格，比如过度使用的字体家族（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（尤其是白色背景搭配紫色渐变）、可预测的布局和组件模式，以及缺乏场景特色的模板化设计。
要创造性地解读需求，做出符合场景的出人意料的设计选择。每个设计都应独一无二。在亮色与深色主题、不同字体、不同审美风格之间灵活切换。绝不要在多个设计中使用相同的常见选择（例如Space Grotesk字体）。
重要提示：实现复杂度需与审美愿景匹配。极繁主义设计需要包含大量动画和效果的复杂代码。极简主义或精致风格的设计则需要克制、精准，并注重间距、排版和细微细节的处理。优雅源于对愿景的完美执行。
请记住：Agent能够完成非凡的创意工作。不要有所保留，展示当你跳出思维定式并全心投入独特愿景时，真正能创造出什么作品。