# Frontend Design

> Use when designing without an existing brand system. Pushes for a committed, distinctive aesthetic rather than generic defaults — extreme directions, bold typography, decisive color commitment.

- Skill: `manalkaff/frontend-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add manalkaff/frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/manalkaff/frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: manalkaff (https://skillmd.com/u/manalkaff)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/manalkaff/frontend-design

---


Loaded when designing without an existing brand system. Push for a committed, distinctive aesthetic. Generic defaults are a failure state.

## Output location

Write all output files to `./opendesign/mockups/<task-slug>/`. Derive the slug from the page or feature name (e.g. `landing-page`, `pricing-redesign`).

## Pre-build thinking

Before touching HTML, answer three questions in your plan:
- **Purpose.** What job does this page do in one sentence?
- **Tone.** Which human adjective describes the feeling — clinical, warm, severe, playful, reverent, brash?
- **Differentiation.** What would make a viewer remember this over a generic SaaS landing page?

Pick an extreme direction and execute it with precision: brutalist, maximalist, editorial, retro-futuristic, organic, industrial, anti-design, swiss-modernist, zine-punk. Indecisive middles read as stock templates.

## Typography

Pair a distinctive display face with a refined body face. Avoid Inter, Roboto, Arial, and generic system stacks. Candidates: editorial serifs (Fraunces, GT Sectra, Tiempos), geometric display (Space Grotesk, PP Neue Montreal, Söhne Breit), mono accents (JetBrains Mono, IBM Plex Mono), quirky unicase and variable fonts where the direction supports it. Set a real type scale with intentional ratios; do not rely on default browser sizes.

## Color

Commit to a cohesive palette. Dominant colors with one or two sharp accents outperform timid even distribution. Use oklch for accents so chroma and lightness stay consistent across hues. Restrict neutrals to chroma ≤ 0.02.

## Motion

One or two high-impact motion moments beat a dozen scattered micro-interactions. Favor CSS-only animation: transforms, transitions, `@keyframes`, `scroll-timeline` where it is supported. Reserve JS for motion that depends on state.

## Spatial composition

Break the grid deliberately: asymmetry, overlap, diagonal baselines, oversized type against tight columns, generous negative space — or controlled, dense information surfaces if the aesthetic demands it. Either direction beats an evenly padded three-column grid.

## Backgrounds

Default to atmosphere: gradient meshes, film grain, noise, layered transparencies, dramatic shadows, tinted halftones, subtle paper textures. Flat white on flat black is a choice, not a default — use it only when the direction demands it.

## Variation across generations

Never converge on the same choices across different projects or variation runs. Rotate axes: aesthetic direction, dominant hue family, typographic register, motion philosophy, compositional strategy. Two designs in a row should not feel like siblings unless the user asked for continuity.

## Matching complexity to direction

Maximalist direction → elaborate implementation: layered textures, dense type, rich motion, intricate detail.
Minimalist direction → restrained implementation: fewer elements, tighter type scale, longer transitions, more white.
Do not half-commit. A restrained layout executed with maximalist intent reads as unfinished; a maximalist layout executed with minimalist intent reads as confused.