Communitygithub.com

muhdaliyan/zeer

Gere imagens de alta qualidade usando os modelos Imagen do Google para sites, aplicativos e projetos criativos. Use esta skill ao criar sites, landing pages ou qualquer projeto que precise de imagens personalizadas, logotipos, ilustrações ou ativos visuais.

O que é zeer?

Esta skill capacita agentes de IA a gerar imagens profissionais a partir de descrições textuais usando os modelos Google Imagen 4. Ela é ideal para desenvolvimento web, design de aplicativos e fluxos de trabalho criativos, permitindo a criação de logotipos, imagens principais, ilustrações e outros ativos visuais. A skill suporta várias proporções de aspecto (1:1, 4:3, 16:9, 9:16) e estilos, como fotografia, ilustração e design de logotipo. As imagens geradas são automaticamente salvas em diretórios de projeto com nomes de arquivo descritivos, e o código HTML/CSS/React pode ser atualizado para referenciá-las. A skill segue um procedimento claro: primeiro, o agente pergunta se o usuário deseja gerar imagens com IA; se sim, cria prompts detalhados com base no contexto, gera as imagens com a ferramenta `generate_image` e as integra ao projeto. Diretrizes de prompt e exemplos práticos garantem resultados de alta qualidade, enquanto as limitações incluem suporte apenas para prompts em inglês, limite de 25 caracteres para texto em imagens e a necessidade de uma chave de API do Google Cloud.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/muhdaliyan/zeer/tree/HEAD/skills/image-generation
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Prévia

Do README da skill

zeer preview

Documentação

Objetivo

Gerar imagens profissionais e de alta qualidade usando os modelos Google Imagen 4 e integrá-las perfeitamente em projetos web, aplicativos ou fluxos de trabalho criativos. Salvar automaticamente as imagens geradas no diretório apropriado do projeto.

Capacidades

Geração de Imagens

  • Gerar imagens fotorrealistas a partir de descrições textuais
  • Criar logotipos, ilustrações e gráficos para sites
  • Gerar imagens principais, fundos e ativos visuais
  • Suporte para múltiplas proporções de aspecto (1:1, 4:3, 16:9, 9:16)
  • Gerar de 1 a 4 imagens por solicitação
  • Saída de alta resolução com marca d'água SynthID

Integração

  • Salvar automaticamente imagens em diretórios do projeto
  • Gerar nomes de arquivo apropriados com base no conteúdo
  • Criar ativos de imagem para projetos web (HTML, React, etc.)
  • Organizar imagens em estruturas de pastas lógicas

Estilos Suportados

  • Fotografia (retratos, paisagens, fotos de produtos)
  • Ilustrações (arte digital, esboços, pinturas)
  • Logotipos e materiais de marca
  • Elementos de UI e fundos
  • Estilos artísticos históricos (impressionismo, art déco, etc.)

Procedimento

Quando o Usuário Solicitar um Site/Projeto com Imagens

  1. Identificar Necessidades de Imagens

    • Analisar os requisitos do projeto
    • Determinar quais imagens são necessárias (principal, logotipo, ícones, fundos)
    • Perguntar ao usuário se deseja imagens geradas por IA usando Imagen

  2. Confirmar Geração de Imagens

    • Apresentar a opção: "Gostaria que eu gerasse imagens personalizadas usando o modelo de IA Imagen do Google?"
    • Se o usuário concordar, prosseguir com a geração
    • Se o usuário recusar, usar imagens de placeholder ou pular

  3. Gerar Imagens

    • Criar prompts detalhados e específicos com base no contexto do projeto
    • Usar proporções de aspecto apropriadas para cada caso
    • Gerar imagens usando a ferramenta generate_image

  4. Salvar e Integrar

    • Salvar imagens no diretório do projeto (ex.: website-name/images/)
    • Usar nomes de arquivo descritivos (ex.: hero-background.png, logo.png)
    • Atualizar o código HTML/CSS/React para referenciar as imagens geradas
    • Fornecer os caminhos das imagens no código

Solicitações Diretas de Geração de Imagens

Quando o usuário solicitar diretamente a geração de uma imagem:

  1. Entender Requisitos

    • Extrair assunto, estilo e contexto da solicitação do usuário
    • Determinar a proporção de aspecto apropriada
    • Esclarecer quaisquer detalhes ambíguos

  2. Criar Prompt Detalhado

    • Construir um prompt abrangente seguindo as melhores práticas do Imagen
    • Incluir assunto, contexto, estilo e modificadores de qualidade
    • Manter os prompts claros e descritivos

  3. Gerar e Salvar

    • Usar a ferramenta generate_image com o prompt elaborado
    • Salvar no diretório apropriado
    • Exibir o caminho da imagem salva para o usuário

Diretrizes de Prompt do Imagen

Estrutura do Prompt

[Estilo] de [Assunto] [Contexto/Fundo] [Detalhes Adicionais]

Prompts de Fotografia

  • Comece com "Uma foto de..." ou "Uma fotografia de..."
  • Adicione detalhes da câmera: "retrato 35mm", "grande angular 10mm", "macro 60mm"
  • Inclua iluminação: "hora dourada", "iluminação dramática", "luz natural"
  • Adicione tipos de filme: "filme preto e branco", "film noir", "polaroid"

Prompts de Ilustração

  • Especifique o estilo artístico: "arte digital", "pintura em aquarela", "esboço a lápis"
  • Referencie movimentos artísticos: "estilo impressionista", "art déco", "minimalista"
  • Adicione modificadores de qualidade: "altamente detalhado", "profissional", "premiado"

