Logo SaaS

Que fait Logo SaaS ?

Chaque fichier utilisé par ce skill se trouve dans son propre dossier, à côté de ce SKILL.md, et les chemins sont relatifs à ce dossier. Il n'a besoin de rien d'autre provenant d'autres compétences ou dossiers, donc ne les cherchez pas. Sauf si l'utilisateur spécifie un autre emplacement, enregistrez tout ce qu'il produit dans out/saas-logo/ sous le projet actuel.

Un seul symbole, plat. Ce qui est renvoyé est le symbole seul sur un fond transparent, rogné à ses bords, plus le même symbole sur sa tuile d'icône d'application : des fichiers prêts à être déposés directement dans un site. Les symboles dont ce skill s'inspire sont étudiés dans references/analysis.md : la géométrie de chacun des onze, les huit règles qu'ils respectent tous, et les cinq familles auxquelles ils appartiennent. Lisez-le une fois avant le premier logo ; c'est ce que "ressemble à un vrai logo SaaS" signifie ici.

L'invite envoyée au modèle d'image se trouve dans prompt.md et contient tout ce dont le modèle a besoin : les règles communes (canevas, tuile, remplissages plats, épaisseur, couleur) et les cinq familles dans lesquelles se répartissent les symboles de référence, chacune avec ses propres règles. Votre travail consiste à réfléchir avant l'invite (la famille et le symbole) et à juger après.

Étapes

1. Découvrir le produit

Lisez le brief, le README, le contenu de la page d'accueil, tout ce qui existe. Écrivez une ligne : "Nom — ce que l'utilisateur en fait, en un verbe, sur un objet." "Confie des tâches à des agents de codage" → remettre, une carte de tâche. "Publie un dossier en tant que site" → publier, une page. Le symbole représente le verbe ou l'objet, jamais la catégorie (pas d'engrenage, de nuage, de fusée, de graphique). Notez la couleur de la marque si le produit en a une (ses jetons CSS, son favicon) et son initiale.

2. Choisir une famille

Les cinq familles dans la section 3 de prompt.md, avec ce pour quoi chacune est la meilleure :

• Primitive solide (Vercel, Miro) : infrastructure, outils de développement, tout ce qui veut paraître inévitable, où une seule forme porte l'idée.
• Primitive répétée (Slack, Claude, Linear, Intercom, PostHog) : collaboration, communication, IA, tout ce qui concerne de nombreuses parties se déplaçant ensemble.
• Lettre (Webflow, Miro, Notion) : un produit dont le nom est sa marque, lorsque l'initiale a une forme forte (A, M, N, W, K, Z, S, V).
• Objet à facettes (Airtable, la page de Notion) : données, stockage, documents, tout ce qui a une chose que l'on remplit ou empile.
• Trait doux (Mintlify, Intercom) : produits conviviaux destinés aux consommateurs, documentation, support, tout ce qui est chaleureux plutôt que technique.

Lorsque l'utilisateur nomme une marque de référence, la famille est donnée : "comme Slack" ou "comme Claude" → Primitive répétée ; "comme Vercel" → Primitive solide ; "comme Webflow" ou "comme Notion" → Lettre ; "comme Airtable" → Objet à facettes ; "comme Mintlify" ou "comme Intercom" → Trait doux. Lorsque l'utilisateur nomme une famille, utilisez-la. Lorsque rien ne pointe nulle part, répartissez les concepts sur deux ou trois familles ; la feuille décide.

3. Rédiger 3 à 4 concepts

Chaque concept est composé de 2 à 3 phrases que le modèle d'image peut dessiner sans deviner :

• Symbole en tant que géométrie, pas en tant que nom. Pas "une carte de tâche" mais "un rectangle arrondi, plus large que haut, avec un second identique derrière lui décalé vers le haut et la droite d'un quart de sa hauteur". Pas "un dièse" mais "quatre pilules, chacune une barre avec une bosse ronde à une extrémité, tournées de 90° autour du centre".
• Le nombre et le rythme pour une primitive répétée : "cinq barres verticales, hauteurs progressant de 3-5-4-2-3 de gauche à droite".
• La famille, nommée, et pour une lettre, quelle lettre et quels deux ou trois traits.
• La couleur : la couleur de la marque en hexadécimal quand il y en a une, ou "tuile noire, symbole blanc" ou "tuile souci, symbole noir".
• Exclusions lorsque le concept invite à des ajouts : "pas de point", "pas de cadre autour des barres", "le contre-jour reste vide".

Faites en sorte que les silhouettes diffèrent entre les concepts (haut vs large, une masse vs dispersée). Abandonnez tout concept qui nécessite plus de primitives que sa famille ne le permet, ou une couleur que la famille interdit.

4. Composer et générer

Pour chaque concept, prenez prompt.md et remplacez {{input}} par :

<Producte> — <ce que c'est et ce qu'il fait>. Le verbe est <verbe> ; l'objet est <objet>.
Couleur de la marque : <hex ou "aucune">. Initiale : <lettre>.
Famille : <une des cinq>

Concept : <le concept de l'étape 3>

