SuperAPI AI 工具集

silk-design

设计与创作

查看项目

更新于 10-15 21:08

技能介绍

用途:silk-design 是网页动效能力层,用于在构建网站或 Web UI 时默认加入平滑、精致的动效,让页面呈现高端质感,而非静态堆砌。它不负责美学方向,而是叠加在已有构建流程之上。

主要能力:提供不可妥协的基础配置,包括根部 Lenis 平滑滚动、禁用滚动回弹与细化滚动条、约 9 个 CSS 自定义属性的令牌架构、单一 --radius 驱动圆角、clamp 流体排版,以及统一的滚动揭示配置。工具箱涵盖入场揭示、滚动驱动效果(视差、固定滚动、视频滚动、FLIP 堆叠)、光标与指针交互(图像拖尾、磁性按钮、边框辉光、光标遮罩、可拖拽贴纸)、悬停微交互、跑马灯与轮播、导航与页面过渡、13 种动画背景、设计系统与页面组合范式。

使用方式:在 React + Vite + Tailwind v4 + motion + GSAP + Lenis 栈中,将根组件包裹在 ReactLenis 中,锚点链接通过 useLenis().scrollTo(el) 滚动。assets/ 下提供可直接复制适配的参考实现,简单原语可直接使用,区块展示组件需传入 actions 插槽。可通过 /silk-design <name> 引用 23 个参考组合,按名称或氛围匹配,取其配色、字体、圆角、卡片按钮风格与效果骨架,不复制其文案、图片或品牌。

适用场景:落地页、营销页、作品集、应用与仪表盘等需要动效质感的 Web 界面。

限制:资料未提供收费、价格、平台支持范围与效果保证等信息;参考组合是情绪板与线框图,不是源文件,需为新主题重新构建。