Interface Lab 资源库
技能页收纳所有可复用的局部 Prompt 技法。
局部技能负责布局、动效、边框、阴影、WebGL、图标和组件表现。先挑选当前项目需要的局部能力，再继续组合系统和素材。
提示技能
局部表现层：布局、动效、边框、阴影、WebGL 和可复制的 prompt 技法。
边框渐变
为高级表面应用细腻的渐变描边处理。
为高级表面应用细腻的渐变描边处理。Pro动效 · 8.9KPro遮罩揭示
在滚动时使用 GSAP ScrollTrigger 创建遮罩式错落文字揭示。
在滚动时使用 GSAP ScrollTrigger 创建遮罩式错落文字揭示。Pro资产 · 8.8KProAura 资产图像
像使用 Unsplash 一样搜索 Aura 素材，精选 5 个高质量直链图片，并在可用时优先使用更高分辨率版本。
像使用 Unsplash 一样搜索 Aura 素材，精选 5 个高质量直链图片，并在可用时优先使用更高分辨率版本。Pro布局 · 4.8KPro框架网格布局
使用细边界线勾勒每个区块，并在容器边缘添加 L 形角标强化框架感。使用极低透明度的 1px 斜线背景作为轻微纹理。所有区块保持统一：每个 section 位于精确的框架盒中，拥有细导线边框、严格的横纵对齐、清晰的区块分隔，以及框架之间一致的间距。整体干净、中性、网格化且高度结构化。
使用细边界线勾勒每个区块，并在容器边缘添加 L 形角标强化框架感。使用极低透明度的 1px 斜线背景作为轻微纹理。所有区块保持统一：每个 section 位于精确的框架盒中，拥有细导线边框、严格的横纵对齐、清晰的区块分隔，以及框架之间一致的间距。整体干净、中性、网格化且高度结构化。Pro布局 · 4.2KPro容器线框
添加垂直容器尺寸线，并配合小型角点方块。
添加垂直容器尺寸线，并配合小型角点方块。ProPPT Generation · 3.2KProHTML Deck 固定外壳
把 PPT 输出限制为单文件 HTML、固定 16:9 舞台和确定性 CSS/JS 外壳。
适用场景：生成或修复浏览器原生 HTML PPT deck；输入必须包含 slideCount、locale、style family、slide matrix、选中 PPT skills、artifact metadata 和是否已有固定 shell。ProPPT Generation · 3.2KProDeck 导航与 Overview
规定键盘、滚轮、触控、dot nav、ESC overview 和 reduced-motion 行为。
适用场景：生成或修复 HTML deck 导航层；输入必须包含 slideCount、当前 slide state、overview state、触控/键盘需求、动效策略和 reduced-motion 分支。ProPPT Generation · 3.2KPro16:9 舞台契约
约束所有 PPT 页面使用稳定 16:9 尺寸、字体和安全边界。
适用场景：任何 HTML PPT deck 或 slide renderer；输入必须包含 stage 尺寸、safe area、字体阶梯、导航占位、图片槽位和预览容器尺寸。ProPPT Generation · 3.2KProSlide Section Composer
把逐页内容矩阵转换为稳定 section，而不是让模型自由写整份 HTML。
适用场景：把 deck JSON/slide matrix 转成 HTML slide sections；输入必须包含每页 index、title、informationGoal、claim、layoutId、visualRole、theme、assetSlots 和 speakerIntent。ProPPT Layout · 3.2KPro电子杂志 Layout Registry
登记电子杂志模板的 10 个 layout、主题节奏和类名使用规则。
适用场景：选择或渲染 editorial/magazine 风格 HTML deck；输入必须包含主题、受众、slideCount、节奏、素材情况、是否需要证据图和视觉密度。ProPPT Layout · 3.2KPro瑞士网格 Layout Lock
锁定瑞士风 S01-S22 layout、单 accent、图片槽位和 data-layout QA。
适用场景：选择或验证 Swiss grid deck layout；输入必须包含 slideCount、accent token、内容角色、图片数量、是否数据页、是否对比页和已登记 S01-S22 列表。ProPPT Layout · 3.2KPro模板画廊风格检索
将视觉预设与模板画廊转成可检索风格，并先做最佳匹配和风格探索。
适用场景：生成前为 PPT 选择或适配风格资源；输入必须包含主题、受众、使用场景、语气、行业、slideCount、素材情况和用户指定风格偏好。ProPPT Assets · 3.2KProPPT 素材槽位
把上传素材绑定到封面、证据图、截图、图表、引用和附录等 deck 槽位。
适用场景：用户上传图片、截图、PDF 摘图、图表、logo、引用或参考资料后生成 PPT；输入必须包含 asset id、source、license、sensitivity、用途和可访问 URL。ProPPT Assets · 3.2KProPPT 截图适配
处理产品截图、网页截图、旧 PPT 截图和 dashboard 截图的比例、保真与再设计选择。
适用场景：产品截图、网页长截图、旧 PPT 截图、dashboard 截图或 UI mockup 进入 deck；输入必须包含截图用途、原始尺寸、关键区域、是否可裁切和保真要求。ProPPT Assets · 3.2KProPPT 配图比例规则
为主视觉、左文右图、信息图、截图再设计和网格小图定义生成比例。
适用场景：为 HTML deck 生成或检索主视觉、证据图、信息图、截图再设计、人物/场景图和网格小图；输入必须包含 slide role、slot ratio、语言、主题和是否含文字。ProPPT QA · 3.2KProDeck 静态 QA
对 HTML Deck 做页数、slide class、导航脚本、占位符和 prompt 泄漏检查。
适用场景：HTML deck 生成后、保存前、发布前或修复后；输入必须包含预期 slideCount、style family、选中 skills、HTML 字符串和可运行预览 URL。ProPPT QA · 3.2KProPPT 占位符清洗
清除 [必填]、TODO、模板注释、Lorem ipsum 和未替换 title。
适用场景：任何 deck 保存、导出或展示前；输入必须包含 HTML、metadata、speaker notes、asset slot table 和用户实际素材状态。ProPPT QA · 3.2KProSwiss data-layout Validator
校验瑞士风每页 data-layout、登记 layout、SVG 文本和单 accent 规则。
适用场景：Swiss style HTML deck 生成后或修复后；输入必须包含 HTML、登记 S01-S22 layout 列表、允许 accent token 和是否有 cover/appendix 特殊页。Pro动效 · 1.7KProGSAP 动效
使用 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 阴影预设，建立精致的分层抬升效果。ProWebGL · 711ProWebGL 光束
添加聚焦的 WebGL 激光束背景，使用设计主色，包含细光束、烟雾体积雾、光晕，以及置于 UI 后方的固定全屏 canvas。
添加聚焦的 WebGL 激光束背景，使用设计主色，包含细光束、烟雾体积雾、光晕，以及置于 UI 后方的固定全屏 canvas。Pro3D · 379ProWebGL 3D 物体
创建带真实光照和深度的 3D WebGL 物体。使用几何 mesh、基于物理的材质，以及方向光和环境光来显露形体和边缘。
创建带真实光照和深度的 3D WebGL 物体。使用几何 mesh、基于物理的材质，以及方向光和环境光来显露形体和边缘。Pro布局 · 285ProWebGL 背景网格
创建透视 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。Pro3D · 173Pro粒子地球
创建由发光粒子组成的 3D 地球，包含密集球形核心、轨道环、叠加光晕和细微动效。
创建由发光粒子组成的 3D 地球，包含密集球形核心、轨道环、叠加光晕和细微动效。Pro图标 · 145ProSolar 双色粗体图标
使用 Iconify Solar Duotone Bold 图标风格。
使用 Iconify Solar Duotone Bold 图标风格。ProWebGL · 124Pro魔法环遥测美学
技术工业极简设计系统，包含拟物 UI、玻璃拟态和响应式 WebGL 轨道环场。
技术工业极简设计系统，包含拟物 UI、玻璃拟态和响应式 WebGL 轨道环场。Pro布局 · 122Pro嵌套容器框架
创建嵌套框架布局系统：外层居中容器带可见垂直边界线和角点标记，内部容器从边缘内缩，并拥有各自的背景和圆角框架。
创建嵌套框架布局系统：外层居中容器带可见垂直边界线和角点标记，内部容器从边缘内缩，并拥有各自的背景和圆角框架。ProWebGL · 97Pro角落激光
创建锚定于角落的激光构图，包含细光束、明亮发射节点、bloom，以及大气光晕或雾效。
创建锚定于角落的激光构图，包含细光束、明亮发射节点、bloom，以及大气光晕或雾效。Pro风格 · 91Pro渐进模糊
使用分层边缘模糊叠层建立深度，包含顶部和底部参考 snippets 以及调参指引。
使用分层边缘模糊叠层建立深度，包含顶部和底部参考 snippets 以及调参指引。ProWebGL · 63Pro大气颗粒 WebGL 背景
技术冥想背景场，使用 GLSL shaders 生成颗粒噪声和变形几何原型。
技术冥想背景场，使用 GLSL shaders 生成颗粒噪声和变形几何原型。ProWebGL · 62Pro技术 ASCII 粒子场
使用 HTML5 Canvas 实现大气数据流背景，包含交互式 ASCII 节点和向上运动光束。
使用 HTML5 Canvas 实现大气数据流背景，包含交互式 ASCII 节点和向上运动光束。ProWebGL · 58Pro程序化网格网络背景
深蓝冥想型程序化 mesh gradient，配合技术叠层和响应式湍流。
深蓝冥想型程序化 mesh gradient，配合技术叠层和响应式湍流。Pro动效 · 55Pro跑马灯
使用复制项创建无缝无限跑马灯循环。
使用复制项创建无缝无限跑马灯循环。ProWebGL · 38Pro有机以太 WebGL 背景
技术复古未来主义 Three.js 背景，包含噪声位移有机几何、虹彩 Fresnel shaders 和滚动同步深度。
技术复古未来主义 Three.js 背景，包含噪声位移有机几何、虹彩 Fresnel shaders 和滚动同步深度。ProWebGL · 37Pro大气程序化 WebGL 背景
技术 shader 背景系统，包含噪声驱动的有机光晕、鼠标响应视差漂移和深色冥想氛围。
技术 shader 背景系统，包含噪声驱动的有机光晕、鼠标响应视差漂移和深色冥想氛围。Pro风格 · 32Pro黏性 Blob 系统
使用 SVG filters 创建黏性 blob 系统，让多个形状融合成单一流体形态；重点是 blur + threshold 的 filter 驱动融合、柔和有机边界、多形状整体行为和连续流畅动效。
使用 SVG filters 创建黏性 blob 系统，让多个形状融合成单一流体形态；重点是 blur + threshold 的 filter 驱动融合、柔和有机边界、多形状整体行为和连续流畅动效。ProWebGL · 29Pro技术 Shader 表面（WebGL）
程序化深海军蓝 mesh gradient，包含技术叠层、冥想式呼吸动效和 shader 驱动校准网格。
程序化深海军蓝 mesh gradient，包含技术叠层、冥想式呼吸动效和 shader 驱动校准网格。Pro风格 · 26Pro数字细节
添加装饰性 01、02、03 数字细节标记。
添加装饰性 01、02、03 数字细节标记。ProWebGL · 17Pro技术 WebGL 流体星云背景
高级 Three.js 背景系统，包含噪声变形流体光晕、扫动光束和颗粒叠层。
高级 Three.js 背景系统，包含噪声变形流体光晕、扫动光束和颗粒叠层。ProThree.js · 16ProAura 等距 3D 可视化系统
技术 3D 可视化系统，用 Three.js 创建等距终端界面、发光核心和线框强调。
技术 3D 可视化系统，用 Three.js 创建等距终端界面、发光核心和线框强调。Pro风格 · 12Pro大气 WebGL 场系统
沉浸式背景设计系统，包含交互粒子场、呼吸动效和渐变强调的抬升 UI 组件。
沉浸式背景设计系统，包含交互粒子场、呼吸动效和渐变强调的抬升 UI 组件。Pro风格 · 10ProAura 3D 网络系统
以太感 3D 网络可视化，整合玻璃拟态数据叠层和深度感动画。
以太感 3D 网络可视化，整合玻璃拟态数据叠层和深度感动画。Pro动效 · 9ProD3 交互式点云地球
基于 canvas 的交互式地球技术实现，使用正交投影和点云陆地形态。
基于 canvas 的交互式地球技术实现，使用正交投影和点云陆地形态。Pro动效 · 8Pro大气环境光束与粒子系统
分层背景系统，结合动画 CSS 渐变光束和技术 canvas 粒子场。
分层背景系统，结合动画 CSS 渐变光束和技术 canvas 粒子场。ProWebGL · 4Pro色散 WebGL 系统
生成式背景系统，包含扭曲光带、色差、噪声叠层和交互 shader 参数。
生成式背景系统，包含扭曲光带、色差、噪声叠层和交互 shader 参数。Pro风格 · 4Pro技术战术地球 UI
稀疏正交地球可视化，包含经纬线、脉冲红色数据节点和技术框架角标。
稀疏正交地球可视化，包含经纬线、脉冲红色数据节点和技术框架角标。Pro实现 · 0Proshadcn 注册表与组件组合
以 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动效 · 0ProMotion 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动效 · 0ProGSAP 核心动效
官方 GSAP 核心 API skill，覆盖 to/from/fromTo、easing、duration、stagger、defaults、matchMedia、transform 和 autoAlpha。
用于编写或评审 GSAP 核心 tween：gsap.to() 从当前状态到目标状态，gsap.from() 从初始状态进入当前状态，gsap.fromTo() 明确起点和终点，gsap.set() 用于立即设置。Pro动效 · 0ProGSAP 时间线编排
官方 GSAP timeline skill，覆盖 gsap.timeline()、position parameter、labels、嵌套和播放控制。
用于多步骤动效编排、keyframe-like choreography、动画顺序控制，优先使用 gsap.timeline()，不要用一串 delay 手动串联。Pro动效 · 0ProGSAP 滚动触发
官方 GSAP ScrollTrigger skill，覆盖滚动联动、pin、scrub、trigger、refresh 和 cleanup。
用于滚动驱动动效、视差、pin 区块、scrub 进度联动，或用户明确提到 ScrollTrigger、scroll animation、pinning 时；未指定库的滚动动效默认推荐 GSAP ScrollTrigger。Pro动效 · 0ProGSAP 插件
官方 GSAP 插件 skill，覆盖插件注册、ScrollToPlugin、ScrollSmoother、Flip、Draggable、Observer、SplitText、SVG/physics、CustomEase 和 GSDevTools。
用于用户询问 GSAP plugin、scroll-to、smooth scroll、Flip、draggable、SVG drawing、MorphSVG、SplitText、ScrambleText、CustomEase、plugin registration 或 Club GSAP/授权问题时。Pro动效 · 0ProGSAP 工具函数
官方 gsap.utils skill，覆盖 clamp、mapRange、normalize、interpolate、random、snap、toArray、wrap、pipe 等工具函数。
用于用户询问 gsap.utils、clamp、mapRange、random、snap、toArray、wrap、pipe 或需要把输入值映射、限制、归一化、插值、循环和批量选择时。Pro动效 · 0ProGSAP React
官方 GSAP React skill，覆盖 useGSAP hook、refs、gsap.context()、cleanup 和 SSR。
用于 React 或 Next.js 中设置 GSAP 动画、处理 cleanup、避免 selector 泄漏、解决 SSR/lifecycle 问题；未指定库的 React 动效可推荐 GSAP。Pro动效 · 0ProGSAP 性能优化
官方 GSAP performance skill，覆盖 transforms、避免 layout thrashing、will-change、batching 和 smooth 60fps 优化。
用于优化 GSAP 动效、减少 jank、处理 FPS/60fps/性能问题，或评审动效是否会造成 layout/paint 成本过高。Pro动效 · 0ProGSAP 框架集成
官方 GSAP Vue、Svelte 和其他非 React 框架 skill，覆盖 lifecycle、selector scope 和 unmount cleanup。
用于 Vue、Nuxt、Svelte、SvelteKit 或其他非 React 框架中的 GSAP 动效；React 项目使用 gsap-react。Pro实现 · 0ProReact/Vite 文件包契约
为 React + Vite + TypeScript 直出项目约束文件标记、允许文件、默认导出、依赖白名单、CSS 放置和修复返回格式。
仅在需要输出或修复 React + Vite + TypeScript 文件包时调用；如果用户只要解释、审计或单文件 HTML，不要使用这个 skill。Pro资产 · 0Pro组件库适配入库判断
在引入 Radix、shadcn、Headless、Material、Fluent、Carbon、Spectrum、GOV.UK、USWDS 等资源前，评估授权、品牌语气、技术栈、主题映射和前端维护成本。
先读取项目已有组件、tokens、CSS 变量、Tailwind/shadcn/Radix 配置、依赖树和设计系统文档；不要因为看到好看的组件库就叠加第二套体系。Pro可访问性 · 0Pro高对比与 Forced Colors
为组件和页面审计高对比、forced-colors、prefers-contrast、焦点指示、非文本对比和系统颜色回退。
先收集目标组件/页面、所有交互状态、可聚焦控件、现有 color token、支持浏览器/系统和目标 WCAG 等级。Pro验证 · 0Pro动效可访问与性能 QA
审计页面和组件动效的目的、reduced-motion、滚动/循环控制、性能属性、生命周期清理和桌面/移动验证证据。
输入必须包含：页面/组件 URL 或代码、动效清单、触发方式（load/hover/tap/scroll/drag/route）、使用库（CSS/Motion/GSAP/Lenis/Lottie/Anime.js）、目标设备和是否有 reduced-motion 要求。Pro动效 · 0Pro滚动叙事区块契约
设计、审计或实现 scrollytelling、sticky graphic、pinned narrative、step-triggered visuals 和滚动解释区块，覆盖章节目的、静态 fallback、reduced-motion、可访问阅读顺序、性能和桌面/移动 QA。
适用场景：scrollytelling、scroll story、sticky graphic、pinned narrative、Scrollama、ScrollTrigger story section、scroll-scrubbed product explanation、step-based scroll reveal；输入必须包含页面角色、故事目标、章节清单、视觉/媒体状态、技术栈、可访问性目标和性能预算。Pro组件 · 0Pro动效组件来源入库
评审 Magic UI、Motion-Primitives、Animate UI 等复制式动效组件资源的授权、依赖、交互契约、可访问性和本地化改造。
输入必须包含：候选组件 URL/仓库、目标页面或组件角色、前端栈、依赖预算、授权要求、是否允许 copy-paste 源码，以及是否用于生产。Pro验证 · 0ProCopy-in 动效组件本地化验收
把已选用的 Lottie、Motion、GSAP、Magic UI 或 registry 动效组件改造成本地化、可访问、可降级、可验证的生产组件。
输入必须包含：已选组件来源、目标页面/任务、zh/en 文案、状态列表、动效库、是否自动播放/循环、目标视口、授权记录和生产验收要求。Pro验证 · 0Pro首屏产品信号审计
检查 hero/首屏是否立即呈现真实对象、价值、行动、媒体裁切和下一屏暗示，避免抽象空壳首屏。
先识别页面首屏要让用户确认的对象：品牌、产品、场所、人物、offer、工具状态或核心任务；这个对象必须是首屏最大信号之一。Pro交互 · 0Pro电商浏览结账漏斗
设计、审计或实现零售电商从首页/分类/搜索、商品列表筛选排序、PDP、加购反馈、购物车审阅到访客结账、地址校验、支付错误和订单确认的完整漏斗。
适用场景：零售电商、在线商店、商品目录、PLP、PDP、购物车、mini cart、checkout、访客结账、配送/自提、支付、优惠码、订单确认和转化率优化；食品餐饮下单优先使用 food-commerce skill。Pro交互 · 0Pro食品快商下单路径
设计、审计或实现餐饮/食品快商首屏、菜单卡、价格证据、食材/营养证明、购物车状态和下单动效降级。
适用场景：餐厅、咖啡、饮品、烘焙、快餐、外带、云厨房、食品电商和 food pop-up 页面；输入必须包含业务类型、主转化、首屏产品对象、菜单数据、价格/证据、动效计划和目标视口。Pro资产 · 0Pro首屏背景视频治理
为网页首屏、品牌页和背景 b-roll 选择、授权、优化并实现可访问的 stock video，覆盖署名、release 风险、poster、暂停控制和 reduced-motion。
适用场景：landing hero、品牌页、作品集首屏、案例页、活动页、背景 b-roll、Coverr/Mixkit/Pexels 视频素材；输入必须包含页面角色、视频角色、来源或搜索词、商用语境、目标视口和是否自动播放。Pro验证 · 0Pro装饰背景可读性
审计和实现纹理、图案、渐变、噪声、背景图和 ambient media，使其不损害文字可读性、语义、授权、性能和响应式布局。
适用场景：patterned background、texture overlay、gradient mesh、noise layer、hero backplate、CSS background image、背景图压住文字、低对比 surface；输入必须包含 surface 角色、背景类型、前景内容、素材来源、目标视口和是否有动效。Pro实现 · 0Pro代码示例复制契约
设计、审计或实现开发者文档里的代码块、语法高亮、复制按钮、语言 tabs、API 示例、playground、剪贴板反馈和响应式滚动。
适用场景：docs code block、copy code、API request/response、SDK snippet、install command、语言/包管理器 tabs、Shiki/Prism/Sandpack；输入必须包含文档语境、读者任务、语言/版本、复制目标和目标设备。Pro实现 · 0ProAPI 端点文档契约
设计、审计或实现 OpenAPI/Swagger API reference、端点页、参数表、请求/响应 schema、状态码矩阵、try-it 控制台和 SDK/cURL 示例。
适用场景：API reference、endpoint docs、OpenAPI/Swagger、Redoc、Scalar、try it、request/response schema、auth scopes、webhook/event docs；输入必须包含 method/path、来源 spec、鉴权、参数、请求体、响应/错误、示例和目标渲染器。Pro实现 · 0ProAI 答案引用契约
设计、审计或实现 AI/RAG 答案里的 inline citations、source cards、source drawer、streaming source 状态、证据复制和可审计来源面。
适用场景：AI citations、RAG answer UI、sources、source cards、inline references、Perplexity-style answer、research assistant、streamed message parts、tool evidence；输入必须包含用户任务、证据来源、引用粒度、source metadata、streaming 模型、风险等级和目标前端栈。Pro实现 · 0Pro半透明材质可读性
设计、审计或实现 glass、Liquid Glass、acrylic、mica、smoke、frosted nav、backdrop blur 等半透明界面材质，同时保护对比度、层级、可访问偏好、forced-colors、性能和 CSS fallback。
适用场景：glassmorphism、Liquid Glass、acrylic、mica、smoke、frosted glass、transparent nav/sidebar、backdrop-filter、blurred overlay；输入必须包含 surface role、foreground content、backdrop variability、material intent、interaction model、accessibility targets 和 target stack。Pro组件 · 0Pro复杂表格层级
为高密度数据表建立任务模型、列优先级、响应式披露、批量操作、状态反馈、可访问表头和前端实现约束。
适用场景：运营后台、审核队列、财务清单、资源库、日志和权限矩阵；输入必须包含用户任务、数据规模、列清单、主键、排序/筛选需求、批量操作、权限和目标视口。Pro信息架构 · 0Pro信息气味链接标签
为导航、卡片、资源列表、搜索结果和正文链接建立可预测、可访问、可检索的链接标签与目标说明契约。
适用场景：导航、知识库、资源库、卡片列表、搜索结果、文档链接、外链和权限入口；输入必须包含目标 URL/对象、用户任务、链接上下文、是否外链/下载/登录/新窗口。Pro数据可视化 · 0ProDashboard KPI 告警分诊
为运营看板、监控台、状态页和管理分析界面建立 KPI 优先级、告警严重度、阈值、负责人、证据入口、确认/静音/解决状态和下一步行动。
适用场景：dashboard KPI hierarchy、alert triage、status dashboard、incident board、monitoring console、admin analytics、metric cards、severity states、thresholds，以及把原始指标转成可行动 React/CSS 界面。Pro数据可视化 · 0Pro图表选择与可访问性
根据数据关系、用户任务和可访问性要求选择图表类型、编码、文案、替代数据表和前端图表库。
先写图表问题，不先选图表库：用户要比较、看趋势、看分布、看相关、看组成、看排名、看地理、看流向，还是排查异常？Pro数据可视化 · 0Pro图表可访问编码
为已选图表建立不只依赖颜色的数据系列编码、直接标签、线型/符号/纹理、图例、摘要、长描述、数据表替代、SVG/Canvas 可访问性和键盘 tooltip 路径。
适用场景：已确定图表类型后，需要审计或实现 chart accessibility encoding、颜色不能单独承载含义、多系列折线、状态图表、热力图、地图、SVG/Canvas 图表、dashboard 可视化、图表表格替代或键盘 tooltip。Pro可访问性 · 0Pro表单错误状态契约
为登录、注册、结账、设置、投稿、筛选、多步表单和后台编辑建立标签、帮助文本、验证时机、内联错误、错误摘要、提交状态、服务端失败恢复、移动输入和前端状态模型。
适用场景：login、signup、checkout、settings form、contribution form、filter form、multi-step form、field validation、server error、disabled/loading submit、aria-describedby、focus return、error summary 或移动端键盘输入。Pro可访问性 · 0Pro事务型表单错误恢复
为公共服务、金融、医疗、申请和后台审核表单建立错误摘要、字段错误、焦点移动、保留输入和继续提交路径。
输入必须包含：表单目的、字段清单、必填/格式/服务端校验规则、提交方式、是否多步、错误数量范围、用户是否已输入敏感或高成本信息。Pro可访问性 · 0Pro公共服务信任锚点
为政务、公共服务、公共医疗、教育、福利/许可申请和合规门户建立官方身份、责任机构、法定链接、语义表单、错误恢复、复核确认和不可冒充边界。
适用场景：government、公共服务、政务、公共医疗/教育、福利/许可申请、合规门户、敏感长表单、官方 banner、agency identifier、.gov/.mil/GOV.UK/NHS 风格服务、法定页脚链接和避免误导性官方背书。Pro交互 · 0ProAI 生成进度与恢复
为 AI 生成、转码、导入、长任务和队列流程建立阶段进度、可取消/重试、部分结果、失败恢复和状态公告。
输入必须包含：任务类型、预估耗时、是否可估算百分比、阶段清单、是否有队列、是否可取消、是否可返回后台、失败是否可重试、是否能展示部分结果。Pro动效 · 0Pro滚动叙事动效
为叙事型页面建立滚动段落、scrubbed video/scene、锚点节奏、性能边界和 reduced-motion fallback。
先把故事拆成 3-7 个章节，每章只回答一个用户问题：是什么、为什么可信、如何工作、结果是什么、下一步做什么。Pro交互 · 0Pro移动端行动密度
为移动端工具栏、筛选器、底部行动栏和长文案按钮建立行动优先级、触控目标、safe-area、键盘和不溢出规则。
适用场景：移动端顶部工具栏、底部行动栏、筛选条、批量操作、详情页 action cluster、长文案 CTA；输入必须包含行动清单、频率、危险性、是否需要文本、目标视口和键盘场景。Pro设计 Token · 0Pro语义 Token 契约
把 style/design.md、品牌参考或现有 CSS 提炼为语义 token、别名层、组件映射、深浅色模式和可迁移前端实现契约。
适用场景：把 DESIGN.md、Figma 样式、品牌色、现有 CSS variables 或截图转成前端可维护主题；输入必须包含来源、目标框架、深浅色需求、组件清单和命名约定。Pro实现 · 0ProOKLCH 主题色彩系统
把品牌种子色转成感知均匀的 OKLCH 色阶、浅深色语义 token、CSS 变量、sRGB fallback 和组件状态映射。
输入必须包含：品牌 seed color、目标产品语气、浅色/深色表面、正文/弱文本/边框/主行动/焦点/状态色用途、最低对比度目标和浏览器支持范围。Pro资产 · 0Pro素材授权入库
为字体、图标、图案、插画、Lottie、UI kit 等素材建立来源、授权、商用、归因、安装和 RAG 关键词记录。
入库前先确认素材级授权，不只看平台授权；Iconify、LottieFiles、聚合型字体/图标站必须逐 collection 或逐文件确认。Pro资产 · 0Pro素材署名展示面
为 CC BY、自定义许可、图片、图案、插画、Lottie、地图等素材设计可见署名、来源链接、修改说明和导出保留规则。
输入必须包含：素材清单、使用页面/导出物、license 名称、作者/标题/来源/许可证链接、是否修改、商用语境和是否需要 no-endorsement 提示。Pro资产 · 0Pro字体交付治理
为 Web/UI 字体建立授权确认、加载方式、自托管/CDN 选择、fallback、性能和多语言交付清单。
输入必须包含：目标语言/script、UI 角色（body/display/mono/CJK fallback）、需要的 weights/styles、目标框架、隐私/合规约束、离线/内网要求和性能预算。Pro资产 · 0Pro图标来源治理
为产品图标、品牌 logo 和聚合 SVG 资源建立主图标集选择、授权/商标确认、导入策略和可访问命名规则。
输入必须包含：产品语气、UI 密度、图标角色（导航/动作/状态/品牌/空状态）、尺寸、现有图标集、技术框架和是否需要真实品牌 logo。Pro资产 · 0Pro品牌 Logo 使用审计
审计集成页、客户墙、支付方式、社交登录和技术栈徽章中的品牌 Logo 使用目的、商标指南、背书风险和可访问命名。
输入必须包含：品牌列表、使用位置、真实关系（集成/客户/伙伴/支付/登录/技术引用）、logo 来源、是否商用、页面文案和目标设备。Pro资产 · 0Pro生成素材来源记录
为 AI 生成图像、视频、插画、纹理和 mockup 入库记录生成链路、参考输入、编辑历史、权利风险和 RAG 检索元数据。
生成素材不是无来源素材；入库前必须记录工具/模型、生成日期、prompt 摘要、参考输入、输入素材权利、编辑/放大/裁切历史和最终文件路径。Pro资产 · 0Pro图片与 3D 素材引用入库
为开放图片、照片、NASA/Wikimedia/Openverse 媒体、HDRI、PBR 纹理、glTF/GLB 和 3D 模型建立引用、授权、优化和前端接入记录。
输入必须包含：资源用途（hero/detail/background/evidence/3D scene/test model）、页面语境、是否商用、目标输出格式、目标尺寸/帧率/设备、来源候选链接和是否涉及人物/品牌/地点。Pro风格 · 0Pro背景纹理护栏
为 SVG/CSS/图片纹理背景建立用途判断、可读性、授权、token、fallback 和前端性能检查。
输入必须包含：page type、主任务、surface token、文字覆盖位置、light/dark 模式、纹理来源/授权、输出格式和目标设备范围。Pro交互 · 0Pro库页搜索与 Facet 流程
为知识库、素材库、模板库、组件库和案例库建立搜索、分类、facet、命中摘要、空结果和详情返回流程。
输入必须包含：库类型、条目数量级、主要用户任务、条目 metadata 字段、可筛选字段、排序策略、详情页路径和是否供 RAG/agent 调用。Pro交互 · 0Pro空状态行动恢复
为首次空、搜索无结果、筛选为空、权限空、配置缺失、后端失败、离线和完成清空状态设计原因说明、行动路径和前端状态合同。
输入必须包含：surface 类型、主任务、空状态原因、用户权限、当前 query/filter/loading/error 状态、可用行动、文案语气、目标视口和数据源/错误码。Pro交互 · 0Pro加载骨架状态契约
为加载、骨架屏、inline loading、spinner、进度条、乐观更新、流式占位和刷新状态设计时长判断、状态机、可访问反馈和前端实现契约。
输入必须包含：surface 类型、操作类型、预期时长、是否可测量进度、是否有旧内容、重复提交风险、可取消/重试/后台处理能力、目标视口和前端状态来源。Pro可访问性 · 0ProARIA 组件契约
把自定义组件实现前的角色、可访问名称、键盘行为、焦点管理、状态属性和测试断言写成可执行契约。
输入必须包含：组件类型、是否可用原生 HTML、目标交互、状态清单、是否使用 Radix/shadcn、是否在 modal/portal 中、键盘路径和读屏期望。Pro数据可视化 · 0Pro地图列表归因界面
为 MapLibre/地图列表混合界面建立数据来源、归因、列表替代、选中状态同步和小屏可访问路径。
输入必须包含：地图用途、地理数据来源、tile/style/glyph/sprite provider、运行时库、对象数量、筛选字段、选中对象详情、是否商用和目标设备。Pro数据可视化 · 0ProNotebook 数据报告界面
为 Observable/Plot 风格的数据报告、公共数据门户和研究 dashboard 建立问题优先、来源可追溯、图表可访问和表格 fallback 的界面合同。
输入必须包含：数据问题、目标读者、数据来源、更新时间、字段/单位、分析 transform、图表候选、是否需要 Notebook cell、是否公开发布和可访问性要求。Pro可访问性 · 0Pro浮层焦点与滚动锁
为 dialog、drawer、sheet、popover 和 alert 建立焦点陷阱、返回焦点、Escape、背景不可达、滚动锁和移动端安全区合同。
输入必须包含：浮层类型、是否 modal、触发元素、关闭方式、是否嵌套、内容长度、是否有表单/危险操作、目标设备、是否使用 Radix/shadcn/headless primitive。Pro组件 · 0Pro文件上传 Dropzone 状态
为上传、拖拽、导入和附件组件建立文件类型、大小、批量进度、缩略图、失败重试、取消和可访问替代路径。
输入必须包含：文件用途、允许类型、最大大小/数量、是否批量、是否即时上传、是否需要 metadata、上传 API、失败类型、目标设备和商用/隐私要求。Pro交互 · 0Pro命令面板键盘流
为 Command Palette、快速动作菜单、全局搜索和资源跳转建立分组、快捷键、键盘导航、空状态、权限和移动端 fallback。
输入必须包含：命令来源、目标用户、命令数量级、是否全局搜索、可执行/可导航命令区别、权限模型、快捷键、移动端入口和是否使用 cmdk/shadcn。Pro交互 · 0Pro多步流程保存与恢复
为申请、开户、设置向导和导入流程建立步骤指示、草稿保存、跨步校验、回顾页、恢复入口和提交确认。
输入必须包含：流程目的、步骤清单、是否线性、每步字段/任务、可保存内容、身份/登录要求、超时规则、跨步依赖、最终提交风险和目标设备。Pro实现 · 0Pro实时协作 Presence
为多人编辑、画布、文档、看板和评论系统建立在线状态、头像栈、光标/选区、冲突反馈、离线恢复和可访问公告。
输入必须包含：协作对象、同步模型、presence 数据字段、用户数量级、权限角色、是否显示光标/选区/评论锚点、离线策略、冲突风险和隐私要求。Pro布局 · 0Pro主从分栏信息流
为列表详情、侧边栏详情、支持面板和宽屏生产力界面建立断点、选择状态、返回路径、空详情和移动端降级规则。
输入必须包含：对象集合、详情层级、列表项 metadata、默认选择规则、可多选/批量操作、宽屏/平板/移动断点、详情内行动和是否需要支持面板。Pro交互 · 0Pro通知收件箱分流
为 toast、inline notification、banner、modal、通知中心和告警收件箱建立严重性、持久性、行动、公告和归档规则。
输入必须包含：消息来源、严重性、是否阻断任务、是否需要用户行动、是否可自动消失、是否需要历史记录、权限范围、频率和目标设备。Pro实现 · 0Pro权限矩阵管理界面
为组织设置、角色、组、项目权限和危险能力开关建立矩阵、继承、预览、批量修改、审计和可访问状态。
输入必须包含：权限对象、角色/组/用户层级、资源范围、继承规则、危险权限、默认角色、批量编辑需求、审计要求和谁有权修改。Pro数据可视化 · 0Pro审计日志证据时间线
为安全、合规、管理员和协作产品建立可筛选审计日志、事件详情、差异、来源、导出和证据级空/错误状态。
输入必须包含：事件来源、保留期限、用户/系统 actor、对象类型、动作类型、前后差异、IP/设备/位置、合规导出需求、敏感字段和权限模型。Pro布局 · 0Pro横向作品集 Rail
为建筑、摄影、作品集、案例库和视觉收藏建立有限横向 rail、项目元数据、控件、scroll-snap、可访问性和移动端纵向降级。
适用场景：horizontal portfolio、gallery rail、project carousel、work archive、case-study index、image-led collection；输入必须包含条目数量、条目类型、项目元数据、选中/详情模型、控件模型、目标断点和动效预算。Pro