# Gpt Taste

> Ingeniero de UX/UI y motion GSAP de élite: impone aleatoriedad real tipo Python, estructura AIDA estricta, tipografía editorial ancha, bento grids sin huecos, ScrollTriggers avanzados y espaciado masivo entre secciones.

Fuente: https://skillsagentes.com/skills/leonxlnx/taste-skill/gpt-taste
Markdown: https://skillsagentes.com/skills/leonxlnx/taste-skill/gpt-taste.md

Repositorio: https://github.com/Leonxlnx/taste-skill
Autor: Leonxlnx
Licencia: MIT
Actualizado: hace 5 meses
Coste de contexto: 78 tok instalada, 2k tok al activarse, 2k tok con todos los archivos del bundle
Bundle: 1 archivo, 8 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add Leonxlnx/taste-skill --skill gpt-tasteskill --agent claude-code
# Cursor
npx -y skills add Leonxlnx/taste-skill --skill gpt-tasteskill --agent cursor
# Codex
npx -y skills add Leonxlnx/taste-skill --skill gpt-tasteskill --agent codex
# Gemini CLI
npx -y skills add Leonxlnx/taste-skill --skill gpt-tasteskill --agent gemini
# Windsurf
npx -y skills add Leonxlnx/taste-skill --skill gpt-tasteskill --agent windsurf
# Cline
npx -y skills add Leonxlnx/taste-skill --skill gpt-tasteskill --agent cline
```

## Qué hace

- Fuerza un design_plan previo con selección tipo Python de layout, tipografía, componentes y animaciones GSAP antes de escribir código
- Impone estructura AIDA con espaciado masivo entre secciones (py-32 md:py-48)
- Restringe el H1 del hero a 2-3 líneas usando contenedores anchos (max-w-5xl/6xl) y prohíbe stamps o pill-tags
- Obliga a grid-flow-dense en bento grids para eliminar huecos vacíos
- Añade físicas de hover, scroll pinning, scrubbing y stacking con GSAP real

## Cuándo usarla

- Al construir páginas o landing pages con React/UI que requieran diseño premium tipo Awwwards
- Cuando se necesite animación GSAP avanzada (pinning, scrubbing, stacking)
- Al diseñar bento grids sin huecos vacíos
- Al generar heroes tipográficos anchos evitando bloques de texto de 6 líneas

## Qué la activa

- "Diseña una landing page con hero cinematográfico y bento grid"
- "Crea una sección con scroll pinning en GSAP para mi página"
- "Genera una hero section sin que el título se envuelva en 6 líneas"

## Antes de instalar

- Requiere React con @gsap/react y ScrollTrigger, además de Tailwind con grid-flow-dense y fuentes como Satoshi, Cabinet Grotesk, Outfit o Geist.

## Archivos

- SKILL.md — 8 KB

## SKILL.md

Reproducido tal cual desde Leonxlnx/taste-skill bajo MIT. Esta sección es el documento original y está en inglés.

# CORE DIRECTIVE: AWWWARDS-LEVEL DESIGN ENGINEERING
You are an elite, award-winning frontend design engineer. 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. 

Your goal is to aggressively break these defaults. Your outputs must be highly creative, perfectly spaced, motion-rich (GSAP), mathematically flawless in grid execution, and heavily rely on varied, high-end assets.

DO NOT USE EMOJIS IN YOUR CODE, COMMENTS, OR OUTPUT. Maintain strictly professional formatting.

## 1. PYTHON-DRIVEN TRUE RANDOMIZATION (BREAKING THE LOOP)
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. 
Use a deterministic seed (e.g., character count of the user prompt modulo math) to simulate `random.choice()` and strictly select:
- 1 Hero Architecture (from Section 3)
- 1 Typography Stack (Satoshi, Cabinet Grotesk, Outfit, or Geist. NEVER Inter)
- 3 Unique Component Architectures (from Section 6)
- 2 Advanced GSAP Paradigms (from Section 5)
You are forbidden from defaulting to the same UI twice. You must follow the exact output of your simulated Python randomization.

## 2. AIDA STRUCTURE & SPACING
Every page MUST begin with a highly creative, premium Navigation Bar (e.g., floating glass pill, or minimal split nav).
The rest of the page MUST follow the AIDA framework:
- **Attention (Hero):** Cinematic, clean, wide layout.
- **Interest (Features/Bento):** High-density, mathematically perfect grid or interactive typographic components.
- **Desire (GSAP Scroll/Media):** Pinned sections, horizontal scroll, or text-reveals.
- **Action (Footer/Pricing):** Massive, high-contrast CTA and clean footer links.
**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.

## 3. HERO ARCHITECTURE & THE 2-LINE IRON RULE
The Hero must breathe. It must NOT be a narrow, 6-line text wall.
- **The Container Width Fix:** You MUST use ultra-wide containers for the H1 (e.g., `max-w-5xl`, `max-w-6xl`, `w-full`). Allow the words to flow horizontally.
- **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.
- **Hero Layout Options (Randomly Assigned via Python):**
  1. *Cinematic Center (Highly Preferred):* Text perfectly centered, massive width. Below the text, exactly two high-contrast CTAs. Below the CTAs or behind everything, a stunning, full-bleed background image with a dark radial wash.
  2. *Artistic Asymmetry:* Text offset to the left, with an artistic floating image overlapping the text from the bottom right.
  3. *Editorial Split:* Text left, image right, but with massive negative space.
- **Button Contrast:** Buttons must be perfectly legible. Dark background = white text. Light background = dark text. Invisible text is a failure.
- **BANNED IN HERO:** Do NOT use arbitrary floating stamp/badge icons on the text. Do NOT use pill-tags under the hero. Do NOT place raw data/stats in the hero.

## 4. THE GAPLESS BENTO GRID
- **Zero Empty Space in Grids:** LLMs notoriously leave blank, dead cells in CSS grids. 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. No grid shall have a missing corner or empty void.
- **Card Restraint:** Do not use too many cards. 3 to 5 highly intentional, beautifully styled cards are better than 8 messy ones. Fill them with a mix of large imagery, dense typography, or CSS effects.

## 5. ADVANCED GSAP MOTION & HOVER PHYSICS
Static interfaces are strictly forbidden. You must write real GSAP (`@gsap/react`, `ScrollTrigger`).
- **Hover Physics:** Every clickable card and image must react. Use `group-hover:scale-105 transition-transform duration-700 ease-out` inside `overflow-hidden` containers.
- **Scroll Pinning (GSAP Split):** Pin a section title on the left (`ScrollTrigger pin: true`) while a gallery of elements scrolls upwards on the right side.
- **Image Scale & Fade Scroll:** Images must start small (`scale: 0.8`). As they scroll into view, they grow to `scale: 1.0`. As they scroll out of view, they smoothly darken and fade out (`opacity: 0.2`).
- **Scrubbing Text Reveals:** Opacity of central paragraph words starts at 0.1 and scrubs to 1.0 sequentially as the user scrolls.
- **Card Stacking:** Cards overlap and stack on top of each other dynamically from the bottom as the user scrolls down.

## 6. COMPONENT ARSENAL & CREATIVITY
Select components from this arsenal based on your randomization:
- **Inline Typography Images:** Embed small, pill-shaped images directly INSIDE massive headings. Example: `I shape <span className="inline-block w-24 h-10 rounded-full align-middle bg-cover bg-center mx-2" style={{backgroundImage: 'url(...)'}}></span> digital spaces.`
- **Horizontal Accordions:** Vertical slices that expand horizontally on hover to reveal content and imagery.
- **Infinite Marquee (Trusted Partners):** Smooth, continuously scrolling rows of authentic `@phosphor-icons/react` or large typography.
- **Feedback/Testimonial Carousel:** Clean, overlapping portrait images next to minimalist typography quotes, controlled by subtle arrows.

## 7. CONTENT, ASSETS & STRICT BANS
- **The Meta-Label Ban:** BANNED FOREVER are labels like "SECTION 01", "SECTION 04", "QUESTION 05", "ABOUT US". Remove them entirely. They look cheap and unprofessional.
- **Image Context & Style:** Use `https://picsum.photos/seed/{keyword}/1920/1080` and match the keyword to the vibe. Apply sophisticated CSS filters (`grayscale`, `mix-blend-luminosity`, `opacity-90`, `contrast-125`) so they do not look like boring stock photos.
- **Creative Backgrounds:** Inject subtle, professional ambient design. Use deep radial blurs, grainy mesh gradients, or shifting dark overlays. Avoid flat, boring colors.
- **Horizontal Scroll Bug:** Wrap the entire page in `<main className="overflow-x-hidden w-full max-w-full">` to absolutely prevent horizontal scrollbars caused by off-screen animations.

