Cómo funciona Sketch to Brand

##Introducción

Un boceto puede ser torpe y seguir conteniendo una buena idea. Las líneas tiemblan y las proporciones son aproximadas. Incluso el papel acaba formando parte de la imagen, pero la forma que queríamos dibujar ya está ahí.

Limpiarlo una sola vez resolvería el logo. Sketch to Brand intenta continuar un poco más: interpreta el dibujo, propone tres versiones del símbolo y utiliza la elegida para construir un pequeño despliegue de marca sobre distintos productos.

El ejemplo del Lab parte de un boceto para Night Signal, un evento nocturno de radio y música electrónica. Esta es la orientación que lo acompaña:

An experimental late-night radio and electronic music event. Flat two-color risograph print, deep blue on cream, geometric and analog.

En este artículo vamos a ver cómo la referencia visual pasa de una etapa a la siguiente. Primero el boceto guía el rediseño. Después el logo seleccionado se convierte en la referencia de todas las aplicaciones.

##Un recorrido en tres etapas

El experimento encadena tres trabajos distintos:

1. Un modelo visual convierte el boceto y el brief en un lenguaje visual estructurado.
2. Un modelo de imagen utiliza el dibujo para generar tres interpretaciones del logo.
3. El logo elegido se aplica sobre cinco superficies y cualquier otra que añadamos.

En el flujo actual, cada etapa prepara la siguiente. La paleta propuesta durante el análisis se utiliza al rediseñar el símbolo. Las superficies también nacen en esa primera respuesta, pero no se generan hasta que hemos elegido qué versión del logo queremos conservar.

La herramienta permite subir un archivo o dibujar directamente sobre un lienzo de 1024 × 1024 píxeles en el navegador. A partir de ahí los dos caminos producen la misma entrada y siguen el mismo recorrido.

##Leer lo que es intencional

Una fotografía del boceto contiene más información que el diseño. Puede aparecer el color del papel, la perspectiva de la cámara o una nota escrita al margen. El primer trabajo consiste en separar la identidad de los restos físicos del dibujo.

Para hacerlo utilizamos Gemma 4 31B, un modelo visual con open weights. Recibe el boceto y el brief opcional. También le enviamos una pequeña pista de color calculada en el navegador.

Esta es su instrucción completa:

You define a reusable visual language from a rough identity sketch, so an image model can later draw anything in that same language. Study the sketch for its deliberate geometry, dominant shapes, hierarchy, negative space, and recurring motif.

Decide the brand palette. The brief is authoritative: when it names colors, use them and convert names to accurate hex codes. You are also given the colors sampled directly from the drawing as a hint; these may be genuine identity colors or merely pen and paper artifacts, so use judgment to keep the ones that read as intentional and discard ink-on-paper incidentals. Return two to six named hex colors that form a coherent identity.

Treat the brief as the source of medium, treatment, and mood: what material or process the brand should look like (for example flat risograph print, editorial photography, cut paper, 3D clay, technical line drawing) and how it should feel. When the brief is absent, infer a single coherent, tasteful medium and mood that suit the mark; commit to one, never hedge between several.

Return one language object:
- title: a short evocative name for this visual language (not a company name, not a slogan).
- essence: one plain sentence describing the language.
- palette: two to six named hex colors, as decided above.
- shape: the shape and construction logic drawn from the sketch (geometry, linework, weight, negative space).
- motifs: one to three reusable fragments taken from the sketch (a curve, junction, ray, silhouette, or negative-space shape). Never describe the whole logo, wordmark, or full composition as a motif.
- treatment: the medium and rendering treatment (grain, finish, lighting or flatness, texture).
- type: the typographic character the identity implies (casing, weight, width, feel) as description only.
- mood: two to five adjectives.
- surfaces: exactly five real products or surfaces this brand would put its identity on, chosen to show its range across a rollout. Span categories such as packaging, apparel, signage, a digital surface, print, and merch (do not pick five of the same kind). Each has a short label (the product name, e.g. "Tote bag", "Coffee bag", "App icon", "Billboard") and a product field describing the physical object as a plain noun phrase with NO style words and NO text (the brand mark is applied automatically). Pick surfaces that suit THIS brand.

Ignore the physical drawing and its surroundings: paper or notebook color, desk, ambient lighting, camera perspective, rough strokes, construction lines, measurements, and marginal notes. Do not turn those artifacts into style unless the brief explicitly asks for a handmade treatment. Do not invent a company name, slogan, product capability, or marketing claim. Return only the requested JSON.

El brief manda cuando contiene una decisión explícita. Si pide azul sobre crema, el modelo debe utilizar esos colores. Si no dice nada, puede proponer una paleta. También describe el tratamiento y el mood que encajan con la forma.

La última parte del prompt protege la interpretación. El papel crema podría ser parte de la identidad o simplemente el soporte que teníamos a mano. La tinta azul puede ser una decisión o el único bolígrafo disponible. El modelo recibe ambas cosas, pero no debe convertirlas automáticamente en reglas.

