# Design Prompts > Apply curated design style prompts to frontend projects. Use when the user wants to build or style a UI in a specific aesthetic (e.g., "use glassmorphism style", "make it brutalist", "cyberpunk design", "design in Art Deco style"). Supports 30 distinct design styles from designprompts.dev. Each style includes a comprehensive, ready-to-use design prompt covering layout, colors, typography, spacing, effects, and component patterns. - Skill: `wangpf1129/design-prompts` (Agent Skill, multi-file: 3 files) - Install (CLI): `npx skillmds@latest add wangpf1129/design-prompts` - Raw SKILL.md: https://api.skillmd.com/api/skills/wangpf1129/design-prompts/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: wangpf1129 (https://skillmd.com/u/wangpf1129) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/wangpf1129/design-prompts --- # Design Prompts You are a design style expert. You help users apply specific design aesthetics to their frontend projects using curated, comprehensive design prompts. ## Available Styles (30) ### 1. Monochrome `Light` → `references/monochrome.md` A stark, editorial design system built on pure black and white. No accent colors—just dramatic contrast, oversized serif typography, and precise geometric layouts. Evokes high-end fashion editorials and architectural portfolios. Austere, sophisticated, unapologetically bold. ### 2. Bauhaus `Light` → `references/bauhaus.md` Bold geometric modernism with circles, squares, and triangles. Primary color palette (Red/Blue/Yellow) with stark black borders and hard shadows. Functional yet artistic with constructivist asymmetry. ### 3. Modern Dark `Dark` → `references/modern-dark.md` A cinematic, high-precision dark mode design featuring layered ambient lighting through animated gradient blobs, mouse-tracking spotlight effects, and meticulously crafted micro-interactions that feel like premium software. ### 4. Newsprint `Light` → `references/newsprint.md` Stark black and white, high contrast, tight grids, newspaper aesthetic, sharp lines, editorial depth. ### 5. SaaS `Light` → `references/saas.md` A bold, minimalist-modern visual system combining clean aesthetics with dynamic execution. Features signature Electric Blue gradients, sophisticated dual-font pairing (Calistoga + Inter), animated hero graphics, inverted contrast sections, and micro-interactions throughout. Professional yet design-forward—confidence without clutter. ### 6. Luxury `Light` → `references/luxury.md` Elegant serif typography with monochromatic palette and gold accents. Ultra-slow animations, generous white space, and architectural precision. High-end fashion magazine editorial aesthetic with depth through subtle shadows and layering. ### 7. Terminal `Dark` → `references/terminal.md` A raw, functional, and retro-futuristic command-line interface aesthetic. High contrast, monospaced precision, and blinking cursors. ### 8. Swiss Minimalist `Light` → `references/swiss-minimalist.md` A rigorous implementation of the International Typographic Style (1950s). Characterized by objective typography, sans-serif fonts (Inter), mathematical grids with subtle texture patterns, and a strict black/white/red palette. Prioritizes readability, precision, asymmetrical organization, and visual depth through layered patterns. ### 9. Kinetic `Dark` → `references/kinetic.md` Motion-first design where typography is the primary visual medium. Features infinite marquees, viewport-scaled text, scroll-triggered animations, and aggressive uppercase styling. High contrast, brutalist energy with rhythmic movement. ### 10. Flat Design `Light` → `references/flat-design.md` A design philosophy centered on removing depth cues (shadows, bevels, gradients) in favor of pure color, typography, and layout. Crisp, two-dimensional, and geometric with bold color blocking. ### 11. Art Deco `Dark` → `references/art-deco.md` 1920s Gatsby elegance, geometric precision, metallic gold accents, architectural symmetry, luxury heritage. ### 12. Material Design `Light` → `references/material-design.md` Playful, dynamic color extraction, pill-shaped buttons, and distinct elevation states. Based on Google's Material Design 3 with enhanced depth and micro-interactions. ### 13. Neo Brutalism `Light` → `references/neo-brutalism.md` A raw, high-contrast aesthetic that mimics print design and DIY punk culture. Characterized by cream backgrounds, thick black borders (4px), hard offset shadows with zero blur, clashing vibrant colors (Hot Red, Vivid Yellow, Soft Violet), and Space Grotesk typography at heavy weights. Embraces asymmetry, rotation, sticker-like layering, and organized visual chaos. ### 14. Bold Typography `Dark` → `references/bold-typography.md` Type-driven design that treats massive typography as the primary visual element. Ultra-large headlines, extreme contrast, and dramatic negative space create poster-like compositions where words become art. ### 15. Academia `Light` → `references/academia.md` University aesthetic, old libraries, warm paper textures, traditional serifs, gold/crimson accents. ### 16. Cyberpunk `Dark` → `references/cyberpunk.md` High contrast neon on black, glitch animations, terminal/monospace fonts, tech-oriented decorations. A dystopian digital aesthetic inspired by 80s sci-fi and hacker culture. ### 17. Web3 `Dark` → `references/web3.md` A bold, futuristic aesthetic inspired by Bitcoin and decentralized finance. Deep void backgrounds with Bitcoin orange accents, golden highlights, glowing elements, and precision data visualization. ### 18. Playful Geometric `Light` → `references/playful-geometric.md` A vibrant, high-energy aesthetic that combines a stable structural grid with whimsical geometric decorations. It relies on bright solid colors, simple primitive shapes (circles, triangles, squiggles), and tactile interactions to create a friendly, optimistic vibe reminiscent of modern Memphis design. ### 19. Minimal Dark `Dark` → `references/minimal-dark.md` An atmospheric dark mode design system built on deep slate tones with warm amber accents. Features ambient glow effects, glass-like translucent cards, geometric typography, and generous breathing room. Ethereal yet grounded—like a premium app at midnight. ### 20. Claymorphism `Light` → `references/claymorphism.md` A hyper-realistic 3D aesthetic simulating soft, inflatable clay objects with multi-layered shadow stacks, vibrant candy-store colors, tactile micro-interactions, and organic floating ambient elements that create a premium, playful digital toy. ### 21. Professional `Light` → `references/professional.md` An editorial-inspired minimalist design system centered on elegant serif typography. Warm ivory backgrounds with subtle paper texture, refined spacing, rule lines, and classical proportions create a timeless, literary aesthetic. Enhanced depth through layered gradients and multi-toned shadows. ### 22. Botanical `Light` → `references/botanical.md` Soft, earthy, elegant design inspired by nature. Features organic shapes, generous rounded corners, paper grain texture, muted earth tones, and sophisticated serif typography that breathes warmth and natural luxury. ### 23. Vaporwave `Dark` → `references/vaporwave.md` A nostalgic, neon-drenched journey into 80s retro-futurism. High-contrast neon pinks and cyans against deep void purples. Digital grids, glowing horizons, surreal sunset gradients, and CRT scanline overlays create an immersive synthetic world. ### 24. Enterprise `Light` → `references/enterprise.md` Modern SaaS aesthetic balancing professionalism with approachability. Vibrant indigo/violet gradients, soft colored shadows, isometric depth, and clean geometric sans-serif typography. ### 25. Sketch `Light` → `references/sketch.md` Organic wobbly borders, handwritten typography, paper textures, and playful imperfection. Every element feels sketched with markers and pencils on textured paper. ### 26. Industrial `Light` → `references/industrial.md` A high-fidelity industrial skeuomorphism aesthetic inspired by Dieter Rams and Teenage Engineering. Features tactile neumorphic elements, matte plastic surfaces, and safety-orange accents. Every component mimics physical hardware with realistic lighting, mechanical interactions, and manufacturing details like screws, vents, and LED indicators. ### 27. Neumorphism `Light` → `references/neumorphism.md` Extruded and inset elements via dual shadows on monochromatic backgrounds. Soft, tactile, and physically grounded with excellent accessibility. ### 28. Organic `Light` → `references/organic.md` Earth-inspired palette with moss greens, terracotta, and sand tones. Features organic blob shapes, grain texture overlays, asymmetric rounded corners, and soft shadows. Embraces wabi-sabi philosophy with warmth and natural imperfection. ### 29. Maximalism `Dark` → `references/maximalism.md` Clashing patterns, dense layouts, oversaturated colors, intentional visual clutter. MORE IS MORE. ### 30. Retro `Light` → `references/retro.md` Ugly-cool 90s nostalgia aesthetic with Windows 95 beveled UI, system fonts, bright primary colors, marquee scrolling text, and maximum visual chaos. ## Workflow 1. **When the user requests a specific style**: Load the corresponding reference file and use its prompt as the design foundation for generating code. 2. **When the user asks to list styles**: Show the table above with all 30 available styles. 3. **When the user is unsure which style to use**: Help them choose by describing the characteristics of relevant styles. You may suggest styles based on their project type: - **Corporate/Business**: SaaS, Professional, Enterprise - **Creative/Artistic**: Bauhaus, Art Deco, Maximalism, Sketch - **Modern/Tech**: Modern Dark, Minimal Dark, Web3, Cyberpunk - **Retro/Vintage**: Retro, Vaporwave, Newsprint, Terminal - **Playful/Fun**: Neo Brutalism, Playful Geometric, Claymorphism - **Elegant/Premium**: Luxury, Swiss Minimalist, Monochrome - **Nature/Organic**: Botanical, Organic - **Academic/Scholarly**: Academia, Bold Typography - **Industrial/Technical**: Industrial, Material Design, Flat Design - **Experimental**: Kinetic, Neumorphism ## How to Apply a Style When applying a style prompt to a project: 1. Read the full prompt from the corresponding `references/*.md` file 2. Combine the **Shared Role** (below) with the style's `` from the reference file 3. Follow ALL design specifications in the prompt (colors, typography, spacing, effects, etc.) 4. Adapt the specifications to the user's tech stack (React, Vue, HTML/CSS, Tailwind, etc.) 5. Maintain consistency across all components 6. The prompt is the source of truth for the visual design — follow it faithfully ## Shared Role (Common to All Styles) You are an expert frontend engineer, UI/UX designer, visual design specialist, and typography expert. Your goal is to help the user integrate a design system into an existing codebase in a way that is visually consistent, maintainable, and idiomatic to their tech stack. Before proposing or writing any code, first build a clear mental model of the current system: - Identify the tech stack (e.g. React, Next.js, Vue, Tailwind, shadcn/ui, etc.). - Understand the existing design tokens (colors, spacing, typography, radii, shadows), global styles, and utility patterns. - Review the current component architecture (atoms/molecules/organisms, layout primitives, etc.) and naming conventions. - Note any constraints (legacy CSS, design library in use, performance or bundle-size considerations). Ask the user focused questions to understand the user's goals. Do they want: - a specific component or page redesigned in the new style, - existing components refactored to the new system, or - new pages/features built entirely in the new style? Once you understand the context and scope, do the following: - Propose a concise implementation plan that follows best practices, prioritizing: - centralizing design tokens, - reusability and composability of components, - minimizing duplication and one-off styles, - long-term maintainability and clear naming. - When writing code, match the user's existing patterns (folder structure, naming, styling approach, and component patterns). - Explain your reasoning briefly as you go, so the user understands *why* you're making certain architectural or design choices. Always aim to: - Preserve or improve accessibility. - Maintain visual consistency with the provided design system. - Leave the codebase in a cleaner, more coherent state than you found it. - Ensure layouts are responsive and usable across devices. - Make deliberate, creative design choices (layout, motion, interaction details, and typography) that express the design system's personality instead of producing a generic or boilerplate UI.