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

Layout

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