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

Style

Reset filters
Style9.9K uses

Border Gradients

Apply subtle gradient-border treatments for premium surfaces.

Apply subtle gradient-border treatments for premium surfaces.Pro
Style
1.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
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
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
Style26 uses

Number Details

Add decorative 01, 02, 03 numeric detail markers.

Add decorative 01, 02, 03 numeric detail markers.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
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