gpt-tastepor Leonxlnx

GPT Taste Skill.

Uma skill de Claude Code e Codex para design de UI: layouts editoriais, variedade de layout e movimento GSAP em uma só skill de frontend.

Web & UI
Código de UI

Baixar OpenDesign Ver guia 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

Front matter e títulos de seção lidos do arquivo original em 14/09/2026 · 7.857 caracteres no total

01 O que faz

O Que o Skill gpt-taste Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Este skill impõe uma engenharia de design de frontend premiada que rompe os vieses de layout padrão dos LLMs.

Ele usa randomização orientada por Python para evitar layouts repetitivos, exige estrutura de página AIDA com espaçamento massivo entre seções, limita títulos hero a 2-3 linhas usando containers ultra-wide, constrói grids bento matematicamente perfeitos e sem lacunas com grid-flow-dense, implementa GSAP ScrollTriggers avançados para pinning, stacking e animações de scrubbing, incorpora micro-imagens inline diretamente na tipografia e proíbe meta-labels como 'SECTION 01' e containers estreitos que causam quebras de texto em 6 linhas. Cada página exige um bloco de verificação design_plan antes de gerar o código de UI.

O que ele produz

Código React/UI com animações GSAP ScrollTrigger e grids matematicamente perfeitos

Veja o exemplo de prompt ↗

Como funciona

01
Simular Randomização em Python a Partir da Seed do Prompt
Antes de escrever qualquer código de UI, simule um script Python usando a contagem de caracteres do prompt do usuário para selecionar deterministicamente uma arquitetura de hero, uma stack de tipografia, três arquiteturas de componentes e dois paradigmas GSAP.
02
Estruturar a Página com o Framework AIDA
Construa a página seguindo Atenção (hero cinematográfico), Interesse (grid bento de alta densidade), Desejo (efeitos de scroll com GSAP) e Ação (CTA massivo e rodapé).
03
Construir Grids Bento Sem Lacunas com Precisão Matemática
Use o grid-flow-dense do Tailwind em todo grid bento e verifique matematicamente que os valores de col-span e row-span se encaixam perfeitamente, sem vazios ou cantos faltando.
04
Implementar Animações Avançadas de GSAP ScrollTrigger
Escreva GSAP real com ScrollTrigger para pinning de scroll com layouts divididos, efeitos de escala e fade de imagens, revelações de texto com scrubbing e mudanças sequenciais de opacidade, e empilhamento dinâmico de cards.
05
Gerar Verificação Obrigatória de Design_plan
Antes de escrever qualquer código React ou de UI, gere um bloco design_plan contendo a execução do RNG em Python, verificação AIDA, verificação matemática do hero para garantir 2-3 linhas, prova de densidade do bento e confirmação de varredura de labels.

02 Encontre o ideal para você

Quando Usar a Skill gpt-taste

Use a skill gpt-taste no Claude Code ou Codex quando o trabalho for design de UI deste tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

Páginas frontend premiadas que exigem efeitos de scroll GSAP cinematográficos e ricos em movimento
Layouts editoriais de alta densidade com grids bento matematicamente perfeitos
Projetos que precisam de variedade de layout para quebrar padrões repetitivos de saída de LLMs
Interfaces que exigem pinning, stacking e scrubbing avançados com GSAP ScrollTrigger

Conheça os Limites

Interfaces estáticas sem movimento são estritamente proibidas

O Que Fornecer

RequerGSAP — listado no SKILL.md como obrigatório.

03 Dentro da skill

Regras que a Skill gpt-taste Dá ao Claude Code e ao Codex

6 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Títulos Hero Limitados a no Máximo 2-3 Linhas
Use containers ultra-wide como max-w-5xl ou max-w-6xl para o H1 e reduza o tamanho da fonte usando clamp(3rem, 5vw, 5.5rem) para garantir que o título nunca exceda 2 a 3 linhas.
Meta-labels Permanentemente Proibidos
Labels como 'SECTION 01', 'SECTION 04', 'QUESTION 05' e 'ABOUT US' são proibidos para sempre. Remova-os completamente, pois parecem baratos e pouco profissionais.
Stack de Tipografia Exclui a Fonte Inter
Escolha entre Satoshi, Cabinet Grotesk, Outfit ou Geist. A fonte Inter é explicitamente proibida e nunca deve ser usada.
Sem emojis no código ou na saída
Mantenha uma formatação estritamente profissional, nunca usando emojis no código, em comentários ou em qualquer saída.
Evite rolagem horizontal com um wrapper de overflow
Envolva a página inteira em um elemento main com as classes overflow-x-hidden w-full max-w-full para impedir absolutamente barras de rolagem horizontais causadas por animações fora da tela.
Contraste perfeito de texto nos botões é obrigatório
Os botões devem ser perfeitamente legíveis, com texto branco em fundos escuros e texto escuro em fundos claros. Texto invisível é uma falha.

