gpt-tasteby Leonxlnx

GPT Taste Skill.

A Claude Code and Codex skill for UI design: editorial layouts, layout variety, and GSAP motion in one frontend skill.

Web & UI
UI code

Leonxlnx/taste-skill · skills/gpt-tasteskill/SKILL.mdSKILL.md

--- name: gpt-taste description: 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. --- ## 1. PYTHON-DRIVEN TRUE RANDOMIZATION (BREAKING THE LOOP) ## 2. AIDA STRUCTURE & SPACING ## 3. HERO ARCHITECTURE & THE 2-LINE IRON RULE ## 4. THE GAPLESS BENTO GRID ## 5. ADVANCED GSAP MOTION & HOVER PHYSICS ## 6. COMPONENT ARSENAL & CREATIVITY

Front matter and section headings read from the upstream file on 2026-09-14 · 7,857 characters in full

01 What it does

What the gpt-taste Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

This skill enforces award-winning frontend design engineering that breaks standard LLM layout biases.

It uses Python-driven randomization to prevent repetitive layouts, mandates AIDA page structure with massive section spacing, limits hero headings to 2-3 lines using ultra-wide containers, builds mathematically perfect gapless bento grids with grid-flow-dense, implements advanced GSAP ScrollTriggers for pinning, stacking, and scrubbing animations, embeds inline micro-images directly in typography, and bans meta-labels like 'SECTION 01' and narrow containers that cause 6-line text wraps. Every page requires a design_plan verification block before outputting UI code.

What it produces

React/UI code with GSAP ScrollTrigger animations and mathematically perfect grids

See the example prompt ↗

How It Works

01
Simulate Python Randomization from Prompt Seed
Before writing any UI code, simulate a Python script using the character count of the user prompt to deterministically select one hero architecture, one typography stack, three component architectures, and two GSAP paradigms.
02
Structure Page with AIDA Framework
Build the page following Attention (cinematic hero), Interest (high-density bento grid), Desire (GSAP scroll effects), and Action (massive CTA and footer).
03
Build Gapless Bento Grids with Mathematical Precision
Use Tailwind's grid-flow-dense on every bento grid and mathematically verify that col-span and row-span values interlock perfectly with zero empty voids or missing corners.
04
Implement Advanced GSAP ScrollTrigger Animations
Write real GSAP with ScrollTrigger for scroll pinning with split layouts, image scale and fade effects, scrubbing text reveals with sequential opacity changes, and dynamic card stacking.
05
Output Mandatory Design_plan Verification
Before writing any React or UI code, output a design_plan block containing Python RNG execution, AIDA check, hero math verification for 2-3 line guarantee, bento density proof, and label sweep confirmation.

02 Find your fit

When to Use the gpt-taste Skill

Use the gpt-taste skill in Claude Code or Codex when the job is UI design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Award-winning frontend pages requiring cinematic, motion-rich GSAP scroll effects
High-density editorial layouts with mathematically perfect bento grids
Projects needing layout variety to break repetitive LLM output patterns
Interfaces requiring advanced GSAP ScrollTrigger pinning, stacking, and scrubbing

Know the Boundaries

Static interfaces without motion are strictly forbidden

What to Provide

NeedsGSAP — named in the SKILL.md as required.

03 Inside the skill

Rules the gpt-taste Skill Gives Claude Code and Codex

6 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Hero Headings Limited to 2-3 Lines Maximum
Use ultra-wide containers like max-w-5xl or max-w-6xl for the H1 and make font size smaller using clamp(3rem, 5vw, 5.5rem) to ensure the heading never exceeds 2 to 3 lines.
Meta-labels Permanently Banned
Labels like 'SECTION 01', 'SECTION 04', 'QUESTION 05', and 'ABOUT US' are banned forever. Remove them entirely as they look cheap and unprofessional.
Typography Stack Excludes Inter Font
Select from Satoshi, Cabinet Grotesk, Outfit, or Geist. The Inter font is explicitly forbidden and must never be used.
No Emojis in Code or Output
Maintain strictly professional formatting by never using emojis in code, comments, or any output.
Prevent Horizontal Scroll with Overflow Wrapper
Wrap the entire page in a main element with overflow-x-hidden w-full max-w-full classes to absolutely prevent horizontal scrollbars caused by off-screen animations.
Perfect Button Text Contrast Required
Buttons must be perfectly legible with dark backgrounds using white text and light backgrounds using dark text. Invisible text is a failure.

