Interface Lab

Interface Lab 资源库

资源库技能119

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

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

技能119
网站设计系统93
PPT 风格55
素材232
技能

提示技能

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

切到风格
布局 · 4.8KPro

框架网格布局

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

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

容器线框

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

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

WebGL 背景网格

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

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

对角切角

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

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

嵌套容器框架

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

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

响应式布局验证

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

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

主从分栏信息流

为列表详情、侧边栏详情、支持面板和宽屏生产力界面建立断点、选择状态、返回路径、空详情和移动端降级规则。

输入必须包含:对象集合、详情层级、列表项 metadata、默认选择规则、可多选/批量操作、宽屏/平板/移动断点、详情内行动和是否需要支持面板。Pro
布局 · 0Pro

横向作品集 Rail

为建筑、摄影、作品集、案例库和视觉收藏建立有限横向 rail、项目元数据、控件、scroll-snap、可访问性和移动端纵向降级。

适用场景:horizontal portfolio、gallery rail、project carousel、work archive、case-study index、image-led collection;输入必须包含条目数量、条目类型、项目元数据、选中/详情模型、控件模型、目标断点和动效预算。Pro