Pular para o conteúdo
Skillpedia
Imagens e ícones97 mil · #831

imagegen-frontend-web

Ajuda seu agente a criar imagens de referência para o design de sites. Ele garante que cada seção do site tenha sua própria imagem, promovendo variedade visual e designs que convertem.

O que ela faz

Esta ferramenta cria imagens para te ajudar a desenhar sites. Ela gera uma imagem separada para cada parte do site que você pedir, garantindo que cada imagem seja única e bem pensada.

Quando usar

  • ✓Quando você quer ideias visuais para o design de um site.
  • ✓Ao criar diferentes seções de uma página de destino.
  • ✓Para ter referências de layout e estilo para um novo projeto web.

Exemplo do que pedir para a IA

“Crie um design de site para uma cafeteria, com 6 seções, incluindo uma seção de 'Sobre Nós' e outra de 'Contato'.”

Quer saber mais? Abra as seções abaixo.

Como usar

O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.

Link da skill

https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-web/SKILL.md

Mensagem pronta para colar

Use esta skill para me ajudar: https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-web/SKILL.md Leia o arquivo SKILL.md desse link e siga as instruções dele na minha tarefa.
Como funciona

Você descreve as seções do site que deseja. A IA então cria uma imagem separada para cada seção, focando em um design de alta qualidade e variado, evitando padrões repetitivos.

Instalação

Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.

No terminal (Claude Code, Codex, Cursor), na pasta do projeto:

npx skills add Leonxlnx/taste-skill --skill imagegen-frontend-web

Ou baixe só o arquivo:

curl -L https://raw.githubusercontent.com/Leonxlnx/taste-skill/main/skills/imagegen-frontend-web/SKILL.md -o SKILL.md
Conteúdo técnico (SKILL.md)

Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.

REGRA DE SAÍDA FORÇADA — LEIA PRIMEIRO

Gere uma imagem horizontal separada POR seção. Sempre. Sem exceções.

  • 1 seção solicitada -> 1 imagem
  • 4 seções solicitadas -> 4 imagens
  • 8 seções solicitadas -> 8 imagens
  • 12 seções solicitadas -> 12 imagens
  • "landing page" sem contagem -> padrão de 6 seções -> 6 imagens
  • "modelo de site completo" -> padrão de 8 seções -> 8 imagens

Cada imagem é uma seção, gerada como sua própria chamada de imagem. Nunca combine várias seções em um único quadro. Nunca retorne uma única imagem alta que contenha a página inteira.

Se você só puder renderizar uma imagem por vez, exiba-as sequencialmente na mesma resposta, uma após a outra, até que cada seção tenha sua própria imagem. Anuncie cada uma ("Seção 1 de 8: Hero", "Seção 2 de 8: Barra de Confiança", etc.).

Esta regra substitui qualquer padrão do modelo que queira agrupar a saída em uma única imagem.


VIÉS DE COMPOSIÇÃO DO HERO — LEIA PRIMEIRO

O padrão texto à esquerda / imagem à direita no hero é o padrão de IA mais usado. Ele é permitido, mas não deve ser sua primeira opção.

Antes de recorrer a ele, considere estas alternativas e escolha a que melhor se adapta à marca:

  • centralizado sobre imagem de fundo
  • inferior esquerdo sobre imagem
  • inferior direito sobre imagem
  • topo esquerdo principal
  • empilhado no centro
  • imagem como tela
  • editorial fora da grade
  • minimalista
  • texto à direita / imagem à esquerda (clássico invertido)

Use texto à esquerda / imagem à direita apenas quando for genuinamente a escolha mais forte — não por padrão.


DIRETIVA PRINCIPAL: DIREÇÃO DE ARTE DE IMAGEM NÍVEL AWWWARDS

Você é um diretor de arte de imagem frontend de elite.

Seu trabalho não é gerar arte de IA genérica. Seu trabalho é gerar imagens de referência de design frontend altamente criativas e premium que pareçam conceitos de sites de alto padrão.

A geração de imagens padrão tende a se resumir a padrões repetitivos:

  • hero escuro centralizado
  • brilho de IA roxo/azul
  • formas flutuantes sem sentido
  • spam genérico de cartões de dashboard
  • hierarquia tipográfica fraca
  • seções clonadas
  • "luxo" que é apenas texto serifado bege
  • "criativo" que na verdade é bagunçado e ilegível
  • layouts com muito texto e pouca imagem
  • seções excessivamente densas sem espaço para respirar

Seu objetivo é quebrar agressivamente esses padrões.

A saída deve parecer:

  • dirigida artisticamente
  • premium
  • visualmente memorável
  • estruturada
  • legível
  • amigável à implementação
  • claramente utilizável como referência frontend

Não gere arte de humor aleatória, a menos que seja explicitamente solicitado. Padrão para composições de design de sites.


1. CONFIGURAÇÃO BASE ATIVA

  • VARIANCIA_DESIGN: 8 (1 = rigid / symmetrical, 10 = artsy / asymmetric)
  • DENSIDADE_VISUAL: 4 (1 = airy / gallery-like, 10 = packed / intense)
  • DIRECAO_ARTE: 8 (1 = safe commercial, 10 = bold creative statement)
  • CLAREZA_IMPLEMENTACAO: 9 (1 = loose moodboard, 10 = very codeable UI reference)
  • PRIORIDADE_USO_IMAGEM: 9 (1 = mostly typographic, 10 = strongly image-led)
  • GENEROSIDADE_ESPACAMENTO: 8 (1 = compact / tight, 10 = very spacious / breathable)
  • VARIACAO_LAYOUT: 8 (1 = same anchor repeats, 10 = bold composition variety across sections)
  • DISCIPLINA_CONVERSAO: 8 (1 = pure art moodboard, 10 = clear funnel + premium design balance)

Instrução de IA: Use estes como padrões globais, a menos que o usuário peça claramente algo diferente. Não peça ao usuário para editar este arquivo. Adapte esses valores dinamicamente a partir do prompt.

Interpretação:

  • Prioridade de adaptação: o briefing do usuário sempre substitui os padrões. Leia o prompt cuidadosamente, ajuste os controles, a escala do hero, o modo de fundo, o uso de gradientes e a variedade de composição para corresponder — nunca force uma receita que contradiga o briefing.
  • Se o usuário disser "limpo", reduza a densidade e aumente a clareza.
  • Se o usuário disser "loucamente criativo", aumente a variância e a direção de arte.
  • Se o usuário disser "SaaS premium", mantenha a clareza alta e a direção de arte controlada.
  • Se o usuário disser "editorial", permita tipografia mais forte e mais assimetria.
  • Tendência para conceitos visuais mais fortes, não layouts seguros — mas nunca contra o briefing.
  • Use imagens como material de design principal — incluindo como fundos em tela cheia, não apenas como elementos inline, quando o briefing permitir.
  • Varie a composição: não use o padrão "texto à esquerda, imagem à direita". Mova o texto para o canto inferior esquerdo, centro, canto superior direito, etc., entre as seções.
  • Mantenha as seções arejadas. Não sobrecarregue a página.
  • Prefira um pouco mais de espaço em branco entre as seções do que o padrão.
  • Mantenha o foco na conversão: cada seção tem um trabalho (atrair / comprovar / educar / converter).

Mapeamento de briefing para direção

…

Perguntas frequentes

Quantas imagens a IA gera?

Ela gera uma imagem para cada seção que você pedir. Se você pedir uma página inteira sem especificar, ela criará 6 imagens por padrão.

A IA sempre usa o mesmo estilo de imagem?

Não, a ferramenta é instruída a variar os layouts e composições para evitar que fiquem repetitivos ou previsíveis.

As imagens são prontas para usar em um site?

Sim, as imagens são pensadas para serem referências claras e úteis para quem vai desenvolver o site (programadores e designers).

Detalhes

Descrição original do autor

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 he

repo: Leonxlnx/taste-skill

Popularidade

Estrelas no GitHub
97 mil
Posição no ranking
#831
Licença
MIT
Atualizada em
14/10/2026

Essa skill é útil?

0

Entre para votar.

Comentários

  • …

Mais skills deste repositório

Skills parecidas