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 Skills27 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

Design System

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
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
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
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

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
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 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
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
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
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
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
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
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