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

设计系统

重置筛选
设计系统10.0K uses

作品解构结构母版

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

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

深蓝网格渐变干净系统

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

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

干净米色浅色系统

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

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

深色玻璃时钟系统

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

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

极简 Agency 网格布局

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

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

高对比拟物干净系统

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

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

橙色纸感 SaaS 系统

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

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

浅色纸感技术系统

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

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

技术终端与 WebGL 网格系统

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

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

嵌套容器干净 Agency

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

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

图像优先网格布局

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

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

编辑型科技风

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

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

技术分屏布局

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

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

阶梯霓虹 V 曲线玻璃系统

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

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

技术框架网格设计系统

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

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

蓝色云感干净现代系统

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

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

工业 WebGL 极简系统

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

单色高对比美学,将刚性建筑网格与流体 shader 位移几何背景结合。Pro
设计系统87 uses

技术线框信息布局

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

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

光标响应手电光描边

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

使用 conic gradients 和 JS 驱动的光标追踪,为技术深色界面创建动态边缘照明。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
设计系统26 uses

赛博动态背景场

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

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

大气技术设计系统

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

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

动态径向雕塑系统

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

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