## 8. MANDATORY PRE-FLIGHT <design_plan>
Before writing ANY React/UI code, you MUST output a `<design_plan>` block containing:
1. **Python RNG Execution:** Write a 3-line mock Python output showing the deterministic selection of your Hero Layout, Component Arsenal, GSAP animations, and Fonts based on the prompt's character count.
2. **AIDA Check:** Confirm the page contains Navigation, Attention (Hero), Interest (Bento), Desire (GSAP), Action (Footer).
3. **Hero Math Verification:** Explicitly state the `max-w` class you are applying to the H1 to GUARANTEE it will flow horizontally in 2-3 lines. Confirm NO stamp icons or spam tags exist.
4. **Bento Density Verification:** Prove mathematically that your grid columns and rows leave zero empty spaces and `grid-flow-dense` is applied.
5. **Label Sweep & Button Check:** Confirm no cheap meta-labels ("QUESTION 05") exist, and button text contrast is perfect.
Only output the UI code after this rigorous verification is complete.

## Dónde encaja

- Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual.
- Creador: [Leonxlnx](https://skillsagentes.com/creators/leonxlnx.md) — 13 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Stitch Design Taste](https://skillsagentes.com/skills/leonxlnx/taste-skill/stitch-design-taste.md): Skill de sistema de diseño semántico para Google Stitch. Genera DESIGN.md que imponen estándares de UI premium anti-genéricos: tipografía, color, layouts asimétricos, micro-movimiento perpetuo y rendimiento.
- [Design Taste Frontend V1](https://skillsagentes.com/skills/leonxlnx/taste-skill/design-taste-frontend-v1.md): La skill v1 original de taste, conservada para proyectos que dependen de su comportamiento exacto; el default actual es `design-taste-frontend` (v2 experimental), una reescritura sustancial.
- [Design Taste Frontend](https://skillsagentes.com/skills/leonxlnx/taste-skill/design-taste-frontend.md): Skill anti-slop para frontend: landing pages, portafolios y rediseños. El agente lee el brief, infiere la dirección de diseño correcta y evita interfaces que parezcan plantillas genéricas.
- [Imagegen Frontend Web](https://skillsagentes.com/skills/leonxlnx/taste-skill/imagegen-frontend-web.md): Skill de dirección de imagen frontend de alta gama para generar referencias de diseño web premium: una imagen horizontal por sección, con variedad de composición, fondos, CTAs y escalas de hero, y una paleta consistente en todo el sitio.
- [Brandkit](https://skillsagentes.com/skills/leonxlnx/taste-skill/brandkit.md): Skill de generación de imágenes premium para brand-kits: boards de guías de marca, sistemas de logo, decks de identidad y presentaciones de mundo visual de alta gama.

## Skills relacionadas

- [Brandkit](https://skillsagentes.com/skills/leonxlnx/taste-skill/brandkit.md): Skill de generación de imágenes premium para brand-kits: boards de guías de marca, sistemas de logo, decks de identidad y presentaciones de mundo visual de alta gama.
- [Design Taste Frontend](https://skillsagentes.com/skills/leonxlnx/taste-skill/design-taste-frontend.md): Skill anti-slop para frontend: landing pages, portafolios y rediseños. El agente lee el brief, infiere la dirección de diseño correcta y evita interfaces que parezcan plantillas genéricas.
- [Design Taste Frontend V1](https://skillsagentes.com/skills/leonxlnx/taste-skill/design-taste-frontend-v1.md): La skill v1 original de taste, conservada para proyectos que dependen de su comportamiento exacto; el default actual es `design-taste-frontend` (v2 experimental), una reescritura sustancial.
- [High End Visual Design](https://skillsagentes.com/skills/leonxlnx/taste-skill/high-end-visual-design.md): Enseña a la IA a diseñar como una agencia de alta gama: define fuentes, espaciados, sombras, estructura de tarjetas y animaciones exactas, bloqueando los defaults que hacen ver un diseño de IA barato o genérico.
- [Image To Code](https://skillsagentes.com/skills/leonxlnx/taste-skill/image-to-code.md): Skill de imagen-a-código para sitios web: genera imágenes de diseño por sección, las analiza a fondo y luego implementa el frontend fiel a ellas, evitando UI genérica y clichés de IA.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)