SuperAPI AI 工具集

gpt-taste

通用与其它

查看项目

更新于 10-16 03:38

技能介绍

用途:gpt-taste 是一个前端 UX/UI 与 GSAP 动效工程技能,目标是让模型输出达到获奖级设计水准,主动打破大模型的统计偏见,例如窄容器导致的多行大标题、Bento 网格空洞、廉价元标签、按钮文字不可见、左右布局反复重复等。

主要能力与要求:

  1. 随机化:写 UI 代码前必须在 <design_plan> 中模拟 Python 脚本执行,用确定性种子(如用户提示字符数取模)模拟 random.choice(),选定 1 种 Hero 架构、1 套字体(Satoshi、Cabinet Grotesk、Outfit 或 Geist,禁用 Inter)、3 个组件架构、2 种 GSAP 范式,禁止两次默认相同 UI。
  2. 结构:页面以创意导航栏开始,正文遵循 AIDA(Attention Hero、Interest Bento、Desire GSAP 滚动/媒体、Action 页脚/定价),区块间使用大垂直间距(如 py-32 md:py-48)。
  3. Hero:H1 必须使用超宽容器(如 max-w-5xl、max-w-6xl、w-full),字号 clamp(3rem, 5vw, 5.5rem),标题不超过 2-3 行;Hero 禁止浮动徽章、胶囊标签和原始数据。
  4. Bento 网格:必须使用 grid-flow-dense,数学验证 col-span 与 row-span 完美咬合,不留空角或空洞;卡片控制在 3-5 张。
  5. 动效:使用真实 GSAP(@gsap/react、ScrollTrigger),包括悬停物理(group-hover:scale-105 transition-transform duration-700 ease-out)、滚动固定、图片缩放淡出、文字逐词显现、卡片堆叠等。
  6. 组件库:标题内嵌胶囊图片、水平手风琴、无限跑马灯、评价轮播等。
  7. 内容与素材:禁止 emoji 和“SECTION 01”“QUESTION 05”等元标签;图片使用 https://picsum.photos/seed/{keyword}/1920/1080 并配合 CSS 滤镜;页面外层用 <main className="overflow-x-hidden w-full max-w-full"> 防止横向滚动条。
  8. 预检:写代码前必须输出 <design_plan>,包含 Python RNG 执行、AIDA 检查、Hero 数学验证、Bento 密度验证、标签与按钮对比度检查。

使用方式:作为技能/提示词应用于前端生成流程,模型需先输出设计计划再输出 UI 代码。

适用场景:需要高创意、强动效、排版严谨的营销页、作品集、产品落地页等前端界面生成。

限制:资料未提供具体安装命令、收费、价格、平台支持或效果保证;其规则依赖模型对 GSAP、Tailwind 等技术的正确实现,实际输出质量可能因模型能力而异。