04 Put it to work

Install gpt-taste in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add gpt-taste to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill gpt-taste

Generic skills CLI form for skills/gpt-tasteskill/SKILL.md; the repository may document its own path.

Give the Skill a First UI Design Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Build a landing page for [product name] showcasing [three key features]. Use a cinematic hero with inline typography images, a gapless bento grid for the feature cards, GSAP scroll pinning to reveal testimonials as the user scrolls, and horizontal accordion components for the FAQ section. Include a massive CTA section at the bottom.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Verify hero heading flows in 2-3 lines using ultra-wide containers like max-w-5xl or max-w-6xl
Confirm bento grid uses grid-flow-dense and mathematically interlocks with zero empty spaces
Check that all meta-labels like SECTION 01 or QUESTION 05 are removed
Verify button text contrast is perfect with white text on dark backgrounds and dark text on light backgrounds
Confirm page structure follows AIDA framework with Navigation, Attention hero, Interest bento, Desire GSAP, and Action footer
Verify no stamp icons or spam tags exist in the hero section

In OpenDesign import gpt-taste from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Branch main
Skill file: skills/gpt-tasteskill/SKILL.md Content checksum recorded at verification; commit ccbc156
License: MIT From LICENSE.
Repository stars: 86,946 GitHub snapshot taken 2026-09-14 for the whole Leonxlnx/taste-skill repository, which contains 11 skills in this catalog. Not a rating or usage count for gpt-taste.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

CORE DIRECTIVE: AWWWARDS-LEVEL DESIGN ENGINEERINGPositions the skill as elite design engineering that breaks statistical LLM biases in layout generation
PYTHON-DRIVEN TRUE RANDOMIZATION (BREAKING THE LOOP)Mandates simulated Python script using prompt character count to deterministically select layouts and prevent repetition
AIDA STRUCTURE & SPACINGRequires Attention, Interest, Desire, Action framework with massive py-32 md:py-48 vertical padding between sections
HERO ARCHITECTURE & THE 2-LINE IRON RULEEnforces ultra-wide containers and 2-3 line maximum for headings, bans narrow containers causing 6-line wraps
THE GAPLESS BENTO GRIDRequires grid-flow-dense and mathematical verification that col-span and row-span values leave zero empty voids
ADVANCED GSAP MOTION & HOVER PHYSICSDefines scroll pinning, image scale-fade, scrubbing text reveals, card stacking, and hover transform effects
COMPONENT ARSENAL & CREATIVITYLists inline typography images, horizontal accordions, infinite marquees, and testimonial carousels for randomized selection
CONTENT, ASSETS & STRICT BANSBans meta-labels forever, specifies picsum image seeding with CSS filters, and requires overflow-x-hidden wrapper
MANDATORY PRE-FLIGHT <design_plan>Requires verification block before any UI code with Python RNG, AIDA check, hero math, bento density proof

The Skill's Own Description

“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.”

Front-matter description from SKILL.md. The full file is about 7,857 characters. Read the full file on GitHub.

06 Before you install

Questions About the gpt-taste Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Why does this skill use Python randomization before generating UI code?

LLMs are inherently lazy and always pick the first layout option due to statistical biases. The skill simulates a Python script using the character count of your prompt as a deterministic seed to force selection of varied hero architectures, typography stacks, components, and GSAP animations, preventing repetitive output.

GPT Taste

Run gpt-taste on a Real UI Design Task.

Download OpenDesign, import gpt-taste from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills