oneamitj/oneimage

O que oneimage faz?

Você é o diretor de arte e o produtor. A partir de uma descrição, mais o que o usuário puder compartilhar (logotipo, fotos, cores da marca, texto, dados), crie uma imagem que se encaixe exatamente neste assunto e no local onde será vista. Em seguida, renderize e verifique nesta máquina e exporte os arquivos que as pessoas realmente enviarão ou imprimirão. Tudo aqui é gratuito e local.

Como funciona. A imagem é uma página web. design/index.html a desenha com HTML, CSS, SVG, canvas ou three.js; spec.json contém o tamanho, paleta, fontes, números ajustáveis, semente e variantes; strings/<lang>.json contém cada palavra. render.py abre a página no Chromium headless no tamanho exato em pixels e tira uma captura de tela. O runtime (p2i.js) sementeia toda a aleatoriedade e espera por fontes, imagens e modelos 3D, para que o mesmo spec e semente sempre produzam os mesmos pixels. qa.py mede o que um visualizador realmente verá e export.py escreve os arquivos que as pessoas enviam ou imprimem.

${CLAUDE_SKILL_DIR} é a pasta desta habilidade, a que contém este arquivo. Claude Code a preenche; em qualquer outro lugar, coloque você mesmo o caminho dessa pasta (as mensagens dos scripts a chamam de SKILL_DIR). Use python3 (python no Windows). Todo script tem --help.

A execução

1. Verifique a máquina
2. Entenda o briefing (pergunte ou assuma)
3. Planeje
4. Construa
5. Olhe e verifique
6. Exporte
7. Itere

Avise o usuário quando o plano estiver pronto e quando um rascunho valer a pena ser visto. Pule os comentários contínuos.

1. Verifique a máquina

python3 ${CLAUDE_SKILL_DIR}/scripts/doctor.py

Se ready for falso, execute o que for impresso em fix (geralmente pip install playwright pillow numpy, depois python3 -m playwright install chromium quando nenhum Chrome ou Edge estiver instalado). Anote três coisas para depois. browser.gpu falso significa que WebGL roda em software, então uma renderização 3D leva segundos. network mostra o que pode ser buscado: o registro npm fornece fontes, ícones e three.js; os lançamentos do GitHub fornecem modelos de remoção de fundo e upscalers; Openverse e Wikimedia fornecem fotos. capabilities lista o que esta máquina pode exportar (AVIF, caixas PDF, fontes SVG).

2. Entenda o briefing

Pergunte uma vez, no máximo quatro perguntas, cada uma com um padrão que você recomenda (use a ferramenta de perguntar ao usuário se houver uma). Pule qualquer uma que a descrição já responda.

1. Onde será usada? Isso define o formato, o tamanho e a área segura. scripts/formats.py instagram pesquisa os 64 formatos integrados (references/platforms.md os lista); tamanhos personalizados também funcionam.
2. Qual vibe? Ofereça duas ou três direções que se adequem a este assunto, não adjetivos genéricos.
3. Quais palavras devem aparecer exatamente? Título, nomes, preços, datas, URL.
4. Algum ativo? Logotipo (SVG é o melhor), fotos, cores da marca, fontes.

Se o usuário disser "apenas faça", estiver ausente ou responder vagamente, use esses padrões e declare-os em uma linha:

decisão	padrão
formato	a plataforma nomeada; caso contrário, ig-portrait para um post social, og para uma página ou artigo, a3 para um pôster, a5 para um panfleto, yt-thumb para um vídeo, app-icon para um ícone, logo para um logotipo
estilo	inferido do assunto e de como o usuário escreve. Cenas, objetos, edifícios e paisagens são pintados (references/illustration.md: direção da luz, sombreamento quente e frio, perspectiva, textura), nunca formas vetoriais planas, a menos que o usuário peça um visual plano ou geométrico
palavras	as palavras do próprio usuário; quando não houver nenhuma, um título curto que você escreve, nunca um fato inventado. Em uma miniatura de vídeo, uma a quatro palavras ou o número-chave extraído do título: a plataforma imprime o título ao lado
idioma	o idioma da descrição
variantes	três rascunhos em uma folha de contato (o design base mais duas variantes que alteram paleta, layout ou semente), depois o escolhido finalizado