const candidates = [...bins.values()]
  .map((bin) => {
    const color = {
      r: bin.r / bin.count,
      g: bin.g / bin.count,
      b: bin.b / bin.count,
    }
    const maximum = Math.max(color.r, color.g, color.b)
    const minimum = Math.min(color.r, color.g, color.b)
    const saturation = maximum === 0 ? 0 : (maximum - minimum) / maximum

    return { ...color, count: bin.count, saturation }
  })
  .sort((left, right) => right.count - left.count)
  .slice(0, 128)

const selected = []
const dominant = candidates[0]

if (dominant) selected.push(dominant)

const accent = candidates
  .filter((candidate) => (
    candidate.count >= minimumAccentPixels
    && candidate.saturation >= 0.28
    && selected.every((color) => colorDistance(color, candidate) >= 64)
  ))
  .sort((left, right) => (
    (right.saturation ** 2 * Math.sqrt(right.count))
    - (left.saturation ** 2 * Math.sqrt(left.count))
  ))[0]

###El contrato del lenguaje visual

La respuesta tiene que alimentar la interfaz y preparar las etapas siguientes. Este es el esquema completo que utiliza la llamada:

El contrato del lenguaje visual

const languageSchema = {
  name: 'visual_language',
  strict: true,
  schema: {
    type: 'object',
    additionalProperties: false,
    required: ['language'],
    properties: {
      language: {
        type: 'object',
        additionalProperties: false,
        required: [
          'title',
          'essence',
          'palette',
          'shape',
          'motifs',
          'treatment',
          'type',
          'mood',
          'surfaces',
        ],
        properties: {
          title: { type: 'string', minLength: 2, maxLength: 48 },
          essence: { type: 'string', minLength: 12, maxLength: 160 },
          palette: {
            type: 'array',
            minItems: 2,
            maxItems: 6,
            items: {
              type: 'object',
              additionalProperties: false,
              required: ['name', 'hex'],
              properties: {
                name: { type: 'string', minLength: 2, maxLength: 30 },
                hex: { type: 'string', pattern: '^#[0-9A-Fa-f]{6}$' },
              },
            },
          },
          shape: { type: 'string', minLength: 12, maxLength: 200 },
          motifs: {
            type: 'array',
            minItems: 1,
            maxItems: 3,
            items: {
              type: 'object',
              additionalProperties: false,
              required: ['name', 'note'],
              properties: {
                name: { type: 'string', minLength: 3, maxLength: 50 },
                note: { type: 'string', minLength: 8, maxLength: 160 },
              },
            },
          },
          treatment: { type: 'string', minLength: 12, maxLength: 200 },
          type: { type: 'string', minLength: 8, maxLength: 160 },
          mood: {
            type: 'array',
            minItems: 2,
            maxItems: 5,
            items: { type: 'string', minLength: 3, maxLength: 24 },
          },
          surfaces: {
            type: 'array',
            minItems: 5,
            maxItems: 5,
            items: {
              type: 'object',
              additionalProperties: false,
              required: ['label', 'product'],
              properties: {
                label: { type: 'string', minLength: 3, maxLength: 40 },
                product: { type: 'string', minLength: 8, maxLength: 200 },
              },
            },
          },
        },
      },
    },
  },
}

js

shape, motifs, treatment, type y mood explican la lectura en la interfaz. Las siguientes llamadas consumen directamente dos partes: la paleta y las cinco superficies. La continuidad de la forma no viaja como texto porque volvemos a enviar el boceto como referencia visual.

strict: true pide al modelo que respete el contrato, pero no lo convierte en una garantía. El servidor comprueba que estén presentes los campos necesarios y valida las colecciones que utilizará después. Si la respuesta no es JSON válido o está incompleta, el análisis se repite una sola vez.

La configuración actual utiliza temperature: 0.35, thinkingLevel: 'off' y maxTokens: 2600. Igual que en los demás experimentos, son parámetros pragmáticos y no el resultado de un benchmark.

##Rediseñar el símbolo, no calcarlo

La segunda etapa vuelve a utilizar el boceto original, esta vez como referencia de FLUX.2 [klein] 9B. El objetivo no es limpiar cada trazo, sino conservar la idea y reconstruirla como un símbolo diseñado.

El prompt base marca esa diferencia:

Redesign this rough logo sketch into a polished, professional brand logo mark. Simplify and balance the forms, perfect the geometry and proportions. Do not trace the rough pen strokes or paper; reinterpret the concept as a clean, designed mark.

Sobre esta base ejecutamos tres enfoques predefinidos:

const DIRECTIONS = [
  {
    label: 'Refined',
    approach: 'Keep the original composition and motif, faithfully refined and cleaned up.',
  },
  {
    label: 'Minimal',
    approach: 'A minimal, reductive interpretation — the simplest confident version of the mark, monoline or single consistent stroke weight.',
  },
  {
    label: 'Emblem',
    approach: 'A bold emblem interpretation — the mark locked into a solid circular badge.',
  },
]

