saas-logo

Logotipo SaaS

Cada archivo que usa esta habilidad está en su propia carpeta, junto a este SKILL.md, y las rutas aquí son relativas a esa carpeta. No necesita nada de otras habilidades ni de otras carpetas, así que no las busques. A menos que el usuario nombre otro lugar, guarda todo lo que produzcas en out/saas-logo/ dentro del proyecto actual.

Un símbolo, plano. Lo que obtienes es la marca sola sobre un fondo transparente, recortada a sus bordes, más la misma marca en su icono de aplicación: archivos que se colocan directamente en un sitio web. Las marcas de las que se nutre esta habilidad se estudian en references/analysis.md: qué es cada una de las once en geometría, las ocho reglas que todas siguen y las cinco familias en las que se agrupan. Léelo una vez antes del primer logotipo; es lo que significa aquí "parece un logotipo SaaS real".

El prompt enviado al modelo de imágenes reside en prompt.md y contiene todo lo que el modelo necesita: las reglas compartidas (lienzo, icono de aplicación, rellenos planos, peso, color) y las cinco familias en las que se agrupan las marcas de referencia, cada una con sus propias reglas. Tu trabajo es el razonamiento previo al prompt (la familia y el símbolo) y la evaluación posterior.

Pasos

1. Conoce el producto

Lee el resumen, el README, el texto de la página de inicio, lo que exista. Escribe una línea: "Nombre — qué hace el usuario con él, en un verbo, sobre un objeto." "Entrega tareas a agentes de codificación" → entregar, una tarjeta de tarea. "Publica una carpeta como sitio web" → publicar, una página. La marca muestra el verbo o el objeto, nunca la categoría (sin engranajes, nubes, cohetes, gráficos). Anota el color de la marca si el producto tiene uno (sus tokens CSS, su favicon) y su inicial.

2. Elige una familia

Las cinco familias en la sección 3 de prompt.md, con para qué es mejor cada una:

• Primitiva sólida (Vercel, Miro): infraestructura, herramientas para desarrolladores, cualquier cosa que quiera sentirse inevitable, donde una forma lleva la idea.
• Primitiva repetida (Slack, Claude, Linear, Intercom, PostHog): colaboración, comunicación, IA, cualquier cosa sobre muchas partes moviéndose juntas.
• Letra (Webflow, Miro, Notion): un producto cuyo nombre es su marca, cuando la inicial tiene una forma fuerte (A, M, N, W, K, Z, S, V).
• Objeto facetado (Airtable, la página de Notion): datos, almacenamiento, documentos, cualquier cosa con algo que se llena o apila.
• Trazo suave (Mintlify, Intercom): productos amigables orientados al consumidor, documentación, soporte, cualquier cosa cálida en lugar de técnica.

Cuando el usuario nombre una marca de referencia, la familia está dada: "como Slack" o "como Claude" → Primitiva repetida; "como Vercel" → Primitiva sólida; "como Webflow" o "como Notion" → Letra; "como Airtable" → Objeto facetado; "como Mintlify" o "como Intercom" → Trazo suave. Cuando el usuario nombre una familia, úsala. Cuando nada apunte a ninguna parte, distribuye los conceptos entre dos o tres familias; la hoja decide.

3. Escribe 3–4 conceptos

Cada concepto tiene 2–3 frases que el modelo de imágenes puede dibujar sin adivinar:

• Símbolo como geometría, no como sustantivo. No "una tarjeta de tarea" sino "un rectángulo redondeado, más ancho que alto, con un segundo idéntico detrás desplazado hacia arriba y a la derecha un cuarto de su altura". No "un numeral" sino "cuatro píldoras, cada una una barra con un bulto redondo en un extremo, giradas 90° alrededor del centro".
• El conteo y el ritmo para una primitiva repetida: "cinco barras verticales, alturas escalonadas 3-5-4-2-3 de izquierda a derecha".
• La familia, nombrada, y para una letra, qué letra y qué dos o tres trazos.
• El color: el color de la marca en hexadecimal cuando lo haya, o "icono negro, marca blanca" o "icono marigold, marca negra".
• Exclusiones cuando el concepto invite a extras: "sin punto", "sin marco alrededor de las barras", "el contorno permanece vacío".

Haz que las siluetas difieran entre conceptos (alta vs. ancha, una masa vs. dispersa). Descarta cualquier concepto que necesite más primitivas de las que su familia permite, o un color que la familia prohíba.

4. Compón y genera

Para cada concepto, toma prompt.md y reemplaza {{input}} con:

<Producto> — qué es y qué hace. El verbo es <verbo>; el objeto es <objeto>.
Color de marca: <hex o "ninguno">. Inicial: <letra>.
Familia: <una de las cinco>

Concepto: <el concepto del paso 3>

Genera todos los conceptos en paralelo a través de OpenRouter (abajo), una imagen cada uno, cuadrada. Guarda como <concepto>.png o .jpg, el que haya devuelto (el fragmento de abajo los distingue).

Modelo predeterminado: google/gemini-3.1-flash-lite-image (Nano Banana 2 Lite), el más barato y rápido; maneja geometría plana lo suficientemente bien para toda la ejecución, y un concepto que falla en él generalmente falla también en los otros. Mejora solo cuando se solicite, o cuando un guardado necesite una representación más limpia de lo que dan dos rondas: google/gemini-3.1-flash-image (Nano Banana 2), luego google/gemini-3-pro-image (Nano Banana Pro), que dibuja la geometría más limpia: extremos planos, peso uniforme, rellenos planos verdaderos.

5. Observa

