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
Mensagem pronta para colar
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-webOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/Leonxlnx/taste-skill/main/skills/imagegen-frontend-web/SKILL.md -o SKILL.mdConteú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
Comentários
- …
Mais skills deste repositório
brandkit
Cria imagens de alta qualidade para kits de marca. Ajuda a desenvolver logos, sistemas de identidade visual e apresentações de marca.
Leonxlnx/taste-skill
industrial-brutalist-ui
Desenvolve interfaces com um estilo industrial e brutalista. É perfeito para dashboards com muitos dados ou sites que precisam de um visual técnico.
Leonxlnx/taste-skill
gpt-taste
Melhora a experiência do usuário e a animação de sites. Garante layouts variados, tipografia legível e animações suaves para uma navegação agradável.
Leonxlnx/taste-skill
image-to-code
Transforma imagens em código de site. Ele cria o design, analisa-o e constrói o site para corresponder o máximo possível à imagem.
Leonxlnx/taste-skill
Skills parecidas
ios-icon-gen
Faz seu agente gerar ícones para aplicativos iOS. Ele usa símbolos da Apple ou ícones de outras fontes para criar os arquivos corretos.
affaan-m/ECC
algorithmic-art
Ajuda seu agente a criar arte usando código, gerando imagens únicas. É útil quando você quer arte original feita por computador.
anthropics/skills
canvas-design
Ajuda seu agente a criar artes visuais bonitas em arquivos. É útil quando você pede um pôster, uma arte ou qualquer design estático.
anthropics/skills