root@construct:~/projects/nike$
<-- voltar para /projects

Nike Asset Library e AutoCrop

Tecnologia de marketing para as campanhas globais da Nike

ReactTypeScriptPythonAWS Step FunctionsEventBridgeDynamoDB

>Contexto

De setembro de 2024 a agosto de 2026 fui Senior Software Engineer de Marketing Technology na Nike, como contratado. O trabalho era dar aos times de marketing e de criação da Nike, no mundo todo, ferramentas para guardar, achar, preparar e publicar os assets das campanhas. Esses sistemas atendem centenas de campanhas.

Construí a Asset Library como único engenheiro. Ela é a base de descoberta e distribuição de mais de 16 milhões de assets digitais, e a descoberta de assets subiu 461% com ela.

Também construí o AutoCrop, um serviço de GenAI que gera recortes de imagem para cada formato de mídia. O preparo de uma entrega de campanha caiu de 6,4h para 3,6h por designer. E automatizei a geração de peças a partir do auto-layout do Figma, com a tipografia certa em cada formato.

Liderei o front end de dois squads de Marketing Technology e cuidei do app React/TypeScript que eles dividiam: arquitetura, padrões de UI e padrões de code review.

>Arquitetura (HLD)

Foi trabalho de contrato, então descrevo por papel, sem nomes internos. Os times de marketing e de criação da Nike usam três frentes: a Asset Library, onde acham e distribuem mais de 16 milhões de assets digitais; os painéis em React e Next.js, onde gerenciam mais de 5 milhões de imagens por semana; e o AutoCrop, um serviço de GenAI que gera os recortes de imagem de cada formato de mídia.

Na AWS, a entrada de assets é um workflow orientado a eventos, com Step Functions, EventBridge, DynamoDB e WebSockets. A ingestão roda em vários passos, com enriquecimento, e cada passo é idempotente, com retentativa e recuperação de falha: sob a carga das campanhas globais, um passo que parou no meio pode rodar de novo sem estragar nada. A geração de peças segue outro caminho: um conversor puxa os templates de auto-layout pela Figma API, transforma tudo num modelo interno usado da ingestão até o render final, e um serviço de flattening gera a saída de cada formato.

O pipeline de assets com GenAI que liderei é escrito em TypeScript/Node e Python. O CI roda sobre um monorepo Nx: com cache do grafo de tarefas e builds incrementais, os minutos de build caíram 92%.

Passe o mouse ou foque uma peça: ela acende com as ligações.
quem usaAWSserviços externos2 Asset Library1 Marketing e criação3 Painéis de gestão5 Render final7 Ingestão em passos4 AutoCrop11 Modelo generativo6 Conversor do Figma9 Barramento de eventos12 Figma8 Canal em tempo real10 Dados do workflow
12 peças9 ligações4 áreas

Componentes

  • Asset Library :: Construí como único engenheiro: é onde os times acham e distribuem mais de 16 milhões de assets digitais.
  • Painéis de gestão :: Painéis em React e Next.js que os times de marketing usam para gerenciar mais de 5 milhões de imagens por semana.
  • AutoCrop :: Serviço de GenAI que gera os recortes de imagem de cada formato de mídia e tira do designer o recorte manual.
  • Workflow de ingestão :: Workflow orientado a eventos na AWS (Step Functions, EventBridge, DynamoDB, WebSockets), em vários passos com enriquecimento, cada um idempotente, com retentativa e recuperação de falha.
  • Conversor do Figma :: Puxa os templates de auto-layout pela Figma API e os transforma no modelo interno usado da ingestão até o render final.
  • Render final :: Serviço de flattening que gera a saída final de cada formato (editorial, site, campanha, header) com a tipografia certa.
  • Monorepo e CI :: Monorepo Nx com cache do grafo de tarefas e builds incrementais, que cortaram 92% dos minutos de build no CI.

>Trade-offs

Todo passo da ingestão é idempotente, com retentativa e recuperação de falha.

Alternativa descartada: Passos que rodam uma vez e contam que nada falhe no meio.

Por quê: Num sistema orientado a eventos, qualquer passo pode rodar duas vezes. Sob a carga das campanhas globais, um passo que parou no meio tem que poder rodar de novo com segurança.

Um único modelo interno, convertido do auto-layout do Figma e usado da ingestão até o render final.

Alternativa descartada: Montar cada formato da peça a partir do arquivo do Figma, um por um.

Por quê: Com um só modelo, o sistema gera todas as variações de formato (editorial, site, campanha, header) com a tipografia certa.

Cache do grafo de tarefas e builds incrementais no monorepo Nx.

Alternativa descartada: Build completo do monorepo a cada mudança.

Por quê: Cortou 92% dos minutos de build no CI.

>Destaques

  • >16M+ assets digitais na Asset Library, que construí como único engenheiro
  • >+461% na descoberta de assets com a Asset Library
  • >-44% no preparo dos designers com o AutoCrop: de 6,4h para 3,6h por entrega de campanha
  • >-80% no tempo para produzir a arte das campanhas, com o pipeline de assets com GenAI que liderei
  • >Painéis em React/Next.js para gerenciar 5M+ imagens por semana
  • >-92% em minutos de build no CI do monorepo Nx
Nike Asset Library e AutoCrop | The Broad Way | Kinho.dev