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

布局

重置筛选
布局4.8K uses

框架网格布局

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

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

容器线框

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

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

WebGL 背景网格

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

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

对角切角

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

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

嵌套容器框架

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

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

响应式布局验证

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

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