In all frontend work, absolutely prevent the obvious "AI-made" design.
Signs of AI Slop (Absolutely Forbidden)
- Default use of Inter/Roboto/Arial/system fonts
- Purple gradient on white background
- Uniform rounded corners on all elements
- Layouts that only use center alignment
- Obvious hero section + 3-column features
- The same shadow on every card
- Emotionless illustrations
Design Process
1. Understanding the Context
- Purpose: What problem does this interface solve?
- User: Who uses it? (Gamers? Developers? General public?)
- 톤: Choose extremely — one of the following:
- Brutalism / Minimal / Retro-futurism / Organic natural
- Luxury / Toylike / Editorial / Art Deco
- Industrial / Soft pastel / 80s neon / Japanese minimal
- Differentiator: What is the single element users will remember?
2. Core Principles
Typography:
- Choose unique and beautiful fonts (discover on Google Fonts)
- Pair a display font + body font
- A different font combination every time (no repeating the same font)
Color:
- Ensure consistency with CSS variables
- Dominant color + intense accent (do not distribute evenly)
- A different color palette every time
Motion:
- CSS-only first (for a single HTML file)
- Staggered reveal on page load is the key impression
- Unexpected hover/scroll-based interactions
Spatial Composition:
- Asymmetric layouts, overlaps, diagonal flow
- Elements that break the grid
- Generous whitespace or intentional density
Background/Details:
- No solid-color background as the default
- Gradient mesh, noise texture, geometric patterns
- Layers, shadows, and transparency that add depth
3. Game UI-Specific Principles
Additional applications when creating a game interface:
- Immersion first: The UI must be part of the game's worldbuilding
- Use of assets: NAS Game Madang (161GB), Gemini AI generation, free asset sites
- Animation: CSS transitions + requestAnimationFrame
- Sound feedback: Sound effects on click/hover (when possible)
- Responsive: Consider the Telegram Mini App environment (WebView safe-area)
Quality Checklist
- Are you not using Inter/Roboto/Arial?
- Is there no purple gradient?
- Do all elements not have the same border-radius?
- Does the layout have asymmetric elements?
- Is it a different font/color from what was made before?
- Is it at a level where no one would say, "Did AI make this?"