1实现原理 · 为什么它能做到

先立『模型的默认输出是坏的』这一前提，再逐条禁用：开篇点名 LLM 的五类统计偏见（6 行换行大标题、bento 空洞、廉价 meta-label、按钮文字不可见、永远左右分栏），把『打破默认』定为唯一目标。

skills/gpt-tasteskill/SKILL.md

Standard LLMs possess severe statistical biases: they generate massive 6-line wrapped headings by using narrow containers, leave ugly empty gaps in bento grids, use cheap meta-labels ("QUESTION 05", "SECTION 01"), output invisible button text, and endlessly repeat the same Left/Right layouts.

这里在做什么：anti-slop 类 skill 的通用生效机制——先把具体失败模式归因到模型的统计惰性上，后面的规则才有『纠正』的合法性，也提高模型对这些维度的注意力。

核心机制是『伪随机化』：写代码前必须在 <design_plan> 里模拟一段 Python 执行，用 prompt 字符数取模当确定性种子，从 Hero 架构/字体栈/组件/GSAP 范式四个清单里各抽固定数量，并强制服从抽取结果。

skills/gpt-tasteskill/SKILL.md

LLMs are inherently lazy and always pick the first layout option. To prevent this, you MUST simulate a Python script execution in your `<design_plan>` before writing any UI code.

关键澄清（第二遍已复核）：全文只要求『模拟执行』并『写 3 行 mock Python 输出』，不是真的跑 Python——skill 目录内无任何 .py 文件、无执行指令。本质是给模型一个不可撤回的随机锚点，对抗它总选第一个布局选项的惰性；随机性来自提示词的确定性哈希而非真随机，所以同 brief 可复现同布局。

结构层面把整页钉死成 AIDA 四段 + 巨型分区间距，减少模型自由发挥空间。

skills/gpt-tasteskill/SKILL.md

**SPACING RULE:** Add huge vertical padding between all major sections (e.g., `py-32 md:py-48`). Sections must feel like distinct, cinematic chapters. Do not cramp elements together.

对应 §2：Attention(Hero)/Interest(Bento)/Desire(GSAP)/Action(Footer)，并强制以 Navigation Bar 开头。

排版用可量化的『2–3 行铁律』而非审美形容词：H1 行数超限被判定为灾难性失败，解法同时给出（减小 clamp 字号 + 加宽容器）。

skills/gpt-tasteskill/SKILL.md

**The Line Limit:** The H1 MUST NEVER exceed 2 to 3 lines. 4, 5, or 6 lines is a catastrophic failure. Make the font size smaller (`clamp(3rem, 5vw, 5.5rem)`) and the container wider to ensure this.

把『排版好看』翻译成可自查的几何约束，是这一系列 skill 区别于『参考 Awwwards』式玄学提示的核心手法。

网格空洞问题靠 CSS 机制 + 数学自证双重封堵：强制 grid-auto-flow: dense，并要求用 col-span/row-span 互锁证明无空格。

skills/gpt-tasteskill/SKILL.md

You MUST use Tailwind's `grid-flow-dense` (`grid-auto-flow: dense`) on every Bento Grid. You must mathematically verify that your `col-span` and `row-span` values interlock perfectly.

grid-flow-dense 让后续小格自动回填空位，是 CSS 侧真机制；『数学验证』则是让模型在 plan 里显式声明 span 组合，减少空角。

动效不写『加动画』，直接指定库、API 与参数档位（pin/scrub/stack、scale 0.8→1.0、离屏 opacity 0.2、hover scale-105），使产出可落地为真实 GSAP 代码。

skills/gpt-tasteskill/SKILL.md

Static interfaces are strictly forbidden. You must write real GSAP (`@gsap/react`, `ScrollTrigger`).

§5 把 GSAP 范式拆成 5 条具体实现（Hover Physics / Scroll Pinning / Image Scale & Fade / Scrubbing Text Reveals / Card Stacking），每条形如可直接抄写的 API 片段。

交付前设门禁：必须先输出 <design_plan> 五段自检（RNG 复现、AIDA 清单、H1 宽度数学、bento 密度证明、label 清扫与按钮对比度），通过后才允许写代码。

skills/gpt-tasteskill/SKILL.md

Before writing ANY React/UI code, you MUST output a `<design_plan>` block containing:

把 QA 前置成强制中间产物，等于给模型一个不可跳过的自检回合；同时也让用户能在代码生成前纠偏。

2核心能力

01反重复布局随机化（模拟 Python RNG + 确定性种子）

02AIDA 页面结构与巨量分区间距（py-32 / py-48）

03Hero 2–3 行铁律 + 超宽容器 + 按钮对比度检查

04无空洞 Bento 网格（grid-flow-dense + span 互锁数学）

05GSAP 动效范式库（pin / scrub / card stacking / scale-fade）

06组件军火库：行内字中图、横向手风琴、无限 marquee、推荐语轮播

