ui-templates
Collection of distinctive UI design templates. Each template provides a complete design system with colors, typography, components, and layouts. Use these when building production-ready interfaces.
SKILL.mdskills/ui-templates/skill.md
GitHubUI Templates
A collection of distinctive UI design templates with complete design systems.
Inspiration
This collection is inspired by designprompts.dev - AI-Powered Design Style Explorer.
Design Templates
| Template | Description | Reference |
|---|---|---|
| Academia | Scholarly gravitas meets timeless elegance. Channels the atmosphere of centuries-old university libraries and Renaissance manuscripts. | references/academia.md |
| Art Deco | The visual embodiment of the Roaring Twenties—opulence, mathematical precision, and architectural grandeur. | references/art-deco.md |
| Bauhaus | Form follows function with pure geometric beauty and primary color theory. Constructivist modernism. | references/bauhaus.md |
| Bold Typography | Typography isn't decoration—it's the entire visual language. Poster design translated to web. | references/bold-typography.md |
| Botanical | Digital ode to nature—breathes, flows, and grounds itself in organic beauty. Soft, sophisticated, and deeply intentional. | references/botanical.md |
| Claymorphism | High-fidelity simulation of premium digital clay. Tactile, voluminous, and physically grounded. | references/claymorphism.md |
| Cyberpunk | "High-Tech, Low-Life." Digital dystopia colliding with high-tech noir reality. Neon, glitch, and industrial brutality. | references/cyberpunk.md |
| Enterprise | Modern enterprise SaaS aesthetic—professional yet approachable, sophisticated yet friendly. | references/enterprise.md |
| Flat Design | Removes all artifice. Rejects three-dimensionality—hierarchy through size, color, and typography only. | references/flat-design.md |
| Industrial | Industrial Realism—tactile precision, mechanical reliability, and the soul of physical objects. | references/industrial.md |
| Kinetic | Typography is the entire visual structure. Text becomes image, headline becomes hero, motion becomes rhythm. | references/kinetic.md |
| Luxury | Elegance through restraint, precision, and depth. High-end fashion magazine aesthetic. | references/luxury.md |
| Material Design | Material You (MD3)—organic, expressive system with soft curves and tonal surfaces. | references/material-design.md |
| Maximalism | MORE IS MORE. Sensory overload, visual abundance, and unapologetic excess. Y2K-meets-Gen-Z aesthetic. | references/maximalism.md |
| Minimal Dark | Atmospheric depth through layers of darkness. Warm amber accents glow like embers in the night. | references/minimal-dark.md |
| Modern Dark | Precision, depth, and fluidity. Cinematic meets technical minimalism. Premium developer tools aesthetic. | references/modern-dark.md |
| Monochrome | Reduction to essence—black, white, and typography. Design as discipline where restraint becomes expression. | references/monochrome.md |
| Neo Brutalism | Digital punk rebellion. Vibrant, performative, intentionally distinct. Thick hard-edged lines and solid offset shadows. | references/neo-brutalism.md |
| Neumorphism | Physical depth through dual shadows—tactile, calm, modern, and physically grounded. | references/neumorphism.md |
| Newsprint | Editorial newspaper style reimagined for web. High-contrast typography, grid-based layouts, sharp geometric precision. | references/newsprint.md |
| Organic | Embraces wabi-sabi—warmth, softness, and natural connection. No straight lines in nature. | references/organic.md |
| Playful Geometric | Optimism, clarity, and tactile fun. Stable grid, wild decoration. Memphis Group inspired. | references/playful-geometric.md |
| Professional | Typographic elegance through classical restraint. Editorial, timeless, warm, refined. | references/professional.md |
| Retro | Raw, unfiltered aesthetic of the early web. 90s nostalgia—beveled buttons, system fonts, playful chaos. | references/retro.md |
| SaaS | Modern SaaS dashboard style. Clarity through structure, character through bold detail. | references/saas.md |
| Sketch | Hand-drawn style celebrates authentic imperfection. Organic, playful irregularity like sketches on paper. | references/sketch.md |
| Swiss Minimalist | International Typographic Style—objective communication, mathematical precision, and logical structure. | references/swiss-minimalist.md |
| Terminal | CLI aesthetic homage. Brutally functional, high-contrast, authentically retro. Monospace supremacy. | references/terminal.md |
| Vaporwave | Digital nostalgia meets neon future. 80s retro-futurism, synthetic reality drenched in retro-futuristic excess. | references/vaporwave.md |
| Web3 | Bitcoin DeFi aesthetic—sophisticated fusion of precision engineering, cryptographic trust, and digital gold. | references/web3.md |
Usage
- Choose a design template that matches your project needs
- Read the design system documentation in the reference file
- Implement using the provided color tokens, typography, and components
- Follow the layout and animation guidelines for consistency
Template Structure
Each template includes:
- Design Philosophy: Core principles and vibe
- Design Tokens: Colors, typography, spacing, borders, shadows
- Components: Buttons, cards, inputs, icons
- Layout: Grid systems, responsive breakpoints
- Animation: Transitions and micro-interactions
- Accessibility: Focus states, contrast requirements