Super-Prototyping

Kit de marca

Una carpeta de canvas contiene tableros: artboards HTML que tú construiste. Esto añade un segundo tipo de fila a la misma carpeta: imágenes que la empresa publicó, dispuestas como formas de imagen en lugar de tableros. Logotipos, muestras tipográficas, capturas de tienda, publicaciones sociales, creatividades publicitarias, fotografía de prensa.

El objetivo es la comparación vertical. Las filas son superficies, no tipos de activo, por lo que el avatar en X está encima del avatar en Instagram, que está encima del avatar en TikTok, y uno que discrepe de los demás se nota como una ruptura en la columna, sin tener que ir a buscarlo.

Lee references/sources.md antes de recopilar. Es el manual por superficie, en orden de rendimiento, con las instrucciones. Lee references/manifest.md cuando llegues a escribir el manifiesto y conectar el generador; contiene el esquema, el script de verificación y la regla de gen.py.

Qué estás produciendo

canvases/<slug>/
  assets/brand/
    manifest.json          el registro fuente: filas, en orden canónico
    identity/  social/  stores/  ads/  press/
  gen.py                   lee el manifiesto, añade sus filas a layout.json
  layout.json              lo que realmente renderizan el canvas y la página de marca

assets/brand/ es la única parte de assets/ a la que el canvas da una URL. El generador incrusta todo lo demás dentro de assets/ en un tablero como URI de datos, por lo que una imagen que necesita ser su propia forma debe vivir aquí.

Los siete pasos

Nunca escribas el manifiesto primero. Cada archivo en él ya debe haber pasado la verificación. Un archivo que falla se elimina; no recibe una entrada en el manifiesto con una advertencia en la etiqueta.

1. Mira uno ya terminado. La aplicación incluye doce. Enumérelos e imprime las filas de uno:

   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 no encontrado? Ejecuta sh <ruta-del-directorio-del-skill-sp>/scripts/install.sh (Windows: install.ps1) y sigue las instrucciones de references/install.md de ese skill. Una línea [super-prototyping:notice] en su stderr lleva su propia regla: termina el paso, luego haz lo que dice.
2. La propia marca o kit de prensa de la empresa. Los logotipos a máxima resolución, la tipografía y los valores de color provienen de aquí, así que revísalo primero. Consulta references/sources.md.
3. Listados de tiendas. La fuente masiva más fiable, y una API devuelve todas las capturas de pantalla a la vez.
4. Redes sociales. El avatar, el banner y 4–8 imágenes publicadas por plataforma. Verifica cada handle primero — consulta "Verificar la cuenta, no el handle" más abajo.
5. Sitio de marketing y sala de prensa. Arte de portada, ilustración de página de características, tarjetas og:image, fotografía de prensa.
6. Verifica cada archivo. Bytes, extensión, dimensiones, tamaño, duplicados. references/manifest.md contiene el script. Debe imprimir SIN PROBLEMAS.
7. Escribe el manifiesto, conecta gen.py, regenera, míralo en un navegador.

Las filas son un vocabulario fijo

Los títulos de las filas provienen de esta lista, y las filas que escribas deben aparecer como una subsecuencia de ella: este orden, omitiendo las que no apliquen.

Logotipo & marca denominativa · Tipografía · Dirección de arte · Identidad aplicada ·
X · Instagram · TikTok · YouTube · LinkedIn ·
App Store · Google Play · Microsoft Store ·
Tarjetas de anuncio · Publicidad pagada · Fotografía de prensa

Identidad primero, luego una fila por plataforma. Dos de esos títulos no son evidentes por sí mismos, así que para que coincidan con las carpetas incluidas:

• Dirección de arte es el estilo de imágenes que la propia empresa publica: sistemas de ilustración, arte de portada, tratamiento fotográfico, estudios de personajes, arte de guía.
• Identidad aplicada es la identidad sobre cosas: UI del producto, carteles, señalética, escenarios de eventos, merchandising.

No inventes un título de fila. Si una superficie no existe para este producto, déjala fuera: una fila ausente es correcta, una fila vacía es un error, y una fila con material de otra cosa es una mentira.

Cuánto

Las doce carpetas incluidas tienen entre 50 y 144 activos, la mayoría entre 70 y 120. La amplitud entre superficies es el objetivo, así que 4–8 imágenes publicadas por plataforma social superan a cuarenta capturas de pantalla de una tienda — pero una fila de tienda toma todo lo que la tienda tiene, que en esas carpetas es de 4 a 20.

Cinco reglas que deciden qué incluir

La procedencia es binaria y nunca es una suposición

"theirs" significa que la empresa lo publicó. "archive" significa que lo hizo un archivo de marca curado, y un archivo cuenta como tal solo cuando nombra la fuente original y la fecha de cada elemento. Si no puedes establecer ninguna de las dos, el activo no entra. Esta es la razón de ser de la hoja: una imagen declara de dónde vino, y algo curado por un tercero nunca pasa por algo que la empresa haya publicado.

Verifica la cuenta, no el handle

