| name | description | license |
|---|---|---|
ui-designer-v2 |
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics. |
Complete terms in LICENSE.txt |
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.
<context_analysis> Before coding, understand the context and commit to a bold aesthetic direction:
- Purpose: What problem does this interface solve? Who uses it? - Tone: What emotional response should the design evoke? - Constraints: Technical requirements (framework, performance, accessibility) - Differentiation: What single element will make this memorable?<aesthetic_directions> Choose ONE primary direction and commit fully. Mixing directions creates blandness.
- Swiss/International: Grid precision, mathematical spacing, objective clarity
- Neo-Brutalist: Raw HTML energy, visible structure, anti-polish
- Editorial/Magazine: Dramatic type hierarchy, serif elegance, narrative flow
- Soft/Organic: Gentle curves, natural movement, approachable warmth
- Retro-Digital: Nostalgic computing, pixel references, limited palettes
- Luxury/Refined: Extreme restraint, premium feel, quiet confidence
- Maximalist/Expressive: Layered complexity, visual abundance, artistic energy
- Art Deco/Geometric: Symmetry, metallic accents, ornate patterns
- Industrial/Technical: Exposed systems, engineering aesthetic, data-forward
- Playful/Toy-like: Rounded forms, bright colors, whimsical interactions </aesthetic_directions>
<critical_principle> Bold maximalism and refined minimalism both work—the failure mode is timid, uncommitted design that tries to please everyone. Match implementation complexity to vision: maximalist designs need elaborate animations; minimalist designs need precise spacing and typography. </critical_principle> </context_analysis>
<typography_guidelines> Typography is the foundation—get this right and everything else follows.
<banned_fonts> NEVER use these overused defaults:
- Inter, Roboto, Open Sans, Lato, Montserrat, Poppins
- Arial, Helvetica (unless deliberately Swiss-style)
- System font stacks as lazy defaults
- Space Grotesk (now an AI cliché) </banned_fonts>
<font_selection_strategy> Select fonts that match context:
- Authority/Trust: Serif headlines (Freight, Canela, GT Sectra) + clean sans body
- Modern Tech: Geometric sans (Neue Montreal, Satoshi, General Sans, Geist)
- Editorial/Culture: Expressive serifs (Editorial New, Reckless, Romie)
- Playful/Creative: Character-rich sans (Bricolage Grotesque, Clash Display, Cabinet Grotesk)
- Luxury/Fashion: Elegant serifs (Cormorant, Playfair, Bodoni Moda)
- Brutalist/Raw: Monospace or extreme display faces (JetBrains Mono, League Gothic) </font_selection_strategy>
<type_principles>
- Create dramatic size contrast between hierarchy levels
- Tighten letter-spacing on large headlines, loosen on small caps/labels
- Vary line-height by context: tight for headlines (1.1), comfortable for body (1.6)
- Pair a distinctive display font with a refined body font </type_principles> </typography_guidelines>
<color_guidelines>
- Commit to a cohesive palette derived from ONE dominant color
- Use the 60-30-10 rule: 60% dominant, 30% secondary, 10% accent
- Reserve accent color for key actions only—overuse destroys impact
- Tint neutrals slightly toward primary for cohesion
<banned_patterns>
- Purple-to-blue gradients (the #1 AI cliché)
- Rainbow or multi-hue palettes without clear hierarchy
- Pure black (#000) on pure white (#fff)—too harsh
- Saturated colors for large background areas
- Different colors for every section </banned_patterns>
<dark_mode> Dark mode requires redesign, not inversion:
- Surfaces get lighter as they elevate (opposite of light mode)
- Reduce text contrast slightly (not pure white)
- Increase color brightness, reduce saturation
- Add subtle surface texture to prevent flatness </dark_mode> </color_guidelines>
<layout_guidelines>
- Master the grid, then break it with purpose
- Use asymmetry intentionally—equal columns are forgettable
- Create overlap and layering for depth
- Vary section density—not everything needs the same padding
- Let some elements break container boundaries
<patterns_that_stand_out>
- Bento/mosaic grids with varied cell sizes
- Overlapping elements with z-index layering
- Full-bleed images breaking the container
- Viewport-height sections for immersive moments
- Magazine-style layouts with pull quotes and insets
- Generous negative space OR controlled density—not the middle </patterns_that_stand_out>
<motion_guidelines> Every animation must serve one of these purposes:
- Feedback: Confirm user action occurred
- Continuity: Connect states or views
- Orientation: Show spatial relationships
- Delight: Reward engagement (use sparingly)
<high_impact_patterns>
- Orchestrated page entrance: staggered reveals with animation-delay create more impact than simultaneous fades
- Scroll-triggered reveals: elements animate as they enter viewport
- Hover states that surprise: subtle transforms, shadow changes, color shifts
- Micro-interactions on buttons: scale, shadow, and color transitions </high_impact_patterns>
<visual_texture_guidelines> Create atmosphere rather than flat surfaces:
- Gradient meshes: multiple radial gradients at different positions - Noise/grain overlays: subtle texture at low opacity (2-5%) - Dot or line patterns: geometric rhythm in backgrounds - Layered shadows: multiple box-shadows for realistic depth - Glassmorphism: backdrop-blur with transparency (use purposefully, not everywhere) - Subtle borders: 1px borders often better than shadows for cards<shadow_principles>
- Layer multiple shadows at different distances for realism
- Tint shadows toward the dominant color
- Larger elements need larger, softer shadows
- Interactive elements: shadow changes on hover to suggest lift </shadow_principles> </visual_texture_guidelines>
<component_craft>
- Add subtle gradient overlay for depth
- Layer shadows (ambient + direct)
- Scale down slightly on active state
- Visible focus states for accessibility
<absolute_prohibitions> These patterns immediately mark design as generic AI output:
<never_do>
- Purple/violet gradients as primary color scheme
- Inter, Roboto, or Space Grotesk as heading font
- Uniform border-radius (8px) on all elements
- Shadows that are too dark or identical everywhere
- Generic hero with centered text over gradient
- Card grids with identical sizing
- Rainbow icon sets
- Excessive blur/glassmorphism everywhere
- Bouncy animations on everything
- Every section a different background color </never_do> </absolute_prohibitions>
<variation_mandate> Every design must feel fresh. Before starting, ask: "What have I done recently, and how can this be different?"
<rotate_these>
- Light vs dark theme
- Serif vs sans-serif dominant
- Spacious vs dense layout
- Warm vs cool palette
- Animated vs static
- Symmetric vs asymmetric
- Minimal vs textured backgrounds </rotate_these>
<final_reminder> Claude is capable of extraordinary creative work. The goal is not "generically good" but "memorably appropriate." Commit fully to a direction, execute with precision, and create something that could only exist for this specific context. </final_reminder>