UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin

Groups

All skills723D2Accessibility1Animation6Asset2Component1Design System27Icon2Implementation2Layout6QA1Shadow1Style9Three.js1WebGL11

Most Used

01Work Breakdown Structure Master10.0K02Border Gradients9.9K03Masked Reveal8.9K04Aura Asset Images8.8K05Framed Grid Layout4.8K

Skill Layer

Local expression and techniquesSpecial Skills handle layout, motion, assets, shadows, and local expression. Design Systems now live on their own page.

UI DESIGN LAB Skill Library

Skill LibraryPrompt Skills72 Skills72 Shown

Browse reusable special Prompt Skills.

This library now focuses on local techniques: layout, motion, assets, WebGL, icons, shadows, and component treatments. Page-level Design Systems have their own navigation.

Skill Index

Most-used prompt skills

Ranked by recorded usage so teams can find high-frequency design moves quickly.

01Work Breakdown Structure Master02Border Gradients03Masked Reveal04Aura Asset Images05Framed Grid Layout
67 more skills below
Active Skills72
Groups14
Total Uses59.2K
AccessFree
Library

All Prompt Skills

Reset filters
Design System10.0K uses

Work Breakdown Structure Master

A master Skill for standardizing every work page analysis: intent, regions, hierarchy, visual system, Skill mapping, and next outputs.

A master Skill for standardizing every work page analysis: intent, regions, hierarchy, visual system, Skill mapping, and next outputs.Pro
Style9.9K uses

Border Gradients

Apply subtle gradient-border treatments for premium surfaces.

Apply subtle gradient-border treatments for premium surfaces.Pro
Animation8.9K uses

Masked Reveal

Create masked staggered word reveal on scroll with GSAP ScrollTrigger.

Create masked staggered word reveal on scroll with GSAP ScrollTrigger.Pro
Asset8.8K uses

Aura Asset Images

Search Aura assets like Unsplash, curate 5 strong direct image URLs, and prefer higher-res variants when available.

Search Aura assets like Unsplash, curate 5 strong direct image URLs, and prefer higher-res variants when available.Pro
Layout4.8K uses

Framed Grid Layout

Minimal layout with thin visible boundary lines outlining each section. Add L-shaped corner brackets on container edges to emphasize the frame. Use subtle diagonal background lines (1px, very low opacity) for light texture. Keep everything consistent across sections. Each section sits inside a precise framed box with thin guide borders, strict vertical and horizontal alignment, clear separation between sections, and consistent spacing between frames. Clean, neutral, grid-based, highly structured.

Minimal layout with thin visible boundary lines outlining each section. Add L-shaped corner brackets on container edges to emphasize the frame. Use subtle diagonal background lines (1px, very low opacity) for light texture. Keep everything consistent across sections. Each section sits inside a precise framed box with thin guide borders, strict vertical and horizontal alignment, clear separation between sections, and consistent spacing between frames. Clean, neutral, grid-based, highly structured.Pro
Layout4.2K uses

Container Lines

Add vertical container-size lines with mini corner squares.

Add vertical container-size lines with mini corner squares.Pro
Animation1.7K uses

GSAP Motion

Use GSAP timelines, stagger, and scroll-triggered motion.

Use GSAP timelines, stagger, and scroll-triggered motion.Pro
Style1.1K uses

Skeuomorphic UI

Create a skeuomorphic surface style using layered gradients and shadows. Use soft vertical gradients (light top to darker bottom), multiple inset shadows to simulate carved or pressed surfaces, subtle outer shadows for elevation, fine highlights on top edges, darker lower edges, and rounded shapes with smooth transitions. Technique: stack inner and outer shadows to build depth, use micro-details like small dots or textures for realism, add gradient borders (1px wrapper) to simulate reflective edges, and use text shadows and icon shadows for an embossed feel.

