gpt-image-2
ConardLi/garden-skills
Gera e edita imagens usando o GPT Image 2 em três modos: geração direta por meio de API compatível com a OpenAI, engenharia de prompts para ferramentas de imagem nativas do host ou orientação exclusiva sobre prompts. Inclui mais de 80 modelos estruturados para pôsteres, maquetes de interface do usuário, recursos visuais de produtos, mapas, slides e muito mais.
...Expandir tudoGPT Image 2
Esta é uma habilidade focada no GPT Image 2, que funciona nos três ambientes de execução, mas apresenta diferenças significativas de comportamento. O primeiro passo é determinar o modo de execução atual.
Ela realiza apenas dois tipos de tarefas relacionadas a imagens:
- Geração de imagens:
POST /images/generations - Edição de imagens:
POST /images/edits
Este documento aborda: modo de execução, estrutura da habilidade, variáveis de ambiente, regras de salvamento e nomenclatura, índice de modelos e fluxo de trabalho sensível ao contexto. Todos os modelos detalhados estão localizados em references/, organizados em camadas:
- Nível 1: diretório de categorias
- Nível 2: arquivos Markdown de modelos individuais
Modo de execução (leitura obrigatória; certifique-se disso antes de fazer qualquer coisa)
Esta Skill vem com um script de detecção leve; execute-o uma vez e, com base nos resultados, decida como proceder:
node skills/ gpt-image-2/scripts/check-mode.js
# Para obter resultados estruturados para uso pelo programa de nível superior:
node skills/ gpt-image-2/scripts/check-mode.js --json
A saída apresentará mode = A / A? / B-or-C, além de uma recomendação. Os três modos são definidos da seguinte forma:
Modo A · Geração de imagens local no Garden
Condições de acionamento: a variável de ambiente ENABLE_GARDEN_IMAGEGEN está definida como verdadeiro ( 1 / true / yes / on ) e existe uma OPENAI_API_KEY.
Comportamento: execução completa de ponta a ponta do processo “escolher modelo → escrever prompt → chamar o script → gerar imagem e salvar no disco”.
- Use
scripts/generate.jspara gerar imagens a partir de texto escripts/edit.jspara editar imagens existentes. - Por padrão, o prompt é salvo em
garden- gpt-image-2/prompt/, e as imagens são salvas emgarden- gpt-image-2/image/. - Este é o modo mais poderoso: você é o “dono” da ferramenta de imagens.
Modo B · Host-Native: delega a geração de imagens ao host
Condições de acionamento: o Garden não está habilitado ( ENABLE_GARDEN_IMAGEGEN não está definido ou está definido como falso), mas o agente do host atual possui uma ferramenta de geração de imagens ou um MCP de imagens.
Sinais típicos de identificação (você deve verificar por conta própria):
- Seu conjunto de ferramentas contém nomes como
image_generation/imagegen/dalle/nano_banana/mcp__*image*/make_image/ ou similares - O usuário chama esta Skill em clientes que suportam geração nativa de imagens, como ChatGPT / Codex / Gemini / Cursor
- O usuário diz explicitamente “use sua própria ferramenta para gerar imagens”
Comportamento: esta Skill se reduz a orientações de engenharia de prompts —
- Continue seguindo o fluxo “escolher modelo → preencher campos → renderizar o prompt final”.
- Não chame
os scripts do Node/generate.js(sem chave de API, a operação falhará inevitavelmente). - Chame diretamente a ferramenta de imagem integrada ao host, usando o prompt renderizado como entrada.
- Caso o usuário deseje, pode salvar o arquivo do prompt em
garden- gpt-image-2/prompt/, maso destino da imagem é decidido pelo anfitrião e não é obrigatório.
Modo C · Advisor: Consultor exclusivo de prompts
Condições de acionamento: o Garden não está ativado e o agente anfitrião também não possui nenhuma ferramenta de geração de imagens.
Comportamento: esta Skill se transforma em um “consultor para redação de prompts de alta qualidade” —
- segue o fluxo “escolher modelo → preencher campos → gerar o prompt final”, solicitando informações ao usuário caso haja lacunas.
- A prompt final é exibida diretamente para o usuário + uma cópia é salva em
garden- gpt-image-2/prompt/.- .md - Anexe uma breve sugestão de “como usar” (por exemplo: insira no ChatGPT / Midjourney / DALL·E / Sora / Nano Banana / seu próprio backend / gateway GPT Image 2 de terceiros).
- Não finja que a geração da imagem foi bem-sucedida. Informe claramente ao usuário: “Foi gerado um prompt de alta qualidade pronto para uso; execute-o com sua ferramenta de imagem.”
Tabela de decisão de padrões
| Condição | Padrão | Chamar o script? | Salvar o prompt no disco? | Imagem de gravação? |
|---|---|---|---|---|
ENABLE_GARDEN_IMAGEGEN=1 + com KEY |
A | ✅ generate.js / edit.js |
✅ Automático | ✅ Automático |
ENABLE_GARDEN_IMAGEGEN=1, mas sem KEY |
A? | ❌ (é preciso ter uma chave primeiro) | — | — |
| Não ativado + o host possui uma ferramenta de imagens | B | ❌ (usar a ferramenta do host) | Opcional | A critério do anfitrião |
| Não ativado + o host não possui ferramentas de imagem | C | ❌ | ✅ Obrigatório | ❌ (impossível) |
Quando o modo não estiver definido
- Se você não tiver certeza se está no modo B ou C, pergunte diretamente ao usuário: “Você prefere gerar a imagem com a ferramenta de imagem do seu ambiente ou basta eu escrever a prompt?”
- Modo A: falha na execução do script (401 / rede / limite) → exibir mensagem de erro e perguntar: “Quer mudar para o modo B ou C?”
O usuário seleciona a ferramenta
Quando esta habilidade precisar fazer perguntas ao usuário, siga as seguintes regras:
- Dê prioridade à ferramenta de entrada do usuário fornecida pelo ambiente de execução atual.
- Se não houver uma ferramenta correspondente, faça perguntas curtas em texto simples com números.
- Sempre que for possível agrupar perguntas, faça-as todas de uma vez.
Estrutura do skill
scripts/check-mode.js: execute este arquivo primeiro para verificar o modo de execução (A / B / C)scripts/generate.js: geração de imagens a partir de texto (utilizado apenas no Modo A)scripts/edit.js: edita imagens com base na imagem original ou em máscaras (usado apenas no Modo A)scripts/shared.js: lógica para compartilhamento de solicitações, salvamento e leitura de variáveis de ambientereferences/: Modelos de prompts estruturados em camadas (utilizados nos três modos: A / B / C)
Variáveis de ambiente
A configuração é lida na seguinte ordem:
- Parâmetros da CLI
process.env/.env /.gateway.env ~/.gateway.env
Variáveis principais:
ENABLE_GARDEN_IMAGEGEN— Seletor de modo. Ativa o Modo A quando definido como1/true/yes/on; se não estiver definido ou tiver outro valor, entra no Modo B / C.OPENAI_API_KEY— Obrigatório no Modo A; não é necessário nos Modos B e C.OPENAI_BASE_URL— Padrão:https://api.openai.com/v1; pode apontar para um gateway compatível de terceiros.OPENAI_IMAGE_MODEL— Padrãogpt-image-2, pode ser substituído por modelos suportados pelo gateway (comogpt-image-1/dall-e-3).
A implementação padrão funciona com a interface compatível com a OpenAI, sem vinculação a nenhum gateway de terceiros.
Diretório de saída padrão
Caso o usuário não especifique explicitamente o caminho de saída, será utilizado uniformemente o seguinte na área de trabalho atual:
- Diretório de prompts:
garden- gpt-image-2/prompt/( recomendado para os três modos A, B e C, para facilitar a reutilização e o gerenciamento de versões) - Diretório de imagens:
garden- gpt-image-2/prompt/( usado apenas no Modo A; no Modo B, fica a critério do usuário; no Modo C, não são geradas imagens)
Se o diretório não existir, o script (Modo A) deve criá-lo automaticamente; nos Modos B e C, execute manualmente o comando ` mkdir -p ` antes de escrever o prompt.
Regras padrão de nomenclatura
Caso o usuário não especifique explicitamente o nome do arquivo, o script deve gerar automaticamente um nome relacionado à tarefa atual e acrescentar o carimbo de data e hora atual, evitando nomes duplicados.
Regras de nomenclatura:
- Prompt:
garden- gpt-image-2/prompt/- .md - Imagens:
garden- gpt-image-2/image/- .png
Onde:
: extrai automaticamente um nome curto relevante com base na solicitação do usuário atual: carimbo de data e hora atual, por exemplo,20260424-153045
Exemplo:
garden- gpt-image-2/prompt/live-commerce-ui-20260424-153045.mdgarden- gpt-image-2/image/live-commerce-ui-20260424-153045.pnggarden- gpt-image-2/prompt/vr-headset-exploded-view-20260424-153102.mdgarden- gpt-image-2/image/vr-headset-exploded-view-20260424-153102.png
Regras de salvamento do prompt
| Modo | É obrigatório salvar o prompt? | Descrição |
|---|---|---|
| Modo A | ✅ Obrigatório | É necessário gravar em disco para entrar no processo de geração/edição propriamente dito |
| Modo B | Recomendado | Recomendação padrão para facilitar a reutilização; se o usuário disser “não é necessário”, pode-se pular essa etapa |
| Modo C | ✅ Obrigatório | O usuário deve pegar o prompt e executá-lo por conta própria; se não for gravado no disco, é como se não tivesse feito nada |
Regras gerais (aplicáveis aos três modos):
- Se o usuário fornecer explicitamente o caminho do arquivo de prompt, esse arquivo poderá ser usado diretamente como entrada.
- Se o usuário fornecer diretamente um prompt de texto, o prompt final também deverá ser salvo em
garden- gpt-image-2/prompt/. - Se o usuário especificar explicitamente a opção `
--prompt-output`, o caminho indicado pelo usuárioserá respeitado. - Caso contrário, use a regra de nomenclatura padrão para salvar automaticamente.
Regras de salvamento de imagens (apenas no Modo A)
- Se o usuário especificar explicitamente
--imageou --output, o caminho indicado pelo usuárioserá respeitado. - Caso contrário, o arquivo será salvo por padrão em
garden- gpt-image-2/image/. - O nome do arquivo deve estar relacionado à semântica da tarefa atual e incluir um carimbo de data/hora.
No Modo B, a forma de salvamento é determinada pela ferramenta de imagem do host; no Modo C, não são geradas imagens.
Uso rápido
0. Verificar o modo de execução ( primeiro passo de qualquer tarefa )
node skills/ gpt-image-2/scripts/check-mode.js
A saída informará se o modo atual é A, B ou C, determinando se os arquivos `generate.js ` ou `edit.js ` serão chamados posteriormente. Os passos 1 a 4 a seguir se aplicam apenas no Modo A.
1. Geração de imagens a partir de texto (Modo A)
node skills/ gpt-image-2/scripts/generate.js \
--prompt "Uma fofa lontra marinha bebê" \
--size 1024x1024 \
--quality high
2. Geração de imagens com arquivo de prompts (Modo A)
node skills/ gpt-image-2/scripts/generate.js \
--promptfile garden- gpt-image-2/prompt/poster-20260424-153045.md
3. Editar imagens existentes (Modo A)
node skills/ gpt-image-2/scripts/edit.js \
--image assets/source.png \
--prompt "Substitua o fundo por um cenário de estúdio limpo"
4. Edição parcial com máscara (Modo A)
node skills/ gpt-image-2/scripts/edit.js \
--image assets/source.png \
--mask assets/mask.png \
--prompt "Substitua apenas a área mascarada por um vaso de vidro"
5. “Como usar” os Modos B e C
Sem entrada de linha de comando — neste momento, esta Skill funciona apenas como um prompt:
- Modo B: renderizar o prompt final → chamar a ferramenta de
geraçãodeimagens (image_generation) do próprio host (passando o prompt como parâmetro) → obter a imagem. - Modo C: gerar o prompt final → salvar em
garden- gpt-image-2/prompt/→ exibir o conteúdo diretamente ao usuário → indicar ao usuário em quais ferramentas de imagem ele pode reutilizá-lo diretamente.- .md
Como funcionam os modelos JSON
Quando um modelo JSON for fornecido na pasta `references/`, utilize-o seguindo as regras abaixo:
- Primeiro, localize a categoria mais próxima no arquivo
SKILL.md. - Em seguida, localize o arquivo de modelo específico.
{argument ...}no modelo representa parâmetros substituíveis.- Os valores fornecidos explicitamente pelo usuário devem ser inseridos diretamente.
- Se o usuário não tiver fornecido um valor, mas o modelo estiver marcado como
“default”, use o valor padrão inicialmente. - Se a falta de informações afetar significativamente o resultado, pergunte pro usuário.
- O usuário também pode solicitar explicitamente que “você gere aleatoriamente”; nesse caso, é possível manter os valores padrão ou realizar uma aleatorização razoável dentro dos limites permitidos pelo modelo.
Regras para fazer perguntas
Quando o modelo não contiver variáveis-chave, não pergunte de forma genérica “Que estilo você deseja?”. Faça perguntas precisas com base nos campos do modelo.
Por exemplo, se o modelo de interface de transmissão ao vivo não tiver um apresentador definido, pergunte prioritariamente:
- Quem é o apresentador?
- Usará foto de pessoa real, nome de celebridade, descrição de personagem ou geração totalmente aleatória?
Quando faltam informações sobre o produto, deve-se perguntar:
- Qual é o nome do produto?
- O preço do produto está definido?
- Você deseja que eu preencha automaticamente o conteúdo dos comentários e dos presentes?
Índice de modelos
Leia apenas os arquivos de modelo específicos mais próximos, de acordo com o tipo de tarefa, em vez de ler toda a pasta references/ de uma só vez.
1. Documentação geral sobre metodologia
Leia primeiro:
references/prompt-writing.md
Aplicável a:
- você ainda não decidiu como estruturar o modelo JSON
- Você precisa determinar quais campos devem ser solicitados, quais podem ter valores padrão e quais podem ser aleatórios
- Você precisa abstrair os casos em modelos reutilizáveis
2. Maquetes de interface do usuário ( references/ui-mockups/ )
Adequado para maquetes visuais de diversos tipos de “interface + conteúdo”. Atualmente implementado:
live-commerce-ui.md— Maquete de captura de tela de transmissão ao vivo de vendas no e-commerce (apresentador + área de chat + área de presentes + cartão de produto)social-interface-mockup.md— Maquete da página de detalhes de publicações em plataformas sociais (Twitter/X, Xiaohongshu, Weibo, Threads etc.)product-card-overlay.md— Imagem principal da página de destino / página de detalhes (pessoa + produto + diferenciamento + preço)chat-interface-scene.md— Maquete da interface de bate-papo/conversa (iMessage, WeChat, bate-papo em grupo, assistente de IA)short-video-cover-ui.md— Capa de vídeo curto / miniatura de transmissão ao vivo (YouTube, Douyin, Bilibili, transmissão de VTuber)landing-page-case-study.md— Maquete de interface para página longa de estudo de caso de SaaS/marketing em tema escuro (várias seções + narrativa com rolagem + cartões de dados + CTA)
3. Visuais do produto ( references/product-visuals/ )
Imagens adequadas para um “foco visual no produto”. Atualmente implementadas:
exploded-view-poster.md— Pôster com vista explodida do produto (elemento principal empilhado verticalmente + callout + logotipo na parte superior + área da marca na parte inferior)white-background-product.md— Imagem principal para e-commerce com fundo branco puro (produto único / múltiplos ângulos / sobreposição minimalista de marketing)premium-studio-product.md— Imagem comercial de produto em estúdio de alta qualidade (atmosfera de anúncio de revista)packaging-showcase.md— Imagem de apresentação de caixas de presente/embalagens (caixa externa + exibição do conteúdo)lifestyle-product-scene.md— Imagens de produtos em cenários de estilo de vida (produto inserido em cenários reais)ecommerce-marketing-board.md— Painel de vendas multifuncional para comércio eletrônico no estilo chinês (imagem principal + página de detalhes + argumentos de venda + instruções de uso + cenários + storyboard de TVC, tudo em uma única imagem)
4. Mapas ( references/maps/ )
Adequado para “visuais do tipo mapa” (as infografias foram separadas para a categoria independente 17). Atualmente implementado:
food-map.md— Mapa gastronômico da cidade desenhado à mão (pontos numerados + legenda + mascote central)travel-route-map.md— Mapa de rotas de viagem (itinerários de vários dias / passeios urbanos de um dia / rotas ao ar livre)illustrated-city-map.md— Mapa ilustrado da paisagem urbana (marcos + paisagens naturais + elementos culturais)store-distribution-map.md— Mapa de distribuição de lojas da marca / cobertura de serviçositinerary-day-trip-map.md— Pôster dividido para passeios de um dia (à esquerda, cartão de itinerário em estilo pergaminho + à direita, mapa realista com toques fantásticos; 5 a 7 pontos rigorosamente alinhados)
5. Apresentações e Documentos Visuais ( references/slides-and-visual-docs/ )
Documentos visuais adequados para “explicar um assunto em uma única página”. Atualmente implementados:
dense-explainer-slides.md— Apresentação explicativa de alta densidade combinando Irasutoya × Kasumigasekipolicy-style-slide.md— Apresentação no estilo de políticas / comunicados governamentais / livros brancosvisual-report-page.md— Página de resumo executivo de relatórios comerciais / apresentação para investidores / visão geral de relatórios anuaiseducational-diagram-slide.md— Diagrama didático (conceitos / mecanismos / decomposição de processos)
6. Pôsteres e Campanhas ( references/poster-and-campaigns/ )
Adequado para “imagem visual principal da marca + campanha + banner + capa de revista”. Atualmente implementado:
brand-poster.md— Pôster principal da marca (produto / pessoa / mensagem em texto)campaign-kv.md— Imagem-chave da campanha + sistema de layouts derivadosbanner-hero.md— Hero da web / página de destino / banner de aplicativo (composição horizontal + CTA)editorial-cover.md— Capa de revista / periódico / publicaçãobiomimetic-concept-poster.md— Pôster conceitual de design industrial biomimético (protótipo natural → linha de evolução → renderização principal → desenhos técnicos com múltiplas vistas)vintage-editorial-infographic.md— Arquivo retrô / Pôster de infográfico editorial dos anos 1940 (personagens + fórmulas + linha do tempo + modelos, no estilo Bell Labs)character-catalog-poster.md— Pôster infográfico com várias versões de um mesmo personagem (cartas de séries sobre signos do zodíaco / elementos / dinastias / personalidades)lineup-comparison-poster.md— Pôster infográfico comparativo de linha de produtos (mais de 30 SKUs em um único gráfico + legenda + chave de classificação)
7. Retratos e Personagens ( references/portraits-and-characters/ )
Adequado para “imagens de pessoas”. Atualmente implementado:
professional-portrait.md— Retrato profissional de nível empresarial (LinkedIn / página da equipe / imagens para mídia)founder-portrait.md— Retrato de grande formato do fundador para mídia (iluminação teatral + espaço reservado para título)virtual-host.md— Cartão pessoal de VTuber / apresentador virtual + pré-visualização de transmissãocharacter-sheet.md— Ficha técnica completa do personagem (três vistas + expressões faciais + figurino + paleta de cores)pose-reference-sheet.md— Tabela de referência N×N de poses/movimentos (várias poses para um mesmo personagem: dança / combate / ginástica)
8. Cenas e ilustrações ( references/scenes-and-illustrations/ )
Visuais ilustrados adequados para “atmosfera + história + emoção”. Atualmente implementados:
healing-scene.md— Ilustrações de cenas cotidianas e sazonais com tema de curaconcept-scene.md— Cenas conceituais com estilo cinematográfico / arte-chave de IPpicture-book-scene.md— Livros infantis / páginas de livros ilustrados / cartões comemorativosminimalist-mood-scene.md— Imagens minimalistas com espaços em branco / papéis de parede literários
9. Fluxos de trabalho de edição ( references/editing-workflows/ )
Tarefas de edição de imagens adequadas para “edição com base em imagens existentes” (correspondentes a scripts/edit.js ). Atualmente implementadas:
background-replacement.md— Substituição de fundo (produtos / retratos / exteriores / cenários de estúdio)local-object-replacement.md— Substituição de objetos locais (com ou sem máscara)object-removal.md— Remoção de objetos indesejados / transeuntes / fios elétricos / imperfeiçõesproduct-retouching.md— Retoque de produtos (brilho / etiquetas / sombras / imperfeições)portrait-local-edit.md— Edição local de retratos (penteado / roupa / maquiagem / acessórios)
10. Avatares e Perfil ( references/avatars-and-profile/ )
Adequado para visuais do tipo “imagem pessoal”, como “avatares estilizados / personagens / grades / adesivos / séries de retratos”. Atualmente implementado:
style-transfer-selfie.md— Transforma a pessoa da imagem de referência em qualquer estilo, como cosplay / gótico / filme retrô / fotos de ídoloscharacter-grid-portrait.md— Retratos em grade n×n de um mesmo personagem (várias classes / várias expressões / várias épocas / vários estilos)themed-3d-icon.md— Avatares no estilo ícones de aplicativos 3D: kawaii, Minecraft e 3D objetualsticker-set.md— Conjuntos de adesivos / coleções de emojis (elementos independentes + contornos + etiquetas)cultural-portrait-series.md— Série de retratos por dinastia / mitologia / literatura / etnia
11. Storyboards e sequências ( references/storyboards-and-sequences/ )
Adequado para visuais do tipo “sequências narrativas”, como “storyboards / quadrinhos / diagramas de relações / etapas de processos”. Atualmente implementado:
four-panel-comic.md— Quadrinhos de 4 quadros / caricaturas / tirinhas (introdução, desenvolvimento, clímax e conclusão + balões de diálogo)manga-spread-page.md— storyboard de mangá em página única / página dupla (quadros irregulares + diálogos + pensamentos)anime-key-visual.md— Imagem-chave de anime / capa de light novel / pôster de IPcharacter-relationship-diagram.md— Pôster com diagrama de relações entre personagens (cartões + linhas de conexão + legenda)recipe-process-flowchart.md— Fluxograma de receita / tutorial / processo (numeração + ilustrações + explicações)product-tvc-storyboard.md— Storyboard de comercial de TV de produto (9 quadros com textura de filmagem real + descrição das tomadas + duração)cinematic-storyboard-grid.md— Planilha de storyboard narrativo com estilo cinematográfico (3×4 / 4×4, narrativa contínua + imagens cinematográficas)process-photo-board.md— Quadro de processo cinematográfico com pessoas reais (vestuário e equipamentos / maquiagem / treinamento / decomposição de ações, numerado + etapas progressivas)
12. Grades e colagens ( references/grids-and-collages/ )
Adequado para visuais do tipo “grides com vários painéis / colagens / quadros de projeto”. Atualmente implementado:
banner-grid-2x2.md— Conjunto de banners de marketing 2×2 (4 imagens por vez com design de série unificada)lookbook-grid.md— lookbook de 7 dias / grade de 9 quadrados para autocuidado / lista dos TOP Nmixed-style-multi-panel.md— colagem mista de vários estilos (interpretações em estilos artísticos diferentes para um mesmo tema)anime-pitch-board.md— Quadro de apresentação de projetos de anime/jogos/cinema e TV (imagem-chave + personagens + universo + texto)ad-banner-multi-grid.md— Grade de banners publicitários mistos de vários setores e temas (cada célula com setor, estilo e texto publicitário independentes)
13. Branding e Embalagem ( references/branding-and-packaging/ )
Adequado para elementos visuais do tipo “sistema de identidade visual / mascotes / design de embalagem”. Atualmente implementado:
brand-identity-board.md— Painel de sistema de identidade de marca (logotipo + paleta de cores + tipografia + maquete de aplicação)mascot-brand-kit.md— Kit de identidade de marca com vários painéis para mascotes (imagem principal + três vistas + expressões + aplicações)cosmetic-packaging.md— Embalagens de cosméticos/produtos para a pele: frascos individuais, linhas de produtos e caixas de presentebeverage-label-design.md— Design de rótulos para bebidas / alimentos / condimentos (estilo chinês contemporâneo / japonês / ocidental)full-mascot-brand-doc.md— Identidade visual abrangente com mais de 18 módulos + documentação completa do processo da mascote (DNA / moodboard / esboços / desenhos de linha / 3D / paleta de cores / materiais / visão geral das aplicações)character-merch-board.md— Painel de marca integrado com vários elementos: personagens de IP + produtos derivados / embalagens / pôsteres / perfis nas redes sociais
14. Tipografia e Layout de Texto ( references/typography-and-text-layout/ )
Adequado para tipos em que “o texto é o elemento visual principal”, como “prioridade ao texto / diagramação bilíngue”. Atualmente implementado:
title-safe-poster.md— Cartazes com slogans em letras grandes (estilo japonês de alta energia / minimalismo suíço / impressão retrô)bilingual-layout-visual.md— Visuais com layout bilíngue chinês-inglês / chinês-japonês (marcas culturais / acadêmicas / interculturais)
15. Recursos e Adereços ( references/assets-and-props/ )
Adequado para visuais do tipo “conjuntos de materiais / ativos de jogos”, como “conjuntos de ícones / capturas de tela de jogos”. Atualmente implementados:
retro-skeuomorphic-icons.md— Conjunto de ícones esqueuomórficos / Y2K / pixelados (estilo unificado)game-screenshot-mockup.md— Maquete de captura de tela do jogo (HUD + legendas + painel de missões)
16. Figuras Acadêmicas ( references/academic-figures/ )
Imagens adequadas para “artigos científicos / submissões a conferências de ponta / pôsteres acadêmicos / apresentações de defesa em PowerPoint / defesa de proposta de pesquisa / resumos gráficos para submissão a revistas científicas”.Fundo predominantemente branco + fontes de publicação + geometria precisa + cores de engenharia de baixa saturação (principalmente azul escuro / azul acinzentado / cinza escuro, ≤3 cores principais) + adequadas para impressão monocromática. É estritamente proibido inventar dados quantitativos (valores / linhas de contorno / intervalos de escala de cores / fórmulas).
Áreas de Ciência da Computação (CS), Visão Computacional (CV) e Aprendizado de Máquina (ML):
method-pipeline-overview.md— Diagrama de visão geral do método / figura do pipeline (blocos de múltiplos estágios + fluxo de dados; a variante 4 oferece um roteiro técnico de três partes — esquerda/centro/direita — no estilo de engenharia)neural-network-architecture.md— Diagrama da arquitetura da rede neural (blocos de camadas + forma do tensor + conexões diretas)qualitative-comparison-grid.md— tabela de comparação qualitativa entre múltiplas metodologias ( linhas = amostras, colunas = metodologias )
Geral para engenharia / ciências naturais / defesa de tese:
scientific-schematic.md— Esquema conceitual / de princípios / de aparelhagem experimental (alta liberdade, modelo em linguagem natural)mechanism-diagram.md— Diagrama de mecanismo / cadeia causal / caminho de transformação (objeto central + transformação em múltiplas etapas + área de resultados; inclui três variantes: cadeia causal em três etapas / autoexcitação cíclica / competição com múltiplas ramificações)multi-condition-comparison.md— Gráfico comparativo de resultados em múltiplas condições (resultados lado a lado do mesmo objeto em diferentes condições, 2×2 / 1×N / M×N; enfatiza a uniformidade rigorosa entre os painéis)publication-chart.md— Gráficos de dados prontos para publicação (barra / linha / dispersão / mapa de calor / caixa)
Visão geral / Resumo / Página inicial da defesa:
graphical-abstract.md— Resumo gráfico para submissão a revistas (quatro variantes: horizontal em quatro seções / desdobramento central / quadrado / vertical)research-overview-poster.md— Diagrama de visão geral da pesquisa para apresentação de tema, defesa e relatório (três camadas: superior, média e inferior + cinco módulos; inclui três variantes: radiação central, duas colunas à esquerda e à direita e minimalista)
Estratégia de escolha: para artigos de CS/CV/ML, priorize
method-pipeline-overview+qualitative-comparison-grid; para as áreas de Engenharia / Energia / Química / Materiais, priorize a variante 4de method-pipeline-overview+mechanism-diagram+multi-condition-comparison;Para o resumo de artigos submetidos a revistas, use o modelo“resumo gráfico”; para a primeira página da apresentação em PowerPoint da defesa, use o modelo“pôster de visão geral da pesquisa”.
17. Infográficos ( references/infographics/ )
Adequado para “infográficos / divulgação científica de alta densidade / infográficos desenhados à mão / painéis de KPIs” e outros “gráficos grandes de visualização de informações”. Atualmente implementados:
legend-heavy-infographic.md— divulgação científica com alta densidade de legendas / cadeias causais / evolução / diagramas anatômicos (bilíngues)hand-drawn-infographic.md— infográficos em estilo desenhado à mão (macaron / morandi / quadro negro / papel kraft; modelo em linguagem natural)bento-grid-infographic.md— Infográficos modulares em grade tipo “bento” (disposição de widgets com alta densidade e múltiplos módulos)comparison-infographic.md— Infográficos de comparação binária / múltipla (A vs. B / planos de assinatura / equívocos vs. respostas corretas)step-by-step-infographic.md— Infográfico de tutorial passo a passo (estilo ilustrado, aconchegante; não é um fluxograma de engenharia)kpi-dashboard-infographic.md— Infográfico em formato de painel de KPIs (retrospectiva anual / Wrapped / painel de negócios)
18. Diagramas Técnicos ( references/technical-diagrams/ )
Adequado para diagramas de engenharia como “arquitetura de sistemas / processos / sequências temporais / máquinas de estados / ER / mapas mentais / topologia de rede”. Fundo em grade escuro padronizado + fonte de largura fixa + esquema de cores codificado por elementos; cada modelo inclui uma variante em tons claros.
⚠️ Atenção: este diretório gera imagens bitmap em PNG, e não SVG editável; se precisar de arquivos editáveis, utilize mermaid / draw.io / excalidraw / Figma. Atualmente disponíveis:
system-architecture.md— Diagrama de arquitetura de sistema (front-end + back-end + banco de dados + cache + fila + externo)flowchart-decision.md— Fluxograma / Diagrama de decisão (semântica de formas BPMN + ramificações Sim/Não)sequence-diagram.md— diagrama de sequência (ator + linha de vida + seta de mensagem + barra de ativação)state-machine.md— máquina de estados / diagrama de ciclo de vida (estado + transição + guarda / ação)er-diagram.md— Diagrama ER / Diagrama de modelo de dados (entidade + campo + PK/FK + relação “pé de corvo”)mind-map-tech.md— Mapa mental de temas técnicos (centro + ramificações radiais)network-topology.md— Diagrama de topologia de rede (símbolo de dispositivo + zona / VPC + largura de banda / marcador de protocolo)
Fluxo de trabalho de palavras-chave (percepção de padrões)
Seja A, B ou C, as seis primeiras etapas são comuns; a diferença está apenas na forma de “gerar o gráfico” nas etapas 7 e 8.
- Execute
o check-mode.jspara determinar o modo (A / B / C). - Determine se a tarefa é criar ou modificar um mapa.
- Identifique a qual categoria de diretório ela pertence (consulte o “Índice de modelos” abaixo).
- Leia apenas o arquivo de modelo específico correspondente; não leia todo o diretório references/ de uma só vez.
- Siga rigorosamente o formato do modelo: a maioria dos modelos usa um modelo principal em JSON (preferível para tarefas estruturadas), enquanto alguns modelos (
infographics/hand-drawn-infographic.md,academic-figures/scientific-schematic.mdetc.) utilizam um formato misto de “linguagem natural estruturada + parâmetros”, pois a imposição do JSON limitaria a liberdade criativa. - Mapeie as entradas do usuário aos parâmetros do modelo; quando faltarem informações essenciais, inicie proativamente perguntas de esclarecimento direcionadas.
A esta altura, o prompt já está renderizado. A seguir, ramifique de acordo com o modo:
7-A. Modo A: salve o prompt final em garden- gpt-image-2/prompt/; chame scripts/generate.js ou scripts/edit.js; a imagem será salva em garden- gpt-image-2/image/.
7-B. Modo B: passe o prompt final diretamente para a ferramenta de imagem do host;Salvar uma cópia do prompt, se necessário, em garden- gpt-image-2/prompt /.
7-C. Modo C: Salvar o prompt final em garden- gpt-image-2/prompt/ o prompt completo ao usuário na conversa, acompanhado de uma breve sugestão sobre “como usar / ferramentas recomendadas”.
- Após a conclusão da tarefa, informe ao usuário em uma frase: qual é o modo atual, onde o prompt está armazenado e onde a imagem (se houver) está localizada.
Restrições importantes
Geral:
- O JSON no arquivo de modelo é um modelo de estrutura de prompt, não um modelo de corpo de solicitação da API.
- Nos três modos, o que é finalmente enviado ao modelo de imagem é sempre a “sequência de prompt renderizada” — pode ser um JSON simplificado ou um parágrafo estruturado em linguagem natural, a ser usado exatamente como no modelo.
- A menos que o usuário solicite explicitamente, não copie a “descrição do modo” do arquivo SKILL.md para o prompt final — trata-se de metainformações destinadas ao Agente.
Aplicável apenas ao Modo A:
- Geração de script usando corpo JSON
- O script de edição usa dados de formulário multipart
- A resposta deve ser analisada prioritariamente como
data[0].b64_json, mas também é compatível comdata[0].url - A menos que a interface de origem exija explicitamente, não introduza parâmetros de consulta especiais adicionais
Quando fazer perguntas
Só faça perguntas quando essas informações estiverem faltando e isso afetar significativamente o resultado:
- Ausência de objetivo de prompt
- Não há imagem original ao editar uma imagem
- A identidade do sujeito ou o tipo visual determinam o rumo dos resultados
- Produto / preço / texto publicitário / texto da interface do usuário (UI) são componentes centrais da imagem
- O usuário expressou simultaneamente vários objetivos conflitantes
Além disso, priorize definir um padrão razoável por conta própria e continue a executá-lo.
---
name: gpt-image-2
description: Generates and edits images using GPT Image 2 across three modes: direct generation via OpenAI-compatible API, prompt engineering for host-native image tools, or pure prompt advisory. Includes 80+ structured templates for posters, UI mockups, product visuals, maps, slides, and more.
---
# GPT Image 2
这是一个面向 GPT Image 2 的聚焦型技能,在 3 种运行环境下都能用,但行为差异显著。**第一步必须先确定当前运行模式**。
它只做两类图像任务:
- 生成图片:`POST /images/generations`
- 编辑图片:`POST /images/edits`
本文件保留:运行模式、技能结构、环境变量、保存 / 命名规则、模板索引、模式感知工作流。详细模板全部放在 `references/`,分层组织:
- 一级:分类目录
- 二级:单模板 Markdown 文件
## 运行模式(必读,做任何事之前先确定)
本 Skill 自带一个轻量探测脚本,先跑一次,再根据结果决定怎么干活:
```bash
node skills/gpt-image-2/scripts/check-mode.js
# 想拿结构化结果给上层程序用:
node skills/gpt-image-2/scripts/check-mode.js --json
```
输出会给出 `mode = A` / `A?` / `B-or-C` 以及 `recommendation`。三个模式定义如下:
### Mode A · Garden 本地生图
**触发条件**:环境变量 `ENABLE_GARDEN_IMAGEGEN` 为真(`1` / `true` / `yes` / `on`)**且** 存在 `OPENAI_API_KEY`。
**行为**:完整端到端跑通"选模板 → 写 prompt → 调用脚本 → 出图落盘"。
- 用 `scripts/generate.js` 文本生图、`scripts/edit.js` 编辑现有图。
- prompt 默认落盘到 `garden-gpt-image-2/prompt/`、图片落盘到 `garden-gpt-image-2/image/`。
- 这是最强的模式:你是图像工具的"持有者"。
### Mode B · Host-Native 委托宿主出图
**触发条件**:未启用 Garden(`ENABLE_GARDEN_IMAGEGEN` 未设置 / 为假),但**当前宿主 Agent 自带图像生成工具或图像 MCP**。
**典型识别信号**(你应该自检):
- 你的工具集里出现 `image_generation` / `imagegen` / `dalle` / `nano_banana` / `mcp__*image*` / `make_image` / 类似名字
- 用户在 ChatGPT / Codex / Gemini / Cursor 等支持原生出图的客户端中调用本 Skill
- 用户显式说"用你自己的工具出图"
**行为**:本 Skill **退化成提示词工程指引**——
1. 仍按"选模板 → 填字段 → 渲染最终 prompt"的流程走。
2. **不要调用 `node scripts/generate.js`**(没有 API key、必失败)。
3. 直接调用宿主自带的图像工具,把渲染好的 prompt 作为输入。
4. 如用户希望可顺手把 prompt 文件保存到 `garden-gpt-image-2/prompt/`,但图片去向由宿主决定,不强制。
### Mode C · Advisor 纯提示词顾问
**触发条件**:未启用 Garden,**且**宿主 Agent 也没有任何图像生成工具。
**行为**:本 Skill 退化为"高质量 prompt 撰写顾问"——
1. 按"选模板 → 填字段 → 渲染最终 prompt"流程走,缺信息就问用户。
2. 把最终 prompt **直接打印给用户** + 保存一份到 `garden-gpt-image-2/prompt/<task-slug>-<timestamp>.md`。
3. 附一句简短的"如何使用"建议(如:丢进 ChatGPT / Midjourney / DALL·E / Sora / Nano Banana / 自己后端 / 第三方 GPT Image 2 网关)。
4. **不要假装出图成功**。明确告知用户:"已生成可直接复用的高质量 prompt,请用你的图像工具执行。"
### 模式决策表
| 条件 | 模式 | 调用脚本? | 落盘 prompt? | 落盘图片? |
|---|---|---|---|---|
| `ENABLE_GARDEN_IMAGEGEN=1` + 有 KEY | **A** | ✅ `generate.js` / `edit.js` | ✅ 自动 | ✅ 自动 |
| `ENABLE_GARDEN_IMAGEGEN=1` 但没 KEY | A? | ❌(先要 KEY) | — | — |
| 未启用 + 宿主有图像工具 | **B** | ❌(用宿主工具) | 可选 | 由宿主决定 |
| 未启用 + 宿主无图像工具 | **C** | ❌ | ✅ 必须 | ❌(无法) |
### 模式不确定时
- 如果你判断不清自己是 B 还是 C,**直接问用户一句**:"是用你环境里的图像工具出图,还是只要我写好提示词?"
- Mode A 调脚本失败(401 / 网络 / 配额)→ 报错并询问"切到 B / C 吗?"
## 用户输入工具
当此技能需要向用户提问时,遵循以下规则:
1. 优先使用当前运行时提供的用户输入工具。
2. 如果没有对应工具,则用简短的纯文本编号问题提问。
3. 能合并的问题尽量一次问完。
## 技能结构
- `scripts/check-mode.js`:**先跑这个**,检测运行模式(A / B / C)
- `scripts/generate.js`:文本生图(仅 Mode A 使用)
- `scripts/edit.js`:基于原图 / 遮罩改图(仅 Mode A 使用)
- `scripts/shared.js`:共享请求、保存、环境变量读取逻辑
- `references/`:分层结构化提示词模板(A / B / C 三模式都用)
## 环境变量
按以下顺序读取配置:
1. CLI 参数
2. `process.env`
3. `<cwd>/.env`
4. `<cwd>/.gateway.env`
5. `~/.gateway.env`
核心变量:
- `ENABLE_GARDEN_IMAGEGEN` — **模式开关**。`1` / `true` / `yes` / `on` 时启用 Mode A;未设置或其它值则进入 Mode B / C。
- `OPENAI_API_KEY` — Mode A 必需;B / C 不需要。
- `OPENAI_BASE_URL` — 默认 `https://api.openai.com/v1`,可指向第三方兼容网关。
- `OPENAI_IMAGE_MODEL` — 默认 `gpt-image-2`,可换成网关支持的型号(如 `gpt-image-1` / `dall-e-3`)。
默认实现按 OpenAI 兼容接口工作,不写死任何第三方网关。
## 默认输出目录
如果用户没有明确指定输出路径,统一使用当前工作区下的:
- 提示词目录:`garden-gpt-image-2/prompt/`(**A / B / C 三种模式都建议用**,方便复用与版本管理)
- 图片目录:`garden-gpt-image-2/image/`(**仅 Mode A 使用**;Mode B 由宿主决定,Mode C 不产生图)
如果目录不存在,脚本(Mode A)必须自动创建;Mode B / C 在写 prompt 前手动 `mkdir -p`。
## 默认命名规则
如果用户没有明确指定文件名,脚本应自动生成与当前任务相关的文件名,并追加当前时间戳,避免重名。
命名规则:
- 提示词:`garden-gpt-image-2/prompt/<task-slug>-<timestamp>.md`
- 图片:`garden-gpt-image-2/image/<task-slug>-<timestamp>.png`
其中:
- `<task-slug>`:根据当前用户要求自动提取一个相关短名称
- `<timestamp>`:当前时间戳,例如 `20260424-153045`
示例:
- `garden-gpt-image-2/prompt/live-commerce-ui-20260424-153045.md`
- `garden-gpt-image-2/image/live-commerce-ui-20260424-153045.png`
- `garden-gpt-image-2/prompt/vr-headset-exploded-view-20260424-153102.md`
- `garden-gpt-image-2/image/vr-headset-exploded-view-20260424-153102.png`
## Prompt 保存规则
| 模式 | 是否必须保存 prompt | 说明 |
|---|---|---|
| Mode A | ✅ 必须 | 进入实际生成 / 编辑流程必落盘 |
| Mode B | 推荐 | 默认建议保存方便复用;用户说"不用"就略过 |
| Mode C | ✅ 必须 | 用户拿走 prompt 自己执行,不落盘等于白干 |
通用规则(适用三种模式):
1. 如果用户显式给了 prompt 文件路径,可直接使用该文件作为输入。
2. 如果用户直接给的是文本 prompt,也要先把最终 prompt 保存到 `garden-gpt-image-2/prompt/`。
3. 如果用户显式指定了 `--prompt-output`,则尊重用户指定路径。
4. 否则使用默认命名规则自动保存。
## 图片保存规则(仅 Mode A)
1. 如果用户显式指定了 `--image` 或 `--output`,则尊重用户指定路径。
2. 否则默认保存到 `garden-gpt-image-2/image/`。
3. 文件名应和当前任务语义相关,并附加时间戳。
Mode B 由宿主图像工具决定保存方式;Mode C 不产生图片。
## 快速用法
### 0. 检测运行模式(**任何任务的第一步**)
```bash
node skills/gpt-image-2/scripts/check-mode.js
```
输出会告诉你当前是 Mode A / B / C,决定后续是否调用 `generate.js` / `edit.js`。下面 1~4 仅在 **Mode A** 下使用。
### 1. 文本生图(Mode A)
```bash
node skills/gpt-image-2/scripts/generate.js \
--prompt "A cute baby sea otter" \
--size 1024x1024 \
--quality high
```
### 2. 用提示词文件生图(Mode A)
```bash
node skills/gpt-image-2/scripts/generate.js \
--promptfile garden-gpt-image-2/prompt/poster-20260424-153045.md
```
### 3. 编辑已有图片(Mode A)
```bash
node skills/gpt-image-2/scripts/edit.js \
--image assets/source.png \
--prompt "Replace the background with a clean studio scene"
```
### 4. 带遮罩的局部编辑(Mode A)
```bash
node skills/gpt-image-2/scripts/edit.js \
--image assets/source.png \
--mask assets/mask.png \
--prompt "Replace only the masked area with a glass vase"
```
### 5. Mode B / C 的"用法"
没有命令行入口——本 Skill 此时只是**提示词工程指南**:
- **Mode B**:渲染好最终 prompt → 调用宿主自带的 `image_generation` 类工具(参数中传入 prompt)→ 拿到图。
- **Mode C**:渲染好最终 prompt → 保存到 `garden-gpt-image-2/prompt/<task-slug>-<timestamp>.md` → 把内容直接展示给用户 → 提示用户在哪些图像工具中可以直接复用。
## JSON 模板工作方式
当 `references/` 中提供 JSON 模板时,按下面规则使用:
1. 先从 `SKILL.md` 找到最贴近的分类目录。
2. 再定位到具体模板文件。
3. 模板中的 `{argument ...}` 表示可替换参数。
4. 用户明确提供的值,直接填入。
5. 用户没有提供,但模板标了 `default` 的,默认可以先用默认值。
6. 如果缺失信息会显著影响结果,主动询问用户。
7. 用户也可以明确说“你随机生成”,这时可以保留默认值或在模板允许范围内合理随机化。
## 询问规则
当模板缺少关键变量时,不要笼统地问“你想要什么风格?”。应当根据模板字段精确提问。
例如直播 UI 模板缺少主体时,应优先问:
- 主播是谁?
- 用真人照片、名人名字、人物描述,还是完全随机生成?
缺少商品信息时应问:
- 商品名称是什么?
- 商品价格是否指定?
- 是否希望我自动补全评论和礼物内容?
## 模板索引
按任务类型只读取最贴近的具体模板文件,不要一次性全读整个 `references/`。
### 1. 方法论总文档
先读:
- `references/prompt-writing.md`
适用于:
- 你还没决定怎么构造 JSON 模板
- 你需要判断哪些字段该问、哪些字段可默认、哪些字段可随机
- 你需要把案例抽象成可复用模板
### 2. UI Mockups (`references/ui-mockups/`)
适合各种“界面 + 内容”的样机视觉。当前已落地:
- `live-commerce-ui.md` — 电商直播带货截图样机(主播 + 聊天区 + 礼物区 + 商品卡)
- `social-interface-mockup.md` — 社交平台动态详情页样机(Twitter/X、小红书、微博、Threads 等)
- `product-card-overlay.md` — 落地页 hero / 详情页主图(人物 + 商品 + 卖点 + 价格)
- `chat-interface-scene.md` — 聊天 / 对话界面样机(iMessage、微信、群聊、AI 助手)
- `short-video-cover-ui.md` — 短视频封面 / 直播缩略图(YouTube、抖音、B 站、VTuber stream)
- `landing-page-case-study.md` — 深色 SaaS / 营销 case study **长页面** UI mockup(多 section + 滚动叙事 + 数据卡 + CTA)
### 3. Product Visuals (`references/product-visuals/`)
适合“以商品为视觉中心”的图。当前已落地:
- `exploded-view-poster.md` — 产品爆炸视图海报(主体垂直堆叠 + callout + 顶部 logo + 底部品牌区)
- `white-background-product.md` — 电商纯白底主图(单品 / 多角度 / 极简营销叠层)
- `premium-studio-product.md` — 高级影棚商业产品图(杂志广告级氛围)
- `packaging-showcase.md` — 礼盒 / 包装展示图(外盒 + 内容物展示)
- `lifestyle-product-scene.md` — 生活方式产品场景图(商品出现在真实场景中)
- `ecommerce-marketing-board.md` — 中式电商超复合销售看板(主图 + 详情页 + 卖点 + 使用步骤 + 场景 + TVC 分镜组合一图)
### 4. Maps (`references/maps/`)
适合“地图类视觉”(信息图已抽离到独立分类 17)。当前已落地:
- `food-map.md` — 城市美食手绘地图(编号点位 + 图例 + 中心吉祥物)
- `travel-route-map.md` — 旅行路线图(多日行程 / 单日 city walk / 户外路线)
- `illustrated-city-map.md` — 城市风貌插画地图(地标 + 江山 + 文化元素)
- `store-distribution-map.md` — 品牌门店 / 服务覆盖分布图
- `itinerary-day-trip-map.md` — **一日游** split 海报(左 parchment 行程卡 + 右奇幻写实地图,5-7 站点严格对齐)
### 5. Slides & Visual Docs (`references/slides-and-visual-docs/`)
适合“一页讲清楚一件事”的视觉文档。当前已落地:
- `dense-explainer-slides.md` — Irasutoya × 霞关混合高密度讲解 Slide
- `policy-style-slide.md` — 政策 / 政府公告 / 白皮书风格说明 Slide
- `visual-report-page.md` — 商业报告执行摘要 / 投资人简报 / 年报概览页
- `educational-diagram-slide.md` — 教学示意图(概念 / 机制 / 流程分解)
### 6. Poster & Campaigns (`references/poster-and-campaigns/`)
适合“品牌主视觉 + campaign + banner + 杂志封面”。当前已落地:
- `brand-poster.md` — 品牌主海报(产品 / 人物 / 纯文字主张)
- `campaign-kv.md` — Campaign Key Visual + 衍生 layout 系统
- `banner-hero.md` — Web hero / 落地页 / app banner(横向构图 + CTA)
- `editorial-cover.md` — 杂志 / 期刊 / 出版物封面
- `biomimetic-concept-poster.md` — 仿生工业设计概念海报(自然原型 → 演化条 → hero render → 多视图技术图)
- `vintage-editorial-infographic.md` — 复古档案 / 1940s 编辑式信息图海报(人物 + 公式 + 时间轴 + 模型,Bell Labs 风)
- `character-catalog-poster.md` — 同一角色多版本信息图海报(星座 / 元素 / 朝代 / 人格系列卡片)
- `lineup-comparison-poster.md` — 系列产品 lineup 对比信息图海报(30+ SKU 同图 + 图例 + 等级 key)
### 7. Portraits & Characters (`references/portraits-and-characters/`)
适合“人物视觉”。当前已落地:
- `professional-portrait.md` — 职业级商务肖像(LinkedIn / 团队页 / 媒体配图)
- `founder-portrait.md` — 创始人媒体大片肖像(戏剧灯光 + 留标题位)
- `virtual-host.md` — VTuber / 虚拟主播个人卡 + 直播预览
- `character-sheet.md` — 角色综合设定稿(三视图 + 表情 + 服装 + 配色板)
- `pose-reference-sheet.md` — N×N 姿势 / 动作字典参考表(同一角色多姿势,舞蹈 / 战斗 / 健身)
### 8. Scenes & Illustrations (`references/scenes-and-illustrations/`)
适合 “氛围 + 故事 + 情绪” 的插画类视觉。当前已落地:
- `healing-scene.md` — 治愈系日常 / 季节场景插画
- `concept-scene.md` — 电影感概念大场景 / IP key art
- `picture-book-scene.md` — 童书 / 绘本内页 / 节日卡片
- `minimalist-mood-scene.md` — 极简留白氛围图 / 文学性壁纸
### 9. Editing Workflows (`references/editing-workflows/`)
适合“基于现有图片做编辑”的图改任务(对应 `scripts/edit.js`)。当前已落地:
- `background-replacement.md` — 背景替换(商品 / 人像 / 户外 / 棚景)
- `local-object-replacement.md` — 局部对象替换(配合或不配合蒙版)
- `object-removal.md` — 杂物 / 路人 / 电线 / 瑕疵去除
- `product-retouching.md` — 产品精修(光泽 / 标签 / 阴影 / 瑕疵)
- `portrait-local-edit.md` — 人像局部修改(发型 / 服装 / 妆容 / 配饰)
### 10. Avatars & Profile (`references/avatars-and-profile/`)
适合“风格化头像 / 人设 / 网格 / 贴纸 / 系列肖像”等"个人形象"类视觉。当前已落地:
- `style-transfer-selfie.md` — 把参考图人物转成 cosplay / 哥特 / 复古胶片 / 偶像写真等任意风格
- `character-grid-portrait.md` — 同一角色 n×n 网格肖像(多职业 / 多表情 / 多朝代 / 多风格)
- `themed-3d-icon.md` — Kawaii 3D / Minecraft / 拟物 3D 应用图标式头像
- `sticker-set.md` — 贴纸套装 / 表情包合集(独立元素 + 描边 + 标签)
- `cultural-portrait-series.md` — 朝代 / 神话 / 文学 / 民族系列肖像
### 11. Storyboards & Sequences (`references/storyboards-and-sequences/`)
适合“多分镜 / 漫画 / 关系图 / 流程步骤”等"叙事性序列"类视觉。当前已落地:
- `four-panel-comic.md` — 4 格漫画 / 讽刺漫画 / 段子漫画(起承转合 + 对话气泡)
- `manga-spread-page.md` — 单页 / 跨页漫画分镜(不规则格子 + 对话 + 心声)
- `anime-key-visual.md` — 单图动漫 KV / 轻小说封面 / IP 海报
- `character-relationship-diagram.md` — 角色关系图海报(卡片 + 关系连线 + 图例)
- `recipe-process-flowchart.md` — 食谱 / 教程 / 流程步骤图(编号 + 插图 + 说明)
- `product-tvc-storyboard.md` — 产品 TVC 商业广告分镜板(9-panel 实拍质感 + 镜头描述 + 时长)
- `cinematic-storyboard-grid.md` — **电影感叙事分镜** contact sheet(3×4 / 4×4,连续叙事 + cinematic still)
- `process-photo-board.md` — 真人 cinematic 流程板(装备穿戴 / 化妆 / 训练 / 操作分解,编号 + 步骤递进)
### 12. Grids & Collages (`references/grids-and-collages/`)
适合“多面板网格 / 拼贴 / 立项 board”类视觉。当前已落地:
- `banner-grid-2x2.md` — 2×2 营销 banner 套装(一次出 4 张统一系列设计)
- `lookbook-grid.md` — 7 日 lookbook / 9 宫 self-care / TOP N 清单图
- `mixed-style-multi-panel.md` — 多风格混合拼贴(同一主体不同画风演绎)
- `anime-pitch-board.md` — 动漫 / 游戏 / 影视立项 pitch board(KV + 角色 + 世界观 + 文案)
- `ad-banner-multi-grid.md` — 多行业 / 多主题混合广告 banner 网格(每格独立行业 + 风格 + 文案)
### 13. Branding & Packaging (`references/branding-and-packaging/`)
适合“品牌识别系统 / 吉祥物 / 包装设计”类视觉。当前已落地:
- `brand-identity-board.md` — 品牌识别系统板(logo + 配色 + 字体 + 应用 mockup)
- `mascot-brand-kit.md` — 吉祥物多面板品牌识别套装(主形象 + 三视图 + 表情 + 应用)
- `cosmetic-packaging.md` — 化妆品 / 护肤品 单瓶 / 系列 / 礼盒包装
- `beverage-label-design.md` — 饮料 / 食品 / 调味品标签设计(国潮 / 日式 / 西式)
- `full-mascot-brand-doc.md` — **18+ 模块大型品牌识别 + 吉祥物全流程文档**(DNA / moodboard / 草图 / 线稿 / 3D / 配色 / 材质 / 应用一图概览)
- `character-merch-board.md` — IP 角色 + 周边 / 包装 / 海报 / 社交 profile 多元素综合品牌板
### 14. Typography & Text Layout (`references/typography-and-text-layout/`)
适合“字面优先 / 双语版式”等"以文字为主视觉"的类型。当前已落地:
- `title-safe-poster.md` — 大字主张型海报(日式高能量 / 瑞士极简 / 复古印刷)
- `bilingual-layout-visual.md` — 中英 / 中日双语版式视觉(文化 / 学术 / 跨文化品牌)
### 15. Assets & Props (`references/assets-and-props/`)
适合“图标集 / 游戏截图”等"成套素材 / 游戏资产"类视觉。当前已落地:
- `retro-skeuomorphic-icons.md` — 拟物 / Y2K / 像素 图标集(成套统一风格)
- `game-screenshot-mockup.md` — 游戏内截图 mockup(HUD + 字幕 + 任务面板)
### 16. Academic Figures (`references/academic-figures/`)
适合“论文 / 顶会投稿 / 学术海报 / 答辩 PPT / 开题答辩 / 期刊投稿 Graphical Abstract”的配图。整体偏白底 + 出版物字体 + 几何精确 + 低饱和工程色(深蓝 / 灰蓝 / 黑灰为主,≤3 主色)+ 可单色印刷。**严格禁止虚构定量数据**(数值 / 等值线 / 色标范围 / 公式)。
CS / CV / ML 方向:
- `method-pipeline-overview.md` — 方法总览图 / pipeline figure(多 stage 块 + 数据流;变体 4 提供工程类左/中/右 三段式技术路线图)
- `neural-network-architecture.md` — 神经网络架构图(layer 块 + tensor shape + 跳连)
- `qualitative-comparison-grid.md` — 多方法 qualitative 对比网格(**行 = 样本,列 = 方法**)
工程 / 自然科学 / 答辩通用:
- `scientific-schematic.md` — 概念 / 原理 / 实验装置示意图(自由度高,自然语言模板)
- `mechanism-diagram.md` — 机理示意图 / 因果链路 / 转化路径(中心对象 + 多阶段转化 + 结果区;含三段式因果链 / 循环自激发 / 多分支竞争 三种变体)
- `multi-condition-comparison.md` — **多工况 / 多条件结果对比图**(同一对象在不同 condition 下的并列结果,2×2 / 1×N / M×N;强调 panel 间严格统一)
- `publication-chart.md` — publication-ready 数据图表(bar / line / scatter / heatmap / box)
总览 / 摘要 / 答辩首页:
- `graphical-abstract.md` — 期刊投稿 Graphical Abstract / 图形摘要(横向 4 段式 / 中心展开 / 方形 / 竖版四种变体)
- `research-overview-poster.md` — 开题 / 答辩 / 汇报首页研究总览图(上中下三层 + 五模块;含中心辐射 / 左右双栏 / 极简 三种变体)
> 选择策略:CS/CV/ML 论文首选 `method-pipeline-overview` + `qualitative-comparison-grid`;工程 / 能源 / 化工 / 材料方向首选 `method-pipeline-overview` 变体 4 + `mechanism-diagram` + `multi-condition-comparison`;投稿期刊摘要图用 `graphical-abstract`;答辩 PPT 首页用 `research-overview-poster`。
### 17. Infographics (`references/infographics/`)
适合“信息图 / 高密度科普 / 手绘信息图 / KPI 仪表盘”等"信息可视化大图"。当前已落地:
- `legend-heavy-infographic.md` — 高图例密度科普 / 因果链 / 演化 / 解剖图(双语)
- `hand-drawn-infographic.md` — **手绘风**信息图(macaron / morandi / 黑板 / 牛皮纸;自然语言模板)
- `bento-grid-infographic.md` — 便当格模块化信息图(高密度多模块 widget 排布)
- `comparison-infographic.md` — 二元 / 多元对比信息图(A vs B / 套餐档位 / 误区 vs 正解)
- `step-by-step-infographic.md` — 步骤教程信息图(插画感、温暖;非工程流程图)
- `kpi-dashboard-infographic.md` — KPI 仪表盘式信息图(年度回顾 / Wrapped / 业务 dashboard)
### 18. Technical Diagrams (`references/technical-diagrams/`)
适合“系统架构 / 流程 / 时序 / 状态机 / ER / 思维导图 / 网络拓扑”等工程示意图。统一暗色 grid 背景 + 等宽字体 + 角色编码配色,每个模板都附 light 变体。
⚠️ 注意:本目录生成的是 **PNG 位图**,**不是可编辑 SVG**;需要可编辑请改用 mermaid / draw.io / excalidraw / Figma。当前已落地:
- `system-architecture.md` — 系统架构图(前端 + 后端 + DB + 缓存 + 队列 + 外部)
- `flowchart-decision.md` — 流程图 / 决策图(BPMN 形状语义 + Yes/No 分支)
- `sequence-diagram.md` — 时序图(actor + lifeline + 消息箭头 + 激活条)
- `state-machine.md` — 状态机 / 生命周期图(state + transition + guard / action)
- `er-diagram.md` — ER 图 / 数据模型图(实体 + 字段 + PK/FK + crow's foot 关系)
- `mind-map-tech.md` — 技术主题思维导图(中央 + 放射式分支)
- `network-topology.md` — 网络拓扑图(设备 glyph + zone / VPC + 带宽 / 协议标)
## 提示词工作流(模式感知)
无论 A / B / C,**前 6 步是共用的**;区别只在第 7-8 步如何"出图"。
1. **跑 `check-mode.js` 确定模式**(A / B / C)。
2. 判断任务是生图还是改图。
3. 识别它属于哪个分类目录(参考下方"模板索引")。
4. 只读取对应的具体模板文件,**不要一次读整个 references/**。
5. 严格遵循模板格式:大部分模板用 JSON 主模板(结构化任务首选),少数模板(`infographics/hand-drawn-infographic.md`、`academic-figures/scientific-schematic.md` 等)使用「结构化自然语言 + 参数」混合形式,因为强行 JSON 会限制创作自由。
6. 把用户输入映射到模板参数;关键信息不足时主动发起有针对性的澄清问题。
到此 prompt 已渲染好。下面按模式分叉:
7-A. **Mode A**:把最终 prompt 保存到 `garden-gpt-image-2/prompt/`,调用 `scripts/generate.js` 或 `scripts/edit.js`,图片落到 `garden-gpt-image-2/image/`。
7-B. **Mode B**:把最终 prompt 直接传给宿主的图像工具调用;按需保存 prompt 副本到 `garden-gpt-image-2/prompt/`。
7-C. **Mode C**:把最终 prompt 保存到 `garden-gpt-image-2/prompt/<task-slug>-<timestamp>.md`,并把完整 prompt 在对话中展示给用户,附一句简短的"如何使用 / 推荐工具"建议。
8. 任务结束后用一句话告诉用户:当前模式是什么、prompt 落在哪、图(如有)落在哪。
## 重要约束
通用:
- 模板文件中的 JSON 是**提示词结构模板**,不是 API 请求体模板。
- 三种模式下,最终交给图像模型的都是"渲染后的 prompt 字符串"——可以是拍平的 JSON、可以是结构化自然语言段落,按模板原样使用。
- 除非用户明确要求,否则**不要把 SKILL.md 里的"模式说明"复制到最终 prompt 里**——那是给 Agent 看的元信息。
仅 Mode A 适用:
- 生成脚本使用 JSON body
- 编辑脚本使用 multipart form data
- 响应优先按 `data[0].b64_json` 解析,也兼容 `data[0].url`
- 除非上游接口明确要求,不额外引入特殊 query 参数
## 何时提问
只在这些信息缺失且会显著影响结果时提问:
- 没有 prompt 目标
- 改图时没有原图
- 主体身份或视觉类型决定结果走向
- 商品 / 价格 / 文案 / UI 文本是画面核心组成部分
- 用户同时表达了多个互相冲突的目标
除此之外,优先自己做合理默认并继续执行。
Todos os arquivos
103 arquivosInstalar gpt-image-2
Baixe e descompacte os arquivos de habilidades no diretório .claude/skills/.
Baixar ZIPClone o repositório e copie os arquivos da habilidade para o seu projeto.
git clone https://github.com/ConardLi/garden-skills/tree/main/skills/gpt-image-2 # Copy SKILL.md to your .claude/skills/ directory
Copiar





Lar
