Frontend Design
Generate distinctive, production-grade frontend interfaces with bold aesthetic direction — avoiding generic AI aesthetics in favor of memorable, polished design.
# Frontend Design Generate distinctive, production-grade frontend interfaces with bold aesthetic direction — avoiding generic AI aesthetics in favor of memorable, polished design. Frontend Design guides your AI agent to create visually striking, production-ready web interfaces. Instead of producing generic, cookie-cutter layouts, it enforces a design thinking process that results in distinctive components, pages, and applications with intentional aesthetic choices and meticulous attention to detail. ## How It Works Before writing any code, the skill prompts a design thinking phase: understanding the purpose, choosing a bold aesthetic direction (brutalist, maximalist, retro-futuristic, editorial, and many more), identifying constraints, and determining what makes the design memorable. It then implements working code (HTML/CSS/JS, React, Vue, etc.) that is cohesive, functional, and visually refined. ## Key Features - **Design Thinking Process**: Forces deliberate consideration of purpose, tone, constraints, and differentiation before coding - **Anti-Slop Aesthetics**: Actively avoids generic AI patterns: no Inter/Roboto defaults, no cliched purple gradients, no predictable component layouts - **Typography Focus**: Encourages distinctive, characterful font pairings over safe, generic choices - **Bold Color Direction**: Dominant colors with sharp accents instead of timid, evenly-distributed palettes, using CSS variables for consistency - **Motion and Micro-Interactions**: Scroll-triggered animations, staggered reveals, hover surprises using CSS or the Motion library - **Spatial Composition**: Asymmetry, overlap, diagonal flow, grid-breaking elements, and deliberate use of negative space - **Atmospheric Backgrounds**: Gradient meshes, noise textures, geometric patterns, layered transparencies, and grain overlays ## Requirements - **No API keys or external dependencies required**: This is a prompt-based skill that guides your agent's design approach. Works with any frontend framework (React, Vue, HTML/CSS/JS, etc.). ## Use Cases - **Landing Pages**: Create memorable marketing pages with strong visual identity instead of template-like output - **Web Components**: Build distinctive UI components with intentional typography, color, and motion choices - **Application Interfaces**: Design full app UIs with cohesive aesthetics that feel genuinely designed, not AI-generated - **Creative Projects**: When the brief calls for visual impact and differentiation over safe, conventional design ## Installation Install via: `npx clawhub@latest install frontend-design`