Comment ce site
a été construit.

Ce que tu as lu sur la page principale, c'est le résumé. Ici, c'est le détail. Les outils, le process, les choix. Tu peux le copier, l'améliorer, faire mieux. C'est le but.

ILes outils, en clair

Avant de parler de "comment", parlons de "avec quoi". Voici exactement ce que j'ai utilisé pour construire ce site, ce que ça coûte, et à quoi ça sert.

IIC'est quoi, un "skill" Claude ?

Un skill est une petite routine réutilisable que tu écris une fois et que Claude exécute à la demande. C'est comme une fonction réutilisable — sauf qu'au lieu d'écrire du code, tu écris des instructions en langage naturel.

Exemples de skills que j'utilise :

• Audit visuel : « ouvre le site dans Chrome, prends un screenshot, vérifie que rien ne dépasse, rapporte ce qui cloche ».
• Briefing de contexte : « lis tous les fichiers du projet, résume l'état actuel en moins de 200 mots ».
• Génération de tests : « pour ce composant, écris les cas de test critiques et lance-les ».

Au lieu de répéter 50 fois la même demande à Claude, tu lui donnes un nom court (ex : /audit) et il sait exactement quoi faire. C'est ça qui transforme l'IA d'un assistant en un véritable workflow.

IIILa conception des personnages

Le site met en scène plusieurs personnages pixel-art dans un canvas HTML5 : les deux héros — Karim et Anass (moi) — et les trois boss qu'ils affrontent. Voici le process exact pour les concevoir.

Étape 1 — Les références visuelles

J'ai demandé à ChatGPT de me générer une référence pour chaque acteur du mini-jeu : les deux héros (Karim et Anass) et les boss (les obstacles entrepreneuriaux). Briefs courts, style gaming pixel-art, ambiance violette dark.

Chaque image a coûté 0$ (ChatGPT version gratuite) et a pris quelques secondes à générer. Le boss Technologie a été imaginé par extension du même style — sans référence générée, parce que le pattern visuel était déjà clair.

Étape 2 — La transposition en code

Les images générées par ChatGPT ne sont pas utilisables telles quelles (raster, statiques, trop grandes). J'ai briefé Claude Code avec ces images comme références et lui ai demandé de recréer chaque personnage directement en pixel-art dans un canvas — pixel par pixel, en tant que fonctions de dessin paramétriques (_drawAnass, _drawKarim, _drawBoss).

Le résultat : des personnages dynamiques. Tout en moins de 200 lignes de code par personnage.

IVL'inspection du site de Karim

Avant de commencer à coder quoi que ce soit, j'ai passé environ 30 minutes sur le site et le contenu de Megasuss Tech : LinkedIn, le post de recrutement, les références aux campagnes (porte-monnaies à GITEX 2026, faux billets du Mondial). L'objectif :