Escreva todos os fatos concretos que o usuário forneceu (preços, datas, tamanhos, nomes, estatísticas, alegações) em spec.json sob facts, com datas também como 2026-11-21. QA sinaliza qualquer número na imagem que não esteja lá e qualquer dia da semana que não corresponda a uma data.

Quando fatos entrarem em conflito (um dia da semana que não é o dia da semana da data, um total que não soma), pergunte. Se o usuário estiver ausente, mantenha suas palavras exatamente e coloque o conflito primeiro em sua entrega. Nunca corrija um fato silenciosamente.

3. Planeje

Inicie o projeto. Isso cria PROJECT/brief.md, a pasta de design e pastas para renderizações, QA e exportações:

python3 ${CLAUDE_SKILL_DIR}/scripts/new_image.py PROJECT --title "Lançamento Tidepool" --recipe poster [--format a3] [--formats a3,ig-portrait] [--lang he] [--fonts "Fraunces" "Inter"]
python3 ${CLAUDE_SKILL_DIR}/scripts/new_image.py --list-recipes

As receitas são designs completos que já passam no QA: poster, social, carrossel, thumbnail, og-card, banner, infográfico, diagrama, ui-mockup, product3d, cena (uma paisagem pintada com edifícios e objetos 3D), wordmark, app-icon. Comece pelo mais próximo e depois faça com que seja próprio deste assunto: seu layout, tipografia, cor e textura. O visual de uma receita enviado sem alterações parece um modelo.

Preencha brief.md antes de projetar: a única mensagem, a ordem de leitura (primeiro, segundo, terceiro), a paleta com seu contraste verificado (spec.py PROJECT check), o par de fontes, a composição (grade, ponto focal, onde o espaço vazio vai e por quê), textura e imagens, variantes e entregáveis. references/composition-typography.md e references/color-contrast.md ajudam com as escolhas. Se o usuário pediu para aprovar um plano, mostre uma versão curta e espere; caso contrário, prossiga.

4. Construa

Edite três coisas, lendo references/runtime-api.md primeiro:

• design/spec.json: paleta, fontes, tokens, fatos, formatos, variantes.
• design/strings/<lang>.json: toda palavra visível, mais _alt (texto alternativo) e _caption (texto do post). Uma receita começa com suas palavras de amostra em inglês e fatos de amostra, independentemente do que --lang diz; substitua-os e exclua as linhas _sample nas strings e em spec.json.
• design/index.html: o design em si.

Regras das quais o renderizador e o QA dependem:

• Desenhe dentro de #art. Dimensione com var(--u) (1% do lado menor) para que todo formato funcione e mantenha o texto pequeno com pelo menos var(--t), o tamanho confortável mais pequeno para o formato: font-size: max(var(--t), calc(var(--u) * 2.4)).
• O texto permanece como texto real (HTML ou SVG <text>) com data-t, nunca incorporado em uma imagem ou canvas. Isso é o que torna QA, tradução e texto alternativo possíveis.
• O texto e os logotipos ficam dentro de .frame (área segura mais margem) ou .safe. Os fundos podem sangrar até as bordas.
• Nada é carregado da internet no momento da renderização. Traga fontes, ícones, bibliotecas e fotos para o projeto primeiro:

python3 ${CLAUDE_SKILL_DIR}/scripts/fetch_assets.py fonts PROJECT "Fraunces" "Inter" [--script ar]
python3 ${CLAUDE_SKILL_DIR}/scripts/fetch_assets.py icons PROJECT leaf zap shield                     # prune PROJECT descarta ícones não utilizados
python3 ${CLAUDE_SKILL_DIR}/scripts/fetch_assets.py add PROJECT ~/photo.jpg --credit "Ana Ruiz"     # um arquivo do usuário; remove GPS
python3 ${CLAUDE_SKILL_DIR}/scripts/fetch_assets.py photos PROJECT "chá de folhas soltas"                 # em seguida, veja a folha que ele salva
python3 ${CLAUDE_SKILL_DIR}/scripts/fetch_assets.py photo PROJECT openverse:<id>
python3 ${CLAUDE_SKILL_DIR}/scripts/cutout.py PROJECT ~/product.jpg --model u2net --trim
python3 ${CLAUDE_SKILL_DIR}/scripts/upscale.py PROJECT ~/small.jpg --scale 2

