Habilidades gpt-taste
🎨

gpt-taste

Seguro

Crie designs frontend premiados com animações GSAP

Modelos de IA padrão geram layouts previsíveis com espaçamento precário e componentes genéricos. Esta skill impõe padrões de design nível AWWWARDS com randomização em Python, movimento GSAP e grids matematicamente perfeitos.

Suporta: Claude Codex Code(CC)
📊 71 Adequado
1

Baixar o ZIP da skill

2

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

3

Ative e comece a usar

Testar

A utilizar "gpt-taste". Create a landing page for a premium coffee subscription service

Resultado esperado:

Uma seção herói cinematográfica com tipografia centralizada e background radial escuro. Abaixo: um grid bento de 4 cards com imagens ricas, cada card com animações de scale no hover. Uma seção GSAP pinned à esquerda rola pelos benefícios do produto enquanto imagens escalam e desvanecem à direita. CTA final com botão de contraste massivo.

A utilizar "gpt-taste". Build a SaaS features page with scroll animations

Resultado esperado:

Navegação floating glass pill. Herói com H1 máximo de 2 linhas em container ultra-wide. Seção de interesse com cards de grid intertravados matematicamente usando grid-flow-dense. Seção de desejo com revelações via text scrubbing e card stacking. Seção de ação com CTA de alto contraste.

A utilizar "gpt-taste". Design a portfolio with GSAP motion effects

Resultado esperado:

Navegação split minimalista. Herói com assimetria artística e overlay de imagem flutuante. Accordions horizontais para projetos. Marquee infinito para logos de clientes. Carousel de depoimentos com retratos sobrepostos. Backgrounds ambiente com borrão radial profundo ao longo de toda a página.

Auditoria de Segurança

Seguro
v1 • 5/2/2026

Evaluated 45 static security findings. All detections are false positives: backtick syntax is markdown formatting, cryptographic flags triggered by design terms (randomization, seed), and network flag is legitimate picsum.photos placeholder service. This is a markdown design prompt skill with no executable code, no malicious operations, and no confirmed security risks.

1
Arquivos analisados
75
Linhas analisadas
0
achados
1
Total de auditorias
Nenhum problema de segurança encontrado
Auditado por: claude

Pontuação de qualidade

38
Arquitetura
100
Manutenibilidade
87
Conteúdo
36
Comunidade
100
Segurança
83
Conformidade com especificações

O Que Você Pode Construir

Lançamentos de projetos web de agência

Gere landing pages premiadas com animações cinematográficas para apresentações de clientes e decks de pitch

Landing pages para startups

Crie páginas de produtos impressionantes com efeitos de scroll GSAP que impressionam investidores e early adopters

Redesign de sites de portfólio

Transforme portfólios estáticos em vitrines ricas em movimento com cards empilhados e revelações parallax

Tente Estes Prompts

Requisição básica de landing page
Create a landing page for [product name] targeting [audience]. Focus on [primary feature].
Showcase de features com animações
Build a feature showcase page with GSAP scroll pinning. The product is [description] and the main value prop is [tagline].
Página de campanha AIDA completa
Design a complete AIDA campaign page. Product: [name]. Hero should emphasize [emotion]. Features need [specific animations]. CTAs should drive [action].
Catálogo de produtos em grid bento
Create a bento grid layout showing [N] products. Each card should have [specific hover behavior]. Grid must be gapless. Images: use [theme] keywords.

Melhores Práticas

  • Sempre inclua etapa de randomização Python para quebrar padrões padrão da IA e garantir layouts únicos
  • Verifique a largura do container H1 (max-w-5xl ou maior) antes de gerar para evitar wraps de 6 linhas
  • Aplique grid-flow-dense em todo grid bento e verifique matematicamente o entrelaçamento de colunas

Evitar

  • Evite usar fonte Inter - use Satoshi, Cabinet Grotesk, Outfit ou Geist em vez disso
  • Não inclua meta-labels como SECTION 01 ou QUESTION 05 - elas parecem não profissionais
  • Nunca use containers herói estreitos que forcem o texto H1 a quebrar em 4+ linhas

Perguntas Frequentes

Quais dependências são necessárias para esta skill?
Tailwind CSS para estilização e GSAP com ScrollTrigger para animações. A skill requer React ou um framework compatível.
Isso pode funcionar com Next.js ou outros frameworks?
Sim, os padrões de design funcionam com qualquer framework baseado em React incluindo Next.js, Gatsby ou Remix.
Como funciona a randomização Python?
A skill simula randomização determinística usando matemática de módulo de contagem de caracteres para selecionar layouts, fontes e componentes sem execução real de Python.
O que faz designs serem dignos de AWWWARDS?
Espaçamento cinematográfico, movimento GSAP, grids matematicamente perfeitos, CTAs de alto contraste e tipografia profissional sem meta-labels barata.
Posso personalizar as fontes de imagem?
Sim, substitua URLs do picsum.photos pelos seus assets de imagem reais. A skill usa seeds de palavras-chave para correspondência de placeholders.
Como evito bugs de scroll horizontal?
Envolva a página em main com classes overflow-x-hidden e max-w-full para evitar que animações fora da tela causem scrollbars.

Detalhes do Desenvolvedor

Estrutura de arquivos

📄 SKILL.md