UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
LibrarySkillsLocal prompt techniques
SkillsLocal prompt techniques45
View current page45Border GradientsStyleMasked RevealAnimationAura Asset ImagesAssetFramed Grid LayoutLayoutContainer LinesLayoutGSAP MotionAnimation
Total uses44.5K

UI DESIGN LAB Library

LibrarySkills45 items

Skills collect reusable local prompt techniques.

Local skills cover layout, motion, borders, shadows, WebGL, icons, and component treatments. Choose the techniques first, then combine them with systems and assets.

Skills45Design System72Assets4
Library Index

Current: Skills

The left menu and canvas now show only skill-related entries.

01Border Gradients02Masked Reveal03Aura Asset Images04Framed Grid Layout05Container Lines
45 current items
Skills45
Design System72
Assets4
AccessFree
Skills

Prompt Skills

Local expression layer: layout, motion, borders, shadows, WebGL, and copy-ready prompt techniques.

Open Systems
Style · 9.9KPro

Border Gradients

Apply subtle gradient-border treatments for premium surfaces.

Apply subtle gradient-border treatments for premium surfaces.ProAnimation · 8.9KPro

Masked Reveal

Create masked staggered word reveal on scroll with GSAP ScrollTrigger.

Create masked staggered word reveal on scroll with GSAP ScrollTrigger.ProAsset · 8.8KPro

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
Layout · 4.8KPro

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
Layout · 4.2KPro

Container Lines

Add vertical container-size lines with mini corner squares.

Add vertical container-size lines with mini corner squares.Pro
Animation · 1.7KPro

GSAP Motion

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

Use GSAP timelines, stagger, and scroll-triggered motion.Pro
Style · 1.1KPro

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
Style · 1.1KPro

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
Shadow · 914Pro

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
WebGL · 711Pro

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
3D · 379Pro

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
Layout · 285Pro

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
Layout · 214Pro

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
Icon · 186Pro

Company Logos

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

Use Iconify Simple Icons logos (64x64) instead of text logos.Pro
3D · 173Pro

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
Icon · 145Pro

Solar Duotone Bold

Use Iconify Solar Duotone Bold icon style.

Use Iconify Solar Duotone Bold icon style.Pro
WebGL · 124Pro

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
Layout · 122Pro

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
WebGL · 97Pro

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
Style · 91Pro

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
WebGL · 63Pro

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
WebGL · 62Pro

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
WebGL · 58Pro

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
Animation · 55Pro

Marquee

Apply seamless infinite marquee loops using duplicated items.

Apply seamless infinite marquee loops using duplicated items.Pro
WebGL · 38Pro

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
WebGL · 37Pro

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
Style · 32Pro

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
WebGL · 29Pro

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
Style · 26Pro

Number Details

Add decorative 01, 02, 03 numeric detail markers.

Add decorative 01, 02, 03 numeric detail markers.Pro
WebGL · 17Pro

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.js · 16Pro

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
Style · 12Pro

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
Style · 10Pro

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
Animation · 9Pro

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
Animation · 8Pro

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
WebGL · 4Pro

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
Style · 4Pro

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
Accessibility · 0Pro

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
Layout · 0Pro

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
Component · 0Pro

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
Implementation · 0Pro

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
Animation · 0Pro

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
Asset · 0Pro

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
QA · 0Pro

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
Implementation · 0Pro

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