07内容与文案纪律：永久禁用 meta-label（SECTION 01 / ABOUT US 一类）

08资产与防呆：picsum 种子图 + CSS 滤镜降『图库感』、外层 overflow-x-hidden 防横向滚动条

3外部依赖

Kind	Dependency / Endpoint
network	picsum.photos（占位图 CDN）
package	GSAP（@gsap/react + ScrollTrigger）
package	Tailwind CSS（grid-flow-dense 等工具类）
package	@phosphor-icons/react（marquee 图标来源）

4管控建议与判定依据

建议配套管控措施

面向 Agent

声明可访问域名与密钥范围

面向管理者

密钥最小权限，保留请求日志

判定依据（文件路径与关键语句摘要）

网络端点: 声明外部网络访问: picsum.photos —— 并非 skill 自身发请求，而是 skill 规定模型生成的页面代码以 https://picsum.photos

审计说明： 。纯指令型 skill：目录内仅一个 markdown 文件，无脚本执行、无网络外发、无凭证读取、无本地文件写入。唯一对外接触是它规定产物页面引用 picsum.photos 占位图与 GSAP/Tailwind/Phosphor 三个前端包——属宿主 coding agent 的常规构建行为。需注意：①『Python-driven randomization』只是提示词层的模拟，不会真的执行 Python（不存在隐藏执行面）；② 规则量大（74 行、8 节），长上下文里会占用预算。

5第二遍独立确认

[ok] 『Python-driven』是否意味着真实脚本/执行面 — 反查全文只出现 'simulate a Python script execution' 与 'Write a 3-line mock Python output' 两处；目录内无 .py，无 exec/subprocess/pip 指令。结论：纯提示词层面的伪执行，无代码执行面。
[ok] 外部依赖清单完整性 — token 扫描命中项全部核实：picsum.photos（§7 图片源）、@gsap/react+ScrollTrigger（§5）、Tailwind grid-flow-dense（§4）、@phosphor-icons/react（§6）；此外 §1/§3 提到字体名 Satoshi / Cabinet Grotesk / Outfit / Geist 与禁用 Inter——为字体选型建议，非包依赖，故未计入 external_deps。
[ok] 是否存在隐藏网络调用或凭证读取 — api_key / token / secret / .env / keychain / credential 等 token 零命中；无任何外发端点声明。
[ok] 元数据（license / stars / last_push） — gh api repos/leonxlnx/taste-skill：spdx MIT、stargazers 87309、pushed_at 2026-08-24T15:23:56Z（= 本地 HEAD 提交时间 2026-08-24T23:23:56+08:00）。此处 stars 为 2026-09-15 实测值，与库内批1快照（84793）不同属正常增长。
[ok] 路径与 commit 归属 — git ls-files 确认 skills/gpt-tasteskill/SKILL.md 存在；HEAD == origin/main == ccbc15639c97057cbfcf32ecebc38ef716e4bb37，工作树干净。
[ok] frontmatter 声明与实际内容是否相符（夸大检查） — description 列的 AIDA、2–3 行排版、防止 6 行换行、gapless bento、GSAP ScrollTrigger（pinning/stacking/scrubbing）、inline micro-images、超大分区间距，逐项在 §2/§3/§4/§5/§6 找到对应正文；唯一措辞夸大点是 'Python-driven true randomization'（实为模拟），已记录。

6结论

把审美诉求翻译成可核验的硬约束：2–3 行上限、py-32/48 间距、grid-flow-dense、按钮对比度——不靠『参考 Awwwards』式玄学。

针对性打击 LLM 的重复惰性：强制模拟随机抽取 Hero/字体/组件/动效组合，禁止同一 UI 出现两次。

动效可直接落地：给出 @gsap/react + ScrollTrigger 的具体范式（pin / scrub / stack / scale-fade），而非泛泛要求『加动画』。

交付前强制自检门禁，把 QA 变成不可跳过的中间产物，用户可在写代码前纠偏。

零安装成本：单文件 skill，无脚本无依赖包自述，可整份贴进对话或放进任意仓库。

适合： 用 Claude Code / Codex / Cursor 这类 coding agent 做营销落地页、官网、作品集等『视觉优先』前端的人；尤其适合想要 GSAP 滚动叙事（pin/scrub/stack）而非 Framer Motion 的 GPT/Codex 工作流，也适合把它当『反重复疫苗』贴进已有前端仓库。

不适合： 数据密集型 Dashboard、后台管理界面、多步产品 UI（作者在 v2 里明示 out of scope，此变体同属营销页取向）；需要规整对称布局或品牌已定死版式的项目（硬规则会冲突）；离线/自审供应链环境（依赖 picsum 与三个前端包）；短上下文模型（指令量会挤掉其它上下文）。

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload gpt-taste.tar.gz

sha256: f0a8eb4dbb6682af…

Option B · Copy Guide for Agent

install.json

agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。

② Upstream GitHub

GitHub Repo ↗

Pinned to commit ccbc15639c.