gpt-tastevon Leonxlnx

GPT Taste Skill.

Ein Skill für Claude Code und Codex für UI-Design: redaktionelle Layouts, Layout-Vielfalt und GSAP-Motion in einem Frontend-Skill.

Web & UI
UI-Code

OpenDesign herunterladen Anleitung ansehen

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

Metadaten und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 7.857 Zeichen insgesamt

01 Was es tut

Was der gpt-taste-Skill in Claude Code und Codex bewirkt

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Dieser Skill erzwingt preisgekröntes Frontend-Design-Engineering, das die üblichen Layout-Bias von LLMs durchbricht.

Es nutzt Python-gesteuerte Randomisierung, um repetitive Layouts zu verhindern, schreibt eine AIDA-Seitenstruktur mit massiven Abschnittsabständen vor, begrenzt Hero-Überschriften mithilfe ultrabreiter Container auf 2–3 Zeilen, baut mit grid-flow-dense mathematisch perfekte, fugenlose Bento-Grids, implementiert fortgeschrittene GSAP-ScrollTrigger für Pinning-, Stacking- und Scrubbing-Animationen, bettet Inline-Mikrobilder direkt in die Typografie ein und verbietet Meta-Labels wie 'SECTION 01' sowie schmale Container, die 6-zeilige Textumbrüche verursachen. Jede Seite erfordert einen design_plan-Verifizierungsblock, bevor UI-Code ausgegeben wird.

Was er erzeugt

React-/UI-Code mit GSAP-ScrollTrigger-Animationen und mathematisch perfekten Grids

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Python-Randomisierung aus dem Prompt-Seed simulieren
Bevor Sie UI-Code schreiben, simulieren Sie ein Python-Skript, das anhand der Zeichenzahl des Nutzer-Prompts deterministisch eine Hero-Architektur, einen Typografie-Stack, drei Komponenten-Architekturen und zwei GSAP-Paradigmen auswählt.
02
Seite mit dem AIDA-Framework strukturieren
Bauen Sie die Seite entlang von Attention (kinoreifer Hero), Interest (hochdichtes Bento-Grid), Desire (GSAP-Scroll-Effekte) und Action (massiver CTA und Footer).
03
Fugenlose Bento-Grids mit mathematischer Präzision bauen
Verwenden Sie Tailwinds grid-flow-dense in jedem Bento-Grid und verifizieren Sie mathematisch, dass col-span- und row-span-Werte perfekt ineinandergreifen – ohne leere Lücken oder fehlende Ecken.
04
Fortgeschrittene GSAP-ScrollTrigger-Animationen implementieren
Schreiben Sie echtes GSAP mit ScrollTrigger für Scroll-Pinning mit Split-Layouts, Bild-Skalierungs- und Fade-Effekten, scrub-basierte Text-Reveals mit sequenziellen Opazitätswechseln und dynamisches Card-Stacking.
05
Verpflichtende design_plan-Verifizierung ausgeben
Bevor Sie React- oder UI-Code schreiben, geben Sie einen design_plan-Block aus mit Python-RNG-Ausführung, AIDA-Check, Hero-Mathematik-Verifizierung zur Garantie von 2–3 Zeilen, Bento-Dichte-Nachweis und Bestätigung des Label-Sweeps.

02 Finden Sie Ihren Favoriten

Wann der gpt-taste-Skill verwendet werden sollte

Verwenden Sie das gpt-taste Skill in Claude Code oder Codex, wenn die Aufgabe UI-Design dieser Art ist. Eignung und Grenzen sind aus der Skill-Datei übernommen.

Gut geeignet

Preisgekrönte Frontend-Seiten mit kinoreifen, bewegungsreichen GSAP-Scroll-Effekten
Hochdichte redaktionelle Layouts mit mathematisch perfekten Bento-Grids
Projekte, die Layout-Vielfalt brauchen, um repetitive LLM-Ausgabemuster zu durchbrechen
Interfaces, die fortgeschrittenes GSAP-ScrollTrigger-Pinning, -Stacking und -Scrubbing erfordern

Grenzen kennen

Statische Interfaces ohne Bewegung sind strikt verboten

Was Sie bereitstellen sollten

BenötigtGSAP — in der SKILL.md als erforderlich angegeben.

03 Innerhalb des Skills

Regeln, die der gpt-taste Skill Claude Code und Codex vorgibt

6 konkrete Anweisungen, Vorgaben und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

Hero-Überschriften auf maximal 2–3 Zeilen begrenzt
Verwenden Sie ultrabreite Container wie max-w-5xl oder max-w-6xl für die H1 und verkleinern Sie die Schriftgröße mit clamp(3rem, 5vw, 5.5rem), damit die Überschrift niemals 2 bis 3 Zeilen überschreitet.
Meta-Labels dauerhaft verboten
Labels wie 'SECTION 01', 'SECTION 04', 'QUESTION 05' und 'ABOUT US' sind für immer verboten. Entfernen Sie sie vollständig, denn sie wirken billig und unprofessionell.
Typografie-Stack schließt die Schrift Inter aus
Wählen Sie aus Satoshi, Cabinet Grotesk, Outfit oder Geist. Die Schrift Inter ist ausdrücklich verboten und darf niemals verwendet werden.
Keine Emojis in Code oder Ausgabe
Wahren Sie strikt professionelle Formatierung, indem Sie niemals Emojis in Code, Kommentaren oder jeglicher Ausgabe verwenden.
Horizontales Scrollen mit Overflow-Wrapper verhindern
Umschließen Sie die gesamte Seite mit einem main-Element mit den Klassen overflow-x-hidden w-full max-w-full, um horizontale Scrollbalken durch außerhalb des Bildschirms liegende Animationen absolut zu verhindern.
Perfekter Textkontrast bei Buttons erforderlich
Buttons müssen perfekt lesbar sein: dunkle Hintergründe mit weißem Text, helle Hintergründe mit dunklem Text. Unsichtbarer Text ist ein Fehler.

04 In Betrieb nehmen

Installieren Sie gpt-taste in Claude Code oder Codex

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

Fügen Sie gpt-taste zu Claude Code, Codex oder Ihrem Agent hinzu

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

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

Generische skills-CLI-Form für skills/gpt-tasteskill/SKILL.md; das Repository dokumentiert möglicherweise seinen eigenen Pfad.

Dem Skill eine erste UI-Design-Aufgabe geben

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr 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.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Prüfen Sie, ob die Hero-Überschrift in 2–3 Zeilen fließt, mit ultra-breiten Containern wie max-w-5xl oder max-w-6xl
Bestätigen Sie, dass das Bento-Grid grid-flow-dense verwendet und mathematisch ohne leere Flächen ineinandergreift
Prüfen Sie, ob alle Meta-Labels wie SECTION 01 oder QUESTION 05 entfernt wurden
Verifizieren Sie, dass der Textkontrast der Buttons perfekt ist – weißer Text auf dunklen Hintergründen und dunkler Text auf hellen Hintergründen
Bestätigen Sie, dass die Seitenstruktur dem AIDA-Framework folgt: Navigation, Attention-Hero, Interest-Bento, Desire-GSAP und Action-Footer
Prüfen Sie, dass im Hero-Bereich keine Stempel-Icons oder Spam-Tags vorhanden sind

In OpenDesign importieren Sie gpt-taste über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Branch main
Skill-Datei: skills/gpt-tasteskill/SKILL.md Inhaltsprüfsumme bei Verifizierung erfasst; Commit ccbc156
License: MIT Aus LICENSE.
Repository-Sterne: 86.946 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository Leonxlnx/taste-skill, das 11 Skills aus diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für gpt-taste.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

KERNDIREKTIVE: AWWWARDS-NIVEAU-DESIGN-ENGINEERINGPositioniert den Skill als elitäres Design-Engineering, das statistische LLM-Verzerrungen bei der Layout-Generierung durchbricht
PYTHON-GESTEUERTE ECHTE ZUFALLSVERTEILUNG (DURCHBRECHEN DER SCHLEIFE)Schreibt ein simuliertes Python-Skript vor, das anhand der Zeichenzahl des Prompts Layouts deterministisch auswählt und Wiederholungen verhindert
AIDA-STRUKTUR & ABSTÄNDEErfordert das Framework Attention, Interest, Desire, Action mit massiven vertikalen Abständen (py-32 md:py-48) zwischen den Abschnitten
HERO-ARCHITEKTUR & DIE 2-ZEILEN-EISENREGELErzwingt ultra-breite Container und maximal 2–3 Zeilen für Überschriften, verbietet schmale Container, die 6-Zeilen-Umbrüche verursachen
DAS LÜCKENLOSE BENTO-GRIDErfordert grid-flow-dense und den mathematischen Nachweis, dass col-span- und row-span-Werte keine leeren Zwischenräume hinterlassen
FORTGESCHRITTENE GSAP-BEWEGUNG & HOVER-PHYSIKDefiniert Scroll-Pinning, Bild-Skalier-Fade, scrubbende Text-Reveals, Card-Stacking und Hover-Transform-Effekte
KOMPONENTEN-ARSENAL & KREATIVITÄTListet inline-typografische Bilder, horizontale Akkordeons, endlose Marquees und Testimonial-Karussells zur randomisierten Auswahl auf
INHALTE, ASSETS & STRIKTE VERBOTEVerbietet Meta-Labels dauerhaft, legt picsum-Bildseeding mit CSS-Filtern fest und erfordert einen overflow-x-hidden-Wrapper
OBLIGATORISCHER PRE-FLIGHT-<design_plan>Erfordert einen Verifizierungsblock vor jeglichem UI-Code mit Python-RNG, AIDA-Check, Hero-Mathematik und Nachweis der Bento-Dichte

Die eigene Beschreibung des Skills

Elite UX/UI- und Advanced-GSAP-Motion-Engineer. Erzwingt Python-gesteuerte echte Randomisierung für Layout-Varianz, strikte AIDA-Seitenstruktur, breite Editorial-Typografie (verbietet 6-Zeilen-Umbrüche), lückenlose Bento-Grids, strikte GSAP ScrollTriggers (Pinning, Stacking, Scrubbing), Inline-Mikro-Bilder und massive Abstände zwischen Sektionen.

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 7.857 Zeichen. Vollständige Datei auf GitHub lesen.

06 Vor der Installation

Fragen zum gpt-taste-Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Warum verwendet dieser Skill eine Python-Randomisierung, bevor UI-Code generiert wird?

LLMs sind von Natur aus träge und wählen aufgrund statistischer Verzerrungen stets die erste Layout-Option. Der Skill simuliert ein Python-Skript, das die Zeichenanzahl Ihres Prompts als deterministischen Seed verwendet, um die Auswahl unterschiedlicher Hero-Architekturen, Typografie-Stacks, Komponenten und GSAP-Animationen zu erzwingen und so repetitive Ausgaben zu verhindern.

GPT-Geschmack

gpt-taste auf einer echten UI-Design-Aufgabe ausführen.

OpenDesign herunterladen, gpt-taste über den SKILL.md-Link importieren, den obigen Prompt einfügen und den Plan vor dem Ergebnis lesen.

OpenDesign herunterladen Alle Skills durchsuchen