KreaSnap · Prospection LinkedIn
Fais ce parcours avec la cohorte Forge³ · novembre 2026 · démarre le 9 novembre
Se connecter pour rejoindreTu croises tous les jours des profils intéressants sur LinkedIn : un prospect, un partenaire, un expert que tu voudrais rappeler dans trois mois. Et puis tu les oublies, ou tu te dis « je le retrouverai ». Dans trois semaines, un clic sur un profil crée sa fiche dans ta base Notion, rangée, sans doublon.
Tu as dix ans de métier : ton réseau existe déjà, il est simplement éparpillé. KreaSnap ne t'apporte pas de clients. Il retient les gens que tu as choisi de garder, au moment où tu les croises.
Ce que tu repars avec
- Une extension Chrome à toi, KreaSnap, chargée dans ton navigateur.
- Une base Contacts DB dans ton Notion, qui se remplit d'un clic.
- Une fiche qui se met à jour quand tu recaptures la même personne, au lieu d'un doublon.
La méthode : tu pilotes, l'IA code
Tu n'écris pas le code. Tu décris le résultat, Claude Code propose un plan, tu le valides, il construit, et toi tu vérifies. Le but n'est pas d'apprendre à coder plus vite que la machine, c'est d'apprendre à diriger la manœuvre.
- Un prompt par semaine : la base, la capture, l'écran. Chacun se termine par une vérification que tu fais toi-même.
- Claude propose avant de coder, et demande avant d'installer quoi que ce soit.
- Tout se note dans SPECS.md : tes choix, tes modifications et tes erreurs. C'est ce fichier qui te permet de reprendre le chantier sans repartir de zéro.
- Un clic par profil que tu as réellement consulté.
- Pas de collecte en masse, pas d'envoi de messages en série.
- Si une personne te demande de supprimer sa fiche, tu la supprimes.
La capture d'écran évite de lire le code de LinkedIn, mais elle ne contourne pas ses conditions d'utilisation. C'est à toi de garder un usage ciblé.
Intention
Voir Claude Code travailler sans rien installer, une seule fois, pour savoir à quoi ressemble ce que tu vas mettre sur ton ordinateur.
Tu ne construis pas KreaSnap ici. Tu regardes, tu essaies, puis tu passes à ton propre poste de travail.
Actions · Vérifications · Constatations
Ton atelier est ouvert
Sur la page de l'atelier Forge³, clique sur « Créer mon atelier » pour en faire une copie privée sur ton compte GitHub. Puis Code, Codespaces, Create codespace on main. Il te faut un compte GitHub : voir le mini-guide Crée ton compte GitHub.
Claude répond dans le terminal
Dans le terminal de l'atelier, tape connexion pour te connecter à ton compte Claude, puis claude. Demande-lui : « Présente-moi ce dossier en trois phrases, puis crée une page qui affiche Bonjour suivi de mon prénom. » Tu viens de piloter ta première construction.
Tu fermes proprement
Demande à Claude de sauvegarder ce qui marche, puis ferme l'onglet. L'atelier s'arrête seul.
Erreurs possibles et solutions
Le terminal affiche une erreur de connexion à Claude
Relance connexion et choisis ton compte Claude avec abonnement (Pro ou Max).
Tu as cliqué sur « Rebuild »
L'atelier repart de zéro et ce qui n'était pas sauvegardé est perdu. C'est pour ça qu'on sauvegarde après chaque étape qui marche.
Ton travail a disparu à la réouverture
Il n'avait pas été sauvegardé. Demande à Claude de faire un commit et de pousser à chaque étape qui marche.
Cette semaine, tu poses la base : la fiche contact, la connexion à Notion et la règle qui évite les doublons. Tu colles un seul prompt, puis tu vérifies chaque point.
Le prompt de la semaine 1
Remplace d'abord [tes tags] par trois ou quatre catégories qui te servent, par exemple Prospect, Partenaire, Expert.
Tu m'aides à construire KreaSnap, une extension Chrome qui capture un profil LinkedIn et crée sa fiche dans ma base Notion. On avance en trois semaines. Cette semaine : uniquement la base et la connexion à Notion.
Avant de coder, propose ton plan en quelques lignes et attends mon accord. Demande avant d'installer quoi que ce soit.
1. Crée SPECS.md à la racine : ce que fait l'outil, la structure ci-dessous, et une section « Erreurs » que tu tiendras à jour à chaque problème rencontré.
2. Structure, tout à la racine du dossier, sans sous-dossier extension/ :
manifest.json · background/index.js · popup/index.html · popup/popup.js · settings/index.html · settings/settings.js · content/linkedin.js · modules/snap/ (index.js, screenshot.js, vision.js, parser.js) · modules/notion/ (index.js, database.js, contacts.js, deduplication.js).
Cette semaine, crée seulement : manifest.json, background/index.js, settings/ et modules/notion/.
3. Règles de l'extension : Manifest V3 ; "background": { "service_worker": "background/index.js", "type": "module" } ; imports statiques uniquement, jamais d'import() dynamique ; pas d'icônes dans le manifest ; permissions activeTab, storage, scripting, tabs ; host_permissions *://www.linkedin.com/in/*, https://api.notion.com/*, https://api.anthropic.com/* ; options_page settings/index.html ; pas de permission identity. Chaque page HTML déclare <meta charset="UTF-8">.
4. Réglages en deux étapes :
- Étape 1, la clé Claude : champ mot de passe, la clé commence par sk-ant-, lien vers https://platform.claude.com/settings/keys, rangée dans chrome.storage.local sous "claudeApiKey".
- Étape 2, Notion : jeton d'intégration interne (ntn_ ou secret_), lien vers https://www.notion.so/profile/integrations, vérifié par GET https://api.notion.com/v1/users/me, rappel « Partage ta page Notion avec l'intégration (menu ··· puis Connexions) ». Puis une liste déroulante des pages partagées, avec le titre en texte lisible : page.properties?.title?.title?.[0]?.plain_text || page.title?.[0]?.plain_text || 'Sans titre'. Puis la création de la base « Contacts DB ».
5. API Notion, version 2025-09-03, sans OAuth : création de la base par POST /v1/databases avec initial_data_source.properties ; range data_sources[0].id sous "notionDataSourceId" (pas de database_id) ; pages créées avec parent { type: "data_source_id" } ; recherche de doublons par POST /v1/data_sources/{id}/query ; liste des pages par /v1/search avec le filtre value "page".
6. Les 15 propriétés : Contact (titre) · Prénom, Nom (texte) · Photo (fichiers, laissée vide) · Poste, Entreprise, Localisation (texte) · LinkedIn, YouTube, Site web, Autre profil (URL) · Email · Téléphone · Source (sélection, « LinkedIn ») · Tags (multi-sélection, avec ces valeurs : [tes tags]).
7. saveContact() et findExistingContact() : cherche d'abord par URL LinkedIn, puis par prénom et nom sans tenir compte des majuscules. Si la fiche existe, mets-la à jour, sinon crée-la. Le gras dans le corps de la fiche passe par les annotations Notion, jamais par du markdown.
8. Pour tester sans LinkedIn, ajoute dans les réglages un bouton « Créer une fiche de test » qui enregistre un contact fictif.
Aucune clé ne s'écrit dans le code ni dans git. Fais un commit à chaque étape qui marche. À la fin, dis-moi exactement comment charger l'extension dans Chrome et quoi vérifier.Intention
Décider ce que tu veux retenir de chaque personne, avant que Claude n'écrive une ligne.
La base compte 15 propriétés. Tu peux en retirer ou en ajouter : c'est ton outil.
Actions · Vérifications · Constatations
Claude a proposé un plan et tu l'as validé
Il liste les fichiers de la semaine et la base qu'il va créer. Si une propriété ne te sert à rien, dis-le maintenant.
SPECS.md existe
Ouvre-le : la structure, les 15 propriétés et une section « Erreurs », vide pour l'instant.
Tes tags sont les tiens
Dans SPECS.md, la propriété Tags porte tes catégories, pas un exemple générique.
Erreurs possibles et solutions
Claude s'écarte de la structure prévue
Arrête-le, rappelle-lui de relire SPECS.md, et demande-lui de reprendre son plan.
Une propriété porte un nom différent dans le code et dans Notion
Les noms doivent être identiques, accents compris. Demande à Claude de les aligner sur SPECS.md.
Claude veut installer une bibliothèque
Une extension Chrome n'en a pas besoin. Demande-lui pourquoi, et refuse si la réponse n'est pas claire.
Cette semaine, l'outil apprend à faire le travail à ta place : il prend la photo de l'écran, la fait lire par l'IA, retrouve la bonne photo de profil et range le tout.
Le prompt de la semaine 2
Lis SPECS.md. La base et la connexion à Notion marchent. Cette semaine : la capture, qui fait tout le travail à ma place.
Propose ton plan avant de coder et attends mon accord.
1. content/linkedin.js : retrouve l'adresse de la photo de profil dans la page, sans fonction inline. Cherche d'abord les images dont l'adresse contient profile-displayphoto, puis le conteneur [data-view-name="profile-top-card-member-photo"], puis la zone principale (main). Ignore tout ce qui est dans la navigation (.global-nav, nav, header). Ne garde qu'une image à peu près carrée, de 600 px au plus, et prends la plus petite : c'est la photo, pas la bannière.
2. modules/snap/screenshot.js : captureTab() avec chrome.tabs.captureVisibleTab en PNG, et extractPhoto() qui charge le fichier par chrome.scripting.executeScript({ target: { tabId }, files: ['content/linkedin.js'] }).
3. modules/snap/vision.js : appel à https://api.anthropic.com/v1/messages avec les en-têtes x-api-key, anthropic-version: 2023-06-01, Content-Type: application/json et anthropic-dangerous-direct-browser-access: true. Modèle claude-sonnet-5-5, max_tokens 1024. Le message contient l'image en base64 et la consigne : « Extrais JSON : {fullName, firstName, lastName, headline, company, location, youtube?, website?, otherProfile?} ». Nettoie la clé (espaces) et refuse-la si elle ne commence pas par sk-ant-.
4. modules/snap/parser.js : retrouve le JSON même s'il est entouré de texte, et renvoie une erreur claire s'il manque.
5. background/index.js : à l'action "capture", enchaîne capture de l'écran, photo, lecture par l'IA, recherche du doublon, puis création ou mise à jour de la fiche. La photo va dans le corps de la fiche (bloc image), la propriété Photo reste vide. Le corps contient aussi Poste, Entreprise et Localisation en gras par annotations, et « Capturé le » avec la date.
Mets à jour la section « Erreurs » de SPECS.md. Fais un commit à chaque étape qui marche. À la fin, dis-moi quoi vérifier.Intention
Ce que l'outil voit : l'écran du profil, et la vraie photo de la personne.
Actions · Vérifications · Constatations
Le plan de Claude reprend les trois stratégies de recherche de la photo
L'adresse qui contient profile-displayphoto, le conteneur de la photo, puis la zone principale, sans jamais toucher la navigation.
content/linkedin.js est un fichier à part
Il est chargé par files: ['content/linkedin.js'], pas recopié dans une fonction.
Recharge l'extension
Sur chrome://extensions, clique sur ↻ à côté de KreaSnap après chaque modification.
Erreurs possibles et solutions
La fiche reçoit la bannière au lieu de la photo
La bannière est large, la photo est carrée. Le filtre carré de 600 px au plus doit s'appliquer.
La fiche reçoit ta propre photo
C'est celle de la barre de navigation, celle de la personne connectée. Tout ce qui est dans la navigation doit être ignoré.
La photo n'est plus trouvée après une mise à jour de LinkedIn
Une fonction avec de vieux sélecteurs casse au premier changement. Les trois stratégies, dans l'ordre, tiennent plus longtemps.
Cette semaine, tu rends l'outil agréable : un bouton clair, des réglages que n'importe qui comprend, et une installation que tu sais refaire seul.
Le prompt de la semaine 3
Lis SPECS.md. La capture marche. Cette semaine : l'écran, pour que je m'en serve tous les jours et que n'importe qui puisse le configurer.
Propose ton plan avant de coder et attends mon accord.
1. popup/index.html et popup/popup.js : le titre KreaSnap et un seul bouton « 📸 Capturer le profil », toujours visible. En dessous, un statut : « ⏳ Capture en cours... », puis « ✅ Contact enregistré ! » ou l'erreur en clair. Hors d'un profil LinkedIn (adresse sans linkedin.com/in/), le statut dit « Ouvre un profil LinkedIn » et rien ne part.
2. settings/ : rends les deux étapes lisibles par quelqu'un qui n'a jamais vu l'outil. Chaque étape dit si elle est validée, la liste des pages s'affiche en noir sur blanc (largeur minimale 200 px, police lisible), et chaque erreur dit quoi faire.
3. Dans le popup, si l'extension n'est pas configurée, un lien vers les réglages.
Chaque page HTML garde <meta charset="UTF-8">. Mets à jour la section « Erreurs » de SPECS.md, puis le README : à quoi sert l'outil, comment l'installer, comment le configurer. Fais un commit, et dis-moi quoi vérifier.Intention
Un seul bouton, toujours visible, qui dit ce qui se passe.
Actions · Vérifications · Constatations
Le bouton s'affiche avec son emoji
Clique sur l'icône de KreaSnap : le titre, « 📸 Capturer le profil », et le statut en dessous.
Hors d'un profil, il le dit
Sur une autre page de LinkedIn, le statut demande d'ouvrir un profil, et rien ne part.
Le statut suit la capture
En cours, enregistré, ou l'erreur en clair.
Erreurs possibles et solutions
L'emoji 📸 devient des caractères bizarres
La balise <meta charset="UTF-8"> manque dans popup/index.html.
Le bouton disparaît après une capture
Le bouton doit rester visible en permanence. Demande à Claude de retirer les états qui le cachent.
Le statut reste sur « Capture en cours »
La lecture par l'IA prend quelques secondes. Au-delà d'une minute, ouvre le bouton Erreurs de KreaSnap sur chrome://extensions et montre le message à Claude.
Pour la garantie, chaque étape a sa preuve, et la dernière se montre en vidéo.
- Une capture par étape des trois semaines : le plan validé, la base créée, la fiche de test unique, la bonne photo, la première capture, la fiche complète, le bouton, les réglages finis, l'extension épinglée.
- Une courte vidéo : la même fiche, créée puis mise à jour par une deuxième capture.
- Ton rendez-vous final : tu montres l'outil et tu racontes ce que dit ta section « Erreurs ».