用途:gpt-taste 是一份前端设计工程技能提示,目标是让模型输出接近获奖级(Awwwards 级)的页面,主动打破大模型的统计偏见,例如窄容器导致标题折成六行、Bento 网格留空洞、使用廉价元标签、按钮文字不可见、左右布局反复重复。
主要能力与要求:
- 随机化:写 UI 代码前必须在 design_plan 中模拟 Python 脚本,用确定性种子(如用户提示字符数取模)模拟 random.choice(),选定 1 种 Hero 架构、1 套字体(Satoshi、Cabinet Grotesk、Outfit 或 Geist,禁用 Inter)、3 个组件架构、2 种 GSAP 范式,禁止两次默认同一 UI。
- 结构:页面以创意导航栏开始,正文按 AIDA 展开(Hero 吸引、Bento 兴趣、GSAP 欲望、Footer 行动),区块间使用大垂直间距(如 py-32 md:py-48)。
- Hero:H1 必须用超宽容器(如 max-w-5xl、max-w-6xl、w-full),字号 clamp(3rem, 5vw, 5.5rem),行数不超过 2 到 3 行;Hero 禁止浮动徽章、胶囊标签和原始数据。
- Bento 网格:必须使用 grid-flow-dense,数学验证 col-span 与 row-span 严丝合缝,不留空角;卡片控制在 3 到 5 张。
- 动效:使用真实 GSAP(@gsap/react、ScrollTrigger),包括悬停缩放、滚动固定、图片缩放淡出、文字逐词显现、卡片堆叠等。
- 组件库:内联排版图片、横向手风琴、无限跑马灯、评价轮播等。
- 内容与素材:禁用 SECTION 01、QUESTION 05 等元标签;图片使用 picsum.photos 种子链接并加 CSS 滤镜;背景用径向模糊、颗粒网格渐变;整页包在 overflow-x-hidden 容器中防止横向滚动条。
- 强制预检:输出代码前必须给出 design_plan,包含 Python 随机输出、AIDA 检查、Hero 宽度与行数验证、Bento 密度验证、标签与按钮对比度检查。
使用方式:将本技能作为系统提示或技能加载到支持该格式的 AI 编程工具中,再提出页面需求。
适用场景:需要高视觉质量、强动效的营销页、作品集、产品落地页等前端生成任务。
限制:资料未提供具体安装命令、收费方式、支持平台与实测效果;技能本身是提示规范,实际输出质量取决于所用模型与工具。