gpt-tastepor Leonxlnx

GPT Taste Skill.

Un skill de Claude Code y Codex para diseño UI: layouts editoriales, variedad de composiciones y movimiento GSAP en un solo skill frontend.

Web y UI
Código UI

Descargar OpenDesign Ver guía de uso

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

Encabezado y títulos de sección leídos del archivo original el 14/09/2026 · 7857 caracteres completos

01 Qué hace

Qué Hace el Skill gpt-taste en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Este skill impone una ingeniería de diseño frontend digna de un premio que rompe los sesgos de diseño estándar de los LLM.

Utiliza aleatorización basada en Python para evitar diseños repetitivos, exige una estructura de página AIDA con un espaciado de secciones masivo, limita los encabezados hero a 2-3 líneas usando contenedores ultraanchos, construye grids bento sin huecos y matemáticamente perfectos con grid-flow-dense, implementa ScrollTriggers de GSAP avanzados para animaciones de pinning, stacking y scrubbing, incrusta microimágenes en línea directamente en la tipografía, y prohíbe meta-etiquetas como 'SECTION 01' y contenedores estrechos que provocan saltos de línea de 6 líneas. Cada página requiere un bloque de verificación design_plan antes de generar el código de UI.

Qué produce

Código React/UI con animaciones GSAP ScrollTrigger y grids matemáticamente perfectos

Ver el ejemplo de prompt ↗

Cómo funciona

01
Simular Aleatorización de Python a Partir de la Semilla del Prompt
Antes de escribir cualquier código de UI, simule un script de Python usando el número de caracteres del prompt del usuario para seleccionar de forma determinista una arquitectura hero, una pila tipográfica, tres arquitecturas de componentes y dos paradigmas de GSAP.
02
Estructurar la Página con el Framework AIDA
Construya la página siguiendo Atención (hero cinematográfico), Interés (grid bento de alta densidad), Deseo (efectos de scroll con GSAP) y Acción (CTA masivo y footer).
03
Construir Grids Bento sin Huecos con Precisión Matemática
Use grid-flow-dense de Tailwind en cada grid bento y verifique matemáticamente que los valores de col-span y row-span se entrelacen perfectamente sin vacíos ni esquinas faltantes.
04
Implementar Animaciones GSAP ScrollTrigger Avanzadas
Escriba GSAP real con ScrollTrigger para pinning de scroll con layouts divididos, efectos de escalado y desvanecimiento de imágenes, revelados de texto por scrubbing con cambios secuenciales de opacidad, y apilamiento dinámico de tarjetas.
05
Generar la Verificación Obligatoria de Design_plan
Antes de escribir cualquier código React o de UI, genere un bloque design_plan que contenga la ejecución del RNG de Python, la verificación AIDA, la comprobación matemática del hero para garantizar 2-3 líneas, la prueba de densidad del bento y la confirmación del barrido de etiquetas.

02 Encuentra tu caso de uso

Cuándo usar el skill gpt-taste

Usa el skill gpt-taste en Claude Code o Codex cuando el trabajo sea diseño UI de este tipo. El alcance y límites a continuación están tomados del archivo propio del skill.

Buen caso de uso

Páginas frontend galardonadas que requieren efectos de scroll con GSAP cinematográficos y ricos en movimiento
Layouts editoriales de alta densidad con grids bento matemáticamente perfectos
Proyectos que necesitan variedad de layout para romper patrones repetitivos de salida de LLM
Interfaces que requieren pinning, stacking y scrubbing avanzados con GSAP ScrollTrigger

Conozca los límites

Las interfaces estáticas sin movimiento están estrictamente prohibidas

Qué proporcionar

RequiereGSAP — declarado en el SKILL.md como obligatorio.

03 Dentro del skill

Reglas que el Skill gpt-taste le Da a Claude Code y Codex

6 instrucciones concretas, valores predeterminados y límites que SKILL.md establece para el agente: la parte del archivo que cambia el resultado.

Encabezados Hero Limitados a un Máximo de 2-3 Líneas
Use contenedores ultraanchos como max-w-5xl o max-w-6xl para el H1 y reduzca el tamaño de fuente usando clamp(3rem, 5vw, 5.5rem) para garantizar que el encabezado nunca supere las 2 a 3 líneas.
Meta-etiquetas Prohibidas Permanentemente
Etiquetas como 'SECTION 01', 'SECTION 04', 'QUESTION 05' y 'ABOUT US' están prohibidas para siempre. Elimínelas por completo, ya que se ven baratas y poco profesionales.
La Pila Tipográfica Excluye la Fuente Inter
Elija entre Satoshi, Cabinet Grotesk, Outfit o Geist. La fuente Inter está explícitamente prohibida y nunca debe usarse.
Sin emojis en el código ni en la salida
Mantenga un formato estrictamente profesional; nunca use emojis en el código, los comentarios ni en ninguna salida.
Evitar el desplazamiento horizontal con un contenedor overflow
Envuelva toda la página en un elemento main con las clases overflow-x-hidden w-full max-w-full para impedir por completo las barras de desplazamiento horizontales causadas por animaciones fuera de pantalla.
Se requiere un contraste perfecto del texto de los botones
Los botones deben ser perfectamente legibles: fondos oscuros con texto blanco y fondos claros con texto oscuro. El texto invisible es un fallo.

