designfrontend

name	DesignFrontend
description	Build distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. USE WHEN the user asks for web components, pages, landing pages, dashboards, React / HTML / CSS layouts, or styling of any web UI. Not for backend or non-UI work.
version	0.1.0
allowed-tools	Read, Grep, Write, Edit
upstream	https://github.com/davila7/claude-code-templates/blob/main/cli-tool/components/skills/creative-design/frontend-design/SKILL.md

DesignFrontend

Create distinctive, production-grade web interfaces. Commit to an aesthetic direction and execute with precision — intentionality wins over intensity, whether the direction is bold maximalism or refined minimalism.

Direction

Before coding, decide on a clear aesthetic direction. Pick one and stay true to it:

• Brutally minimal, maximalist chaos, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, pastel, industrial — or a point of your own choosing.

Name the context, the audience, and the one thing someone will remember about the result.

Aesthetics

Axis	Guidance
Typography	Distinctive, characterful choices. Pair a display font with a refined body font. Avoid generic system fonts.
Color	Dominant colors with sharp accents outperform evenly distributed palettes. Use CSS variables for consistency.
Motion	High-impact moments over scattered interactions. One orchestrated page load beats many micro-interactions.
Layout	Asymmetry, overlap, diagonal flow, grid-breaking. Generous negative space OR controlled density — commit.
Atmosphere	Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, grain overlays.

Match implementation complexity to the vision: maximalist designs get elaborate animations and effects; minimalist designs demand restraint, precision, and attention to spacing and detail.

Avoid

• Overused font families (Inter, Roboto, Arial, system fonts, Space Grotesk — don't converge on "safe" choices across generations)
• Cliched color schemes (purple gradients on white is the canonical offender)
• Charity/wellness clichés — cream backgrounds with forest green and warm orange/terracotta accents read as spa-yoga-retreat, undermine credibility for donor-facing, institutional, or business audiences. For serious contexts, default to editorial palettes (white + hard black + one decisive accent)
• Predictable layouts and component patterns
• Cookie-cutter design that lacks context-specific character

Vary

No two designs should be the same. Vary themes (light/dark), fonts, aesthetics across generations. If the last output used a display serif and a teal-on-ink palette, the next should not.

Constraints

• Produce real, working code — HTML/CSS/JS, React, Vue, etc. — not mockups
• Maintain a single aesthetic point-of-view across the whole output; do not mix brutalist typography with pastel gradients
• Accessibility and performance are not aesthetic concessions; they are part of production-grade
• Iterate one visual variable per round when refining a design with the user. Bundling changes (illustration + color logic + label edits in one push) forces the user to accept or reject the whole package; they can't keep the parts that landed and discard the parts that didn't. This costs at least one extra round per bundle.