gpt-taste 是一个前端设计工程技能,核心目标是生成获奖级(AWWWARDS 级别)的落地页、营销页或创意前端,并带有电影级动效。它适用于用户明确要求高级别设计、需要 GSAP 动画(如固定滚动、滚动擦除、卡片堆叠、水平运动)的场景,同时要求输出避免窄六行 Hero 标题、廉价元标签、空白 Bento 单元格和通用的左右分区。
主要能力包括:强制 AIDA 结构(Attention Hero、Interest Bento、Desire GSAP 滚动/媒体、Action 页脚/定价),要求每个页面以高级导航栏开始,并在主要区块之间使用巨大垂直间距(如 py-32 md:py-48)。Hero 架构遵循“两行铁律”:H1 必须使用超宽容器(如 max-w-5xl、max-w-6xl、w-full),行数不超过 2 到 3 行,字体大小使用 clamp(3rem, 5vw, 5.5rem),并禁止在 Hero 中使用浮动徽章、胶囊标签或原始数据。Bento 网格要求使用 Tailwind 的 grid-flow-dense,并数学验证 col-span 和 row-span 完美互锁,不留空白角落或空洞,卡片数量控制在 3 到 5 张。
动效方面,要求编写真实的 GSAP(@gsap/react、ScrollTrigger),包括悬停物理(group-hover:scale-105 transition-transform duration-700 ease-out)、滚动固定(左侧标题固定,右侧画廊滚动)、图像缩放与淡出滚动(进入时从 scale 0.8 到 1.0,离开时变暗并淡出至 opacity 0.2)、文本擦除揭示(中央段落单词透明度从 0.1 顺序擦除到 1.0)以及卡片堆叠。组件库包括内联排版图像、水平手风琴、无限跑马灯和反馈/推荐轮播。
使用方式上,该技能要求在编写任何 React/UI 代码之前,必须输出一个 <design_plan> 块,包含:Python RNG 执行(基于提示字符数确定性选择 Hero 布局、组件库、GSAP 动画和字体)、AIDA 检查、Hero 数学验证(明确 max-w 类以保证 2-3 行水平流动,确认无印章图标或垃圾标签)、Bento 密度验证(数学证明零空白且应用 grid-flow-dense)、标签清扫与按钮检查(确认无廉价元标签,按钮文本对比度完美)。只有完成这些严格验证后才输出 UI 代码。
适用场景包括:用户要求获奖级落地页、营销页或创意前端;需要 GSAP、固定滚动、擦除、卡片堆叠、水平运动等高级动画;输出必须避免窄六行 Hero 标题、廉价元标签、空 Bento 单元格和通用左右分区。
限制包括:该技能假设前端项目可以支持 GSAP 或等效动画库,实施前需检查依赖和性能预算;重滚动动画、固定和媒体效果需要在发布前跨桌面和移动视口进行浏览器测试;当用户要求克制界面、低动效无障碍模式或简单维护更改时,不应应用电影级动效。此外,资料中未提供具体的收费、价格、平台或效果保证信息。