brand-intake: tokens reais, brand.json de saída
O filme deve se parecer com o produto, então os tokens vêm do produto, nunca do gosto. Ordem das fontes, pare na primeira que fornecer um valor para um campo e registre de onde cada valor veio:
- O repositório do usuário (melhor: tokens exatos, nomes de fontes reais, o arquivo de logotipo real).
- A URL ativa (estilos computados, meta tags, SVG de cabeçalho).
- Capturas de tela fornecidas pelo usuário (amostragem de pixels).
- Pergunte ao usuário por qualquer coisa ainda faltando. Nunca adivinhe.
Saída (caminhos relativos a launch-video/): films/<slug>/brand.json, films/<slug>/BRAND-SOURCES.md e arquivos de logotipo copiados como estão para public/films/<slug>/brand/ (para que as cenas os carreguem com staticFile()).
Receitas de extração: references/sources.md. Mapeamento de campos, fallbacks de fontes, matemática de contraste: references/brand-json.md.
Etapas
- Encontre a raiz do produto. Se
launch-video/estiver dentro de um repositório de produto, a raiz do repositório está um nível acima. Caso contrário, peça a URL e as capturas de tela. Observe a stack: dependências depackage.json(versão do tailwindcss, next, @fontsource/*, shadcn). - Cores do repositório. Em ordem: variáveis
@themedo Tailwind v4 no CSS,tailwind.config.{js,ts,cjs,mjs}theme.extend.colorsdo Tailwind v3, tokens shadcn emglobals.css(--background,--foreground,--primary,--muted,--card,--accent), outras propriedades personalizadas:root. Converta HSL/OKLCH/RGB para hex de 6 dígitos. Use o tema que o site de marketing usa (escuro ou claro), não ambos misturados. - Fontes do repositório. Imports
next/font/googleounext/font/local, dependências@fontsource*,@font-face,font-familyembody/html/h1,fontFamilydo Tailwind. Registre os nomes das famílias e pesos realmente usados. - Logotipo do repositório. Procure por SVG primeiro:
public/logo*.svg,public/*mark*.svg,app/icon.svg,public/favicon.svg,src/assets/*logo*,src/components/*Logo*(JSX SVG inline: extraia o<svg>), depois PNG ≥ 512 px (apple-touch-icon.pngtem 180 px: último recurso para uma marca, nunca para um wordmark). Copie parapublic/films/<slug>/brand/sem modificações. - Raio e tema.
--radiusouborderRadiusdo Tailwind; tema = escuro se a luminância relativa do bg < 0.2. - Preencha lacunas da URL ativa (
references/sources.md§ URL ativa): meta theme-color,og:image,link rel=icon, SVG de cabeçalho inline, estilos computados debody, botão primário,h1. - Preencha lacunas de capturas de tela: amostre pixels em pontos nomeados (fundo da página, texto do corpo, botão primário, cartão). Escreva as coordenadas dos pixels em BRAND-SOURCES.md.
- Nome, tagline, URL: de
package.jsonname/description, o<title>do site,h1do hero,og:description, primeira linha do README. Use as próprias palavras do usuário; nunca escreva uma nova tagline aqui (a história cuida do texto). - Mapeie fontes que você não pode enviar ou carregar para uma fonte OFL enviada por função (brand-json.md § fontes) e informe isso.
- Verificação de contraste (brand-json.md § contraste): fg sobre bg ≥ 4.5:1 obrigatório (alvo 7:1), accent sobre bg ≥ 3:1. Escreva os números. Falha de accent → mantenha para formas, escolha
fgpara texto sobre ele. - Escreva
brand.json, depois valide seschemas/brand.schema.jsonexiste:npx -y -p ajv-cli@5 -p ajv-formats ajv validate --spec=draft2020 -c ajv-formats -s schemas/brand.schema.json -d films/<slug>/brand.json - Escreva
BRAND-SOURCES.md: uma linha por valor → fonte (arquivo:linha, URL + seletor, ou captura de tela + x,y). - Mostre ao usuário um resumo de 6 linhas (nome, tema, 6 amostras como hex, fontes, arquivo de logotipo, qualquer coisa mapeada ou perguntada).
Paradas rígidas (não continue o pipeline)
| Situação | Faça | Nunca |
|---|---|---|
| Nenhum arquivo de logotipo no repositório, site ou capturas de tela | Pergunte: "Envie o logotipo como SVG (melhor) ou um PNG ≥ 512 px com transparência." | desenhe, trace, gere ou aproxime um logotipo |
| Logotipo apenas como um favicon pequeno | Peça um arquivo maior | aumente a resolução de um favicon de 32 px para uma marca hero |
| Nenhuma cor capturada (sem acesso ao repositório, site bloqueado, sem capturas de tela) | Peça a URL ou 2-3 capturas de tela, ou os códigos hex | escolha cores "legais" ou uma paleta padrão |
| Paletas conflitantes (aplicativo vs marketing) | Pergunte qual o filme deve usar; padrão para o site de marketing | misture-as |
| Usuário quer um wordmark de texto porque não existe logotipo | Permitido apenas com "sim" explícito: nome do produto na fonte de exibição, cor fg | apresente como logotipo deles |
Regras
- Copie arquivos de logotipo byte por byte. Não recolorir, cortar ou "limpar" um logotipo a menos que o usuário peça.
- Nunca use o logotipo de outra empresa ou os logotipos dos clientes do usuário sem que o usuário confirme que tem o direito.
- Nunca baixe fontes de fontes cuja licença proíba a redistribuição em um repositório (faces FFL do Fontshare, como Satoshi ou General Sans, Apple SF Pro): mapeie-as (brand-json.md § fontes).
brand.jsonnão contém segredos nem dados pessoais além do nome público do produto e URL.- Reexecutar a captura substitui apenas campos cuja fonte mudou; mantenha campos que o usuário editou manualmente (dif primeiro).
- Skills downstream leem apenas
brand.json; nunca codifique valores hex da marca em cenas[craft/06#grade-discipline].