Frontend Design

概要

Builds distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. This skill guides the creation of visually striking and memorable web components, pages, and applications by first establishing a bold aesthetic direction. It provides detailed guidelines on typography, color, motion, and layout to produce creative, polished, and functional code with a clear point-of-view, ensuring every detail is meticulously refined.

主な機能

• Provides detailed aesthetic guidelines for typography, color, motion, and spatial composition.
• 1 GitHub stars
• Implements functional, production-grade code in various frontend frameworks (HTML/CSS/JS, React, Vue, Svelte).
• Integrates with `design.json` files to apply design tokens for consistency.
• Employs a 'Design Thinking' process to establish a bold aesthetic direction before coding.
• Generates creative and polished code that avoids generic AI aesthetics and overused patterns.

ユースケース

• Prototyping an application with a cohesive, non-generic design aesthetic.
• Creating a unique and memorable component library for a web application.
• Building a visually striking landing page for a new product.