Create a skeuomorphic surface style using layered gradients and shadows. Use soft vertical gradients (light top to darker bottom), multiple inset shadows to simulate carved or pressed surfaces, subtle outer shadows for elevation, fine highlights on top edges, darker lower edges, and rounded shapes with smooth transitions. Technique: stack inner and outer shadows to build depth, use micro-details like small dots or textures for realism, add gradient borders (1px wrapper) to simulate reflective edges, and use text shadows and icon shadows for an embossed feel.Pro
Style1.1K uses

Dither Background

Generate a dark ordered-dither background with coarse square pixels and soft wave falloff.

Generate a dark ordered-dither background with coarse square pixels and soft wave falloff.Pro
Shadow914 uses

Beautiful Shadows

Use the Beautiful sm/md/lg Tailwind shadow presets for refined layered elevation.

Use the Beautiful sm/md/lg Tailwind shadow presets for refined layered elevation.Pro
WebGL711 uses

WebGL Laser

Add a focused WebGL laser beam background that uses the design's primary color, with a thin beam, smoky volumetric fog, glow, and a fixed full-screen canvas behind the UI.

Add a focused WebGL laser beam background that uses the design's primary color, with a thin beam, smoky volumetric fog, glow, and a fixed full-screen canvas behind the UI.Pro
Design System639 uses

Mesh Gradient Dark Blue Clean

Create a dark-blue clean design system built around a shader-like mesh gradient background, premium glass-border shells, and restrained planetary-tech atmosphere.

Create a dark-blue clean design system built around a shader-like mesh gradient background, premium glass-border shells, and restrained planetary-tech atmosphere.Pro
Design System495 uses

Clean Minimal Beige Light Mode

Create a clean minimal beige light-mode design system with warm neutral shells, quiet process grids, restrained accent color, and elegant low-contrast structure.

Create a clean minimal beige light-mode design system with warm neutral shells, quiet process grids, restrained accent color, and elegant low-contrast structure.Pro
Design System490 uses

Glass Dark Mode Clock

Create a dark glass design system with frosted shells, soft beam grids, circular clock-like calibration dials, and precise sci-fi instrument framing.

Create a dark glass design system with frosted shells, soft beam grids, circular clock-like calibration dials, and precise sci-fi instrument framing.Pro
Design System435 uses

Agency Grid Layout Minimal

Create a minimal agency design system with a disciplined editorial grid, oversized typography, quiet uppercase utility labels, restrained image blocks, and subtle structural detail.

Create a minimal agency design system with a disciplined editorial grid, oversized typography, quiet uppercase utility labels, restrained image blocks, and subtle structural detail.Pro
3D379 uses

WebGL 3D Object

Create a 3D WebGL object with real lighting and depth. Use a geometric mesh (faceted shape) with physically-based material (metalness, roughness, emissive). Light it with directional and ambient lights to reveal form and edges. Technique: real 3D geometry (not CSS transforms), dynamic lighting for highlights and shadows, subtle rotation and floating motion, and a perspective camera for depth.

Create a 3D WebGL object with real lighting and depth. Use a geometric mesh (faceted shape) with physically-based material (metalness, roughness, emissive). Light it with directional and ambient lights to reveal form and edges. Technique: real 3D geometry (not CSS transforms), dynamic lighting for highlights and shadows, subtle rotation and floating motion, and a perspective camera for depth.Pro
Layout285 uses

Background Grid WebGL

Create a perspective WebGL background grid with fading lines, subtle particle haze, slow forward drift, and gentle camera parallax.

Create a perspective WebGL background grid with fading lines, subtle particle haze, slow forward drift, and gentle camera parallax.Pro
Design System257 uses

High Contrast Skeuomorphic Clean

Create a high-contrast clean skeuomorphic design system with molded dark surfaces, crisp light separation, tactile inset depth, and restrained signal accents.

Create a high-contrast clean skeuomorphic design system with molded dark surfaces, crisp light separation, tactile inset depth, and restrained signal accents.Pro
Design System254 uses

Orange Clean Paper SaaS

Create a clean paper-toned SaaS design system with warm neutrals, orange accent signals, rounded premium forms, and polished product illustration surfaces.

