frontend-design

Frontend Design

This skill is for frontend interface design + implementation. Use it whenever the user wants you to build a working UI (components, pages, landing pages, dashboards, poster-like web artifacts, HTML/CSS layouts, UI redesigns, or “make it look good”). The goal is to produce interfaces with a clear point of view, high craft, and real personality—avoiding template-y, generic “AI slop” aesthetics.

How to work

Before you write code, decide the design. Make a bold, explicit aesthetic choice, then execute it consistently.

1 Design thinking

Answer these first (write them down in your output or keep them as your internal checklist):

• Purpose: what problem it solves, who it’s for
• Tone: pick a strong direction and commit
• Constraints: stack, performance, accessibility, brand limits
• Differentiation: one unforgettable “signature moment”

Example directions (choose one, or combine with a clear primary axis):

• brutally minimal, maximalist chaos, retro-futuristic, organic natural, luxury refined, toy-like playful, editorial magazine, brutalist raw, art deco geometric, soft pastel, industrial utilitarian

It’s not about intensity—it’s about intent and consistency.

2 Deliverable bar

Your output must be:

• Working: runnable code (HTML/CSS/JS, React, Vue, etc.)
• Production-grade: clean structure, maintainable, basic accessibility (keyboard, contrast, semantics)
• Cohesive: layout, type, color, motion all serve the same direction
• Meticulously refined: spacing, alignment, hierarchy, shadows, borders, micro-interactions

Aesthetics guidelines

Typography

• Pick characterful type pairing: a display face + a body face
• Avoid default-safe, generic choices (Arial, Inter, etc.)
• Treat size, line-height, tracking like design decisions—not defaults

Color and theme

• Use CSS variables for colors, spacing, radii, shadows
• Prefer “dominant base + sharp accent” over timid evenly-distributed palettes
• Avoid cliché schemes (especially the generic purple gradient on white)

Motion

• Create a “hero moment”: one orchestrated staggered entrance beats random micro-animations
• For HTML, prefer CSS motion; for React, use an animation library when appropriate
• Hover, focus, and scroll interactions must reinforce mood and hierarchy

Composition and spacing

• Use asymmetry, overlap, grid breaks, or diagonal rhythm to create a signature
• Either generous negative space or controlled density—just stay consistent

Backgrounds and texture

Don’t default to flat solid backgrounds. Build atmosphere and depth:

• gradient meshes, noise grain, geometric patterns, translucent layers, dramatic shadows, decorative borders, glow, subtle materials

Don’ts

Avoid generic template UI:

• overused layout patterns and component stacks
• generic type and color that could be any template site
• “safe design” with no clear thesis or memorable signature

Final reminder

Match complexity to the vision:

• maximalism needs layers, textures, motion, and crafted detail
• minimalism needs stricter grids, spacing, typography, and restraint

Beauty comes from consistency and detail—not from piling on effects.