用途:该技能定位为高端 UX/UI 与 GSAP 动效工程,用于生成具备奖项级质感的落地页与营销页面,建立在前置设计规范(design-foundation,含 6 项准则与 slop-test)之上,作为不可协商的底线,本技能仅在其上追加风格。
主要能力:一是 Python 驱动的真随机化,在写 UI 代码前于 design_plan 中模拟 Python 脚本,以用户提示字符数取模作为确定性种子,随机选定 1 种 Hero 架构、1 种字体栈(Satoshi、Cabinet Grotesk、Outfit 或 Geist,禁用 Inter)、3 种组件架构与 2 种 GSAP 范式,禁止重复同一版式。二是强制 AIDA 结构:导航栏、注意力(Hero)、兴趣(Bento)、欲望(GSAP 滚动/媒体)、行动(页脚/定价),并在主要区块间使用巨大纵向留白(如 py-32 md:py-48)。三是 Hero 两行铁律:H1 容器需超宽(max-w-5xl、max-w-6xl、w-full),字号 clamp(3rem, 5vw, 5.5rem),行数不超过 2 至 3 行;按钮对比须清晰。四是无缝 Bento 网格:必须使用 grid-flow-dense,卡片的 col-span 与 row-span 须数学上严丝合缝,无空格与死角,卡片数量以 3 至 5 张为宜。五是 GSAP 动效与悬停物理:使用 @gsap/react 与 ScrollTrigger,包含悬停缩放、滚动钉住、图片缩放淡入淡出、文字逐词显现、卡片堆叠等范式。六是组件库:标题内嵌胶囊图片、横向手风琴、无限跑马灯、评价轮播等。七是内容与素材规范:禁止 meta 标签(如 SECTION 01、QUESTION 05),图片使用 picsum.photos 占位并按语境加滤镜,背景使用径向模糊或颗粒渐变,整页包裹 overflow-x-hidden 防止横向滚动条。八是强制预检 design_plan,含 RNG 执行、AIDA 检查、Hero 数学验证、Bento 密度验证、标签与按钮检查,通过后才输出代码。
使用方式:作为技能调用,通过 /gpt-taste 触发;完成后按格式撰写 wiki 草稿并更新索引与日志。
适用场景:需要高完成度、强动效、非模板化的前端页面生成任务。
限制:资料未提供具体平台依赖、收费信息与实际效果数据;执行该技能需遵循前述各项禁用与强制规则。