From dev-team-kit-fv
Generates and adapts visual assets like hero images, backgrounds, illustrations, icons, favicons, and mascots consistent with project visual identity. Analyzes existing repo assets first before generation.
npx claudepluginhub felvieira/claude-skills-fvThis skill is limited to using the following tools:
O Image Generator cria ou adapta assets visuais mantendo consistencia com o contexto real do produto.
Generates, edits, and optimizes marketing images like blog heroes, social graphics, product mockups, and banners using AI tools, Figma, Canva, and web optimization techniques.
Generates square PNG icons with transparent backgrounds for app icons, favicons, and UI using Google Gemini. Supports flat/3D/line/glyph/gradient/minimal styles, sizes 128-1024px, batch sets, reference matching.
Generates professional AI images using Google Gemini via Node CLI for web hero sections, landing pages, slide decks, presentations, and app illustrations. Optimizes prompts and selects aspect ratios.
Share bugs, ideas, or general feedback.
O Image Generator cria ou adapta assets visuais mantendo consistencia com o contexto real do produto.
Esta skill segue GLOBAL.md, policies/execution.md, policies/handoffs.md, policies/token-efficiency.md, policies/stack-flexibility.md, policies/tool-safety.md e policies/evals.md.
t2i) ou derivar asset existente (i2i)Se o repositorio ja tiver imagens, ilustracoes, icones, logos, backgrounds, mascotes ou design tokens, a skill DEVE analisar esse contexto primeiro.
Nunca gerar asset como se o projeto fosse uma folha em branco quando ja existir linguagem visual estabelecida.
Antes de gerar qualquer imagem, verificar nesta ordem:
UI/UX e design tokens do projetopublic/, assets/, src-tauri/icons/ ou caminhos equivalentest2i: usar apenas quando nao houver asset base adequadoi2i: preferir quando o projeto ja tiver mascote, icone, ilustracao ou base visual reutilizavel| Tipo | Quando usar | Skill responsavel |
|---|---|---|
hero | imagem principal acima da dobra | 17 (esta skill) |
mascote | personagem da marca em nova situacao | 17 (esta skill) |
illustration | ilustracao explicativa de conceito | 17 (esta skill) |
background | textura ou fundo de secao | 17 (esta skill) |
layout | imagem compondo secao ou tela inteira | 17 (esta skill) |
icon | icone de funcionalidade ou servico | 17 (esta skill) |
favicon | favicon multi-tamanho + apple-touch-icon + PWA icons | 36 (Web Asset Generator) — dedicada |
social-card (OG / Twitter) | Open Graph, Twitter card, share image | 36 (Web Asset Generator) — dedicada |
pwa-icon | maskable icon, manifest, browserconfig | 36 (Web Asset Generator) — dedicada |
Divisao clara: skill 17 e para assets criativos (geracao do zero ou derivacao). Skill 36 e para assets web operacionais derivados de logo existente (favicon, OG, PWA — pipeline mecanico, nao criativo). Se logo ainda nao existe, skill 17 cria primeiro; depois skill 36 deriva os formatos.
i2i, descrever apenas a mudanca desejada e preservar o restoEsta skill e vendor-agnostic por design (policies/stack-flexibility.md). A tabela abaixo cobre fal.ai como implementacao recomendada — substitua por Replicate, Stability, OpenAI direto ou self-hosted se a stack do projeto ja usa outro provider.
Precos podem mudar sem aviso. Fonte canonica: fal.ai/pricing (verificar antes de batch grande). Esta tabela e snapshot —
docs/skill-guides/image-generator-models.mdtem detalhes mais granulares e link por modelo.
| Modelo | Preco | Quando usar | Endpoints |
|---|---|---|---|
| gpt-image-1-mini | $0.005-$0.052 (varia por qualidade/tamanho) | Volume alto, custo baixo. Variacoes rapidas, testes, scaffolding. | fal-ai/gpt-image-1-mini, .../edit |
| Gemini 2.5 Flash | $0.039/img (fixo) | Producao em escala com custo previsivel. Hero, ilustracao, background padrao. | fal-ai/gemini-25-flash-image, .../edit |
| Gemini 3 Pro (Nano Banana Pro) ⚠ preview | $0.15/img (4K = $0.30) | Prompt dificil, tipografia, composicao complexa. Quando o pedido cita texto na imagem ou layout especifico. Endpoint preview — pode mudar / preco pode subir sem aviso. | fal-ai/gemini-3-pro-image-preview, .../edit |
| gpt-image-1.5 | $0.009-$0.20 (varia) | Acabamento final. Alta fidelidade, aderencia forte ao prompt, preserva composicao/iluminacao. Use no fim do pipeline. | fal-ai/gpt-image-1.5, .../edit |
| Grok Imagine | $0.02 (gen) / $0.022 (edit) | Criativos esteticos baratos e simples de precificar. Estilo "aesthetic-first". | xai/grok-imagine-image, .../edit |
precisa de muita imagem barata? → gpt-image-1-mini
custo fixo previsivel + producao escala? → Gemini 2.5 Flash
prompt dificil / tipografia / composicao? → Gemini 3 Pro
fidelidade visual maxima + aderencia? → gpt-image-1.5
estetico bonito e barato? → Grok Imagine
Para feature visual importante:
Custo total tipico: $0.10-$0.50 por hero finalizado, dependendo de quantas iteracoes.
Ver docs/skill-guides/image-generator-models.md (carregado sob demanda) — schema completo de cada modelo, exemplos por SDK (Python fal-client, JS @fal-ai/client, cURL), parametros (aspect_ratio, quality, num_images, image_size, output_format, safety_tolerance, input_fidelity).
A skill nao impoe vendor. Alternativas:
Se mudar provider depois do projeto ter assets, registrar em ADR (docs/adr/) — mudanca de modelo provoca drift de estilo nos novos assets vs antigos.
Se o projeto usar script local, seguir o fluxo dele. Se nao usar, adaptar ao mecanismo disponivel no ambiente sem acoplar a skill a um vendor unico.
Preferencia de destino:
src-tauri/icons/ para assets nativos de Tauripublic/images/generated/ para web app com public/assets/images/ se a base do projeto usar assets/UI/UX (skill 02): confirma encaixe visual e composicaoAsset Librarian (skill 19): fornece inventario de assets, logos, fontes e tokens visuais existentesFrontend (skill 04): confirma uso real do asset e dimensoesSEO (skill 14): confirma necessidades de alt text e imagem publicaMobile Tauri (skill 15): confirma formatos e tamanhos para icones nativosWeb Asset Generator (skill 36): pega logo gerado por esta skill e deriva favicon multi-tamanho, PWA icons (maskable), Open Graph e Twitter card automaticamente. Handoff direto: quando esta skill cria logo, despachar skill 36 para gerar todos os assets web a partir dele.Orchestrator (skill 09): decide momento certo da geracao no pipelineCost Tracker (skill 30): registra custo por modelo + asset para evitar surpresa na fatura fal.aiEntregar sempre:
Seguir policies/handoffs.md e, quando util, templates/handoff.md.
Codigo deve priorizar clareza. Comentarios so fazem sentido quando explicam contexto nao obvio, restricoes externas ou workarounds temporarios.