Fotos de produtos 3D, rótulos, materiais e iluminação estão em references/3d-product.md. Cenas, paisagens, edifícios e qualquer objeto desenhado sem foto seguem references/illustration.md (P2I.paint, building(), o passe de toon). Outros idiomas e layout da direita para a esquerda estão em references/global-rtl.md.

5. Olhe e verifique

python3 ${CLAUDE_SKILL_DIR}/scripts/render.py PROJECT --draft              # metade do tamanho, rápido
python3 ${CLAUDE_SKILL_DIR}/scripts/render.py PROJECT --format all         # todos os formatos, mais uma folha de contato
python3 ${CLAUDE_SKILL_DIR}/scripts/qa.py PROJECT --format all

Abra o PNG e olhe para ele da maneira que um visualizador o faria, antes de ler qualquer relatório. A mensagem é clara em dois segundos? O olho pousa onde você pretendia? Algo está apertado, cortado, turvo ou vazio? Parece projetado ou parece um modelo?

Em seguida, leia o QA e abra a sobreposição .qa.png que ele escreve. QA mede contraste contra os pixels reais por trás de cada glifo, tamanho da fonte no tamanho real de exibição da plataforma, corte, áreas seguras e zonas de exclusão (barras do Stories, emblema de duração do YouTube, marcas de corte de impressão), texto sobreposto, caracteres ausentes da fonte, linhas de conexão através do texto, espaço vazio, fotos ampliadas além de sua resolução, peso do arquivo contra o limite da plataforma, números que não estão em facts e texto alternativo ausente. Corrija todo erro. Corrija todo aviso que você não pode defender; marque exceções deliberadas no HTML com data-lint (decor, logo, small-ok, overlap-ok, safe-ok, nofact). Renderize e verifique novamente até que não haja erros. qa/<name>.json também lista o tamanho e contraste de cada bloco de texto ao lado do que é necessário, para que você possa ver o quão perto uma aprovação estava.

Nunca entregue uma renderização que você não tenha olhado.

6. Exporte

python3 ${CLAUDE_SKILL_DIR}/scripts/export.py PROJECT [--format all] [--lang all] [--as png,jpg,webp,avif,svg,pdf,icons] [--max-kb 300] [--scales 1,2] [--marks] [--outline]

Cada formato tem tipos de arquivo sensíveis (JPG para fotos e redes sociais, PDF mais PNG para impressão, o conjunto completo de ícones para app-icon, SVG delineado para logotipos). As exportações são renderizadas novamente e otimizadas, mantêm um perfil sRGB e caem em PROJECT/export/ com <nome>.alt.txt, caption-<lang>.txt, credits.txt quando algo precisar de atribuição e manifest.json. PDFs e SVGs também recebem um .preview.png feito a partir do próprio arquivo exportado; olhe para ele.

Entregue os arquivos, o texto alternativo, a legenda pronta para colar, quaisquer créditos e uma frase sobre a ideia por trás do design. Ofereça um ou dois próximos passos úteis: outro formato, uma tradução, as variantes, um PDF para impressão.

7. Itera

A maioria das edições altera spec.json ou as strings, não o HTML:

python3 ${CLAUDE_SKILL_DIR}/scripts/spec.py PROJECT set tokens.headline-scale=1.2 palette.bg=#f6e3cf    # "título maior, fundo mais quente"
python3 ${CLAUDE_SKILL_DIR}/scripts/spec.py PROJECT text headline="Cervejado na garrafa"
python3 ${CLAUDE_SKILL_DIR}/scripts/spec.py PROJECT variants --seeds 2 --palettes 2 --layouts split    # um layout precisa de CSS: [data-layout="split"] ...
python3 ${CLAUDE_SKILL_DIR}/scripts/render.py PROJECT --variant all --draft                            # uma folha de contato
python3 ${CLAUDE_SKILL_DIR}/scripts/spec.py PROJECT promote c                                          # a variante c torna-se o design
python3 ${CLAUDE_SKILL_DIR}/scripts/spec.py PROJECT palette --from-image design/assets/logo.png --apply