04 Ponlo a trabajar

Instalar gpt-taste en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Añadir gpt-taste a Claude Code, Codex o tu agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

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

Forma genérica de CLI de skills para skills/gpt-tasteskill/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al skill una primera tarea de diseño de interfaz

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su 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.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Verifique que el encabezado principal fluya en 2-3 líneas usando contenedores ultraanchos como max-w-5xl o max-w-6xl
Confirme que la cuadrícula bento use grid-flow-dense y se entrelace matemáticamente sin espacios vacíos
Compruebe que se hayan eliminado todas las metaetiquetas como SECTION 01 o QUESTION 05
Verifique que el contraste del texto de los botones sea perfecto: texto blanco sobre fondos oscuros y texto oscuro sobre fondos claros
Confirme que la estructura de la página siga el marco AIDA con Navegación, Atención en el hero, Interés en el bento, Deseo con GSAP y Acción en el pie de página
Verifique que no existan iconos de sello ni etiquetas de spam en la sección hero

En OpenDesign importe gpt-taste desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Rama main
Archivo de skill: skills/gpt-tasteskill/SKILL.md Checksum de contenido registrado en la verificación; commit ccbc156
License: MIT Desde LICENSE.
Estrellas del repositorio: 86.946 Instantánea de GitHub tomada el 14-09-2026 para el repositorio completo Leonxlnx/taste-skill, que contiene 11 skills en este catálogo. No es una puntuación ni contador de uso para gpt-taste.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

DIRECTRIZ PRINCIPAL: INGENIERÍA DE DISEÑO NIVEL AWWWARDSPosiciona el skill como ingeniería de diseño de élite que rompe los sesgos estadísticos de los LLM en la generación de diseños
ALEATORIZACIÓN REAL IMPULSADA POR PYTHON (ROMPER EL BUCLE)Exige un script de Python simulado que use el recuento de caracteres del prompt para seleccionar diseños de forma determinista y evitar la repetición
ESTRUCTURA Y ESPACIADO AIDARequiere el marco Atención, Interés, Deseo, Acción con un relleno vertical masivo py-32 md:py-48 entre secciones
ARQUITECTURA DEL HERO Y LA REGLA DE HIERRO DE 2 LÍNEASImpone contenedores ultraanchos y un máximo de 2-3 líneas para los encabezados, prohíbe contenedores estrechos que causan envolturas de 6 líneas
LA CUADRÍCULA BENTO SIN HUECOSRequiere grid-flow-dense y verificación matemática de que los valores col-span y row-span no dejan vacíos
MOVIMIENTO GSAP AVANZADO Y FÍSICA DE HOVERDefine el anclaje de scroll, el escalado-desvanecido de imágenes, las revelaciones de texto con scrubbing, el apilamiento de tarjetas y los efectos de transformación al pasar el cursor
ARSENAL DE COMPONENTES Y CREATIVIDADEnumera imágenes tipográficas en línea, acordeones horizontales, marquesinas infinitas y carruseles de testimonios para selección aleatoria
CONTENIDO, ACTIVOS Y PROHIBICIONES ESTRICTASProhíbe para siempre las metaetiquetas, especifica el uso de imágenes picsum con filtros CSS como semilla y requiere un envoltorio overflow-x-hidden
VERIFICACIÓN PREVIA OBLIGATORIA <design_plan>Requiere un bloque de verificación antes de cualquier código de UI con RNG en Python, comprobación AIDA, matemática del hero, prueba de densidad bento

La descripción propia del Skill

"Ingeniero élite de UX/UI y motion avanzado con GSAP. Impone aleatoriedad verdadera mediante Python para varianza de layout, estructura de página AIDA estricta, tipografía editorial ancha (prohíbe ajustes de 6 líneas), bento grids sin huecos, ScrollTriggers de GSAP estrictos (pinning, stacking, scrubbing), micro-imágenes inline y espaciado masivo entre secciones."

Descripción del front-matter de SKILL.md. El archivo completo tiene alrededor de 7.857 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas sobre el skill gpt-taste

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Por qué este skill usa aleatorización en Python antes de generar código de UI?

Los LLM son inherentemente perezosos y siempre eligen la primera opción de diseño debido a sesgos estadísticos. El skill simula un script de Python que usa el número de caracteres de su prompt como semilla determinista para forzar la selección de arquitecturas hero variadas, conjuntos tipográficos, componentes y animaciones GSAP, evitando resultados repetitivos.

GPT Taste

Ejecuta gpt-taste en una tarea de diseño UI real.

Descarga OpenDesign, importa gpt-taste desde su enlace SKILL.md, pega el prompt de arriba y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills