UI DESIGN LAB
  • 首页
  • 社区
  • 资源库
  • 知识库
  • 文档
EN登录

分类

全部技能723D2可访问性1动效6资产2组件1设计系统27图标2实现2布局6验证1阴影1风格9Three.js1WebGL11

最高使用

01作品解构结构母版10.0K02边框渐变9.9K03遮罩揭示8.9K04Aura 资产图像8.8K05框架网格布局4.8K

技能层

局部表现与技巧普通 Skill 负责布局、动效、资产、阴影和特殊表现；设计系统已移动到独立页面。

UI DESIGN LAB 技能库

Skill LibraryPrompt Skills72 Skills72 Shown

浏览可复用的普通 Prompt Skill。

这里保留局部技巧型 Skill：布局、动效、资产、WebGL、图标、阴影和组件表现。页面级 Design System 已拆成独立导航。

Skill Index

最常用 Prompt Skills

按记录使用量排序，帮助团队快速找到高频设计动作。

01作品解构结构母版02边框渐变03遮罩揭示04Aura 资产图像05框架网格布局
67 more skills below
Active Skills72
Groups14
Total Uses59.2K
AccessFree
Library

全部 Prompt Skills

重置筛选
设计系统10.0K uses

作品解构结构母版

用于固定所有作品页分析结构的母版 Skill：统一作品意图、区域构图、信息层级、视觉系统、Skill 映射和下一步产出。

用于固定所有作品页分析结构的母版 Skill：统一作品意图、区域构图、信息层级、视觉系统、Skill 映射和下一步产出。Pro风格9.9K uses

边框渐变

为高级表面应用细腻的渐变描边处理。

为高级表面应用细腻的渐变描边处理。Pro
动效8.9K uses

遮罩揭示

在滚动时使用 GSAP ScrollTrigger 创建遮罩式错落文字揭示。

在滚动时使用 GSAP ScrollTrigger 创建遮罩式错落文字揭示。Pro
资产8.8K uses

Aura 资产图像

像使用 Unsplash 一样搜索 Aura 素材，精选 5 个高质量直链图片，并在可用时优先使用更高分辨率版本。

像使用 Unsplash 一样搜索 Aura 素材，精选 5 个高质量直链图片，并在可用时优先使用更高分辨率版本。Pro
布局4.8K uses

框架网格布局

使用细边界线勾勒每个区块，并在容器边缘添加 L 形角标强化框架感。使用极低透明度的 1px 斜线背景作为轻微纹理。所有区块保持统一：每个 section 位于精确的框架盒中，拥有细导线边框、严格的横纵对齐、清晰的区块分隔，以及框架之间一致的间距。整体干净、中性、网格化且高度结构化。

使用细边界线勾勒每个区块，并在容器边缘添加 L 形角标强化框架感。使用极低透明度的 1px 斜线背景作为轻微纹理。所有区块保持统一：每个 section 位于精确的框架盒中，拥有细导线边框、严格的横纵对齐、清晰的区块分隔，以及框架之间一致的间距。整体干净、中性、网格化且高度结构化。Pro
布局4.2K uses

容器线框

添加垂直容器尺寸线，并配合小型角点方块。

添加垂直容器尺寸线，并配合小型角点方块。Pro
动效1.7K uses

GSAP 动效

使用 GSAP timelines、stagger 和滚动触发动效。

使用 GSAP timelines、stagger 和滚动触发动效。Pro
风格1.1K uses

拟物界面

使用分层渐变和阴影创建拟物表面风格。使用柔和的垂直渐变、多个 inset shadow 模拟雕刻或按压表面、细微外阴影建立抬升感、顶部边缘高光、底部暗边，以及带平滑过渡的圆角形状。技法包括叠加内外阴影建立深度、使用小点或纹理等微细节增强真实感、用 1px 渐变边框 wrapper 模拟反射边缘，并用文字阴影和图标阴影制造浮雕质感。

使用分层渐变和阴影创建拟物表面风格。使用柔和的垂直渐变、多个 inset shadow 模拟雕刻或按压表面、细微外阴影建立抬升感、顶部边缘高光、底部暗边，以及带平滑过渡的圆角形状。技法包括叠加内外阴影建立深度、使用小点或纹理等微细节增强真实感、用 1px 渐变边框 wrapper 模拟反射边缘，并用文字阴影和图标阴影制造浮雕质感。Pro
风格1.1K uses

抖动背景

生成深色 ordered-dither 背景，使用粗方形像素和柔和波形衰减。

生成深色 ordered-dither 背景，使用粗方形像素和柔和波形衰减。Pro
阴影914 uses

精致阴影

使用 Beautiful sm/md/lg Tailwind 阴影预设，建立精致的分层抬升效果。

使用 Beautiful sm/md/lg Tailwind 阴影预设，建立精致的分层抬升效果。Pro
WebGL711 uses

WebGL 光束

添加聚焦的 WebGL 激光束背景，使用设计主色，包含细光束、烟雾体积雾、光晕，以及置于 UI 后方的固定全屏 canvas。

添加聚焦的 WebGL 激光束背景，使用设计主色，包含细光束、烟雾体积雾、光晕，以及置于 UI 后方的固定全屏 canvas。Pro
设计系统639 uses

深蓝网格渐变干净系统

创建深蓝干净设计系统，围绕 shader 风格的 mesh gradient 背景、高级玻璃描边外壳，以及克制的行星科技氛围展开。

创建深蓝干净设计系统，围绕 shader 风格的 mesh gradient 背景、高级玻璃描边外壳，以及克制的行星科技氛围展开。Pro
设计系统495 uses

干净米色浅色系统

创建干净极简的米色浅色设计系统，包含温暖中性色外壳、安静的流程网格、克制的强调色，以及优雅的低对比结构。

创建干净极简的米色浅色设计系统，包含温暖中性色外壳、安静的流程网格、克制的强调色，以及优雅的低对比结构。Pro
设计系统490 uses

深色玻璃时钟系统

创建深色玻璃设计系统，包含磨砂外壳、柔和光束网格、类似时钟校准盘的圆形焦点组件，以及精确的科幻仪表框架。

创建深色玻璃设计系统，包含磨砂外壳、柔和光束网格、类似时钟校准盘的圆形焦点组件，以及精确的科幻仪表框架。Pro
设计系统435 uses

极简 Agency 网格布局

创建极简 agency 设计系统，包含克制的编辑网格、巨大的字体层级、安静的大写工具标签、克制的图片块，以及细微结构细节。

创建极简 agency 设计系统，包含克制的编辑网格、巨大的字体层级、安静的大写工具标签、克制的图片块，以及细微结构细节。Pro
3D379 uses

WebGL 3D 物体

创建带真实光照和深度的 3D WebGL 物体。使用几何 mesh、基于物理的材质，以及方向光和环境光来显露形体和边缘。

创建带真实光照和深度的 3D WebGL 物体。使用几何 mesh、基于物理的材质，以及方向光和环境光来显露形体和边缘。Pro
布局285 uses

WebGL 背景网格

创建透视 WebGL 背景网格，包含渐隐线条、细微粒子雾、缓慢前进漂移，以及温和镜头视差。

创建透视 WebGL 背景网格，包含渐隐线条、细微粒子雾、缓慢前进漂移，以及温和镜头视差。Pro
设计系统257 uses

高对比拟物干净系统

创建高对比、干净的拟物设计系统，包含模压深色表面、清晰的明暗分隔、触感 inset depth，以及克制的信号强调。

创建高对比、干净的拟物设计系统，包含模压深色表面、清晰的明暗分隔、触感 inset depth，以及克制的信号强调。Pro
设计系统254 uses

橙色纸感 SaaS 系统

创建干净纸感 SaaS 设计系统，包含温暖中性色、橙色强调信号、圆润高级表单，以及精致的产品插图表面。

创建干净纸感 SaaS 设计系统，包含温暖中性色、橙色强调信号、圆润高级表单，以及精致的产品插图表面。Pro
设计系统232 uses

浅色纸感技术系统

创建浅色技术设计系统，包含温暖纸感表面、深色外框、细微斜线纹理、精确角标几何，以及克制强调信号。

创建浅色技术设计系统，包含温暖纸感表面、深色外框、细微斜线纹理、精确角标几何，以及克制强调信号。Pro
布局214 uses

对角切角

使用 chamfered silhouettes、clipped edges 和框架化几何外壳，为按钮和容器添加对角切角。

使用 chamfered silhouettes、clipped edges 和框架化几何外壳，为按钮和容器添加对角切角。Pro
设计系统209 uses

技术终端与 WebGL 网格系统

高精度工业设计系统，包含无限网格线、终端风格 shader，以及遮罩式 GSAP 字体动效。

高精度工业设计系统，包含无限网格线、终端风格 shader，以及遮罩式 GSAP 字体动效。Pro
设计系统206 uses

嵌套容器干净 Agency

创建由嵌套容器构成的干净 agency 设计系统，包含外层编辑式外壳、内嵌深色功能块、圆角高级卡片，以及克制强调色。

创建由嵌套容器构成的干净 agency 设计系统，包含外层编辑式外壳、内嵌深色功能块、圆角高级卡片，以及克制强调色。Pro
设计系统193 uses

编辑型科技风

融合编辑杂志式构图与精确产品科技细节，使用非对称网格、电影感媒体带、mono 工具标签和克制强调色。

融合编辑杂志式构图与精确产品科技细节，使用非对称网格、电影感媒体带、mono 工具标签和克制强调色。Pro
设计系统193 uses

图像优先网格布局

创建图像主导的网格设计系统，包含全出血摄影、结构导线、锚定内容块，以及克制技术叠层。

创建图像主导的网格设计系统，包含全出血摄影、结构导线、锚定内容块，以及克制技术叠层。Pro
图标186 uses

公司 Logo

使用 Iconify Simple Icons 的 64x64 公司 logo，而不是文字 logo。

使用 Iconify Simple Icons 的 64x64 公司 logo，而不是文字 logo。Pro
3D173 uses

粒子地球

创建由发光粒子组成的 3D 地球，包含密集球形核心、轨道环、叠加光晕和细微动效。

创建由发光粒子组成的 3D 地球，包含密集球形核心、轨道环、叠加光晕和细微动效。Pro
设计系统161 uses

技术分屏布局

创建技术分屏设计系统，包含双面板、细框线、mono metadata、安静编辑式字体和高级 inset surfaces。

创建技术分屏设计系统，包含双面板、细框线、mono metadata、安静编辑式字体和高级 inset surfaces。Pro
设计系统149 uses

阶梯霓虹 V 曲线玻璃系统

高对比深色系统，包含动态垂直条动画、胶囊玻璃界面和白色光晕强调。

高对比深色系统，包含动态垂直条动画、胶囊玻璃界面和白色光晕强调。Pro
图标145 uses

Solar 双色粗体图标

使用 Iconify Solar Duotone Bold 图标风格。

使用 Iconify Solar Duotone Bold 图标风格。Pro
设计系统145 uses

技术框架网格设计系统

技术深色系统，包含框架网格布局、战术角标，以及带颗粒纹理的 WebGL shader 背景。

技术深色系统，包含框架网格布局、战术角标，以及带颗粒纹理的 WebGL shader 背景。Pro
设计系统131 uses

蓝色云感干净现代系统

创建干净现代设计系统，包含明亮蓝天氛围、柔和漂移云光、极简白色框架，以及宁静高级字体。

创建干净现代设计系统，包含明亮蓝天氛围、柔和漂移云光、极简白色框架，以及宁静高级字体。Pro
WebGL124 uses

魔法环遥测美学

技术工业极简设计系统，包含拟物 UI、玻璃拟态和响应式 WebGL 轨道环场。

技术工业极简设计系统，包含拟物 UI、玻璃拟态和响应式 WebGL 轨道环场。Pro
布局122 uses

嵌套容器框架

创建嵌套框架布局系统：外层居中容器带可见垂直边界线和角点标记，内部容器从边缘内缩，并拥有各自的背景和圆角框架。

创建嵌套框架布局系统：外层居中容器带可见垂直边界线和角点标记，内部容器从边缘内缩，并拥有各自的背景和圆角框架。Pro
WebGL97 uses

角落激光

创建锚定于角落的激光构图，包含细光束、明亮发射节点、bloom，以及大气光晕或雾效。

创建锚定于角落的激光构图，包含细光束、明亮发射节点、bloom，以及大气光晕或雾效。Pro
设计系统95 uses

工业 WebGL 极简系统

单色高对比美学，将刚性建筑网格与流体 shader 位移几何背景结合。

单色高对比美学，将刚性建筑网格与流体 shader 位移几何背景结合。Pro
风格91 uses

渐进模糊

使用分层边缘模糊叠层建立深度，包含顶部和底部参考 snippets 以及调参指引。

使用分层边缘模糊叠层建立深度，包含顶部和底部参考 snippets 以及调参指引。Pro
设计系统87 uses

技术线框信息布局

创建单色技术线框设计系统，包含 exploded 3D 结构、连接器注释、稀疏信息标签和精确深色诊断框架。

创建单色技术线框设计系统，包含 exploded 3D 结构、连接器注释、稀疏信息标签和精确深色诊断框架。Pro
设计系统63 uses

光标响应手电光描边

使用 conic gradients 和 JS 驱动的光标追踪，为技术深色界面创建动态边缘照明。

使用 conic gradients 和 JS 驱动的光标追踪，为技术深色界面创建动态边缘照明。Pro
WebGL63 uses

大气颗粒 WebGL 背景

技术冥想背景场，使用 GLSL shaders 生成颗粒噪声和变形几何原型。

技术冥想背景场，使用 GLSL shaders 生成颗粒噪声和变形几何原型。Pro
WebGL62 uses

技术 ASCII 粒子场

使用 HTML5 Canvas 实现大气数据流背景，包含交互式 ASCII 节点和向上运动光束。

使用 HTML5 Canvas 实现大气数据流背景，包含交互式 ASCII 节点和向上运动光束。Pro
WebGL58 uses

程序化网格网络背景

深蓝冥想型程序化 mesh gradient，配合技术叠层和响应式湍流。

深蓝冥想型程序化 mesh gradient，配合技术叠层和响应式湍流。Pro
动效55 uses

跑马灯

使用复制项创建无缝无限跑马灯循环。

使用复制项创建无缝无限跑马灯循环。Pro
设计系统53 uses

抖动激光深色系统

创建深色高级设计系统，结合近黑表面、细微 ordered-dither 纹理和一条强调色激光氛围。

创建深色高级设计系统，结合近黑表面、细微 ordered-dither 纹理和一条强调色激光氛围。Pro
设计系统46 uses

书籍衬线索引

创建档案书籍阅读器设计系统，包含衬线主导页面、mono 索引导航、旧纸质感表面、页边注释和高级目录框架。

创建档案书籍阅读器设计系统，包含衬线主导页面、mono 索引导航、旧纸质感表面、页边注释和高级目录框架。Pro
设计系统45 uses

3D 透视滚动仪表盘

高级深色 UI，包含通过滚动编排逐渐校正的 3D-transformed 界面平面和玻璃拟态。

高级深色 UI，包含通过滚动编排逐渐校正的 3D-transformed 界面平面和玻璃拟态。Pro
设计系统42 uses

大气冥想深色系统

技术深色系统，包含高级渐变描边外壳、噪声纹理和电影感 GSAP 文本遮罩。

技术深色系统，包含高级渐变描边外壳、噪声纹理和电影感 GSAP 文本遮罩。Pro
设计系统40 uses

交互式边框渐变光晕

高精度卡片描边系统，包含光标追踪 conic-gradient 光晕和柔和模糊 auras。

高精度卡片描边系统，包含光标追踪 conic-gradient 光晕和柔和模糊 auras。Pro
WebGL38 uses

有机以太 WebGL 背景

技术复古未来主义 Three.js 背景，包含噪声位移有机几何、虹彩 Fresnel shaders 和滚动同步深度。

技术复古未来主义 Three.js 背景，包含噪声位移有机几何、虹彩 Fresnel shaders 和滚动同步深度。Pro
WebGL37 uses

大气程序化 WebGL 背景

技术 shader 背景系统，包含噪声驱动的有机光晕、鼠标响应视差漂移和深色冥想氛围。

技术 shader 背景系统，包含噪声驱动的有机光晕、鼠标响应视差漂移和深色冥想氛围。Pro
风格32 uses

黏性 Blob 系统

使用 SVG filters 创建黏性 blob 系统，让多个形状融合成单一流体形态；重点是 blur + threshold 的 filter 驱动融合、柔和有机边界、多形状整体行为和连续流畅动效。

使用 SVG filters 创建黏性 blob 系统，让多个形状融合成单一流体形态；重点是 blur + threshold 的 filter 驱动融合、柔和有机边界、多形状整体行为和连续流畅动效。Pro
WebGL29 uses

技术 Shader 表面（WebGL）

程序化深海军蓝 mesh gradient，包含技术叠层、冥想式呼吸动效和 shader 驱动校准网格。

程序化深海军蓝 mesh gradient，包含技术叠层、冥想式呼吸动效和 shader 驱动校准网格。Pro
风格26 uses

数字细节

添加装饰性 01、02、03 数字细节标记。

添加装饰性 01、02、03 数字细节标记。Pro
设计系统26 uses

赛博动态背景场

程序化 canvas 背景，包含基于透视的波浪线和技术网格叠层，用于赛博安全美学。

程序化 canvas 背景，包含基于透视的波浪线和技术网格叠层，用于赛博安全美学。Pro
设计系统21 uses

大气技术设计系统

高对比深色系统，包含 WebGL shader 背景、颗粒纹理和结构化分屏建筑布局。

高对比深色系统，包含 WebGL shader 背景、颗粒纹理和结构化分屏建筑布局。Pro
WebGL17 uses

技术 WebGL 流体星云背景

高级 Three.js 背景系统，包含噪声变形流体光晕、扫动光束和颗粒叠层。

