Skip to content
Conduit

skill

gpt-taste-skill

GPT Taste Skill｜GSAP 动效、AIDA 结构与高质量前端设计约束

Tao716/gpt-taste-skillcommunitylistedunreviewed
Use skill

Set up

Skills are installed by placing their folder where your agent loads skills.

Download ZIP from GitHub Open the repository

The download comes from github.com/Tao716/gpt-taste-skill itself, not from our server, so what you get is exactly what its author published.

Install instructions come from the README

Skills do not use an MCP config. Follow the steps in the README below.

README

synced Oct 25, 2026

GPT Taste Skill

适用于 Codex 与其他 Agent 的高质量前端设计 Skill。它不生成页面内容，而是给生成页面的模型加上一套硬约束：AIDA 叙事结构、编辑式宽幅排版、无空洞的 Bento 网格、真实 GSAP 滚动动效，以及一份写代码前必须先输出的自检清单。

这是镜像仓库，不是原创 Skill。 原项目：Leonxlnx/taste-skill（MIT，作者 Leonxlnx） 本仓库只收录其中的 skills/gpt-tasteskill/SKILL.md，另加中文说明、Codex 安装步骤，以及一个用于验证约束的参考页面。 需要完整 Skill 集合、示例、研究资料与更新记录，请直接访问原项目。

一、它要对抗什么

SKILL.md 的出发点不是"让页面更好看"，而是LLM 生成前端时有一批可预测的统计性偏见。这些缺陷每次都会以相同形式出现：

默认缺陷具体表现约束手段
窄容器文字墙标题被塞进窄容器，折成 5 到 6 行H1 强制 max-w-5xl 以上，行数硬性限制 2 到 3 行
Bento 网格空洞栅格里留下空白死格，缺角强制 grid-flow-dense，并要求逐格验算互锁
廉价元标签"SECTION 01"、"QUESTION 05"、"ABOUT US"永久禁用，必须整条删除
隐形按钮文字深底深字、浅底浅字按钮对比度写入验收项，不可见即失败
布局复读反复输出同一套左右分栏用确定性随机在写码前锁定布局、字体、组件与动效
静态界面只有 CSS 过渡，没有真实动效必须写 GSAP ScrollTrigger，指定五类动效范式

另有两条全局要求：所有代码与输出禁止使用 emoji；主要版块之间必须留出 py-32 md:py-48 级别的大间距，让每一屏像独立的章节。

二、参考页面

examples/taste-demo.html 是按 SKILL.md 的全部硬约束生成的单文件参考页面，用来验证这些约束落到真实页面上是什么效果。它不是上游官方资产。

页面顶部注释里保留了 Skill 要求的 design_plan 选型结果：

hero        = Cinematic Center
typography  = Satoshi              (Inter 已禁用)
components  = Inline Typography Images / Horizontal Accordion / Infinite Marquee
gsap        = Pinned Split / Scrubbing Text Reveal / Card Stacking / Image Scale-Fade
bento       = 4col x 3row = 12 cells; 4+2+1+1+4 = 12  -> 零空洞, grid-flow-dense

2.1 Gapless Bento Grid

四列三行共 12 格，五张卡片按 4+2+1+1+4 精确铺满，没有任何空白死格。卡片数量控制在 5 张，混用大图、密排字体与纯色块。

2.2 内联排版图

把胶囊形小图直接嵌进大号标题内部，而不是让图文各占一块。这是 Skill 组件库里的第一项。

2.3 GSAP 滚动固定分栏

左侧标题 pin: true 固定，右侧图集继续向上滚动。图片进场时从 scale: 0.8 放大到 1.0，离场时淡到 opacity: 0.2。

2.4 逐词擦除

段落中每个词的不透明度从 0.1 随滚动进度依次擦到 1.0。下图是擦除进行到约 58% 时的真实中间帧。

2.5 卡片堆叠

卡片自下方进入并依次叠压，滚动结束后每张仍露出可读的标题带。

2.6 横向手风琴

竖切片默认收起并竖排标签，悬停时横向展开露出图像与说明，展开片自动占满剩余宽度。

2.7 Action 收口

AIDA 的最后一环：高对比度大号 CTA 加干净页脚，不堆导航链接。

三、约束清单

SKILL.md 共 8 节，可归为四组。

3.1 结构与节奏

  • 页面必须以有设计感的导航开场（浮动玻璃胶囊或极简分栏导航）。
  • 正文严格按 AIDA 组织：Attention 影院级 Hero、Interest 高密度 Bento 或交互排版、Desire GSAP 滚动叙事、Action 大号 CTA 与页脚。
  • 主要版块之间使用 py-32 md:py-48 级别的大间距。