Create a clean paper-toned SaaS design system with warm neutrals, orange accent signals, rounded premium forms, and polished product illustration surfaces.Pro
Design System232 uses

Light Mode Paper Technical

Create a light-mode technical design system with warm paper surfaces, dark outer framing, subtle diagonal texture, precise bracketed geometry, and restrained accent signals.

Create a light-mode technical design system with warm paper surfaces, dark outer framing, subtle diagonal texture, precise bracketed geometry, and restrained accent signals.Pro
Layout214 uses

Corner Diagonals

Add diagonal cut corners to buttons and containers using chamfered silhouettes, clipped edges, and framed geometric shells.

Add diagonal cut corners to buttons and containers using chamfered silhouettes, clipped edges, and framed geometric shells.Pro
Design System209 uses

Technical Terminal & WebGL Grid System

A high-precision industrial design system featuring infinite grid lines, terminal-style shaders, and masked GSAP typography.

A high-precision industrial design system featuring infinite grid lines, terminal-style shaders, and masked GSAP typography.Pro
Design System206 uses

Nested Container Clean Agency

Create a clean agency design system built from nested containers, with an outer editorial shell, inset dark feature blocks, rounded premium cards, and restrained accent color.

Create a clean agency design system built from nested containers, with an outer editorial shell, inset dark feature blocks, rounded premium cards, and restrained accent color.Pro
Design System193 uses

Editorial Tech

Blend editorial magazine composition with precision product-tech detailing using asymmetrical grids, cinematic media bands, mono utility labels, and restrained accent color.

Blend editorial magazine composition with precision product-tech detailing using asymmetrical grids, cinematic media bands, mono utility labels, and restrained accent color.Pro
Design System193 uses

Image First Grid Layout

Create an image-led grid design system with full-bleed photography, structural guide lines, anchored content blocks, and restrained technical overlays.

Create an image-led grid design system with full-bleed photography, structural guide lines, anchored content blocks, and restrained technical overlays.Pro
Icon186 uses

Company Logos

Use Iconify Simple Icons logos (64x64) instead of text logos.

Use Iconify Simple Icons logos (64x64) instead of text logos.Pro
3D173 uses

Globe Particles

Create a 3D globe made from luminous particles, with a dense spherical core, orbital ring, additive glow, and subtle motion.

Create a 3D globe made from luminous particles, with a dense spherical core, orbital ring, additive glow, and subtle motion.Pro
Design System161 uses

Split Layout Technical

Create a technical split-screen design system with dual panels, fine frame lines, mono metadata, quiet editorial typography, and premium inset surfaces.

Create a technical split-screen design system with dual panels, fine frame lines, mono metadata, quiet editorial typography, and premium inset surfaces.Pro
Design System149 uses

Stepped Neon V-Curve Glass System

High-contrast dark system featuring dynamic vertical bar animations and pill-shaped glassy interfaces with white glow accents.

High-contrast dark system featuring dynamic vertical bar animations and pill-shaped glassy interfaces with white glow accents.Pro
Icon145 uses

Solar Duotone Bold

Use Iconify Solar Duotone Bold icon style.

Use Iconify Solar Duotone Bold icon style.Pro
Design System145 uses

Technical Framed Grid Design System

A technical dark-mode system with framed grid layouts, tactical corner accents, and grain-textured WebGL shader backgrounds.

A technical dark-mode system with framed grid layouts, tactical corner accents, and grain-textured WebGL shader backgrounds.Pro
Design System131 uses

Blue Cloudy Clean Modern

Create a clean modern design system with a luminous blue sky atmosphere, soft drifting cloud light, minimal white framing, and serene premium typography.

Create a clean modern design system with a luminous blue sky atmosphere, soft drifting cloud light, minimal white framing, and serene premium typography.Pro
WebGL124 uses

Magic Rings Telemetry Aesthetic

A technical industrial-minimalist design system featuring skeuomorphic UI, glassmorphism, and reactive WebGL orbital ring fields.

