brand-intake: tokens reales dentro, brand.json fuera
El film debe verse como el producto, por lo que los tokens provienen del producto, nunca del gusto. Orden de fuentes, detente en la primera que produzca un valor para un campo, y registra de dónde vino cada valor:
- El repositorio del usuario (mejor: tokens exactos, nombres de fuente reales, el archivo de logotipo real).
- La URL en vivo (estilos calculados, meta tags, header SVG).
- Capturas de pantalla que el usuario proporcione (muestreo de píxeles).
- Pregunta al usuario por cualquier cosa que aún falte. Nunca adivines.
Salida (rutas relativas a launch-video/): films/<slug>/brand.json, films/<slug>/BRAND-SOURCES.md, y archivos de logotipo copiados tal cual a public/films/<slug>/brand/ (para que las escenas los carguen con staticFile()). Recetas de extracción: references/sources.md. Mapeo de campos, fuentes de respaldo, cálculo de contraste: references/brand-json.md.
Pasos
- Encuentra la raíz del producto. Si
launch-video/está dentro de un repositorio de producto, la raíz del repo está un nivel arriba. De lo contrario, pide la URL y las capturas de pantalla. Anota la pila: dependencias depackage.json(versión de tailwindcss, next, @fontsource/*, shadcn). - Colores desde el repositorio. En orden: variables
@themede Tailwind v4 en CSS,tailwind.config.{js,ts,cjs,mjs}theme.extend.colorsde Tailwind v3, tokens de shadcn englobals.css(--background,--foreground,--primary,--muted,--card,--accent), otras propiedades personalizadas de:root. Convierte HSL/OKLCH/RGB a hexadecimal de 6 dígitos. Usa el tema que use el sitio de marketing (oscuro o claro), no mezcles ambos. - Fuentes desde el repositorio. Importaciones de
next/font/googleonext/font/local, dependencias@fontsource*,@font-face,font-familyenbody/html/h1,fontFamilyde Tailwind. Registra los nombres de familia y pesos realmente utilizados. - Logotipo desde el repositorio. Busca SVG primero:
public/logo*.svg,public/*mark*.svg,app/icon.svg,public/favicon.svg,src/assets/*logo*,src/components/*Logo*(JSX SVG en línea: extrae el<svg>), luego PNG ≥ 512 px (apple-touch-icon.pngtiene 180 px: último recurso para una marca, nunca para un logotipo de texto). Cópialo sin modificar apublic/films/<slug>/brand/. - Radio y tema.
--radiusoborderRadiusde Tailwind; tema = oscuro si la luminancia relativa del fondo < 0.2. - Completa las lagunas desde la URL en vivo (
references/sources.md§ URL en vivo): meta de color del tema,og:image,link rel=icon, SVG en línea del header, estilos calculados debody, botón primario,h1. - Completa las lagunas desde capturas de pantalla: muestrea píxeles en puntos nombrados (fondo de página, texto del cuerpo, botón primario, tarjeta). Escribe las coordenadas de píxeles en BRAND-SOURCES.md.
- Nombre, eslogan, URL: desde
package.jsonname/description, el<title>del sitio,h1del héroe,og:description, primera línea del README. Usa las propias palabras del usuario; nunca escribas un nuevo eslogan aquí (la historia hace la copia). - Mapea fuentes que no puedas distribuir o cargar a una fuente OFL distribuible según su rol (brand-json.md § fuentes) e indícalo.
- Verificación de contraste (brand-json.md § contraste): fg sobre bg ≥ 4.5:1 requerido (objetivo 7:1), acento sobre bg ≥ 3:1. Escribe los números. Acento que falla → mantenlo para formas, elige
fgpara texto sobre él. - Escribe
brand.json, luego valida si existeschemas/brand.schema.json: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 - Escribe
BRAND-SOURCES.md: una línea por valor → fuente (archivo:línea, URL + selector, o captura de pantalla + x,y). - Muestra al usuario un resumen de 6 líneas (nombre, tema, 6 muestras como hexadecimal, fuentes, archivo de logotipo, cualquier cosa mapeada o preguntada).
Paradas forzosas (no continúes el proceso)
| Situación | Haz | Nunca |
|---|---|---|
| No hay archivo de logotipo en el repositorio, sitio web ni capturas | Pregunta: "Envía el logotipo como SVG (mejor) o un PNG ≥ 512 px con transparencia." | dibujar, trazar, generar o aproximar un logotipo |
| Logotipo solo como un favicon pequeño | Pide un archivo más grande | escalar un favicon de 32 px a una marca de héroe |
| No se capturaron colores (sin acceso al repo, sitio bloqueado, sin capturas) | Pide la URL o 2–3 capturas de pantalla, o los códigos hexadecimales | elegir colores "bonitos" o una paleta predeterminada |
| Paletas conflictivas (app vs marketing) | Pregunta cuál debe usar el film; por defecto, el sitio de marketing | mezclarlas |
| El usuario quiere una marca de texto porque no hay logotipo | Permitido solo con un "sí" explícito: nombre del producto en la fuente de visualización, color fg | presentarlo como su logotipo |
Reglas
- Copia los archivos de logotipo byte por byte. No cambies de color, recortes ni "limpies" un logotipo a menos que el usuario lo solicite.
- Nunca uses el logotipo de otra empresa ni los logotipos de los clientes del usuario sin que el usuario confirme que tiene los derechos.
- Nunca obtengas fuentes de fuentes cuya licencia prohíba la redistribución en un repositorio (fuentes FFL de Fontshare como Satoshi o General Sans, Apple SF Pro): mapéalas (brand-json.md § fuentes).
brand.jsonno contiene secretos ni datos personales más allá del nombre público del producto y la URL.- Volver a ejecutar la captura sobrescribe solo los campos cuya fuente cambió; conserva los campos que el usuario editó manualmente (primero haz diff).
- Los skills posteriores leen solo
brand.json; nunca codifiques valores de marca hexadecimal en escenas[craft/06#grade-discipline].