102.7K+Download
Skip to the usage guide
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
Download OpenDesignView usage guide
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

An opinionated React/UI design recipe for cinematic landing pages with wide headings, dense bento layouts and GSAP scroll effects.

The source asks the agent to simulate seeded layout selection, then follow an AIDA structure and produce a design_plan before code. It prescribes pinning, stacking and scrubbing motion, inline images, and a ban on section-number labels. These are stylistic instructions, not proof of award-winning quality or a measured guarantee of original layouts.

What it produces

  • React/UI code using the requested AIDA structure, bento composition and GSAP motion, subject to browser and accessibility review.
See the example prompt ↗

How It Works

  1. 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.

  2. 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).

  3. 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.

  4. 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.

  5. 05
    Output Mandatory Design_plan Verification

    The source requests a design_plan showing the simulated choices and intended AIDA, heading and grid checks before code. Treat these as planning claims to verify in the rendered page, not as executed test results.

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

  • Cinematic landing pages where pronounced GSAP scroll effects fit the brief
  • Dense editorial layouts where interlocking bento cards fit the content
  • 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

  • Page Brief, Content and ProjectProvide the product, audience, desired action and real copy or assets, plus the React project to modify. The source’s motion recipes expect GSAP, @gsap/react and ScrollTrigger.

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.

  1. Hero Headings Limited to 2-3 Lines Maximum

    The source targets 2–3 heading lines with wider containers and fluid type. Check the actual text at each viewport; a max-width class alone does not guarantee that line count.

  2. 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.

  3. Typography Stack Excludes Inter Font

    Select from Satoshi, Cabinet Grotesk, Outfit, or Geist. The Inter font is explicitly forbidden and must never be used.

  4. No Emojis in Code or Output

    Maintain strictly professional formatting by never using emojis in code, comments, or any output.

  5. Prevent Horizontal Scroll with Overflow Wrapper

    The source wraps the page in overflow-x-hidden to contain off-screen animation. Still inspect for clipped content and actual overflow at narrow widths.

  6. 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.

Editorial starter prompt based on the source instructions; not a recorded or tested run.

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 OpenDesignRead 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

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

The file uses a simulated, prompt-seeded selection step to choose from its layout, type and animation options. It is a prompting device—not evidence that Python was executed, that the choices are truly random, or that repeated runs will produce unique designs.

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 OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill gpt-taste