高级 Three.js 背景系统，包含噪声变形流体光晕、扫动光束和颗粒叠层。Pro
Three.js16 uses

Aura 等距 3D 可视化系统

技术 3D 可视化系统，用 Three.js 创建等距终端界面、发光核心和线框强调。

技术 3D 可视化系统，用 Three.js 创建等距终端界面、发光核心和线框强调。Pro
设计系统13 uses

动态径向雕塑系统

动画背景生成器，创建分层、光响应 blades，具有电影光照和程序化运动。

动画背景生成器，创建分层、光响应 blades，具有电影光照和程序化运动。Pro
风格12 uses

大气 WebGL 场系统

沉浸式背景设计系统，包含交互粒子场、呼吸动效和渐变强调的抬升 UI 组件。

沉浸式背景设计系统，包含交互粒子场、呼吸动效和渐变强调的抬升 UI 组件。Pro
风格10 uses

Aura 3D 网络系统

以太感 3D 网络可视化，整合玻璃拟态数据叠层和深度感动画。

以太感 3D 网络可视化，整合玻璃拟态数据叠层和深度感动画。Pro
动效9 uses

D3 交互式点云地球

基于 canvas 的交互式地球技术实现，使用正交投影和点云陆地形态。

基于 canvas 的交互式地球技术实现，使用正交投影和点云陆地形态。Pro
动效8 uses

大气环境光束与粒子系统

分层背景系统，结合动画 CSS 渐变光束和技术 canvas 粒子场。

分层背景系统，结合动画 CSS 渐变光束和技术 canvas 粒子场。Pro
WebGL4 uses

色散 WebGL 系统

生成式背景系统，包含扭曲光带、色差、噪声叠层和交互 shader 参数。

生成式背景系统，包含扭曲光带、色差、噪声叠层和交互 shader 参数。Pro
风格4 uses

技术战术地球 UI

稀疏正交地球可视化，包含经纬线、脉冲红色数据节点和技术框架角标。

稀疏正交地球可视化，包含经纬线、脉冲红色数据节点和技术框架角标。Pro
可访问性0 uses

可访问性 UI 基元

为网页和组件生成提供语义 HTML、键盘路径、焦点管理、ARIA、对比度、替代文本和 reduced motion 的基础约束。

为网页和组件生成提供语义 HTML、键盘路径、焦点管理、ARIA、对比度、替代文本和 reduced motion 的基础约束。Pro
布局0 uses

响应式布局验证

用 mobile-first、容器约束、稳定尺寸、文本换行和桌面/移动双视口检查来约束网页生成质量。

用 mobile-first、容器约束、稳定尺寸、文本换行和桌面/移动双视口检查来约束网页生成质量。Pro
组件0 uses

组件状态系统

为组件制作补齐状态矩阵、变体、数据属性、异步状态和交互反馈，避免只生成静态视觉稿。

为组件制作补齐状态矩阵、变体、数据属性、异步状态和交互反馈，避免只生成静态视觉稿。Pro
实现0 uses

开源区块适配流程

把 HyperUI、Flowbite、Preline、Mamba 等开源 Tailwind blocks 转译成项目一致、可访问、可维护的页面模块。

把 HyperUI、Flowbite、Preline、Mamba 等开源 Tailwind blocks 转译成项目一致、可访问、可维护的页面模块。Pro
动效0 uses

Motion React 动效

基于 Motion.dev 的 React 动效制作规则，覆盖 layout、exit、gesture、motion values、Radix/shadcn 集成和 reduced motion。

基于 Motion.dev 的 React 动效制作规则，覆盖 layout、exit、gesture、motion values、Radix/shadcn 集成和 reduced motion。Pro
资产0 uses

落地页质量与真实资产

约束落地页首屏产品信号、真实图像资产、CTA、信任模块、媒体比例、alt 文本和授权风险。

约束落地页首屏产品信号、真实图像资产、CTA、信任模块、媒体比例、alt 文本和授权风险。Pro
验证0 uses

视觉验证清单

为网页和组件生成后的检查提供桌面/移动截图、构建、可访问性、资源加载、布局稳定和交互状态验证规则。

为网页和组件生成后的检查提供桌面/移动截图、构建、可访问性、资源加载、布局稳定和交互状态验证规则。Pro
实现0 uses

shadcn 注册表与组件组合

以 shadcn/ui 的 open-code、registry、Radix 和 Tailwind 模式为基础，指导组件发现、组合、主题接入和可维护复制粘贴实现。

以 shadcn/ui 的 open-code、registry、Radix 和 Tailwind 模式为基础，指导组件发现、组合、主题接入和可维护复制粘贴实现。Pro