04 Coloque em prática

Instalar gpt-taste no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar gpt-taste ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

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

Formulário genérico da CLI skills para skills/gpt-tasteskill/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê ao Skill uma Primeira Tarefa de Design de UI

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu 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.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Verifique se o título principal (hero) flui em 2-3 linhas usando containers ultra-largos como max-w-5xl ou max-w-6xl
Confirme se a grade bento usa grid-flow-dense e se encaixa matematicamente sem espaços vazios
Verifique se todos os meta-rótulos como SECTION 01 ou QUESTION 05 foram removidos
Verifique se o contraste do texto dos botões é perfeito, com texto branco em fundos escuros e texto escuro em fundos claros
Confirme se a estrutura da página segue o framework AIDA, com Navigation, Attention hero, Interest bento, Desire GSAP e Action footer
Verifique se não há ícones de selo ou tags de spam na seção hero

No OpenDesign, importe o gpt-taste a partir do link do seu SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Branch main
Arquivo da skill: skills/gpt-tasteskill/SKILL.md Checksum de conteúdo registrado na verificação; commit ccbc156
License: MIT De LICENSE.
Estrelas do repositório: 86.946 Snapshot do GitHub capturado em 14/09/2026 para todo o repositório Leonxlnx/taste-skill, que contém 11 skills neste catálogo. Não é uma avaliação ou contagem de uso para gpt-taste.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

DIRETRIZ PRINCIPAL: ENGENHARIA DE DESIGN NÍVEL AWWWARDSPosiciona a skill como engenharia de design de elite que rompe os vieses estatísticos de LLMs na geração de layouts
RANDOMIZAÇÃO REAL DIRIGIDA POR PYTHON (ROMPENDO O LOOP)Exige um script Python simulado que use a contagem de caracteres do prompt para selecionar layouts de forma determinística e evitar repetição
ESTRUTURA E ESPAÇAMENTO AIDAExige o framework Attention, Interest, Desire, Action com espaçamento vertical massivo py-32 md:py-48 entre seções
ARQUITETURA DO HERO E A REGRA DE FERRO DAS 2 LINHASImpõe containers ultra-largos e um máximo de 2-3 linhas para títulos, proibindo containers estreitos que causam quebras em 6 linhas
A GRADE BENTO SEM ESPAÇOSExige grid-flow-dense e verificação matemática de que os valores de col-span e row-span não deixam nenhum vazio
MOVIMENTO GSAP AVANÇADO E FÍSICA DE HOVERDefine fixação no scroll, fade com escala de imagem, revelações de texto com scrubbing, empilhamento de cards e efeitos de transformação no hover
ARSENAL DE COMPONENTES E CRIATIVIDADELista imagens de tipografia inline, acordeões horizontais, marquees infinitos e carrosséis de depoimentos para seleção aleatória
CONTEÚDO, ASSETS E PROIBIÇÕES ESTRITASProíbe meta-rótulos definitivamente, especifica seeding de imagens picsum com filtros CSS e exige um wrapper overflow-x-hidden
<design_plan> OBRIGATÓRIO ANTES DA EXECUÇÃOExige um bloco de verificação antes de qualquer código de UI, com RNG em Python, checagem AIDA, matemática do hero e prova de densidade do bento

A Descrição da Própria Skill

"Engenheiro Elite de UX/UI e Motion Avançado com GSAP. Impõe randomização verdadeira guiada por Python para variação de layout, estrutura de página AIDA rigorosa, tipografia editorial ampla (proíbe quebras de 6 linhas), bento grids sem lacunas, ScrollTriggers GSAP rigorosos (fixação, empilhamento, scrubbing), micro-imagens inline e espaçamento massivo entre seções."

Descrição do front-matter do SKILL.md. O arquivo completo tem cerca de 7.857 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas sobre a Skill gpt-taste

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Por que essa skill usa randomização em Python antes de gerar o código da UI?

LLMs são inerentemente preguiçosas e sempre escolhem a primeira opção de layout devido a vieses estatísticos. A skill simula um script Python usando a contagem de caracteres do seu prompt como semente determinística para forçar a seleção de arquiteturas de hero variadas, pilhas de tipografia, componentes e animações GSAP, evitando saídas repetitivas.

GPT Taste

Execute o gpt-taste em uma tarefa de UI design real.

Baixe o OpenDesign, importe o gpt-taste a partir do link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills