frontend-design-3Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Install via ClawdBot CLI:
clawdbot install michaelmonetized/frontend-design-3Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
Before coding, understand the context and commit to a BOLD aesthetic direction:
CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.
Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt for distinctive choices that elevate the interface. Pair a distinctive display font with a refined body font.
Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.
Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
Create atmosphere and depth rather than defaulting to solid colors. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
NEVER use:
NEVER converge on common AI choices (Space Grotesk, for example) across generations.
Match implementation complexity to the aesthetic vision:
Elegance comes from executing the vision well.
Implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
Vary between light and dark themes, different fonts, different aesthetics. No design should be the same.
Remember: Claude is capable of extraordinary creative work. Don't hold back — show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
Generated Mar 1, 2026
Design a high-end e-commerce interface with a luxury/refined tone, using art deco geometric patterns and dramatic shadows to showcase premium products. Implement a dark theme with gold accents and a distinctive display font to create an unforgettable shopping experience that emphasizes exclusivity and sophistication.
Build a maximalist chaos portfolio site for a design agency, featuring asymmetric layouts, gradient meshes, and extensive CSS animations for page load reveals. Use bold color schemes and overlapping elements to highlight creative projects, ensuring the interface is visually striking and reflects the agency's innovative edge.
Develop a soft/pastel themed dashboard for a wellness app, focusing on organic/natural aesthetics with noise textures and generous negative space. Implement subtle micro-interactions and a refined body font to enhance user engagement, providing a calming and cohesive interface for tracking health metrics.
Create a playful/toy-like interface for an educational website, using bright colors, custom cursors, and diagonal flow layouts to make learning interactive. Incorporate motion effects with CSS-only solutions for high-impact moments, ensuring the design is memorable and avoids generic AI aesthetics to appeal to young users.
Design an editorial/magazine style website with a brutalist/raw tone, using unexpected typography pairings and controlled density. Apply geometric patterns and layered transparencies to create depth, focusing on production-grade code that delivers a distinctive reading experience with sharp accents and no clichéd layouts.
Offer bespoke frontend design services to clients seeking unique, production-grade interfaces. Charge project-based fees or retainers for ongoing design updates, leveraging the skill's emphasis on creative, polished code to differentiate from competitors using generic templates.
Sell subscription-based access to a library of distinctive frontend templates and components generated with this skill. Target startups and developers looking for non-generic designs, with tiers based on usage and customization options, ensuring each template varies in aesthetics to avoid repetition.
Provide consulting services to help teams implement bold aesthetic directions and avoid AI slop in their projects. Host paid workshops on frontend design thinking and advanced CSS techniques, generating income through hourly rates or packaged training sessions.
💬 Integration Tip
Integrate this skill early in the design phase to establish a clear aesthetic direction; use CSS variables and motion libraries like Framer Motion for React to maintain consistency and implement high-impact animations efficiently.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.
AI skill for automated UI audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco.
Full React 19 engineering, architecture, Server Components, hooks, Zustand, TanStack Query, forms, performance, testing, production deploy.