Frontend Design Skill

Design and implement memorable frontend interfaces with a clear, intentional aesthetic. The output must be real, working code — not just mood boards. This skill is about design thinking + execution: every visual choice should be rooted in purpose and context.

When to Use

Use this skill when the user wants to:

Create a new web page, landing page, dashboard, or app UI
Design or redesign frontend components or screens
Improve typography, layout, color, motion, or overall visual polish
Convert a concept or brief into a high‑fidelity, coded interface

Inputs to Gather (or Assume)

Before coding, identify:

Purpose & audience: What problem does this UI solve? Who uses it?
Brand/voice: Any reference brands, tone, or visual inspiration?
Technical constraints: Framework, library, CSS strategy, accessibility, performance
Content constraints: Required copy, assets, data, features

If the user did not provide this, ask 2–4 targeted questions, or state reasonable assumptions in a short preface.

Design Thinking (Required)

Commit to a single, bold aesthetic direction. Name it and execute it consistently. Examples:

Brutalist / raw / utilitarian
Editorial / magazine / typographic
Luxury / refined / minimal
Retro‑futuristic / cyber / neon
Art‑deco / geometric / ornamental
Handcrafted / organic / textured

Avoid generic AI aesthetics. No “default” fonts, color schemes, or stock layouts.

Before writing code, define the system:

Visual direction — one sentence that describes the vibe
Differentiator — what should be memorable about this UI?
Typography system — display + body fonts, scale, weight, casing
Color system — dominant, accent, neutral; define as CSS variables
Layout strategy — grid rhythm, spacing scale, hierarchy plan
Motion strategy — 1–2 meaningful interaction moments

If the user wants code only, skip the explanation but still follow this internally.

Implementation Principles

Working code: HTML/CSS/JS or framework code that runs as‑is
Semantic & accessible: headings, labels, focus states, keyboard nav
Responsive: fluid layouts, breakpoints, responsive typography
Tokenized styling: CSS variables for colors, spacing, radii, shadows
Modern layout: prefer CSS Grid/Flex, avoid brittle positioning hacks

Aesthetic Guidelines

Typography

Typography should define the voice of the design
Avoid default fonts (Inter, Roboto, Arial, system stacks)
Use a distinct display font + a refined body font
Implement a clear hierarchy (size, weight, spacing, casing)

Color & Theme

Commit to a palette with a strong point‑of‑view
Avoid timid, overused gradients (e.g., purple‑to‑pink on white)
Use contrast intentionally and check legibility

Composition & Layout

Encourage asymmetry, scale contrast, overlap, or grid breaks
Use negative space deliberately (or controlled density if maximalist)
Create visual rhythm and hierarchy through spacing and alignment

Detail & Atmosphere

Add texture or depth when appropriate (noise, grain, subtle patterns)
Use shadows/glows only when they serve the concept
Consider unique borders, masks, or clip‑paths for distinct shapes

Motion & Interaction

Use motion sparingly but meaningfully
Favor one standout interaction over many tiny ones
Honor prefers-reduced-motion

Avoid

Cookie‑cutter hero + 3 card layouts
Generic gradients and default font choices
Unmotivated decorative elements
Overly flat, characterless component libraries

Deliverables

Provide full code with file names or component boundaries
Make customization easy with CSS variables or config objects
If assets are needed, provide inline SVGs or generative CSS patterns

Quality Checklist (Self‑validate)

Aesthetic direction is unmistakable
Typography feels intentional and expressive
Layout and spacing are consistent and purposeful
Color palette feels cohesive and legible
Interactions enhance the experience without clutter
Code runs as provided and is production‑ready

Remember: a design is only as strong as its commitment. Choose a direction and execute it relentlessly.

frontend-design