Interface Lab 资源库
资源库技能119 项
技能页收纳所有可复用的局部 Prompt 技法。
局部技能负责布局、动效、边框、阴影、WebGL、图标和组件表现。先挑选当前项目需要的局部能力,再继续组合系统和素材。
技能119
网站设计系统93
PPT 风格55
素材232
技能
切到风格提示技能
局部表现层:布局、动效、边框、阴影、WebGL 和可复制的 prompt 技法。
布局 · 4.8KPro
框架网格布局
使用细边界线勾勒每个区块,并在容器边缘添加 L 形角标强化框架感。使用极低透明度的 1px 斜线背景作为轻微纹理。所有区块保持统一:每个 section 位于精确的框架盒中,拥有细导线边框、严格的横纵对齐、清晰的区块分隔,以及框架之间一致的间距。整体干净、中性、网格化且高度结构化。
使用细边界线勾勒每个区块,并在容器边缘添加 L 形角标强化框架感。使用极低透明度的 1px 斜线背景作为轻微纹理。所有区块保持统一:每个 section 位于精确的框架盒中,拥有细导线边框、严格的横纵对齐、清晰的区块分隔,以及框架之间一致的间距。整体干净、中性、网格化且高度结构化。Pro布局 · 4.2KPro容器线框
添加垂直容器尺寸线,并配合小型角点方块。
添加垂直容器尺寸线,并配合小型角点方块。Pro布局 · 285ProWebGL 背景网格
创建透视 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