• Récupérer la palette graphique — la couleur violette principale (#7B4FE0) vient directement de l'identité Megasuss.
• Comprendre la voix — Karim écrit en tu, direct, avec quelques mots de Darija. Le site reproduit exactement ce registre (si tu n'as pas trouvé la seule phrase Darija qui existe sur le site, reviens le tester pour la chercher).
• Capturer les références concrètes — les "500 porte-monnaies", les "8,6M de vues", les "5,75M MAD" sont des faits que j'ai relus dans son post avant de les intégrer dans la narration.
• Saisir le métier — Megasuss Tech fait du neuromarketing. Le site lui-même applique ces principes : capture d'attention, dopamine via le mini-jeu, surprise via les cartes qui se remplissent en direct, etc.

Cette phase ne se code pas. Elle se comprend. C'est le travail le plus important — et celui que l'IA ne peut pas faire à ta place.

VLe process, étape par étape

Une fois l'inspection faite, voici l'ordre exact dans lequel j'ai construit le site, sur ~3 jours. À reproduire à l'identique si tu débutes.

1. Définir l'idée maîtresse

   Avant d'ouvrir VSCode, j'ai imaginé l'idée centrale dans ma tête : « un site qui n'est pas un CV, qui est lui-même la preuve de mes compétences ». Pas besoin de l'écrire — il suffit qu'elle soit claire pour toi. C'est de cette phrase que tout le reste découle naturellement : le mini-jeu, les cartes, la révélation.

2. Brouillonner le scénario

   J'ai posé un squelette : 6 scènes à enchaîner — jeu → miroir → méthode → révélation → candidat → close. Une phrase d'objectif par scène. C'est ce que j'ai donné à Claude Code en première instruction.

   Mais le squelette n'est qu'un point de départ. L'essentiel des idées vient en cours de route : un détail visuel qui appelle un son, un dialogue qui réclame un timing différent, un boss qui mérite une intro plus dramatique, une bulle de dialogue qu'on garde parce qu'elle fait sourire. La section « La Construction » du site (le stack, les coûts) et cette page de making-of, par exemple, ne faisaient pas partie du squelette initial — elles sont venues plus tard, quand le projet s'est mis à respirer. Le bon réflexe : noter, tester, garder ce qui sert l'idée centrale — jeter le reste sans regret.

3. Mettre en place les outils

   Installer VSCode, créer un dossier vide, ouvrir un terminal, lancer claude. Pas de boilerplate, pas de framework. Juste un fichier index.html à zéro.

4. Brancher les skills et les MCP servers

   Au-delà des instructions écrites, Claude Code peut être étendu par des skills (voir section II) et des MCP servers — « Model Context Protocol », des extensions qui lui donnent de nouvelles capacités. Le branchement clé pour ce projet : Chrome MCP / Playwright MCP, qui permet à Claude d'ouvrir un navigateur, prendre des screenshots et inspecter le DOM. Il peut alors itérer sans moi — pour les bugs visuels évidents, je préfère encore vérifier moi-même.

5. Construire scène par scène

   J'ai fait Claude Code travailler une scène à la fois. « Construis le hero avec le mini-jeu canvas, voici les sprites de référence en image, ambiance dark, palette violette ». À chaque itération : je vérifie le rendu — parfois moi-même dans Chrome, parfois via le MCP qui laisse Claude prendre un screenshot et l'inspecter. Puis je raffine. Pas de big bang.

6. Écrire les instructions persistantes

   J'ai créé un fichier CLAUDE.md à la racine du projet avec les règles que l'IA doit toujours respecter : vanilla seulement, commentaires courts uniquement quand le pourquoi n'est pas évident, pas de framework, conserver la palette de couleurs définie. C'est ce qui empêche l'IA de dériver entre deux sessions.

7. Itérer sur les détails

   Chaque interaction est une mini-décision. Je teste, j'écoute, je regarde, je corrige. C'est cette phase qui transforme un site fonctionnel en un site qui te marque.

8. Déployer

   Push sur GitHub, branche le repo à Cloudflare Pages, c'est en ligne. Achat du domaine .pro chez Hostinger, branchement DNS — 5 minutes. Total : moins de 30 minutes pour passer de "fini en local" à "accessible publiquement".

VIL'humain dans la boucle

Avec l'IA, l'écrasante majorité des lignes de code peut être générée — 90 à 95% sur un projet comme celui-ci. Ce qui te reste entre les mains, c'est ce qui fait toute la différence :

• La communication d'intention — la compétence la plus rentable aujourd'hui. Une instruction floue brûle dix itérations ; une instruction nette tombe juste du premier coup. Apprends à configurer l'IA et à bien travailler avec, à lui donner le bon contexte et les bonnes instructions.
• L'itération — tester, regarder, corriger, recommencer. L'IA va vite ; toi, tu décides quand c'est assez bon. Un bon résultat ne sort jamais du premier prompt.
• L'idée centrale — la phrase qui dit pourquoi ton projet existe. Si tu la délègues, l'IA produira un site générique.
• Le flow narratif — l'ordre dans lequel l'utilisateur découvre les choses. C'est le rythme émotionnel : c'est toi qui le sens.
• Le timing — la cadence des animations, des transitions, des silences. À tester soi-même, à corriger à l'oreille.
• Le casting des références — quels faits, quels détails, quelles citations garder. L'IA ne sait pas ce qui sera saillant pour ton lecteur.

Le code, c'est de l'exécution. Le reste, c'est du goût.

VIILa consommation de tokens

Pour un usage régulier, l'abonnement Pro devrait passer sans souci. Tu peux coder plusieurs heures par jour sans taper les limites.

C'est sur du build vraiment intensif (longues sessions, gros codebases, gros refacto, etc.) que tu peux atteindre le quota. Mais il y a pas mal de leviers pour optimiser ta conso de tokens avant d'en arriver là.

Côté natif Claude Code :

• /clear entre les tâches pour repartir sur un contexte propre.
• /compact quand la conversation devient longue.
• Bien gérer ton CLAUDE.md pour éviter de réexpliquer le projet à chaque session.
• Découper les grosses tâches en sous-tâches plutôt que de tout charger d'un coup.

J'utilise aussi un pattern de séparation des rôles : Opus pour réfléchir et planifier, Sonnet ou Haiku pour exécuter. Le gros modèle sort le plan et tranche les décisions difficiles, le petit fait le boulot avec ce guidage. Tu te rapproches de la qualité Opus sans cramer ton quota dessus.

Site conçu par Weblaan, studio de création web