Refined intenta conservar la composición. Minimal busca la versión más reductiva del motivo. Emblem lo obliga a funcionar dentro de una insignia circular. Las tres opciones están definidas en el código del experimento, no en el análisis de Gemma. Así cada ejecución parte de los mismos tipos de transformación.

La paleta extraída en la primera fase se añade con nombres y valores hexadecimales. Las tres peticiones se ejecutan en paralelo con 1024 × 1024 píxeles y 4 pasos.

###Quitar el papel sin perder el dibujo

El negative prompt intenta impedir que el modelo trate el boceto como el acabado que debe imitar:

Defectos físicos y formatos que no deben llegar al logo

hand-drawn, sketchy, rough, ballpoint pen, scribble, traced, uneven wobbly lines, construction lines, paper texture, notebook, photograph, product mockup, 3d render, gibberish text, misspelled text, watermark, signature, jpeg artifacts, lowres, blurry

paper texture y construction lines separan la idea de su soporte. También bloqueamos el acabado hand-drawn. Las fotografías y los mockups quedan fuera porque en esta fase necesitamos un símbolo aislado. Los términos relacionados con texto intentan evitar que las notas del boceto reaparezcan convertidas en letras sin sentido.

##Convertir un logo en un despliegue

Cuando elegimos una dirección, esa imagen sustituye al boceto como referencia. Todos los mockups reciben la misma imagen del logo seleccionado, junto a la paleta y las cinco superficies propuestas durante el análisis.

Cada superficie se describe mediante dos campos. label sirve como nombre visible en la interfaz. product describe el objeto físico sin añadir estilo ni copy. El endpoint combina esa descripción con una instrucción común:

Professional product mockup photography, soft even studio lighting, clean minimal neutral background, shallow depth of field, the brand logo and its {palette} color identity printed cleanly on the product, crisp, premium, realistic materials.

En esta fase ya no intentamos describir otra vez la geometría del símbolo. La imagen elegida contiene mucha más información que una lista de motivos. Usarla como referencia reduce la posibilidad de que cada superficie reconstruya una versión diferente de la marca.

Las cinco peticiones se ejecutan en paralelo. Cada una genera una imagen cuadrada de 1024 píxeles con 4 pasos. Si una superficie falla, conserva su posición en el panel y las demás siguen disponibles.

El negative prompt se concentra en los fallos que romperían la presentación:

gibberish text, misspelled text, garbled logo, extra logos, watermark, signature, jpeg artifacts, lowres, blurry, deformed hands, extra fingers, duplicate product, collage, contact sheet, mockup grid, split panels

El término logo no forma parte del negative prompt porque es precisamente la referencia que queremos aplicar. Sí bloqueamos cualquier logo adicional y el texto ilegible. Las composiciones con varias superficies dentro de una sola imagen también quedan fuera.

##Añadir cualquier otra superficie

Las cinco propuestas forman el primer panel, pero no cierran el sistema. El estudio permite escribir otro objeto, por ejemplo a neon sign o an enamel pin, y enviarlo al mismo flujo.

La petición utiliza el logo actualmente seleccionado, la misma paleta y el tratamiento fotográfico de los demás mockups. El resultado se guarda dentro de esa dirección. Si cambiamos de logo y volvemos más tarde, cada panel recupera únicamente las superficies que generamos para él.

Esta última llamada es pequeña, pero prueba la idea que sostiene el experimento: la referencia puede seguir extendiéndose sin volver al boceto ni repetir todo el análisis.

##Qué sobrevive del boceto

Las tres direcciones conservan el círculo grande, el segundo círculo descentrado, la antena y el nombre Night Signal. Refined se mantiene más cerca del dibujo. Minimal simplifica el horizonte y las señales. Emblem invierte el contraste y encierra la composición en una insignia. Ninguna calca los trazos del bolígrafo, pero las tres parten claramente de la misma idea.

En el panel, el azul profundo y el crema sobreviven en las cinco aplicaciones, y el símbolo sigue siendo reconocible en la entrada, la camiseta, el teléfono, la señal y la portada. No es una reproducción exacta. El grosor de línea, el horizonte y la relación entre el círculo y la antena cambian ligeramente entre superficies.

No basta con que el panel resulte atractivo. La prueba es si todavía podemos reconocer la idea que había en el dibujo y si las aplicaciones parecen utilizar la misma marca. Un mockup bonito con otro símbolo sería un fallo del recorrido.

##Qué construye realmente

Sketch to Brand no entrega un archivo vectorial ni una familia tipográfica. Tampoco produce las reglas completas de una identidad lista para producción. Genera una interpretación estructurada y tres símbolos rasterizados. Con uno de ellos prepara una colección de mockups para explorar la dirección elegida.

El hilo conductor no es una descripción textual del estilo. Es una cadena de referencias visuales. El boceto lleva su geometría hasta los logos y el logo elegido lleva esa decisión hasta los productos.

El dibujo deja de ser una imagen que arreglar y se convierte en una referencia que seguir.