Coloca los iconos en fila con bash <carpeta de esta habilidad>/scripts/sheet.sh sheet.png a.png b.png … y ábrelo. Para ver las referencias junto a ellas, bash <carpeta de esta habilidad>/scripts/fetch-references.sh out/saas-logo/references obtiene las once marcas a través de Brandfetch en una hoja propia (necesita un ID de cliente de Brandfetch; consulta el encabezado del script). Evalúa cada icono como el análisis evalúa las referencias:

• Plano — un relleno por forma, sin degradado, sin sombra, sin bisel. Cualquier otra cosa es una repetición, no un guardado.
• Esquinas comprometidas — todas afiladas o todas redondas, según diga la familia.
• Conteo — las primitivas que nombró el concepto y nada más. Un punto extra, un marco, una muesca es un fallo al nombrar en la repetición ("sin marco alrededor de las barras").
• Silueta — entrecierra los ojos. Una forma clara a 16px, sin una segunda imagen accidental: tres barras y una curva se convierten en una cara, un cheurón y un punto se convierten en un cursor, cuatro píldoras se convierten en un molino.
• Significado — ¿puedes distinguir el verbo o el objeto sin el nombre? Si se lee como un icono de categoría, el concepto está mal, no la representación.
• Lienzo — icono centrado sobre gris plano, nada más encima, sin texto. El tamaño del icono y el color exacto varían un poco entre representaciones; eso es normal. Cuando un conjunto debe coincidir exactamente, genéralo todo en una ronda con un solo modelo, o recórtalo al icono.

Repite solo lo que falló, con el concepto afinado para nombrar el fallo. Dos rondas es normal; un concepto que falla dos veces suele ser el concepto, no el modelo. Reemplázalo.

6. Recorta

La representación es un archivo de trabajo: un lienzo gris con el icono sobre él. Recorta cada guardado en los archivos que se usarán:

bash <carpeta de esta habilidad>/scripts/cut.sh <concepto>.png out/saas-logo/<producto> --name <producto>

Esto escribe <producto>-mark.png, la marca sola sobre un fondo transparente, recortada a sus bordes sin relleno, y <producto>-tile.png, el icono de aplicación redondeado con esquinas transparentes. El color del lienzo se lee de las esquinas de la representación y el color del icono de una banda interior del borde del icono, y los píxeles del borde se separan de ellos, por lo que los bordes permanecen suaves sin halo. Cuando se entreguen varios conceptos, nómbralos por separado (--name relay-bars, --name relay-block). La primera ejecución crea un pequeño entorno virtual de Python con Pillow y NumPy en scripts/.venv dentro de esta habilidad; después de eso es instantáneo.

Abre los dos archivos sobre un fondo oscuro y uno claro y comprueba: sin borde de color del icono a lo largo del borde de la marca, sin rendija de lienzo en las esquinas del icono de aplicación, nada de la marca recortado. Un borde significa que el icono de la representación no era plano (se coló un degradado o una viñeta); repite la representación en lugar de parchear el recorte. Un tinte de color tenue justo en el borde, visible solo al hacer zoom, es ruido JPEG de los modelos Lite y Flash; cuando importe, renderiza el guardado una vez más con google/gemini-3-pro-image, que responde en PNG.

7. Entrega

Coloca los PNG de la marca y el icono de aplicación en out/saas-logo/<producto>/. Cópialos a donde el producto mantenga los activos de la marca (public/, brand/, assets/) solo cuando el usuario lo solicite. Mantén las representaciones y sheet.png fuera del camino, en una carpeta renders/ junto a ellos. En el resumen, nombra los recomendados -mark.png y -tile.png por ruta, di qué concepto recomiendas en una línea y por qué, y lista los demás como alternativas con sus archivos.

Generación a través de OpenRouter

La clave API proviene de OPENROUTER_API_KEY. Si no está configurada, detente y pídele al usuario que la configure en lugar de adivinar con otro proveedor.

KEY="$OPENROUTER_API_KEY"

# request.json: {"model": "google/gemini-3.1-flash-lite-image", "prompt": "<el prompt compuesto>", "aspect_ratio": "1:1"}
curl -sS https://openrouter.ai/api/v1/images \
  -H "Authorization: Bearer $KEY" \
  -H "Content-Type: application/json" \
  -d @request.json > response.json

python3 - <<'PY'
import base64, json, pathlib
data = json.loads(pathlib.Path("response.json").read_text())["data"][0]
image = base64.b64decode(data["b64_json"])
# Lite y Flash responden con bytes JPEG, Pro con PNG; nombra el archivo según lo que sea.
ext = "png" if image.startswith(b"\x89PNG") else "jpg"
pathlib.Path(f"concept.{ext}").write_bytes(image)
PY

scripts/sheet.sh y scripts/cut.sh aceptan ambos formatos.

Archivos

• prompt.md — la plantilla del prompt; {{input}} toma la línea del producto, la familia y el concepto. Su sección 3 contiene las cinco familias.
• references/analysis.md — el estudio de las once marcas: cada una como geometría, las reglas que comparten, las cinco familias.
• scripts/fetch-references.sh — obtiene las marcas de referencia a través de la API de Logos de Brandfetch (ID de cliente de BRANDFETCH_CLIENT_ID) en una carpeta y una hoja; cualquier lista de dominios funciona, para un conjunto diferente de referencias.
• scripts/sheet.sh — coloca los iconos en fila sobre el lienzo gris (necesita rsvg-convert; brew install librsvg).
• scripts/cut.sh, scripts/cut.py — recorta una representación en los PNG de marca e icono transparentes que se entregan.