Interface Lab
  • 首页
  • 员工
  • 社区
  • 资源库
  • 知识库
  • 文档
EN登录
资源库技能局部提示技巧
技能局部提示技巧58
查看当前页58边框渐变风格遮罩揭示动效Aura 资产图像资产框架网格布局布局容器线框布局HTML Deck 固定外壳PPT Generation
总使用387.0K

Interface Lab 资源库

资源库技能58 项

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

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

技能58设计系统127素材4
资源索引

当前:技能

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

01边框渐变02遮罩揭示03Aura 资产图像04框架网格布局05容器线框
58 当前内容
技能58
设计系统127
素材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
PPT Generation · 3.2KPro

HTML Deck 固定外壳

把 PPT 输出限制为单文件 HTML、固定 16:9 舞台和确定性 CSS/JS 外壳。

Elara 必须先建立固定 shell,再填 slide sections;不要让模型重写导航脚本或 stage 结构。Pro
PPT Generation · 3.2KPro

Deck 导航与 Overview

规定键盘、滚轮、触控、dot nav、ESC overview 和 reduced-motion 行为。

Deck 必须支持 Arrow/Page/Home/End、滚轮节流、触控滑动、dot nav 和 ESC overview。Pro
PPT Generation · 3.2KPro

16:9 舞台契约

约束所有 PPT 页面使用稳定 16:9 尺寸、字体和安全边界。

所有 slide 使用同一个 16:9 stage,不用内容撑开页面,不在 iframe 内产生横向滚动。Pro
PPT Generation · 3.2KPro

Slide Section Composer

把逐页内容矩阵转换为稳定 section,而不是让模型自由写整份 HTML。

先由 Isolde 输出逐页矩阵:页码、标题、信息目标、layoutId、主题、图片槽位、speaker note。Pro
PPT Layout · 3.2KPro

电子杂志 Layout Registry

登记电子杂志模板的 10 个 layout、主题节奏和类名使用规则。

电子杂志 deck 从 10 个 layout 中选页:Hero Cover、Act Divider、Big Numbers、Quote + Image、Image Grid、Pipeline、Hero Question、Big Quote、A vs B、Lead Image + Side Text。Pro
PPT Layout · 3.2KPro

瑞士网格 Layout Lock

锁定瑞士风 S01-S22 layout、单 accent、图片槽位和 data-layout QA。

瑞士正文页必须使用登记的 S01-S22 layout,并在 section 上写 data-layout="Sxx"。Pro
PPT Layout · 3.2KPro

模板画廊风格检索

将视觉预设与模板画廊转成可检索风格,并先做最佳匹配和风格探索。

Cleo 先根据主题、受众、场景和视觉气质从 PPT Style 资源库检索最合适的风格,再让 Isolde/Elara 生成内容和 slide section。Pro
PPT Assets · 3.2KPro

PPT 素材槽位

把上传素材绑定到封面、证据图、截图、图表、引用和附录等 deck 槽位。

素材进入 prompt 前先摘要,并绑定到 slideIndex、slotRole、preferredRatio、mustKeepText 和 sensitivity。Pro
PPT Assets · 3.2KPro

PPT 截图适配

处理产品截图、网页截图、旧 PPT 截图和 dashboard 截图的比例、保真与再设计选择。

截图需求必须确认用途:保真展示、截图美化、截图再设计或 UI 情景图。Pro
PPT Assets · 3.2KPro

PPT 配图比例规则

为主视觉、左文右图、信息图、截图再设计和网格小图定义生成比例。

配图生成提示词只框定主题、用途、风格和比例;不要写冗长摄影指导。Pro
PPT QA · 3.2KPro

Deck 静态 QA

对 HTML Deck 做页数、slide class、导航脚本、占位符和 prompt 泄漏检查。

生成后检查 slide 数量与矩阵一致,每个 slide 有 class="slide" 和清晰 data-slide 或 data-layout 标记。Pro
PPT QA · 3.2KPro

PPT 占位符清洗

清除 [必填]、TODO、模板注释、Lorem ipsum 和未替换 title。

保存前必须 grep 或静态扫描 [必填]、TODO、SLIDES_HERE、Lorem ipsum 和模板注释。Pro
PPT QA · 3.2KPro

Swiss data-layout Validator

校验瑞士风每页 data-layout、登记 layout、SVG 文本和单 accent 规则。

Swiss deck 每个正文 section 必须有合法 data-layout="Sxx",且 Sxx 来自登记列表。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

shadcn 注册表与组件组合

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

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

可访问性 UI 基元

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

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