Super-prototyping da ReScienceLab

Kit de Marca

Uma pasta de canvas contém pranchetas: artboards HTML que você construiu. Esta skill adiciona um segundo tipo de linha à mesma pasta — imagens publicadas pela empresa, dispostas como formas de imagem em vez de pranchetas. Logotipos, amostras tipográficas, capturas de tela da loja, posts de redes sociais, criativos de anúncios, fotos de imprensa.

O objetivo é a comparação em uma coluna. As linhas são superfícies, não tipos de ativos, então o avatar no X fica acima do avatar no Instagram, que fica acima do avatar no TikTok, e um que discorda dos outros aparece como uma quebra na coluna, em vez de algo que você precise procurar.

Leia references/sources.md antes de coletar. É o manual por superfície, em ordem de rendimento, com as instruções. Leia references/manifest.md quando chegar a hora de escrever o manifesto e configurar o gerador; ele contém o esquema, o script de verificação e a regra do gen.py.

O que você está produzindo

canvases/<slug>/
  assets/brand/
    manifest.json          o registro fonte: linhas, em ordem canônica
    identity/  social/  stores/  ads/  press/
  gen.py                   lê o manifesto, acrescenta suas linhas ao layout.json
  layout.json              o que o canvas e a página de marca realmente renderizam

assets/brand/ é a única parte de assets/ à qual o canvas dá uma URL. O gerador incorpora todo o resto em assets/ em uma prancheta como uma URI de dados, então uma imagem que precisa ser sua própria forma deve viver aqui.

Os sete passos

Nunca escreva o manifesto primeiro. Cada arquivo nele já deve ter passado pela verificação. Um arquivo que falha é excluído; ele não recebe uma entrada no manifesto com uma ressalva no rótulo.

