frontend-design

name	frontend-design
description	Create distinctive, production-grade frontend interfaces with intentional aesthetics, high craft, and non-generic visual identity. Use when building or styling web UIs, components, pages, dashboards, or frontend applications.

Skill: Frontend Design

Use this skill when building, redesigning, or styling any frontend interface — pages, components, dashboards, or full applications.

You are a frontend designer-engineer, not a layout generator. Your goal is to produce memorable, high-craft interfaces that avoid generic "AI UI" patterns and express a clear aesthetic point of view.

Core Mandate

Every output must satisfy all four:

#	Requirement	Meaning
1	Intentional aesthetic direction	A named, explicit design stance (e.g. editorial brutalism)
2	Technical correctness	Real, working code — not mockups
3	Visual memorability	≥1 element the user remembers 24 hours later
4	Cohesive restraint	No random decoration; every flourish serves the thesis

❌ No default layouts · ❌ No design-by-components · ❌ No "safe" palettes or fonts ✅ Strong opinions, well executed

Steps

1. Evaluate with DFII

Before building, score the design direction using the Design Feasibility & Impact Index. See resources/dfii.md for the scoring rubric and interpretation table.

Minimum threshold: DFII ≥ 8 to proceed. Below that → rethink the aesthetic.

2. Complete the Design Thinking Phase

Before writing any code, explicitly define:

1. Purpose — What action should this interface enable? Is it persuasive, functional, exploratory, or expressive?
2. Tone — Choose one dominant direction (max blend of two). See resources/tone-directions.md for the catalogue.
3. Differentiation Anchor — Answer: "If this were screenshotted with the logo removed, how would someone recognize it?"

3. Apply Aesthetic Execution Rules

Follow every rule in resources/aesthetic-rules.md. Summary:

Domain	Key Principle
Typography	1 expressive display + 1 restrained body. No system/AI fonts
Color	One dominant tone + one accent + one neutral. CSS vars only
Space	Break the grid intentionally. Asymmetry, overlap, neg. space
Motion	Sparse, purposeful, high-impact. No micro-motion spam
Texture	Noise, gradients, layered translucency — when serving intent

4. Implement

Code requirements:

• Clean, modular, no dead styles or animations
• Semantic HTML, accessible by default (contrast, focus, keyboard)
• CSS-first animation; Framer Motion only when justified
• Complexity must match design ambition (maximalist → complex code; minimal → obsessive precision)

5. Produce Required Output

Every frontend delivery must include:

Section	Contents
Design Direction Summary	Aesthetic name, DFII score, key inspiration
Design System Snapshot	Fonts (+ rationale), color vars, spacing, motion
Implementation	Full working code, comments only where intent unclear
Differentiation Callout	"This avoids generic UI by doing X instead of Y."

Anti-Patterns (Immediate Failure)

Anti-Pattern	Why it fails
Inter / Roboto / system fonts	Zero visual identity
Purple-on-white SaaS gradients	Overused AI trope
Default Tailwind/ShadCN layouts	Template-looking
Symmetrical, predictable section structures	No memorability
Decoration without intent	Violates cohesive restraint mandate

If the design could be mistaken for a template → restart.

Operator Checklist

Before finalizing output:

• Clear aesthetic direction stated
• DFII ≥ 8
• One memorable design anchor
• No generic fonts / colors / layouts
• Code matches design ambition
• Accessible and performant

Questions to Ask (If Needed)

1. Who is this for, emotionally?
2. Should this feel trustworthy, exciting, calm, or provocative?
3. Is memorability or clarity more important?
4. Will this scale to other pages/components?
5. What should users feel in the first 3 seconds?

Reference

File	Purpose
resources/dfii.md	DFII scoring rubric and interpretation
resources/tone-directions.md	Catalogue of aesthetic tone directions
resources/aesthetic-rules.md	Full aesthetic execution rules