No confíes en un handle que te hayan dado, incluido uno escrito en una especificación. Confirma que resuelve, que está verificado donde existe verificación, y que es la empresa correcta. Las cuentas suplantadas e inactivas son comunes: en una pasada, el simple @tiktok en X resultó ser una cuenta de ofertas local no relacionada, y la de la empresa era @tiktok_us.

Indica en tu informe qué handles e IDs de tienda usaste, y cuáles resultaron ser incorrectos.

Un 200 no es prueba de que la página existe

Los sitios de marketing y las salas de prensa suelen ser aplicaciones de una sola página que responden con HTTP 200 para cualquier ruta, incluida una inventada. Verifica el <title> renderizado en su lugar. Un artículo real tiene el suyo propio; un slug inventado recibe el genérico del sitio:

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

Ejecútalo primero contra un slug deliberadamente falso en el mismo sitio, así sabrás cómo es su título genérico. Cualquier slug que devuelva el título genérico no existe: descártalo, y descarta cualquier cosa que hayas tomado de él.

Los mismos bytes dos veces son un solo activo

Después de cada lote de descargas, desde la carpeta del canvas:

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

No debe imprimir nada. Si un hash colisiona, elimina la copia nueva. Los recortes y redimensionamientos de una imagen no son idénticos byte a byte y ninguna herramienta aquí los detecta — eso es a ojo, y te quedas con la de mayor tamaño.

La extensión debe coincidir con los bytes

file <ruta> es la autoridad, no la URL desde la que descargaste. PNG guardado como .jpg, WebP guardado como .png y una página HTML de desafío guardada como .jpg han ocurrido. Renombra para que coincida. HEIF se convierte en lugar de renombrar, porque ningún navegador aquí lo dibujará:

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

Dónde van los archivos

grupo	contiene
identity	logotipo, marca denominativa, muestras tipográficas, color, dirección de arte, identidad aplicada
social	X, Instagram, TikTok, YouTube, LinkedIn
stores	App Store, Google Play, Microsoft Store
ads	creatividades de publicidad pagada, tarjetas de anuncio
press	fotografía de prensa

Usa estos cinco nombres; no inventes otros paralelos. Nombra un archivo por lo que es (x-avatar.jpg, appstore-iphone-03.jpg, wordmark-black.svg).

Algunas carpetas ya guardan una imagen en assets/brand/ que el generador incrusta en un tablero en lugar de dibujar como fila — una foto de perfil que usa una maqueta, por ejemplo. Esos no son material de marca; déjalos exactamente como están, y fuera del manifiesto. Encuéntralos antes de empezar:

git ls-files assets/brand/

Cada ruta que se imprime va en el conjunto IGNORE del script de verificación, escrita relativa a la carpeta del canvas, que es como el script compara.

Conectándolo

Una constante junto a las otras constantes de directorio de la carpeta:

BRAND_DIR = OUT / "assets" / "brand"

y una línea donde esa carpeta completa su lista de filas. Los generadores aquí vienen en dos formas, así que elige la que tengas delante:

    rows += json.loads((BRAND_DIR / "manifest.json").read_text())        # dentro de layout()
LAYOUT["rows"] += json.loads((BRAND_DIR / "manifest.json").read_text())  # LAYOUT a nivel de módulo

Las filas de marca van después de cada fila de tablero, y la lectura es incondicional, sin if BRAND_DIR.exists(). Añade la línea solo una vez que el manifiesto exista, o python3 gen.py lanzará FileNotFoundError en la lectura.

Luego python3 gen.py y verifica que el diff en layout.json sea una adición pura. Si elimina filas, detente y lee la sección "gen.py debe ser un no-op" de references/manifest.md; has encontrado un error real y regenerar podría cometer el daño.

El canvas recoge la carpeta sin más cambios: la fila se renderiza, el botón "Kit de marca" aparece en la barra de herramientas, y la carpeta se une al selector de la página de marca.

Verifica en un navegador antes de informar

Abre ambas páginas para la carpeta en el servidor de desarrollo:

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

Ejecuta esto en el kit de marca, no en el canvas. La carga diferida significa que una imagen que nunca se desplazó a la vista tampoco falló nunca, así que fíjate y cuenta:

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;  // debe ser 0

El canvas dibuja sus filas de marca como formas de tldraw y elimina las que están fuera de la pantalla, por lo que el mismo recuento allí no prueba nada. Haz zoom para ajustar y mira en su lugar.

Informe

• La salida completa del script de verificación, incluida la tabla de filas.
• Si la empresa publica un kit de marca o prensa formal, y su URL.
• Qué cuentas, handles e IDs de tienda usaste y verificaste, y cuáles resultaron ser incorrectos, inactivos, suplantados o de una empresa diferente.
• Cada candidato que rechazaste, y por qué: 404, bloqueado, no de la empresa, demasiado pequeño, duplicado, empresa equivocada.
• Lo que no pudiste alcanzar, dividido en lo que no existe y lo que existe pero fue bloqueado desde aquí.

Los vacíos declarados claramente superan a un manifiesto relleno. Un honesto "este producto no tiene listado en Microsoft Store" vale más que una fila de capturas de pantalla de otra cosa.