UI DESIGN LAB
  • 首页
  • 社区
  • 资源库
  • 知识库
  • 文档
EN登录
资源库技能局部提示技巧
技能局部提示技巧45
查看当前页45边框渐变风格遮罩揭示动效Aura 资产图像资产框架网格布局布局容器线框布局GSAP 动效动效
总使用44.5K

UI DESIGN LAB 资源库

资源库技能45 项

技能页收纳所有可复用的局部 Prompt 技法。

局部技能负责布局、动效、边框、阴影、WebGL、图标和组件表现。先挑选当前项目需要的局部能力,再继续组合系统和素材。

技能45设计系统72素材4
资源索引

当前:技能

左侧菜单和当前画布只显示技能相关内容。

01边框渐变02遮罩揭示03Aura 资产图像04框架网格布局05容器线框
45 当前内容
技能45
设计系统72
素材4
访问权限Free
技能

提示技能

局部表现层:布局、动效、边框、阴影、WebGL 和可复制的 prompt 技法。

切到设计系统
风格 · 9.9KPro

边框渐变

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

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

遮罩揭示

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

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

Aura 资产图像

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

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

框架网格布局

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

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

容器线框

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

添加垂直容器尺寸线,并配合小型角点方块。Pro
动效 · 1.7KPro

GSAP 动效

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

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

拟物界面

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

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

抖动背景

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

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

精致阴影

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

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

WebGL 光束

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

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

WebGL 3D 物体

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

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

WebGL 背景网格

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

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

对角切角

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

使用 chamfered silhouettes、clipped edges 和框架化几何外壳,为按钮和容器添加对角切角。Pro
图标 · 186Pro

公司 Logo

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

使用 Iconify Simple Icons 的 64x64 公司 logo,而不是文字 logo。Pro
3D · 173Pro

粒子地球

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

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

Solar 双色粗体图标

使用 Iconify Solar Duotone Bold 图标风格。

使用 Iconify Solar Duotone Bold 图标风格。Pro
WebGL · 124Pro

魔法环遥测美学

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

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

嵌套容器框架

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

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

角落激光

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

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

渐进模糊

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

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

大气颗粒 WebGL 背景

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

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

技术 ASCII 粒子场

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

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

程序化网格网络背景

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

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

跑马灯

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

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

有机以太 WebGL 背景

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

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

大气程序化 WebGL 背景

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

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

黏性 Blob 系统

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

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

技术 Shader 表面(WebGL)

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

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

数字细节

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

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

技术 WebGL 流体星云背景

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

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

Aura 等距 3D 可视化系统

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

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

大气 WebGL 场系统

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

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

Aura 3D 网络系统

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

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

D3 交互式点云地球

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

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

大气环境光束与粒子系统

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

分层背景系统,结合动画 CSS 渐变光束和技术 canvas 粒子场。Pro
WebGL · 4Pro

色散 WebGL 系统

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

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

技术战术地球 UI

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

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

可访问性 UI 基元

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

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

响应式布局验证

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

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

组件状态系统

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

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

开源区块适配流程

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

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

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
资产 · 0Pro

落地页质量与真实资产

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

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

视觉验证清单

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

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

shadcn 注册表与组件组合

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

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