Interface Lab Library
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.
Prompt Skills
Local expression layer: layout, motion, borders, shadows, WebGL, and copy-ready prompt techniques.
Border Gradients
Apply subtle gradient-border treatments for premium surfaces.
Apply subtle gradient-border treatments for premium surfaces.ProStyle · 1.1KProSkeuomorphic 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.ProStyle · 1.1KProDither 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.ProStyle · 91ProProgressive 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.ProStyle · 32ProGooey 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.ProStyle · 26ProNumber Details
Add decorative 01, 02, 03 numeric detail markers.
Add decorative 01, 02, 03 numeric detail markers.ProStyle · 12ProAtmospheric 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.ProStyle · 10ProAura 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.ProStyle · 4ProTechnical 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.ProStyle · 0ProBackground Texture Guardrails
Set use, readability, license, token, fallback, and frontend performance guardrails for SVG, CSS, and image texture backgrounds.
Inputs must include page type, primary task, surface token, text-overlay area, light/dark modes, texture source/license, output format, and target device range.Pro