A technical industrial-minimalist design system featuring skeuomorphic UI, glassmorphism, and reactive WebGL orbital ring fields.Pro
Layout122 uses

Nested Container Frames

Create a container-in-container layout system using nested frames. Use an outer centered container with visible vertical boundary lines and corner markers. Inside, place inner containers inset from the edges, each with its own background and rounded frame. Technique: outer container defines global bounds, inner containers use padding to create inset spacing, layered frames (border + background) to separate levels, and consistent spacing between outer frame and inner blocks.

Create a container-in-container layout system using nested frames. Use an outer centered container with visible vertical boundary lines and corner markers. Inside, place inner containers inset from the edges, each with its own background and rounded frame. Technique: outer container defines global bounds, inner containers use padding to create inset spacing, layered frames (border + background) to separate levels, and consistent spacing between outer frame and inner blocks.Pro
WebGL97 uses

Corner Lasers

Create a corner-anchored laser composition with thin beams, a bright emitter node, bloom, and atmospheric glow or fog.

Create a corner-anchored laser composition with thin beams, a bright emitter node, bloom, and atmospheric glow or fog.Pro
Design System95 uses

Industrial WebGL Minimalist System

Monochromatic high-contrast aesthetic combining rigid architectural grids with fluid, shader-displaced geometric backgrounds.

Monochromatic high-contrast aesthetic combining rigid architectural grids with fluid, shader-displaced geometric backgrounds.Pro
Style91 uses

Progressive Blur

Use layered edge blur overlays for depth, with top and bottom reference snippets plus tuning guidance.

Use layered edge blur overlays for depth, with top and bottom reference snippets plus tuning guidance.Pro
Design System87 uses

Technical Wireframe Info Layout

Create a monochrome technical wireframe design system with exploded 3D structure, connector annotations, sparse information labels, and precise dark diagnostic framing.

Create a monochrome technical wireframe design system with exploded 3D structure, connector annotations, sparse information labels, and precise dark diagnostic framing.Pro
Design System63 uses

Cursor-Reactive Flashlight Glow Border

Dynamic edge illumination using conic gradients and JS-driven cursor tracking for technical dark-mode interfaces.

Dynamic edge illumination using conic gradients and JS-driven cursor tracking for technical dark-mode interfaces.Pro
WebGL63 uses

Atmospheric Grain WebGL Background

A technical, meditative background field using GLSL shaders for granular noise and morphing geometric primitives.

A technical, meditative background field using GLSL shaders for granular noise and morphing geometric primitives.Pro
WebGL62 uses

Technical ASCII Particle Field

Implementation of an atmospheric data-flow background featuring interactive ASCII nodes and upward kinetic beams using HTML5 Canvas.

Implementation of an atmospheric data-flow background featuring interactive ASCII nodes and upward kinetic beams using HTML5 Canvas.Pro
WebGL58 uses

Procedural Mesh Network Background

A meditative, dark blue procedural mesh gradient with technical overlays and reactive turbulence.

A meditative, dark blue procedural mesh gradient with technical overlays and reactive turbulence.Pro
Animation55 uses

Marquee

Apply seamless infinite marquee loops using duplicated items.

Apply seamless infinite marquee loops using duplicated items.Pro
Design System53 uses

Dither Laser Dark Mode

Create a dark premium design system that combines near-black surfaces, subtle ordered-dither texture, and a thin accent-colored laser atmosphere.

Create a dark premium design system that combines near-black surfaces, subtle ordered-dither texture, and a thin accent-colored laser atmosphere.Pro
Design System46 uses

Book Serif Index

Create an archival book-reader design system with serif-led pages, mono index navigation, aged paper surfaces, margin notes, and a premium catalog frame.

Create an archival book-reader design system with serif-led pages, mono index navigation, aged paper surfaces, margin notes, and a premium catalog frame.Pro
Design System45 uses

3D Perspective Scroll Dashboard

Premium dark UI with 3D-transformed interface planes that straighten through scroll choreography and glassmorphism.

