Communitygithub.com

Omni-Design Studio (Design Determinístico em 3 Etapas e Integra…

Extrai deterministicamente o DNA de cor, composição e slogan a partir de uma ficha de perguntas conceituais e designs de referência (imagem/URL/100 seleções humanas) em 0ms, e combina com fotos do modelo de imagem mais avançado (Codex `image_gen` [gpt-image-2.5-sunburst] ou Antigravity `image-generator` [Imagen 4 Ultra]) sem custo de assinatura, gerando com um único comando: ① site web, ② cartaz de impressão a 300 DPI (PNG/PDF), ③ embalagem (mockup 3D e desenho técnico SVG), ④ vídeo promocional (9:16 vertical e 16:9 horizontal MP4). Projetado deterministicamente em 3 etapas para que mesmo modelos inferiores (Flash Low / DeepSeek Flash / Luna) produzam a mesma qualidade sem hesitar.

O que é Omni-Design Studio (Design Determinístico em 3 Etapas e Integra…?

O Omni-Design Studio é uma skill de IA determinística de design e produção de vídeo promocional integrada, projetada para funcionar com agentes como Codex (Claude Code), Antigravity e outros. Ela elimina a variação de qualidade entre modelos de IA (superiores e inferiores) ao encapsular todas as decisões complexas de design – extração de cores, síntese de slogans, composição editorial assimétrica, layout de PDF/SVG a 300 DPI, easing de animação a 24 fps e síntese de voz – em um único pipeline Python determinístico (`build_omni_design.py`, abordagem Formula-First). O agente segue exatamente 3 etapas: (1) Extrair o DNA conceitual e gerar 3 prompts de foto, (2) Gerar 3 fotos comerciais sem texto usando modelos topo de linha (gpt-image-2.5-sunburst no Codex, Imagen 4 Ultra no Antigravity, ou fotos fornecidas pelo usuário), (3) Executar um único comando para construir todos os ativos: website.html com editor visual WordPress-style, cartaz a 300 DPI (PNG/PDF), mockup 3D de embalagem + desenho técnico SVG, e vídeos promocionais verticais/horizontais (MP4) com estúdio de legendas embutido. A skill inclui um editor visual embutido (CMS Editor Runtime) que permite edição inline de texto, imagens, blocos e layouts diretamente no navegador, além de exportação para PDF e legendas SRT/VTT para edição profissional em Premiere ou CapCut. Tudo sem custo de assinatura (modelos inclusos) e sem APIs de terceiros.

Funciona com✓Claude Code✓Codex CLI~Cursor✓Antigravity
npx skills add kodawarimax/omni-design-studio
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

Documentação

Omni-Design Studio (Skill de Design Determinístico e Vídeo Promocional Integrado em 3 Etapas)

🎯 Filosofia de Design (Por que modelos inferiores também produzem qualidade profissional?)
Todas as decisões complexas (extração de cores, síntese de slogans, composição editorial assimétrica, layout de PDF/SVG a 300 DPI, easing de animação a 24 fps e síntese de voz) são encapsuladas em um único pipeline Python determinístico (build_omni_design.py, abordagem Formula-First).
O agente de IA (seja modelo superior ou inferior) só precisa executar as seguintes "3 etapas (① Preparação ➔ ② Gerar 3 fotos ➔ ③ Construção em lote)" sequencialmente para sempre obter resultados com qualidade de designer humano.

🗺️ Diagrama de Arquitetura Geral (Máquina de Estados em 3 Etapas)

flowchart TD
    Start(["👤 Solicitação do Usuário"]) --> Check{"O conceito e as imagens de referência<br>foram especificados?"}

    %% Etapa 1
    Check -- "Não especificado (solicitação vaga)" --> Ask["【Etapa 1A】Apresentar 5 perguntas principais<br>build_omni_design.py --ask-concept"]
    Ask --> UserAns["Resposta do usuário / preenchimento da ficha"]
    Check -- "Especificado / respondido" --> PromptGen["【Etapa 1B】Extrair DNA e gerar 3 prompts de foto<br>build_omni_design.py --print-image-prompts<br>(--ref-image / --ref-url / --concept-sheet)"]
    UserAns --> PromptGen

    %% Etapa 2
    PromptGen --> Harness{"Qual é o ambiente de execução (harness)?"}
    Harness -- "Codex (Principal)" --> CodexImg["【Etapa 2A】Ferramenta image_gen interna do Codex × 3<br>(gpt-image-2.5-sunburst / custo de assinatura 0)<br>Salvo automaticamente em ~/.codex/generated_images/"]
    Harness -- "Antigravity" --> AgyImg["【Etapa 2B】Subagente image-generator × 3 fotos<br>(Imagen 4 Ultra / custo de assinatura 0)"]
    Harness -- "Fotos próprias / nenhuma" --> DirectBuild

    %% Etapa 3
    CodexImg --> DirectBuild["【Etapa 3】Construir todas as mídias com 1 comando<br>build_omni_design.py --auto-codex-images --with-promo-video"]
    AgyImg --> DirectBuild

    DirectBuild --> Out(["📦 Pacote final editável (0 custo)<br>① website.html / poster.html / packaging_mockup.html<br>（Com blocos visuais estilo WordPress e editor canvas embutido）<br>② website_preview.png / poster_300dpi.png / poster_print.pdf / packaging_3d_mockup.png / packaging_dieline.svg<br>③ promo_video_vertical_9x16.mp4 / landscape_16x9.mp4<br>④ promo_video_studio_9x16.html / 16x9.html（Estúdio de legendas e edição de linha do tempo no navegador）<br>⑤ promo_captions.srt / .vtt（Legendas para Premiere e CapCut）＆ promo_audio_track.wav"])

⚡ "Regra de Execução em 3 Etapas" que modelos inferiores nunca hesitarão

O caminho do script é sempre este único (os sub-scripts internos são chamados automaticamente): SCRIPT="$HOME/.codex/skills/omni-design-studio/scripts/build_omni_design.py"

Etapa 1: Confirmar o conceito e obter 3 prompts de geração de fotos

  1. Se o slogan ou conceito ainda não estiver definido, execute primeiro o seguinte para perguntar ao usuário as 5 perguntas principais (público-alvo, 3 benefícios, para quem × com o quê × como se torna, destruição da suposição anterior ➔ solução verdadeira, antes e depois): 
    python3 "$SCRIPT" --ask-concept
    (Documento original do template: templates/CONCEPT_QUESTION_SHEET.md)
  2. Quando o nome da marca e a imagem de referência (--ref-image / --ref-url) estiverem definidos, execute com --print-image-prompts para obter 3 prompts de foto (JSON) harmonizados com o DNA de cor e estilo: 
    python3 "$SCRIPT" \
  --brand "Nome da Marca" \
  --category "Categoria do Produto (ex: Brincos, Joias Finas)" \
  --ref-image "/caminho/para/referencia.jpg" \
  --print-image-prompts
    (※Se não houver imagem de referência, omita --ref-image; o DNA de curadoria humana organic_editorial padrão será usado para paleta de cores e estilo)

Etapa 2: Gerar 3 fotos com o modelo de assinatura 0 (fotos sem texto)

Use os 3 prompts gerados na Etapa 1 (hero_image_prompt, poster_image_prompt, pack_image_prompt) para gerar 3 fotos de estúdio comercial puras, sem texto (Proibido cobrança por API de terceiros; apenas dentro da assinatura):

  • 🅰️ Se estiver executando no Codex (1ª prioridade: gpt-image-2.5-sunburst):
    Chame a ferramenta image_gen interna do Codex 3 vezes (salvo automaticamente em ~/.codex/generated_images/).
  • 🅱️ Se estiver executando no Antigravity (Imagen 4 Ultra / Nano Banana 2.1):
    Chame invoke_subagent(TypeName="image-generator") para gerar 3 fotos e receba os caminhos salvos.
  • 🅲 Se o usuário fornecer as fotos:
    Repasse ao usuário a "📋 Solicitação de materiais do agente (composição necessária, tamanho recomendado, sugestão de prompt de IA)" que a Etapa 1 (executada sem --print-image-prompts) gera.

Etapa 3: Gerar todos os designs e vídeos promocionais com 1 único comando

Basta executar o comando abaixo para obter 3 HTMLs editáveis no navegador (como WordPress) com imagens, texto, elementos e layout ajustáveis livremente, PNG/PDF/SVG de alta resolução e um pacote completo de vídeo promocional com legendas e cenas editáveis posteriormente:

# Para Codex (com --auto-codex-images para vincular automaticamente as fotos da Etapa 2)
python3 "$HOME/.codex/skills/omni-design-studio/scripts/build_omni_design.py" \
  --auto-codex-images \
  --target all \
  --with-promo-video \
  --brand "LUMIÈRE & CO." \
  --category "Brincos, Joias Finas" \
  --headline "Luminous Craft," \
  --subcopy "Coleção orgânica de brincos em ouro reciclado 18K e pérolas akoya" \
  --out-dir ~/Downloads/omni_output_pack

# Para Antigravity / Claude Code ou com caminhos de imagem individuais
python3 "$HOME/.codex/skills/omni-design-studio/scripts/build_omni_design.py" \
  --target all \
  --with-promo-video \
  --brand "LUMIÈRE & CO." \
  --category "Brincos, Joias Finas" \
  --headline "Luminous Craft," \
  --subcopy "Coleção orgânica de brincos em ouro reciclado 18K e pérolas akoya" \
  --hero-image /caminho/para/hero.jpg \
  --poster-image /caminho/para/poster.jpg \
  --pack-image /caminho/para/pack.jpg \
  --out-dir ~/Downloads/omni_output_pack

🎨 Editor visual estilo WordPress e edição de legendas de vídeo integrados (padrão)

Os 3 arquivos de design gerados (website.html, poster.html, packaging_mockup.html) e os arquivos de estúdio de vídeo (promo_video_studio_9x16.html, promo_video_studio_16x9.html) incluem automaticamente, via cms_editor_runtime.py, um editor visual estilo WordPress (Gutenberg) / Studio (✦ OMNI WP-STUDIO). Basta abrir no navegador para editar:

  1. Edição direta de texto (Inline WYSIWYG): Clique em títulos, corpo, selos e textos verticais para editar no local; ajuste o tamanho da fonte (A+/A-), cor da fonte e família tipográfica (Serifa / Moderno Japonês / Sans-serif / Brutalismo / Grid Suíço) com um clique.
  2. Substituição de imagem e alteração da forma do quadro: Clique duas vezes na imagem (ou arraste e solte do computador) para substituir instantaneamente por outra foto. A forma do quadro pode ser alternada livremente entre "Janela em arco (Arch)", "Cartão com cantos arredondados (Bento)", "Ângulos retos (Sharp)" e "Circular (Circle)".
  3. Movimentação livre de elementos, blocos e layouts: Mova elementos selecionados para cima/baixo/esquerda/direita (↑/↓/←/→), duplique blocos (⧉), exclua (🗑️), adicione novos blocos de texto/imagem (＋ Adicionar texto / 🖼️ Adicionar imagem), e inverta o layout de duas colunas com um clique (⇄ Inverter layout).
  4. Salvar HTML editado e exportar para PDF: O botão 💾 Salvar HTML na barra de ferramentas salva o estado editado como um único HTML; 🖨️ Exportar PDF gera um PDF de alta resolução para impressão com a barra de ferramentas automaticamente oculta.
  5. Edição posterior de vídeo e legendas (Post-Production Ready):
    • promo_video_studio_9x16.html / 16x9.html: Use a barra de tempo na parte inferior para buscar e reproduzir Cena 1 a 4, edite diretamente as legendas, títulos e fotos no vídeo. O botão 📝 Salvar legendas SRT exporta o arquivo de legendas editado imediatamente.
    • promo_captions.srt / promo_captions.vtt / promo_audio_track.wav: Podem ser importados diretamente no Premiere Pro, CapCut, DaVinci Resolve, Final Cut Pro, etc., para substituir legendas ou re-editar BGM/narração.

🛠️ Referência de funcionalidades opcionais (use apenas quando necessário)

O que fazerFlag / Comando adicional
Aplicar automaticamente o texto de uma ficha de conceito preenchida--concept-sheet /caminho/para/CONCEPT_QUESTION_SHEET.md
Reproduzir completamente as cores, estilo e fonte de imagem/URL de referência--ref-image /caminho/para/amostra.jpg ou --ref-url https://...
Especificar manualmente o estilo de design (padrão organic_editorial)--trend [organic_editorial | japanese_luxury | bento_glass | neo_brutalism | swiss_editorial | cyber_pop]
Gerar uma planilha de contato com 100 designs humanos selecionadospython3 .../scripts/curate_human_designs.py --out-dir ~/Downloads/curation_100
Modo de produção em massa (Plano B: DeepSeek + Flux ~0,6 yenes/ponto)--plan plan_b (padrão é --plan plan_a = assinatura 0)

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