Ir para o guia de uso
imagegen-frontend-webpor Leonxlnx

ImageGen Frontend Web Skill.

Um skill de Claude Code e Codex para design de UI: referências de design de websites seção por seção via geração de imagens.

  • Web & UI
  • Image
Leonxlnx/taste-skill · skills/imagegen-frontend-web/SKILL.mdSKILL.md
--- name: imagegen-frontend-web description: Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / … --- ## 1. ACTIVE BASELINE CONFIGURATION ## 2. THE COMBINATORIAL VARIATION ENGINE ## 3. FRONTEND REFERENCE RULE ## 4. HERO MINIMALISM RULES ## 5. IMAGE COUNT & PAGE SLICING ## 6. CREATIVITY ESCALATION RULE
Metadados iniciais e títulos de seção lidos do arquivo original em 14/09/2026 · 36.780 caracteres no total

01 O que faz

O Que a Skill imagegen-frontend-web 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

A skill gera referências de design de sites premium como imagens horizontais separadas—uma imagem por seção. Ela impõe variedade de composição além do padrão exagerado de texto à esquerda/imagem à direita, usa fundos full-bleed com confiança, varia as escalas do hero (gigante/médio/mini) e mantém uma paleta única e consistente em todas as seções. Projetada para landing pages, sites de marketing e comps de produto que desenvolvedores ou modelos de código possam recriar.

Ela usa controles de linha de base configuráveis: DESIGN_VARIANCE 8, VISUAL_DENSITY 4, ART_DIRECTION 8, IMPLEMENTATION_CLARITY 9, IMAGE_USAGE_PRIORITY 9, SPACING_GENEROSITY 8. A skill rompe os padrões da IA por meio de variação combinatória—escolhendo um paradigma temático, um caráter tipográfico, uma arquitetura de hero, um sistema de seções e um eixo narrativo conceitual—enquanto mantém a disciplina de conversão e um espaçamento generoso e uniforme entre as seções.

O que ele produz

  • Imagens horizontais (16:9, 16:10 ou 21:9) renderizando uma seção focada por quadro em alta fidelidade
  • Conjunto de imagens rotuladas por seção: 'Section X of N: <name>' até que a contagem completa seja entregue
  • Universo de marca consistente em todos os quadros: mesma paleta, mesma família tipográfica, identidade de CTA, raio de borda, tratamento de imagem, tom de voz
Veja o exemplo de prompt ↗

Como funciona

  1. 01
    Leia o Briefing e Adapte os Controles de Linha de Base

    A skill lê o prompt do usuário com atenção e depois ajusta os controles (variância de design, densidade visual, direção de arte, clareza de implementação, uso de imagem, espaçamento, variação de layout, disciplina de conversão), a escala do hero, o modo de fundo, o uso de gradiente e a variedade de composição para se adequar ao briefing.

  2. 02
    Escolha Uma Opção de Cada Categoria Combinatória

    A skill se compromete com um paradigma temático, um caráter de fundo, um caráter tipográfico, uma arquitetura de hero, um sistema de seções, exatamente 4 componentes de assinatura, exatamente 2 linguagens de movimento implícito e um eixo narrativo conceitual—tudo com base no prompt.

  3. 03
    Gere Uma Imagem Horizontal por Seção

    Cada seção recebe sua própria imagem horizontal separada em 16:9, 16:10 ou 21:9. A skill nunca combina várias seções em um único quadro nem retorna uma única fatia alta.

  4. 04
    Varie as Âncoras de Composição e os Modos de Fundo

    Entre as seções, a skill escolhe diferentes âncoras de composição (centralizada, canto inferior esquerdo sobre imagem, destaque no canto superior esquerdo, empilhada ao centro, editorial fora da grade, etc.) e modos de fundo (sólido, imagem full-bleed, imagem lateral editorial, duotone, vinheta radial) para que a página evite layouts repetitivos de IA.

  5. 05
    Execute uma Verificação de Clareza de 21 Pontos Antes do Output

    Antes de finalizar, a skill verifica hierarquia, limpeza do hero, distinção visual, ausência de sinais de IA, sensação premium, codificabilidade, consistência entre múltiplas imagens, força das imagens, respiro visual, espaçamento uniforme, criatividade intencional e contagem correta de imagens.

02 Encontre o ideal para você

Quando Usar o imagegen-frontend-web Skill

Use o imagegen-frontend-web skill no Claude Code ou Codex quando o trabalho for design de UI deste tipo. Adequação e limites abaixo são extraídos do próprio arquivo do skill.

Boa Combinação

  • Landing pages, sites de marketing e comps de produto que desenvolvedores ou modelos de código precisam recriar com precisão
  • Designs premium com funis de conversão claros—não moodboards de arte pura
  • Designs guiados por imagem que usam fotografia como material de design principal
  • Desenvolvedores ou modelos de código que precisam de referências de UI muito codificáveis
  • Sites que exigem grande variedade de composição entre seções para evitar layouts repetitivos de IA

Conheça os Limites

  • Pedidos que desejam uma única imagem alta combinada em vez de quadros separados por seção
  • Layouts comerciais seguros, sem ambição criativa ou declarações marcantes

O Que Fornecer

  • Tipo de site e objetivo de conversãoO skill infere o tipo de site (landing page, site de marketing, página de produto, portfólio, SaaS, e-commerce, agência, editorial) e o objetivo de conversão principal a partir do prompt para orientar decisões de design.
  • Contagem de seções ou ambiguidade padrãoEspecifique o número de seções, ou o skill usa o padrão de 6 para landing pages e 8 para sites completos.
  • Palavras-chave de mood da marcaPalavras-chave como minimalista, clean, editorial, revista, cinematográfico, atmosférico, premium, luxo, SaaS, produto, fintech, agência, estúdio criativo, e-commerce orientam a escala do hero, o modo de fundo, o uso de gradiente e as escolhas de composição.
  • Setor ou região para alinhamento culturalQuando o briefing nomeia um setor ou região, o skill orienta a paleta e o temperamento tipográfico para corresponder — sem recorrer por padrão a uma startup neutra de São Francisco, a menos que seja um SaaS intencionalmente genérico.

03 Dentro da skill

Regras que o Skill imagegen-frontend-web Dá ao Claude Code e ao Codex

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

  1. Evite o Hero de Texto à Esquerda/Imagem à Direita por Padrão

    O hero padrão de texto à esquerda/imagem à direita é o padrão de IA mais usado em excesso.

  2. Varie a Composição — Pelo Menos 3 Âncoras Diferentes Devem Aparecer

    Cada seção escolhe uma âncora de composição (centralizada, líder no topo à esquerda, inferior esquerda sobre imagem, cluster de CTA inferior direito, terço esquerdo/dois terços direito, terço direito/dois terços esquerdo, centralizada baixa, editorial fora da grade, empilhada ao centro, imagem como tela).

  3. Contagens Padrão de Seções por Tipo de Solicitação

    Landing page ou template de site usa o padrão de 6 seções (6 imagens). Site completo ou site de marketing usa o padrão de 8 seções (8 imagens). Página de produto ou portfólio usa o padrão de 6 seções.

  4. Mantenha o Título do Hero Curto e Impactante

    O H1 deve ler visualmente como uma declaração premium. Os títulos geralmente devem ler como 5 a 10 palavras fortes, não um parágrafo.

04 Coloque em prática

Instale imagegen-frontend-web no Claude Code ou Codex

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

Adicionar imagegen-frontend-web 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 imagegen-frontend-web

Forma genérica do CLI skills para skills/imagegen-frontend-web/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê ao Skill uma Primeira Tarefa de Design de UI

Adapte este prompt com seu próprio conteúdo e restrições, depois execute no Claude Code ou Codex.

Example prompt
design 8 sections for a fintech website

Fonte: exemplo do SKILL.md (na íntegra).

Verifique o Primeiro Resultado

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

  • O número total de imagens é igual ao número de seções — nunca menos
  • A página respira — o espaçamento entre seções é uniforme e controlado, não muito denso
  • A composição varia entre as seções — âncoras e modos de fundo são combinados
  • Alguém pode codificar a partir desta referência

No OpenDesign, o imagegen-frontend-web já está incluído: Plugins → Skills, selecione-o na barra superior.

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/imagegen-frontend-web/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 tirado 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 imagegen-frontend-web.
Verificado pelo OpenDesign
2026-09-14 Arquivo fonte, caminho, texto de licença e contagem de estrelas foram verificados. Incluído no OpenDesign main (verificado em 2026-08-28); uma execução real não foi registrada nesta página.