Premium dark UI with 3D-transformed interface planes that straighten through scroll choreography and glassmorphism.Pro
Design System42 uses

Atmospheric Meditative Dark System

Technical dark-mode system with premium gradient-border shells, noise textures, and cinematic GSAP-driven text masking.

Technical dark-mode system with premium gradient-border shells, noise textures, and cinematic GSAP-driven text masking.Pro
Design System40 uses

Interactive Border Gradient Glow

High-precision card border system with cursor-tracked conic-gradient glows and soft blurred auras.

High-precision card border system with cursor-tracked conic-gradient glows and soft blurred auras.Pro
WebGL38 uses

Organic Aetherial WebGL Background

Technical retro-futurist Three.js background with noise-displaced organic geometry, iridescent Fresnel shaders, and scroll-synced depth.

Technical retro-futurist Three.js background with noise-displaced organic geometry, iridescent Fresnel shaders, and scroll-synced depth.Pro
WebGL37 uses

Atmospheric Procedural WebGL Background

Technical shader-based background system featuring noise-driven organic glows, mouse-responsive parallax drift, and a dark meditative atmosphere.

Technical shader-based background system featuring noise-driven organic glows, mouse-responsive parallax drift, and a dark meditative atmosphere.Pro
Style32 uses

Gooey Blob System

Create a gooey blob system using SVG filters where multiple shapes merge into a single fluid form. Use overlapping circles combined with a Gaussian blur and color matrix filter to produce a continuous, organic mass. The forms should visually fuse and separate based on proximity. Focus on filter-driven merging (blur + threshold effect), soft organic boundaries with no hard edges, multiple independent shapes behaving as one system, and smooth continuous motion that feels fluid and cohesive.

Create a gooey blob system using SVG filters where multiple shapes merge into a single fluid form. Use overlapping circles combined with a Gaussian blur and color matrix filter to produce a continuous, organic mass. The forms should visually fuse and separate based on proximity. Focus on filter-driven merging (blur + threshold effect), soft organic boundaries with no hard edges, multiple independent shapes behaving as one system, and smooth continuous motion that feels fluid and cohesive.Pro
WebGL29 uses

Technical Shader Surface (WebGL)

Procedural deep-navy mesh gradient with technical overlays, meditative breathing motion, and shader-driven calibration grids.

Procedural deep-navy mesh gradient with technical overlays, meditative breathing motion, and shader-driven calibration grids.Pro
Style26 uses

Number Details

Add decorative 01, 02, 03 numeric detail markers.

Add decorative 01, 02, 03 numeric detail markers.Pro
Design System26 uses

Cyber Kinetic Background Field

Procedural canvas background featuring perspective-based wavy lines and technical grid overlays for a cyber-security aesthetic.

Procedural canvas background featuring perspective-based wavy lines and technical grid overlays for a cyber-security aesthetic.Pro
Design System21 uses

Atmospheric Technical Design System

A high-contrast dark system featuring WebGL shader backgrounds, grain textures, and structured split-screen architectural layouts.

A high-contrast dark system featuring WebGL shader backgrounds, grain textures, and structured split-screen architectural layouts.Pro
WebGL17 uses

Technical WebGL Fluid Nebula Background

Advanced Three.js background system featuring noise-deformed fluid glows, sweeping light beams, and grain overlays.

Advanced Three.js background system featuring noise-deformed fluid glows, sweeping light beams, and grain overlays.Pro
Three.js16 uses

Aura Isometric 3D Visualization System

Technical 3D visualization system for creating isometric terminal interfaces with glowing cores and wireframe accents using Three.js.

Technical 3D visualization system for creating isometric terminal interfaces with glowing cores and wireframe accents using Three.js.Pro
Design System13 uses

Kinetic Radial Sculpture System

An animated background generator creating layered, light-reactive blades with cinematic lighting and procedural motion.

An animated background generator creating layered, light-reactive blades with cinematic lighting and procedural motion.Pro
Style12 uses