3.2 Hero 的两行铁律

  • H1 容器必须够宽：max-w-5xl、max-w-6xl 或 w-full。
  • H1 行数绝不超过 2 到 3 行，4 行以上视为严重失败；宁可缩小字号（clamp(3rem, 5vw, 5.5rem)）也要保证横向流动。
  • 三种 Hero 布局：影院式居中（首选）、艺术化非对称、编辑式左右分栏。
  • Hero 内禁止：浮动徽章图标、标题下的胶囊标签、直接堆放数据指标。

3.3 动效与交互物理

范式要求
Hover 物理所有可点击卡片与图片必须响应，group-hover:scale-105 配 overflow-hidden
滚动固定标题 pin: true，同屏另一列继续滚动
图片缩放淡出进场 scale: 0.8 -> 1.0，离场 opacity -> 0.2
逐词擦除词级不透明度 0.1 -> 1.0 随滚动 scrub
卡片堆叠卡片自下方动态叠压

3.4 素材与禁令

  • 图片使用 picsum.photos/seed/{keyword}/1920/1080，并施加 grayscale、contrast-125、mix-blend-luminosity 等滤镜，避免图库照片的廉价感。
  • 背景需要氛围层：深径向模糊、颗粒网格渐变或渐变暗罩，禁止扁平死色。
  • 字体只在 Satoshi、Cabinet Grotesk、Outfit、Geist 中选，明确禁用 Inter。
  • 整页包在 <main className="overflow-x-hidden w-full max-w-full"> 中，防止动效造成横向滚动条。

四、写码前的强制预检

这是整份 Skill 最有工程味的一节：模型在输出任何 UI 代码之前，必须先给出 <design_plan>，逐项自证。

  1. 确定性随机：用提示词字符数取模，模拟 random.choice() 选定 Hero 布局、组件、动效与字体，并且必须照选出的结果执行，禁止两次输出同一套 UI。
  2. AIDA 检查：确认导航、Hero、Bento、GSAP、页脚五段齐全。
  3. Hero 数学验证：明确写出 H1 用的 max-w 类，证明标题会在 2 到 3 行内横向流动，并确认无徽章、无标签垃圾。
  4. Bento 密度验证：用行列数学证明零空洞，且已应用 grid-flow-dense。
  5. 标签与按钮扫描：确认没有廉价元标签，按钮文字对比度正确。

把验收标准前置成模型的自检清单，而不是等生成完再人工挑错——这是它和普通"设计提示词"的主要差别。

五、安装与使用

安装到 Codex：

git clone https://github.com/Tao716/gpt-taste-skill.git ~/.codex/skills/gpt-taste

重新打开 Codex 后生效。使用时明确点名该 Skill：

使用 gpt-taste Skill，重新设计这个竞品分析页面，并保留现有功能。

查看参考页面（含真实 GSAP 滚动动效）：

git clone https://github.com/Tao716/gpt-taste-skill.git
cd gpt-taste-skill
python3 -m http.server 8000
# 打开 http://127.0.0.1:8000/examples/taste-demo.html

参考页面通过 CDN 引用 Tailwind、GSAP、Fontshare 字体与 picsum 图片，需要联网。 附加 ?still=<px> 参数会进入静态定格模式：动画落到终态并按像素偏移定位，仅用于生成本文档的截图。

六、来源与署名

项目内容
原项目Leonxlnx/taste-skill
原作者Leonxlnx
原文件skills/gpt-tasteskill/SKILL.md
许可证MIT License, Copyright (c) 2026 Leonxlnx

SKILL.md 与 LICENSE 保持原样收录，未作改写。本仓库新增的部分只有：本 README、examples/taste-demo.html 参考页面与 docs/ 下的截图。

七、边界说明

  • 本仓库是单文件镜像，只包含一个 SKILL.md。上游项目还包含完整 Skill 集合、示例、研究资料、安装脚本与更新日志，内容远多于此。
  • 参考页面是为了验证约束效果而写的，不代表上游的官方示例，其文案与品牌均为虚构。
  • 参考页面用的是 Tailwind Play CDN，仅适合本地查看，不适合生产环境。
  • Skill 面向 React 与 Tailwind 栈（原文示例使用 @gsap/react、@phosphor-icons/react）；参考页面为方便单文件预览改用了原生 HTML 加 GSAP UMD，约束逻辑一致。

README 中的截图由本仓库 examples/taste-demo.html 真实渲染生成。

↑↓ navigate openesc close