frontend-design

To generate a front-end UI design spec that avoids generic AI styling, apply opinionated rules for typography, color, motion, and backgrounds. This approach ensures consistent visual quality across components and states.

Choosing typography and color systems for a product UI involves avoiding overused default fonts and overly saturated schemes. Use distinctive pairing strategies for headings and body copy, alongside oklch color harmony rules.

Yes, this front-end design guidance works with existing Tailwind, shadcn, or MUI design systems. It includes safety guardrails to prevent overriding your current design system or brand identity while applying visual rules.

To ensure dark mode backgrounds meet accessibility and WCAG contrast targets, apply design-system safety guardrails during your UI design process. This enforces necessary accessibility checks for dark backgrounds and visual states.

Motion guidelines for reducing distracting animations in web apps involve enforcing subtle transitions over excessive movement. This approach maintains intentional layout practices and readable user interfaces across product components.

You should not use standard AI-generated UI design suggestions when your product requires consistent visual quality and distinctive branding. Opinionated design rules prevent low-quality "AI slop" by prescribing concrete layout, typography, and color constraints.