# Frontend Design
> Builds production-grade frontend interfaces with intentional, distinctive aesthetics instead of generic AI output.
- Skill: `le-diegz/frontend-design` (Agent Skill, multi-file: 9 files)
- Install (CLI): `npx skillmds@latest add le-diegz/frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/le-diegz/frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: le-diegz (https://skillmd.com/u/le-diegz)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/le-diegz/frontend-design
---
## When to use this skill
Use this skill when:
- The user asks to create a landing page, dashboard, UI component, or any interface where visual quality is part of the deliverable.
- The user says "build", "create", "design", or "make" and the output is a visible frontend.
- The user wants something that looks professional, polished, or memorable.
Do not use this skill when:
- The user is debugging or patching existing CSS without redesigning anything.
- The user explicitly asks for an unstyled, utility-only, or skeleton component.
- The task is purely structural (e.g. "add a form field to this page").
---
## Instructions
### Step 1 — Choose an aesthetic direction before writing a single line of code
Before touching HTML or CSS, decide on one specific aesthetic direction. Name it internally so every decision that follows is grounded in it. Examples of concrete directions:
- "Editorial brutalism: heavy weight type, raw borders, high contrast, no decoration"
- "Quiet luxury: generous whitespace, muted stone palette, single serif font, no shadows"
- "Dark technical: near-black background, monospace accents, neon green data highlights"
- "Organic warmth: off-white paper texture, variable-weight humanist sans, terracotta accents"
Do not pick a direction after writing the code. The direction must constrain every subsequent decision. If no direction comes to mind, output one sentence describing the product's personality before proceeding.
Directions to refuse: "modern", "clean", "minimal", "professional". These are not aesthetic directions — they are the absence of one. If you find yourself about to write one of these words, stop and replace it with something specific.
### Step 2 — Typography: be decisive, be distinctive
Load exactly one or two typefaces via Google Fonts or system stacks. Do not use more.
**Use these typefaces for the contexts listed:**
| Context | Good choices |
|---|---|
| Editorial, luxury, editorial tech | DM Serif Display, Playfair Display, Cormorant Garamond |
| Contemporary sans, SaaS, dashboards | Geist, Plus Jakarta Sans, Outfit, Bricolage Grotesque |
| Technical, code-adjacent, data | JetBrains Mono, IBM Plex Mono, Space Mono |
| Friendly, consumer product | Nunito, Figtree, Sora |
**Never use these as primary typefaces:** Inter, Roboto, Open Sans, Lato, Source Sans Pro. These are defaults, not choices. Using them signals the absence of a typographic decision.
Set type at scale. Do not use uniform font sizes across the page. Use at least three distinct levels: a display size (56px–96px), a body size (15px–17px), and a label/caption size (11px–13px). Assign each level a `--font-*` CSS variable.
Use `font-feature-settings` to enable optical sizing and contextual alternates where supported:
```css
font-feature-settings: "cv01" 1, "cv02" 1, "ss01" 1;
```
### Step 3 — Color: build a palette, not a stylesheet
Define every color as a CSS custom property at `:root`. Never use raw hex values in rules — always reference a variable.
**Minimum required palette structure:**
```css
:root {
--color-bg: #0f0f0f; /* page background */
--color-surface: #1a1a1a; /* cards, panels */
--color-border: #2e2e2e; /* dividers, outlines */
--color-text-primary: #f0ede8;
--color-text-secondary: #8a8580;
--color-accent: #e8c547; /* one accent, used sparingly */
--color-accent-dim: #b89a30; /* hover/active state of accent */
}
```
**Palette rules:**
- Choose one accent color. One. Not two, not a gradient. Use it for the single most important interactive or focal element on the page.
- Backgrounds should have atmosphere: a subtle noise texture, a very faint radial gradient that fades to transparent, or a paper-like off-white. Never use `#ffffff` or `#000000` as final background values.
- Do not use `linear-gradient(135deg, #667eea, #764ba2)` or any purple-to-anything gradient. This combination is the single most identifiable marker of AI-generated design. Reject it unconditionally.
- Contrast ratio must pass WCAG AA (4.5:1) for body text. Check mentally before writing — dark gray on dark background is a common failure mode.
### Step 4 — Layout: design space, not just content
Do not arrange everything in a centered single column at `max-width: 1200px`. Instead, deliberately work with the grid.
**Techniques to use (pick at least one per interface):**
**Overlapping elements:**
```css
.hero-label {
position: relative;
z-index: 2;
margin-bottom: -1.5rem; /* overlaps into the heading below */
}
```
**Asymmetric grids:**
```css
.layout {
display: grid;
grid-template-columns: 1fr 2.4fr; /* deliberate imbalance */
gap: 0;
}
```
**Full-bleed sections with inset content:**
```css
.section {
width: 100%;
padding: 0;
}
.section__inner {
max-width: 1100px;
margin: 0 auto;
padding: 5rem 2rem;
}
```
**Large typographic anchors:**
Use oversized display text (80px–120px) that breaks the grid intentionally. Let it overflow or be clipped. This creates visual weight without imagery.
**Rules for layout:**
- At least one element must break the expected alignment — a heading that hangs into the margin, a number that's 20% larger than it "should" be, a card that bleeds to the edge on mobile.
- Avoid equal spacing everywhere. Use a spacing scale: 4px, 8px, 16px, 24px, 40px, 64px, 96px. Never use arbitrary values like `margin: 23px`.
### Step 5 — Motion: every interaction must respond
Add CSS transitions and keyframe animations. Motion is not optional on a production interface.
**Required on every interactive element:**
```css
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
```
Do not use `transition: all 0.3s ease`. The cubic-bezier easing curve communicates precision. `ease` communicates laziness.
**On-load entrance animations — use for key elements only (hero, first card, nav):**
```css
@keyframes fadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.hero {
animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
```
**Stagger children for lists and grids:**
```css
.card:nth-child(1) { animation-delay: 0ms; }
.card:nth-child(2) { animation-delay: 80ms; }
.card:nth-child(3) { animation-delay: 160ms; }
```
**Hover states must be meaningful**, not just a color swap:
```css
.button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
```
Respect `prefers-reduced-motion`:
```css
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
```
### Step 6 — Atmosphere: backgrounds and texture
Flat solid backgrounds make interfaces look like mockups. Add depth with at least one of:
**SVG noise texture (preferred — pure CSS, no external asset):**
```css
.bg-noise {
background-image:
url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
background-size: 256px 256px;
}
```
**Radial gradient vignette:**
```css
background: radial-gradient(ellipse 80% 60% at 50% 0%, #1e2a1a 0%, #0d0d0d 100%);
```
**CSS grid lines (data/technical aesthetic):**
```css
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 40px 40px;
```
### Step 7 — Output format
Output a single, self-contained HTML file with all CSS in a `
$ forge --plan
Pay for what
you ship.