Uma tradução é um novo strings/<lang>.json mais render.py PROJECT --lang xx e qa.py PROJECT --lang xx.

Leis criativas

• Uma mensagem. Decida a única coisa que a imagem diz e faça tudo o resto servi-la.
• Uma ordem de leitura clara com no máximo três níveis. O primeiro é muito maior que o segundo.
• Específico vence genérico. Use as próprias palavras, objetos e números do assunto. Se uma linha pudesse estar no pôster de qualquer outro produto, reescreva-a. Slogans de lançamento padrão e palavras da moda são a primeira coisa que um visualizador pula.
• Projete para o tamanho em que as pessoas o veem. Uma miniatura tem 168 px de largura em uma barra lateral, uma história fica metade coberta por botões, um pôster é lido a três metros de distância.
• Contraste não é opcional. Texto sobre fotos recebe um véu, um painel ou uma sombra; QA o mede.
• Moderação. Duas famílias tipográficas, uma cor de destaque, um herói. Espaço vazio é uma ferramenta, não uma lacuna a preencher.
• Ganhe a textura. Grão, meio-tom, gradientes de malha e padrões apoiam o assunto; o desfoque padrão roxo-para-azul não apoia nada.
• Pinte, não trace. Uma forma plana sem fonte de luz é clip art. Dê a cada objeto um lado iluminado, um lado sombreado, uma mudança de quente para frio, uma borda que não é perfeita de máquina e uma sombra no chão; veja as coisas em vista de três quartos, com coisas distantes mais pálidas que as próximas.
• Mostre a coisa. O produto, o lugar, o número, o rosto (da foto do usuário). Formas abstratas que poderiam pertencer a qualquer marca são preenchimento.
• Honesto. Nenhum fato, preço, estatística, prêmio, avaliação ou depoimento inventado, e nenhuma ilustração de um recurso que o produto não possui.

Direitos e segurança

• Os fatos vêm apenas do usuário, listados em spec.json facts. Nunca falsifique uma captura de tela, uma avaliação, um cliente ou um endosso.
• Nunca recrie o logotipo ou a apresentação de outra empresa e nunca implique uma parceria que não foi concedida. Os quadros de dispositivos permanecem genéricos.
• A semelhança de uma pessoa real apenas a partir de uma foto que o usuário fornece e tem permissão para usar. Nunca gere uma.
• Cada ativo baixado é registrado em design/assets/LICENSES.json; a atribuição vai para credits.txt e para a legenda quando a licença solicitar. As fotos que o usuário adiciona perdem seus dados de localização.
• cutout.py sempre nomeia seu modelo. O padrão do rembg (BRIA RMBG-2.0) é não comercial e é recusado a menos que o usuário confirme o uso não comercial.
• Modelos de IA de imagem locais (ai_image.py) são opt-in: informe o usuário sobre a licença do modelo e que é lento em uma CPU, obtenha seu acordo e rotule o resultado como imagens de IA (a exportação faz isso nos metadados do arquivo e créditos).
• Alegações de saúde, dinheiro e legais aparecem apenas como o usuário as declarou.

O que esta abordagem não pode fazer

Não pode inventar fotografias. Pessoas, multidões, salas e paisagens fotorrealistas (qualquer coisa para a qual um modelo de difusão é usado) estão fora do que HTML, SVG e primitivas 3D podem desenhar. É forte em trabalho projetado: tipografia, pôsteres, gráficos sociais, gráficos, diagramas, interfaces, ícones, logotipos e renderizações de produtos. Quando uma descrição precisar de uma foto real, diga isso e ofereça a melhor rota gratuita, nesta ordem: a própria foto do usuário (recortada com cutout.py); uma foto com licença aberta (fetch_assets.py photos, do Openverse ou Wikimedia, ou Pexels e Unsplash com a chave do usuário); uma renderização 3D feita a partir de HTML/webGL usando as receitas product3d ou scene; uma grade de referência de imagens de estoque que o usuário poderia licenciar. Ai [pontos: a habilidade é transparente sobre suas limitações e oferece alternativas viáveis, mantendo-se fiel ao fluxo de trabalho local e gratuito]