Dentro do SKILL.md

  1. REGRA RÍGIDA DE SAÍDA — LEIA PRIMEIROGere sempre uma imagem horizontal separada por seção, nunca combine múltiplas seções em um único frame
  2. VIÉS DE COMPOSIÇÃO DO HERO — LEIA PRIMEIROEvite o padrão excessivamente usado de hero com texto à esquerda/imagem à direita; prefira alternativas como centralizado sobre o fundo ou inferior esquerdo sobre imagem
  3. 1. CONFIGURAÇÃO DE BASE ATIVADefine parâmetros: DESIGN_VARIANCE 8, VISUAL_DENSITY 4, ART_DIRECTION 8, IMPLEMENTATION_CLARITY 9, IMAGE_USAGE_PRIORITY 9, SPACING_GENEROSITY 8, adaptados a partir do prompt
  4. 2. O MOTOR DE VARIAÇÃO COMBINATÓRIAEscolha uma opção em cada categoria: paradigma de tema, personagem de fundo, personagem tipográfico, arquitetura de hero, sistema de seções, 4 componentes de assinatura, 2 linguagens de movimento, espinha narrativa
  5. 4. REGRAS DE MINIMALISMO DO HEROMantenha o hero limpo, título curto e poderoso, priorize o espaço negativo, evite sobrecarregar o primeiro viewport com pills e detalhes
  6. 5. CONTAGEM DE IMAGENS E FRACIONAMENTO DA PÁGINAUma imagem horizontal por seção; landing page padrão de 6, site completo 8; misture variedade de tamanho de seção; garanta continuidade entre os frames
  7. 6. REGRA DE ESCALADA DE CRIATIVIDADEDemonstre ambição criativa real aumentando pelo menos 3: composição, tipografia, contraste de escala, conceito do hero, tratamento de imagem, ritmo de seções, enquadramento
  8. 7. DIREÇÃO DE ARTE COM FOCO EM IMAGEMUse imagens ativamente como material central de design: fotografia com direção de arte, imagens de produto, imagens editoriais, recortes de imagem, painéis emoldurados, composições em camadas
  9. 8. REGRAS ANTI-AI-SLOPProibido: seções centralizadas infinitas, gradientes roxos/azuis de IA, blobs flutuantes, spam de glassmorphism, títulos com gradiente, textos genéricos, tiras de logos em marquee, KPIs falsos
  10. 10. REGRA DE RITMO DE SEÇÕESVarie o ritmo das seções alterando densidade, proporção imagem-texto, alinhamento, escala, espaço em branco, agrupamento de cards, intensidade de fundo; evite caixas de modelo repetidas
  11. 12. DISCIPLINA DE DENSIDADE E ESPAÇAMENTOA página precisa respirar; use espaçamento vertical uniforme entre as seções principais, evite saltos entre apertado e vazio, o espaço em branco é uma ferramenta de design
  12. 13. REGRAS DE COR E MATERIALUse uma paleta controlada: 1 primária, 1 secundária, 1 de destaque, escala neutra; permita gradientes tonais profissionais; proibido blobs de malha arco-íris
A Descrição da Própria Skill
Skill de direção de imagem frontend de elite para gerar referências de design de sites premium e orientadas para conversão. REGRA CRÍTICA DE SAÍDA — gere UMA imagem horizontal separada PARA CADA seção. Uma landing page com 8 seções produz 8 imagens. Nunca comprima várias seções em uma única imagem. Aplica variedade de composição (nem sempre texto à esquerda / imagem à direita), liberdade de imagem de fundo, CTAs variados, escalas de hero variadas (gigante / médio / minimalista compacto), espinha conceitual narrativa, momentos de segunda leitura e uma única paleta consistente em todas as imagens. Otimizado para landing pages, sites de marketing e comps de produto que desenvolvedores ou modelos de código possam recriar com precisão.

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

Frontend Web de ImageGen

Execute imagegen-frontend-web em uma tarefa de design de interface real.

A skill imagegen-frontend-web está incluída no OpenDesign. Baixe o aplicativo, escolha a skill em Plugins → Skills, cole o prompt acima e leia o plano antes do resultado.

Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill imagegen-frontend-web