frontend-design

Define an explicit aesthetic direction such as editorial brutalism or luxury minimal before writing code, then score it with the DFII framework. Commit to expressive display typography, a dominant color story, and asymmetric composition instead of default layouts.

DFII stands for Design Feasibility and Impact Index. It sums aesthetic impact, context fit, implementation feasibility, and performance safety, then subtracts consistency risk, yielding a range from -5 to +15 that determines whether to execute, reduce scope, or rethink the direction.

Avoid system and AI-default fonts such as Inter, Roboto, and Arial. Instead pair one expressive display font with one restrained body font, and use typography structurally through scale, rhythm, and contrast.

Yes, it supports HTML/CSS with modern native features and React with functional composable components. However, default Tailwind or ShadCN layouts are treated as anti-patterns, so utility classes must serve a custom aesthetic rather than a template look.

Avoid maximalist directions when the DFII score falls to 7 or below, when performance or accessibility would suffer, or when the aesthetic cannot be maintained consistently across screens. In those cases reduce scope or choose a more restrained direction.