Aus dem Quell-Repository gerendert; Überschriften, Beispiele, Code, Tabellen, Links und Bilder bleiben erhalten.
Overview
This skill guides the creation of high-quality frontend interfaces with a clear aesthetic direction and production-ready implementation.
It prevents generic, repetitive, “AI-looking” UI by enforcing intentional design decisions, strong visual identity, and attention to detail.
The focus is not just functionality, but memorable, well-crafted visual experiences.
1. Design Before Coding
Before writing any code:
- Define the purpose of the interface.
- Identify the target user.
- Choose a clear and bold aesthetic direction.
- State assumptions explicitly.
- If requirements are unclear, ask for clarification.
If multiple design directions are possible:
- Present 2–3 options briefly
- Do not choose arbitrarily without explanation
Do not start coding without a clear visual direction.
2. Commit to an Aesthetic Direction
Every UI must follow a strong, intentional style.
Examples of directions:
- Minimal / ultra-refined
- Brutalist / raw
- Editorial / magazine
- Luxury / premium
- Playful / toy-like
- Retro-futuristic
- Industrial / utilitarian
- Organic / natural
- Maximalist / expressive
Guidelines:
- Pick ONE direction and commit fully
- Avoid mixing conflicting styles
- Define what makes the design distinctive and memorable
Ask:
"What will the user remember after seeing this?"
3. Production-Grade Implementation
All output must be:
- Fully working code (HTML/CSS/JS, React, Vue, etc.)
- Clean and structured
- Ready to run (no pseudo-code or placeholders)
Avoid:
- Incomplete snippets
- Non-functional UI
- Vague implementations
4. Visual Design Principles
Typography
- Avoid default fonts (Arial, Inter, Roboto, system fonts)
- Use expressive, distinctive font pairings
- Combine display + body fonts intentionally
Color & Theme
- Use a cohesive palette
- Define colors via variables (CSS or theme system)
- Prefer strong contrast and hierarchy
Avoid:
- Generic gradients (especially purple/blue SaaS style)
- Washed-out, low-contrast palettes
Layout & Composition
- Use spacing intentionally
- Consider asymmetry, overlap, and layering
- Break grid systems when it improves the design
Avoid:
- Generic centered layouts
- Repetitive card grids without variation
Motion & Interaction
- Use animation with purpose:
- page load sequences
- hover interactions
- scroll-triggered effects
Guidelines:
- Prefer CSS animations when possible
- Focus on impactful moments rather than many small effects
Visual Details
Add depth and personality through:
- Textures (noise, grain)
- Shadows and lighting
- Borders and separators
- Background treatments (gradients, patterns, overlays)
Avoid:
- Flat, lifeless surfaces
- Default styling with no refinement
5. Avoid Generic AI Design
Strictly avoid:
- Cookie-cutter SaaS UI
- Overused font stacks
- Predictable layouts
- Default Tailwind appearance
- Repetitive component patterns
Every design must feel:
- Intentional
- Context-aware
- Visually distinct
6. Match Complexity to Vision
Design complexity must match the chosen style:
- Minimalist → precision, spacing, typography
- Maximalist → rich visuals, layering, animation
Do not:
- Overcomplicate simple designs
- Oversimplify expressive designs
7. Output Structure
Responses should include:
- Short design concept (1–3 sentences)
- Full implementation code
Code must be:
- Complete
- Runnable
- Consistent with the design direction
Expected Behavior
This skill is working correctly if:
- UI designs are visually distinctive
- Code is production-ready
- No generic or repetitive patterns appear
- A clear aesthetic direction is evident
- Visual details are carefully implemented
Example Usage
User request: "Create a landing page for an AI startup"
With this skill:
- Define:
- Audience: tech users / founders
- Direction: futuristic + minimal
- Decide:
- Typography style
- Color system
- Layout structure
- Implement:
- Full landing page
- Styled components
- Animations and interactions
- Ensure:
- No generic SaaS look
- Strong visual identity