Create bold, high-end, production-grade frontend interfaces with the mindset of a professional UI/UX designer and frontend engineer. This skill is used when the user asks to design or redesign web interfaces (components, pages, dashboards, or applications) that must feel intentional, distinctive, and non-generic. The model should actively draw inspiration from a wide range of real-world design references (e.g. modern product interfaces, editorial layouts, design systems, experimental web design, trends seen on platforms like Pinterest, Awwwards, Dribbble), without copying any single source. The output must be real, implementation-ready code, but should avoid rigid, template-like, or overly symmetric “AI-looking” components. Layouts, spacing, typography, hierarchy, and interaction patterns should feel designed, not generated. Preference is given to strong visual direction, thoughtful UX decisions, and controlled experimentation over safe or conventional UI patterns.
Inherits all available tools
Additional assets for this skill
This skill inherits all available tools. When active, it can use any tool Claude has access to.
USAGE.mdtemplates/design-tokens-template.cssname: frontend-design description: Create bold, high-end, production-grade frontend interfaces with the mindset of a professional UI/UX designer and frontend engineer. This skill is used when the user asks to design or redesign web interfaces (components, pages, dashboards, or applications) that must feel intentional, distinctive, and non-generic.
The model should actively draw inspiration from a wide range of real-world design references (e.g. modern product interfaces, editorial layouts, design systems, experimental web design, trends seen on platforms like Pinterest, Awwwards, Dribbble), without copying any single source.
The output must be real, implementation-ready code, but should avoid rigid, template-like, or overly symmetric “AI-looking” components. Layouts, spacing, typography, hierarchy, and interaction patterns should feel designed, not generated.
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
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.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
Focus on:
NEVER use generic AI aesthetics: Inter/Roboto/Arial fonts, purple gradients on white, predictable layouts, cookie-cutter design lacking context-specific character. No design should be the same. NEVER converge on common choices (Space Grotesk, etc.).
IMPORTANT: Match code complexity to vision. Maximalist = elaborate animations. Minimalist = restraint and precision.
Discovery → Understand requirements, audience, constraints → Define 3 key visual principles Concept → Choose aesthetic direction → Select fonts (1-2), colors (3-5), spacing scale Implement → Design tokens → Semantic HTML → Visuals → Motion → Polish Verify → Accessibility, responsiveness, performance
Before implementing, check if user's project has existing design tokens:
Check: tailwind.config.js, CSS :root variables, theme.js, styles/variables.css, styled-components themes
If found: Extract and use existing colors/typography/spacing. Follow naming conventions. Only add new tokens for gaps.
If not found: Use templates/design-tokens-template.css or create inline matching chosen aesthetic.
WCAG 2.1 AA required. Creative freedom in aesthetics, NOT accessibility.
@media (prefers-reduced-motion: reduce) for all animationsRule: Accessibility wins. External ref: https://www.w3.org/WAI/WCAG21/quickref/
Mobile-first. Breakpoints: 640px (sm), 768px (md), 1024px (lg), 1280px (xl).
clamp(1rem, 0.5rem + 2vw, 2rem)Design Tokens: Follow this structure: fonts, colors, spacing, radius, shadows, animation timings (see templates/design-tokens-template.css for reference)
Animations:
Code Quality:
Delivery Checklist: ✓ All states (hover/focus/loading/error) ✓ Responsive ✓ Accessible ✓ No console errors