1. Veja um finalizado. O aplicativo vem com doze. Liste-os e imprima as linhas de um:

   KIT="$(sp root)"
   ls "$KIT"/canvases/*/assets/brand/manifest.json
   python3 -c 'import json,sys
   for r in json.load(open(sys.argv[1])): print(len(r["images"]), r["title"])' \
     "$KIT/canvases/claude-ios/assets/brand/manifest.json"
   

   sp não encontrado? Execute sh <sp-canvas skill dir>/scripts/install.sh (Windows: install.ps1) e siga o references/install.md dessa skill. Uma linha [super-prototyping:notice] no stderr dela carrega sua própria regra: termine o passo, então faça o que ela diz.
2. A marca ou kit de imprensa da própria empresa. Logotipos em resolução total, a fonte e os valores de cor vêm daqui, então verifique primeiro. Veja references/sources.md.
3. Listagens de lojas. A fonte em massa mais confiável, e uma API retorna cada captura de tela de uma só vez.
4. Redes sociais. O avatar, o banner e 4–8 imagens postadas por plataforma. Verifique cada handle primeiro — veja "Verifique a conta, não o handle" abaixo.
5. Site de marketing e sala de imprensa. Arte de destaque, ilustração de página de recurso, cartões og:image, fotografia de imprensa.
6. Verifique cada arquivo. Bytes, extensão, dimensões, tamanho, duplicatas. references/manifest.md tem o script. Ele deve imprimir NO PROBLEMS.
7. Escreva o manifesto, configure gen.py, regenere, veja em um navegador.

As linhas são um vocabulário fixo

Os títulos das linhas vêm desta lista, e as linhas que você escrever devem aparecer como uma subsequência dela: esta ordem, pulando qualquer uma que não se aplique.

Logotipo & marca nominativa · Tipo de letra · Direção de arte · Identidade aplicada ·
X · Instagram · TikTok · YouTube · LinkedIn ·
App Store · Google Play · Microsoft Store ·
Cartões de anúncio · Publicidade paga · Fotografia de imprensa

Identidade primeiro, depois uma linha por plataforma. Dois desses títulos não são auto-evidentes, então para corresponder às pastas enviadas:

• Direção de arte é o estilo de imagem que a própria empresa publica: sistemas de ilustração, arte de destaque, tratamento fotográfico, estudos de personagem, arte de diretriz.
• Identidade aplicada é a identidade em coisas: UI do produto, pôsteres, sinalização, palcos de eventos, mercadorias.

Não invente um título de linha. Se uma superfície não existe para este produto, deixe-a de fora: uma linha ausente é correta, uma linha vazia é um erro, e uma linha de material de outra pessoa é uma mentira.

Quantidade

As doze pastas enviadas têm de 50 a 144 ativos, a maioria entre 70 e 120. A amplitude entre superfícies é o objetivo, então 4–8 imagens postadas por plataforma social vence quarenta capturas de tela de uma loja — mas uma linha de loja lega tudo o que a loja tem, que nessas pastas é de 4 a 20.

Cinco regras que decidem o que entra

A proveniência é binária e nunca é um palpite

"theirs" significa que a empresa publicou. "archive" significa que um arquivo de marca curado publicou, e um arquivo conta como tal somente quando nomeia a fonte original e a data de cada item. Se você não puder estabelecer nenhum dos dois, o ativo não entra. Esta é toda a razão pela qual a planilha existe: uma imagem declara de onde veio, e algo curado por terceiros nunca passa como algo que a empresa divulgou.

Verifique a conta, não o handle

Não confie em um handle que lhe foi dado, incluindo um escrito em uma especificação. Confirme se ele resolve, se é verificado onde a verificação existe, e se é a empresa certa. Contas de fachada e inativas são comuns: em uma passagem, o simples @tiktok no X acabou sendo uma conta de ofertas locais não relacionada, e o da empresa era @tiktok_us.

Diga em seu relatório quais handles e IDs de loja você usou, e quais acabaram sendo errados.

Um 200 não é prova de que a página existe

Sites de marketing e salas de imprensa geralmente são aplicativos de página única que servem HTTP 200 para qualquer caminho, incluindo um que você inventou. Verifique o <title> renderizado. Um artigo real tem o seu próprio; um slug inventado obtém o título genérico do site:

curl -sL "$URL" | grep -o '<title>[^<]*</title>'

Execute isso primeiro contra um slug deliberadamente falso no mesmo site, para que você saiba como é o título genérico. Qualquer slug que retorne com o título genérico não existe: descarte-o e descarte qualquer coisa que você tenha tirado dele.

Os mesmos bytes duas vezes são um ativo

Após cada lote de downloads, a partir da pasta do canvas:

find assets/brand -type f -exec md5 -r {} \; | sort | awk '{print $1}' | uniq -d

Ele não deve imprimir nada. Se um hash colidir, exclua a nova cópia. Cortes e redimensionamentos de uma imagem não são idênticos em bytes e nenhuma ferramenta aqui os pega — isso é a olho, e você fica com o maior.

A extensão tem que corresponder aos bytes

file <caminho> é a autoridade, não a URL de onde você baixou. PNG salvo como .jpg, WebP salvo como .png e uma página de desafio HTML salva como .jpg já aconteceram. Renomeie para corresponder. HEIF é convertido em vez de renomeado, porque nenhum navegador aqui o desenhará:

sips -s format jpeg in.heic --out out.jpg

Onde os arquivos vão

grupo	contém
identity	logotipo, marca nominativa, amostras tipográficas, cor, direção de arte, identidade aplicada
social	X, Instagram, TikTok, YouTube, LinkedIn
stores	App Store, Google Play, Microsoft Store
ads	criativos de publicidade paga, cartões de anúncio
press	fotografia de imprensa

Use esses cinco nomes; não invente paralelos. Nomeie um arquivo pelo que ele é (x-avatar.jpg, appstore-iphone-03.jpg, wordmark-black.svg).

Algumas pastas já mantêm uma imagem em assets/brand/ que o gerador incorpora em uma prancheta em vez de desenhar como uma linha — uma foto de perfil que uma maquete usa, por exemplo. Essas não são material de marca; deixe-as exatamente como estão, e fora do manifesto. Encontre-as antes de começar:

git ls-files assets/brand/

Cada caminho impresso vai para o conjunto IGNORE do script de verificação, escrito relativo à pasta do canvas, que é como o script compara.

Configurando

Uma constante ao lado das outras constantes de diretório da pasta:

BRAND_DIR = OUT / "assets" / "brand"

e uma linha onde quer que essa pasta termine sua lista de linhas. Os geradores aqui vêm em dois formatos, então combine com o que está à sua frente:

    rows += json.loads((BRAND_DIR / "manifest.json").read_text())        # dentro de layout()
LAYOUT["rows"] += json.loads((BRAND_DIR / "manifest.json").read_text())  # LAYOUT no nível do módulo

As linhas de marca vão após cada linha de prancheta, e a leitura é incondicional, sem if BRAND_DIR.exists(). Adicione a linha apenas quando o manifesto existir, ou python3 gen.py lançará FileNotFoundError na leitura.

Então python3 gen.py e verifique se o diff para layout.json é uma adição pura. Se ele excluir linhas, pare e leia a seção "gen.py deve ser um no-op" de references/manifest.md; você encontrou um erro real e regenerar comprometeria os dados.

O canvas pega a pasta sem nenhuma outra alteração: a linha renderiza, o botão "Kit de Marca" aparece na barra de ferramentas, e a pasta entra no seletor da página de marca.

Verifique em um navegador antes de relatar

Abra ambas as páginas para a pasta no servidor de desenvolvimento:

http://127.0.0.1:<porta>/?canvas=<slug>            o canvas
http://127.0.0.1:<porta>/brand.html?canvas=<slug>  o kit de marca

Execute isso no kit de marca, não no canvas. O carregamento preguiçoso significa que uma imagem que nunca rolou para a visualização também nunca falhou, então force e conte:

const imgs = [...document.querySelectorAll("main img")];
for (const i of imgs) i.loading = "eager";
await Promise.allSettled(imgs.map((i) => i.decode()));
imgs.filter((i) => i.naturalWidth === 0).length;  // deve ser 0

O canvas desenha suas linhas de marca como formas tldraw e elimina as que estão fora da tela, então a mesma contagem lá não prova nada. Dê zoom para ajustar e veja.

Relatório

• A saída completa do script de verificação, incluindo a tabela de linhas.
• Se a empresa publica um kit de marca ou imprensa formal, e sua URL.
• Quais contas, handles e IDs de loja você usou e verificou, e quais acabaram sendo errados, inativos, de fachada ou de uma empresa diferente.
• Cada candidato que você rejeitou, e por quê: 404, bloqueado, não primário, muito pequeno, duplicado, empresa errada.
• O que você não conseguiu alcançar, dividido entre o que não existe e o que existe mas estava bloqueado daqui.

Lacunas declaradas claramente vencem um manifesto inflado. Um honesto "este produto não tem listagem na Microsoft Store" vale mais do que uma linha de capturas de tela de outra pessoa.