Atmospheric WebGL Field System

An immersive background design system featuring interactive particle fields, breathing motion, and gradient-accented elevated UI components.

An immersive background design system featuring interactive particle fields, breathing motion, and gradient-accented elevated UI components.Pro
Style10 uses

Aura 3D Network System

Ethereal 3D network visualization with integrated glassmorphic data overlays and depth-aware animation.

Ethereal 3D network visualization with integrated glassmorphic data overlays and depth-aware animation.Pro
Animation9 uses

D3 Interactive Point-Cloud Globe

Technical implementation of a canvas-based interactive globe using orthographic projection and point-cloud landmasses.

Technical implementation of a canvas-based interactive globe using orthographic projection and point-cloud landmasses.Pro
Animation8 uses

Atmospheric Ambient Ray & Particle System

A layered background system combining animated CSS gradient rays with a technical canvas-backed particle field.

A layered background system combining animated CSS gradient rays with a technical canvas-backed particle field.Pro
WebGL4 uses

Chromatic Dispersion WebGL System

Generative background system featuring warped light bands with chromatic aberration, noise overlays, and interactive shader parameters.

Generative background system featuring warped light bands with chromatic aberration, noise overlays, and interactive shader parameters.Pro
Style4 uses

Technical Tactical Globe UI

Sparse orthographic globe visualization with graticule lines, pulse-red data nodes, and technical framing brackets.

Sparse orthographic globe visualization with graticule lines, pulse-red data nodes, and technical framing brackets.Pro
Accessibility0 uses

Accessibility UI Primitives

Provide baseline constraints for semantic HTML, keyboard paths, focus management, ARIA, contrast, alt text, and reduced motion in page and component generation.

Provide baseline constraints for semantic HTML, keyboard paths, focus management, ARIA, contrast, alt text, and reduced motion in page and component generation.Pro
Layout0 uses

Responsive Layout Verification

Constrain page quality with mobile-first layout, container constraints, stable dimensions, text wrapping, and desktop/mobile viewport checks.

Constrain page quality with mobile-first layout, container constraints, stable dimensions, text wrapping, and desktop/mobile viewport checks.Pro
Component0 uses

Component States System

Complete component state matrices, variants, data attributes, async states, and interaction feedback so generated components are not static mockups only.

Complete component state matrices, variants, data attributes, async states, and interaction feedback so generated components are not static mockups only.Pro
Implementation0 uses

Copy-Paste Blocks Adaptation

Translate open-source Tailwind blocks from ecosystems such as HyperUI, Flowbite, Preline, and Mamba into project-consistent, accessible, maintainable page modules.

Translate open-source Tailwind blocks from ecosystems such as HyperUI, Flowbite, Preline, and Mamba into project-consistent, accessible, maintainable page modules.Pro
Animation0 uses

Motion React

React animation guidance based on Motion.dev, covering layout, exit, gestures, motion values, Radix/shadcn integration, and reduced motion.

React animation guidance based on Motion.dev, covering layout, exit, gestures, motion values, Radix/shadcn integration, and reduced motion.Pro
Asset0 uses

Landing Page Quality Assets

Constrain landing pages around first-viewport product signal, real image assets, CTAs, trust modules, media ratios, alt text, and license risk.

Constrain landing pages around first-viewport product signal, real image assets, CTAs, trust modules, media ratios, alt text, and license risk.Pro
QA0 uses

Visual Verification Checklist

Provide post-generation checks for desktop/mobile screenshots, builds, accessibility, asset loading, layout stability, and interaction states.

Provide post-generation checks for desktop/mobile screenshots, builds, accessibility, asset loading, layout stability, and interaction states.Pro
Implementation0 uses

shadcn Registry Composition

Use shadcn/ui open-code, registry, Radix, and Tailwind patterns to guide component discovery, composition, theming, and maintainable copy-paste implementation.

Use shadcn/ui open-code, registry, Radix, and Tailwind patterns to guide component discovery, composition, theming, and maintainable copy-paste implementation.Pro