用途
gpt-taste 是一个面向前端界面生成的设计工程技能，目标是让大模型产出达到 AWWWARDS 级别的高端网页设计。它针对标准 LLM 在前端生成中的固有偏差进行对抗，这些偏差包括：用窄容器生成 6 行换行的巨型标题、在 Bento 网格中留下难看的空白、使用廉价的元标签（如 QUESTION 05、SECTION 01）、输出不可见的按钮文字，以及反复重复相同的左图右文布局。该技能的核心指令是成为一位精英、获奖级别的前端设计工程师，输出必须高度创意、间距完美、动效丰富（GSAP）、网格执行数学上无瑕，并大量依赖多样化的高端素材。
主要能力
Python 驱动的真随机化：技能要求在编写任何 UI 代码前，在 <design_plan> 中模拟 Python 脚本执行，使用确定性种子（如用户提示的字符数取模数学）来模拟 random.choice()，并严格选择：1 个 Hero 架构、1 个字体栈（Satoshi、Cabinet Grotesk、Outfit 或 Geist，绝不使用 Inter）、3 个独特组件架构、2 个高级 GSAP 范式。禁止默认重复同一 UI，必须遵循模拟随机化的确切输出。
AIDA 结构与间距：每个页面必须以高度创意的优质导航栏开始（如浮动玻璃胶囊或极简分栏导航）。页面其余部分必须遵循 AIDA 框架：注意力（Hero，电影感、干净、宽布局）、兴趣（功能/Bento，高密度、数学完美的网格或交互式排版组件）、欲望（GSAP 滚动/媒体，固定区块、水平滚动或文字显现）、行动（页脚/定价，巨大高对比 CTA 和干净的页脚链接）。间距规则要求所有主要区块之间加入巨大垂直内边距（如 py-32 md:py-48），区块必须感觉像独立、电影感的章节，不得元素拥挤。
Hero 架构与 2 行铁律：Hero 必须呼吸，不能是狭窄的 6 行文字墙。容器宽度修复要求 H1 必须使用超宽容器（如 max-w-5xl、max-w-6xl、w-full），让文字水平流动。行数限制规定 H1 绝不得超过 2 到 3 行，4、5、6 行是灾难性失败。字体大小应调小（clamp(3rem, 5vw, 5.5rem)），容器加宽以确保此点。Hero 布局选项（由 Python 随机分配）：电影感居中（高度优先，文字完美居中、巨大宽度，下方恰好两个高对比 CTA，CTA 下方或所有内容后方是令人惊叹的全出血背景图带深色径向洗色）、艺术不对称（文字偏左，艺术浮动图从右下方重叠文字）、编辑分栏（文字左、图右，但带巨大负空间）。按钮对比要求按钮完美可读，深色背景配白色文字，浅色背景配深色文字，不可见文字是失败。Hero 中禁止：不得在文字上使用任意的浮动印章/徽章图标，不得在 Hero 下方使用胶囊标签，不得在 Hero 中放置原始数据/统计。
无空隙 Bento 网格：网格中零空白空间。LLM 以在 CSS 网格中留下空白死格而臭名昭著，因此必须在每个 Bento 网格上使用 Tailwind 的 grid-flow-dense（grid-auto-flow: dense）。必须数学验证 col-span 和 row-span 值完美互锁，网格不应有缺失的角落或空虚空洞。卡片节制：不要使用过多卡片，3 到 5 个高度有意、精美风格化的卡片优于 8 个凌乱的卡片。用大型图像、密集排版或 CSS 效果填充它们。
高级 GSAP 动效与悬停物理：静态界面被严格禁止，必须编写真实的 GSAP（@gsap/react、ScrollTrigger）。悬停物理：每个可点击卡片和图像必须反应，使用 group-hover:scale-105 transition-transform duration-700 ease-out 置于 overflow-hidden 容器内。滚动固定（GSAP 分栏）：固定左侧的区块标题（ScrollTrigger pin: true），同时右侧的元素画廊向上滚动。图像缩放与淡出滚动：图像必须从小开始（scale: 0.8），当滚动进入视图时增长到 scale: 1.0，当滚动离开视图时平滑变暗并淡出（opacity: 0.2）。滚动文字显现：中央段落文字的不透明度从 0.1 开始，随着用户滚动顺序刷到 1.0。卡片堆叠：卡片随着用户向下滚动，从底部动态重叠并堆叠在彼此之上。减少动效（强制）：上述每个动画都必须尊重 prefers-reduced-motion: reduce。将 ScrollTrigger/GSAP 设置置于 reduced-motion 检查之后（gsap.matchMedia() 或 useReducedMotion()），并且在 (prefers-reduced-motion: reduce) 下将滚动固定、刷动、图像缩放/淡出、卡片堆叠和跑马灯折叠到它们的静态终态（完全不透明、scale: 1、无自动滚动）。“静态界面被禁止”管辖默认体验，不适用于明确要求减少动效的用户。
组件武器库与创意：根据随机化从武器库中选择组件。内联排版图像：将小型药丸形图像直接嵌入巨大标题内部。例如：I shape <span className="inline-block w-24 h-10 rounded-full align-middle bg-cover bg-center mx-2" style={{backgroundImage: 'url(...)'}}></span> digital spaces。水平手风琴：垂直切片在悬停时水平展开以显示内容和图像。无限跑马灯（可信伙伴）：平滑、连续滚动的真实 @phosphor-icons/react 行或大型排版。反馈/推荐轮播：干净、重叠的肖像图像紧邻极简排版引语，由微妙箭头控制。
内容、素材与严格禁令：元标签禁令，永远禁止使用如“SECTION 01”、“SECTION 04”、“QUESTION 05”、“ABOUT US”等标签，彻底移除它们，它们看起来廉价且不专业。图像上下文与风格：使用 https://picsum.photos/seed/{keyword}/1920/1080 并使关键词匹配氛围。应用精致的 CSS 滤镜（grayscale、mix-blend-luminosity、opacity-90、contrast-125），使它们看起来不像无聊的库存照片。创意背景：注入微妙、专业的氛围设计。使用深径向模糊、颗粒网格渐变或变化的深色叠加。避免平淡、无聊的颜色。水平滚动错误：将整个页面包裹在 <main className="overflow-x-hidden w-full max-w-full"> 中，以绝对防止由屏幕外动画引起的水平滚动条。
强制预检 <design_plan>：在编写任何 React/UI 代码之前，必须输出一个 <design_plan> 块，包含：Python RNG 执行（写一个 3 行模拟 Python 输出，展示基于提示字符数对 Hero 布局、组件武器库、GSAP 动画和字体的确定性选择）；AIDA 检查（确认页面包含导航、注意力、兴趣、欲望、行动）；Hero 数学验证（明确说明应用于 H1 的 max-w 类，以保证其水平流动为 2-3 行，确认不存在印章图标或垃圾标签）；Bento 密度验证（数学证明网格列和行不留零空白空间，并应用了 grid-flow-dense）；标签清扫与按钮检查（确认不存在廉价元标签，按钮文字对比完美）。只有在严格验证完成后才输出 UI 代码。
使用方式
该技能通过 skills.sh 平台以 slug gpt-taste 引用，来源于 leonxlnx/taste-skill。官方文本未提供具体安装命令或调用步骤。作为设计工程技能，其使用方式是在前端生成任务中作为系统级指令应用，要求模型在输出任何 UI 代码前先生成 <design_plan> 预检块，并按照 Python 随机化、AIDA 结构、Hero 2-3 行铁律、无空隙 Bento、GSAP 动效与减少动效适配等规则生成 React/Tailwind/GSAP 代码。
适用场景
适用于需要高端、创意、动效丰富的网页界面生成任务，尤其是营销落地页、产品首页、品牌展示页等遵循 AIDA 转化结构的页面。适合希望对 LLM 默认前端输出进行强约束、提升设计质量和一致性的场景。
限制
官方资料未提供该技能的具体安装方式、运行环境要求、平台依赖、收费模式或版本信息。技能内容本身为设计工程指令集，不包含具体的基础设施或托管说明。所有未明确提供的事实（如价格、平台支持细节、效果保证）暂未提供。