frontend-design

To create distinctive frontend interfaces, apply disciplined guidelines covering typography, color, spacing, and motion to differentiate your product visuals from generic AI aesthetics. This skill provides reference materials to enforce these intentional design principles.

Establish a cohesive design system by defining scalable design tokens and semantic naming conventions for typography and color. This ensures consistent UI across components and platforms while enforcing strong aesthetic guidelines.

Ensure responsive design and color contrast meet accessibility standards by referencing curated guidelines for spatial design and contrast. This skill enforces accessible interface principles across your component layouts and visual decisions.

Yes, you can use these aesthetic guidelines for building dashboards, product UIs, or marketing sites. The principles apply to web UI development tasks requiring production-grade, intentional design beyond templated layouts.

Your component library looks generic and inconsistent due to a lack of aesthetic governance and defined design tokens. Applying structured typography, color, and spacing guidelines resolves this by enforcing cohesive visual direction.