用途:让 AI 按高端设计代理的标准产出网页 UI,追求“15 万美元级”的质感,而非普通模板。
主要能力:定义禁用清单(如 Inter、Roboto、Arial 等字体,粗描边图标,1px 灰边框,生硬投影,贴顶导航,对称三栏网格,线性过渡);提供“创意变化引擎”,从氛围纹理(空灵玻璃、编辑奢华、柔和结构主义)与布局原型(非对称 Bento、Z 轴层叠、编辑分栏)中各选一种组合,避免重复。
组件规范:核心卡片、输入框、功能网格采用“双层面板”嵌套结构(外壳 + 内芯,同心圆角);主按钮为全圆角胶囊,尾部箭头图标须嵌在独立圆形包裹中;区块留白至少 py-24。
动效:使用自定义 cubic-bezier 曲线模拟弹簧物理;导航为悬浮玻璃胶囊,汉堡图标点击后旋转成 X,菜单以全屏玻璃遮罩展开,链接错峰上滑淡入;按钮悬停有缩放与内部图标位移;滚动入场用 IntersectionObserver 或 Framer Motion 的 whileInView,禁止 window.addEventListener('scroll')。
性能约束:只动画 transform 与 opacity;backdrop-blur 仅用于固定或粘性元素;噪点纹理仅用于 fixed、pointer-events-none 伪元素;z-index 仅用于系统层级。
移动端:768px 以下非对称布局回退为单列 w-full、px-4、py-8,取消旋转与负边距重叠;全高区块用 min-h-[100dvh] 而非 h-screen。
执行流程:静默选择原型、搭建背景与排版、用双层面板构建 DOM、注入动效、输出 React/Tailwind/HTML 代码,并按检查清单自检。
限制:资料未提供具体安装命令、收费方式、平台支持与效果数据;该技能为提示词式设计规范,实际产出取决于所用模型与工具链。