Home / All Skills / Design & Motion / gpt-taste
English (EN)简体中文 (ZH)日本語 (JA)
Design & Motion · leonxlnx/taste-skill

gpt-taste

Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.

L3 Networked · Declare domain & key scopeV1 Commit-PinnedNetwork AccessDual-pass Audit
Author leonxlnxGitHub leonxlnx/taste-skill ↗Stars 87309License MIT（仓库根 LICENSE，Copyright (c) 2026 Leonxlnx；GitHub API spdx_id=MIT）Commit ccbc15639c
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Establishes the premise that "the model's default output is bad" before disabling patterns one by one: explicitly calls out five statistical biases of LLMs (6-line wrapping headings, bento grid voids, cheap meta-labels, invisible button text, and perpetual split-screen columns), setting "breaking defaults" as the sole objective.

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.
What is happening here: the universal working mechanism of anti-slop skills—first attributing specific failure modes to the model's statistical inertia, thereby legitimizing the subsequent "corrective" rules and heightening the model's attention to these dimensions.

The core mechanism is "pseudo-randomization": before writing code, it must simulate a Python execution block in <design_plan>, using the prompt character count modulo as a deterministic seed to draw fixed numbers of options from four pools (Hero architecture, font stack, components, and GSAP paradigms), strictly adhering to the drawn results.

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.
Crucial clarification (double-checked): the text only mandates "simulating execution" and "writing 3 lines of mock Python output", not running actual Python—there are no .py files or execution commands in the skill directory. Essentially, it provides an irrevocable random anchor to counteract the model's inertia of always picking the first layout option; randomness comes from deterministic prompt hashing rather than true randomness, ensuring identical briefs yield reproducible layouts.

Structurally locks the entire page into a four-stage AIDA flow with massive section spacing, reducing the model's room for uncontrolled improvisation.

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.
Corresponds to §2: Attention (Hero) / Interest (Bento) / Desire (GSAP) / Action (Footer), strictly enforced to start with a Navigation Bar.

Enforces typography via a quantifiable "2–3 line iron rule" rather than subjective aesthetic adjectives: exceeding H1 line limits is deemed a catastrophic failure, with remedies provided simultaneously (reducing clamp font size + widening the container).

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.
Translating "good typography" into self-verifiable geometric constraints is the core technique setting this skill series apart from vague "reference Awwwards" style prompts.

Tackles grid voids using a dual-layer safeguard of CSS mechanics + mathematical self-verification: enforces grid-auto-flow: dense and requires proving no empty cells through interlocking col-span/row-span configurations.

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 allows subsequent smaller items to automatically backfill empty slots (a native CSS mechanism), while "mathematical verification" forces the model to explicitly declare span combinations in the plan, eliminating dead corners.

Instead of vaguely asking to "add animations", directly specifies libraries, APIs, and exact parameter tiers (pin/scrub/stack, scale 0.8→1.0, offscreen opacity 0.2, hover scale-105), ensuring the output translates into production-ready GSAP code.

skills/gpt-tasteskill/SKILL.md
Static interfaces are strictly forbidden. You must write real GSAP (`@gsap/react`, `ScrollTrigger`).
§5 breaks down GSAP paradigms into 5 concrete implementations (Hover Physics / Scroll Pinning / Image Scale & Fade / Scrubbing Text Reveals / Card Stacking), each structured like a directly copyable API snippet.

Establishes a pre-delivery quality gate: must first output a 5-part self-inspection inside <design_plan> (RNG reproduction, AIDA checklist, H1 width math, bento density proof, label cleanup & button contrast) before permission to write code is granted.

skills/gpt-tasteskill/SKILL.md
Before writing ANY React/UI code, you MUST output a `<design_plan>` block containing:
Front-loading QA as a mandatory intermediate artifact creates an unskippable self-check turn for the model while allowing users to course-correct before code generation.

2Core Capabilities

01Anti-repetition layout randomization (simulated Python RNG + deterministic seed)
02AIDA page structure with massive section spacing (py-32 / py-48)
03Hero 2–3 line iron rule + ultra-wide containers + button contrast check
04Void-free Bento grid (grid-flow-dense + interlocking span mathematics)
05GSAP motion paradigm library (pin / scrub / card stacking / scale-fade)
06Component arsenal: inline text micro-images, horizontal accordions, infinite marquee, testimonial carousel
07Content & copy discipline: permanent ban on meta-labels (e.g., SECTION 01 / ABOUT US)
08Assets & foolproofing: picsum seeded images + CSS filters to reduce "stock photo feel", outer overflow-x-hidden to prevent horizontal scrollbars

3External Dependencies

KindDependency / Endpoint
networkpicsum.photos（占位图 CDN）
packageGSAP（@gsap/react + ScrollTrigger）
packageTailwind CSS（grid-flow-dense 等工具类）
package@phosphor-icons/react（marquee 图标来源）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Declare allowed domains and key scope
For Administrators
Least privilege keys, retain request logs
Evidence & Triggers (File Paths & Excerpts)
  • 网络端点: Declared external network access: picsum.photos — the skill itself does not initiate requests, but requires generated page code to reference https://picsum.photos
Audit Notes: Pure prompt-based instruction skill: contains only a single markdown file in the directory, with no script execution, outgoing network requests, credential reading, or local file writes. The only external touchpoint is specifying that generated pages reference picsum.photos placeholder images and three frontend packages (GSAP, Tailwind, Phosphor)—standard build behavior for host coding agents. Note: (1) "Python-driven randomization" is merely a prompt-level simulation without actual Python execution (no hidden execution surface); (2) High rule volume (74 lines, 8 sections) will consume token budget in long contexts.

5Second-Pass Verification

  • [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'（实为模拟），已记录。

6Verdict & Scenarios

  • Translates aesthetic aspirations into verifiable hard constraints: 2–3 line caps, py-32/48 spacing, grid-flow-dense, button contrast—no reliance on vague "reference Awwwards" metaphysics.
  • Specifically targets LLM repetition inertia: forces simulated random draws of Hero/typography/components/motion combinations, banning identical UIs from appearing twice.
  • Immediately deployable motion: provides concrete @gsap/react + ScrollTrigger paradigms (pin / scrub / stack / scale-fade) instead of generic "add animations" requests.
  • Pre-delivery quality gate: turns QA into an unskippable intermediate artifact, enabling users to course-correct before code is written.
  • Zero installation overhead: single-file skill with no scripts or dependency declarations, ready to paste entirely into a conversation or drop into any repository.
    • Best for: Users building visual-first frontends like marketing landing pages, official websites, and portfolios using coding agents like Claude Code, Codex, or Cursor; especially ideal for GPT/Codex workflows needing GSAP scroll storytelling (pin/scrub/stack) instead of Framer Motion, or used as an "anti-repetition vaccine" injected into existing frontend repositories.
    Not for: Data-heavy dashboards, backend admin interfaces, multi-step product UIs (explicitly stated out of scope in v2, this variant shares the marketing page focus); projects requiring strictly rigid, symmetrical layouts or pre-locked brand design systems (hard rules will conflict); offline or strictly air-gapped supply chain environments (relies on picsum and three frontend packages); short-context models (rule volume will squeeze out surrounding context).
    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
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit ccbc15639c.