Générez tous les concepts en parallèle via OpenRouter (ci-dessous), une image chacun, carré. Enregistrez sous <concept>.png ou .jpg, selon ce qui est renvoyé (l'extrait ci-dessous les distingue).

Modèle par défaut : google/gemini-3.1-flash-lite-image (Nano Banana 2 Lite), le moins cher et le plus rapide ; il gère assez bien la géométrie plate pour toute l'exécution, et un concept qui échoue sur celui-ci échoue généralement aussi sur les autres. Ne montez en gamme que sur demande, ou lorsqu'un gardien a besoin d'un rendu plus propre que ce que deux tours ne donnent : google/gemini-3.1-flash-image (Nano Banana 2), puis google/gemini-3-pro-image (Nano Banana Pro), qui dessine la géométrie la plus nette : extrémités plates, épaisseur uniforme, remplissages vraiment plats.

5. Examiner

Disposez les tuiles avec bash <dossier_de_ce_skill>/scripts/sheet.sh sheet.png a.png b.png … et ouvrez-la. Pour voir les références à côté, bash <dossier_de_ce_skill>/scripts/fetch-references.sh out/saas-logo/references récupère les onze symboles via Brandfetch dans une feuille qui leur est propre (nécessite un identifiant client Brandfetch ; voir l'en-tête du script). Jugez chaque tuile comme l'analyse juge les références :

• Plat — un remplissage par forme, pas de dégradé, pas d'ombre, pas de biseau. Tout le reste est un retirage, pas un gardien.
• Coins engagés — tous pointus ou tous arrondis, comme le dit la famille.
• Nombre — les primitives nommées dans le concept et rien de plus. Un point supplémentaire, un cadre, une encoche est un échec à nommer dans le retirage ("pas de cadre autour des barres").
• Silhouette — plissez les yeux. Une forme claire à 16 px, pas de deuxième image accidentelle : trois barres et une courbe deviennent un visage, un chevron et un point deviennent un curseur, quatre pilules deviennent un moulin.
• Sens — pouvez-vous identifier le verbe ou l'objet sans le nom ? Si cela se lit comme une icône de catégorie, le concept est mauvais, pas le rendu.
• Canevas — tuile centrée sur du gris uni, rien d'autre dessus, pas de texte. La taille de la tuile et la couleur exacte varient un peu entre les rendus ; c'est normal. Lorsqu'un ensemble doit correspondre exactement, générez-le en un seul tour avec un seul modèle, ou recadrez à la tuile.

Ne retirez que ce qui a échoué, avec le concept affiné pour nommer l'échec. Deux tours est normal ; un concept qui échoue deux fois est généralement le concept, pas le modèle. Remplacez-le.

6. Découper

Le rendu est un fichier de travail : un canevas gris avec la tuile dessus. Découpez chaque gardien dans les fichiers qui seront utilisés :

bash <dossier_de_ce_skill>/scripts/cut.sh <concept>.png out/saas-logo/<produit> --name <produit>

Il écrit <produit>-mark.png, le symbole seul sur fond transparent, rogné à ses bords sans remplissage, et <produit>-tile.png, la tuile d'icône d'application arrondie avec des coins transparents. La couleur du canevas est lue à partir des coins du rendu et la couleur de la tuile à partir d'une bande à l'intérieur du bord de la tuile, et les pixels de bord sont démélangés d'eux, de sorte que les bords restent doux sans halo. Lorsque plusieurs concepts sont livrés, nommez-les séparément (--name relay-bars, --name relay-block). La première exécution crée un petit environnement virtuel Python avec Pillow et NumPy dans scripts/.venv à l'intérieur de ce skill ; après cela, c'est instantané.

Ouvrez les deux fichiers sur un fond sombre et un fond clair et vérifiez : pas de frange de couleur de tuile le long du bord du symbole, pas de lamelle de canevas aux coins de la tuile, rien du symbole coupé. Une frange signifie que la tuile du rendu n'était pas plate (un dégradé ou une vignette s'est glissée) ; retirez le rendu plutôt que de corriger la découpe. Une légère teinte de couleur juste au bord, visible uniquement en zoomant, est du bruit JPEG provenant des modèles Lite et Flash ; lorsque cela compte, rendez le gardien une fois de plus avec google/gemini-3-pro-image, qui répond en PNG.

7. Livrer

Placez les PNG du symbole et de la tuile dans out/saas-logo/<produit>/. Copiez-les là où le produit conserve les actifs de la marque (public/, brand/, assets/) uniquement lorsque l'utilisateur le demande. Gardez les rendus et sheet.png à l'écart, dans un dossier renders/ à côté d'eux. Dans le résumé, nommez les fichiers -mark.png et -tile.png recommandés par leur chemin, dites quel concept vous recommandez en une ligne et pourquoi, et listez les autres comme alternatives avec leurs fichiers.

Génération via OpenRouter

La clé API provient de OPENROUTER_API_KEY. Si elle n'est pas définie, arrêtez-vous et demandez à l'utilisateur de la définir plutôt que de deviner un autre fournisseur.

KEY="$OPENROUTER_API_KEY"

# request.json : {"model": "google/gemini-3.1-flash-lite-image", "prompt": "<l'invite composée>", "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 et Flash répondent avec des octets JPEG, Pro avec PNG ; nommez le fichier en conséquence.
ext = "png" if image.startswith(b"\x89PNG") else "jpg"
pathlib.Path(f"concept.{ext}").write_bytes(image)
PY

scripts/sheet.sh et scripts/cut.sh acceptent les deux formats.

Fichiers

• prompt.md — le modèle d'invite ; {{input}} reçoit la ligne du produit, la famille et le concept. Sa section 3 contient les cinq familles.
• references/analysis.md — l'étude des onze symboles : chacun en tant que géométrie, les règles qu'ils partagent, les cinq familles.
• scripts/fetch-references.sh — récupère les symboles de référence via l'API Logo de Brandfetch (identifiant client de BRANDFETCH_CLIENT_ID) dans un dossier et une feuille ; toute liste de domaines fonctionne, pour un ensemble différent de références.
• scripts/sheet.sh — dispose les tuiles sur le canevas gris (nécessite rsvg-convert ; brew install librsvg).
• scripts/cut.sh, scripts/cut.py — découpe un rendu dans les PNG transparents du symbole et de la tuile qui sont livrés.