Prompts de Logotipo

  • Use o formato: "Um logotipo [estilo] para uma empresa de [indústria] em um fundo de cor sólida. Inclua o texto [nome]."
  • Estilos: minimalista, moderno, tradicional, geométrico, abstrato
  • Mantenha o texto em menos de 25 caracteres

Modificadores de Qualidade

Adicione estes para melhores resultados:

  • "altamente detalhado"
  • "profissional"
  • "premiado"
  • "alta resolução"
  • "fotorrealista"
  • "qualidade 4K"

Proporções de Aspecto

Escolha com base no caso de uso:

  • 1:1 (Quadrado) - Mídias sociais, imagens de perfil, ícones
  • 4:3 (Tela Cheia) - Fotografia geral, fotos de produtos
  • 3:4 (Retrato) - Layouts verticais, telas móveis
  • 16:9 (Widescreen) - Imagens principais, banners, paisagens
  • 9:16 (Retrato) - Designs mobile-first, stories

Ferramenta: generate_image

IMPORTANTE: Esta é uma ferramenta SIMULADA para demonstração. A implementação real requer:

  1. Chave de API do Google Cloud com acesso ao Imagen
  2. Integração com a biblioteca Python google.genai
  3. Configuração adequada da API

Uso

generate_image(
    prompt="Um logotipo minimalista moderno para uma startup de tecnologia em um fundo azul sólido",
    aspect_ratio="1:1",
    number_of_images=1,
    output_dir="website/images",
    filename="logo.png"
)

Parâmetros

  • prompt (obrigatório): Descrição textual detalhada da imagem
  • aspect_ratio (opcional): "1:1", "4:3", "3:4", "16:9", "9:16" (padrão: "1:1")
  • number_of_images (opcional): 1-4 (padrão: 1)
  • output_dir (opcional): Diretório para salvar as imagens (padrão: "generated_images")
  • filename (opcional): Nome de arquivo personalizado (padrão: gerado automaticamente)

Exemplos

Exemplo 1: Imagem Principal de Site

Usuário: "Crie uma landing page para uma cafeteria"

IA: "Criarei uma landing page para sua cafeteria. Gostaria que eu gerasse uma imagem personalizada usando o Imagen AI do Google?"

Usuário: "Sim, por favor"

IA: [Gera imagem com o prompt]
"Uma fotografia profissional do interior aconchegante de uma cafeteria, iluminação quente, mesas de madeira, máquina de espresso ao fundo, atmosfera convidativa, proporção 16:9"

[Salva em coffee-shop/images/hero-background.jpg]
[Atualiza o HTML para usar a imagem]

Exemplo 2: Geração de Logotipo

Usuário: "Gere um logotipo para meu aplicativo de fitness chamado FitTrack"

IA: [Gera com o prompt]
"Um logotipo minimalista moderno para uma empresa de fitness em um fundo de cor sólida. Inclua o texto FitTrack. Formas geométricas, energético, profissional"

[Salva em generated_images/fittrack-logo.png]

Exemplo 3: Múltiplos Ativos

Usuário: "Crie um site de portfólio e gere imagens para ele"

IA: "Criarei seu site de portfólio. Gostaria que eu gerasse imagens personalizadas (imagem de fundo principal, placeholder de foto de perfil, miniaturas de projetos) usando o Imagen AI?"

Usuário: "Sim, gere-as"

IA: [Gera múltiplas imagens]
1. Imagem de fundo principal: "Padrão geométrico abstrato, moderno, profissional, cores suaves, 16:9"
2. Miniatura de projeto 1: "Ilustração minimalista de tecnologia, linhas limpas, azul e branco, 4:3"
3. Miniatura de projeto 2: "Mockup de design criativo, interface moderna, profissional, 4:3"

[Salva todas em portfolio/images/]
[Atualiza HTML/CSS com referências de imagem]

Melhores Práticas

  1. Sempre Peça Permissão - Antes de gerar imagens, pergunte se o usuário quer imagens geradas por IA
  2. Prompts Contextuais - Adapte prompts para corresponder ao estilo e propósito do projeto
  3. Proporções Apropriadas - Escolha proporções que se ajustem ao caso de uso
  4. Nomes de Arquivo Descritivos - Use nomes de arquivo claros e semânticos (hero-bg.png, não image1.png)
  5. Estrutura Organizada - Salve imagens em diretórios lógicos (images/, assets/, etc.)
  6. Qualidade em Primeiro Lugar - Use modificadores de qualidade para resultados profissionais
  7. Itere se Necessário - Se o usuário não estiver satisfeito, refine o prompt e regenere

Integração com Projetos Frontend

Ao construir sites com esta skill:

  1. Criar o diretório de imagens primeiro
  2. Gerar imagens antes de escrever HTML/CSS
  3. Usar caminhos relativos no código: <img src="images/hero.jpg">
  4. Adicionar texto alternativo descrevendo a imagem gerada
  5. Considerar imagens responsivas com múltiplos tamanhos

Limitações

  • O Imagen suporta apenas prompts em inglês
  • Texto em imagens limitado a 25 caracteres
  • Imagens geradas incluem marca d'água SynthID
  • Requer acesso à API do Google Cloud
  • Limites de taxa se aplicam com base no nível da API

Notas

Esta skill funciona melhor quando combinada com:

  • frontend-design skill para criação completa de sites
  • code-helper skill para configuração de projetos
  • file-operations skill para organização de ativos

Habilidades Relacionadas

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community