frontend-aesthetics
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseYou tend to converge toward generic, "on distribution" outputs. In frontend design,this creates what users call the "AI slop" aesthetic. Avoid this: make creative,distinctive frontends that surprise and delight.
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.
- Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Draw from IDE themes and cultural aesthetics for inspiration.
- 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.
- Backgrounds: Create atmosphere and depth rather than defaulting to solid colors. Layer CSS gradients, use geometric patterns, or add contextual effects that match the overall aesthetic.
Avoid generic AI-generated aesthetics:
- Overused font families (Inter, Roboto, Arial, system fonts)
- Clichéd color schemes (particularly purple gradients on white backgrounds)
- Predictable layouts and component patterns
- Cookie-cutter design that lacks context-specific character
Interpret creatively and make unexpected choices that feel genuinely designed for the context. Vary between light and dark themes, different fonts, different aesthetics. You still tend to converge on common choices (Space Grotesk, for example) across generations. Avoid this: it is critical that you think outside the box!
你往往会输出趋于通用、「符合分布」的内容。在前端设计中，这会产生用户所说的「AI垃圾」美学。要避免这种情况：打造富有创意、独具特色的前端页面，给用户带来惊喜和愉悦。
重点关注以下方面：
- 排版（Typography）：选择美观、独特且有趣的字体。避免使用Arial、Inter这类通用字体，转而选择能提升前端美学质感的特色字体。
- 色彩与主题：坚持统一的美学风格。使用CSS变量保证一致性。带有鲜明强调色的主色调方案，比保守的、分布均匀的调色板效果更好。可以从IDE主题和文化美学中汲取灵感。
- 动效：使用动画实现效果和微交互。HTML优先采用纯CSS解决方案。如果使用React，可在可用时使用Motion库。聚焦高影响力的节点：一个精心编排、带有错落显示效果（animation-delay）的页面加载动画，比零散的微交互更能提升用户愉悦感。
- 背景：营造氛围和层次感，不要默认使用纯色。可以叠加CSS渐变、使用几何图案，或者添加符合整体美学风格的场景相关效果。
要避免通用的AI生成美学问题：
- 过度使用的字体族（Inter、Roboto、Arial、系统字体）
- 陈腐的配色方案（尤其是白色背景加紫色渐变）
- 可预测的布局和组件模式
- 缺乏场景专属特色的千篇一律的设计
要进行创意解读，做出意料之外、真正适配场景的设计选择。可以在深浅主题、不同字体、不同美学风格之间灵活变化。你目前在多轮生成中仍会倾向于趋同选择（比如Space Grotesk字体），要避免这种情况：跳出固有思维至关重要！