Hibakes est une boulangerie entièrement en ligne qui fait des livraisons sur demande et des événements au Québec, gérée à partir de son compte Instagram. L’entreprise roulait depuis quelques années sans site web, mais les demandes commençaient à monter : il lui fallait une façon plus haut de gamme de se faire connaître.
Mandat et objectif
Un site web à l’image de la boulangerie, pour une promotion plus haut de gamme qu’avec Instagram seulement.
Rôle et responsabilités
Raffinement de l’identité visuelle pour le web, design et conception du site, collecte des images et des informations avec la propriétaire, programmation avec des agents IA et mise en ligne sur Firebase.
Crédits
Contrat client. Les images et le logo viennent de Hibakes, et j’ai raffiné son identité visuelle pour le web. Le design et la conception du site sont faits par moi.
Utilisation d’IA
J’ai utilisé Claude Code pour programmer, déboguer et mettre en ligne le site, puis pour intégrer cette fiche au portfolio, et une IA pour l’idéation et le moodboard du design système. Ma contribution personnelle comprend l’identité visuelle, la direction visuelle, la collecte des contenus avec la propriétaire, mes templates de prompts et de projet IA, la validation et la mise en ligne.
Étapes de production
-
Étape 1 : Familiarisation avec l’image de marque
J’ai d’abord exploré l’identité visuelle de la boulangerie pour que le site garde le même style que ce qui existe déjà.
-
Étape 2 : Création d’un design système propre au site web
J’ai donné ses images, son logo et des images Pinterest à une intelligence artificielle en décrivant en détail le visuel recherché, jusqu’à obtenir le bon style. Comme l’IA fait la programmation, cette étape me donne beaucoup de contrôle sur le visuel. Elle vaut la peine d’être refaite plusieurs fois si nécessaire, car elle affecte toute la structure du site.
-
Étape 3 : Collecte d’images et d’informations pertinentes
J’ai travaillé de près avec la propriétaire pour que les visuels et les informations répondent à ses besoins. Ses images m’ont guidée pour bâtir les sections et les pages.
-
Étape 4 : Ingénierie de prompts adéquats au besoin
Avec mon template de prompt pour les nouveaux sites, mon template de dossier de projet IA (les skills et les instructions pour respecter les standards de l’industrie) et tout ce que j’avais récolté, j’ai créé le site au complet avec des agents IA, débogage compris. Ces templates évitent qu’une erreur se reproduise plusieurs fois, car je la corrige dans mon système.
-
Étape 5 : Mise en ligne
J’ai mis le site en ligne avec Firebase et un processus automatisé, pour ne rien refaire à la main. Je choisis Firebase, car on peut y ajouter des outils backend plus tard, dans le même système.
Technologies
-
Le site est entièrement statique et est réalisé entièrement en code, sans l’utilisation d’un CMS.
-
Un seul fichier JavaScript, sans framework, gère les interactions de la page.
-
Le site est hébergé sur Firebase Hosting et mis en ligne avec un processus automatisé, ce qui simplifie l’ajout futur d’outils backend.
-
La programmation et le débogage ont été réalisés avec l’agent Claude Code, à partir de mes templates de prompts et d’instructions.
-
Toutes les commandes passent par un message direct sur le compte Instagram de la boulangerie, @hibakes.co.
Défis
Il fallait créer quelque chose d’assez proche d’un style qui existait déjà, mais adapté au web. Je voulais aussi beaucoup d’animations et un site très interactif, pour garder l’image « Fun » de la marque. J’avais une idée très précise du résultat, et le défi était de trouver les bonnes technologies et de bien l’expliquer à l’IA.
Solutions
J’ai repris le design système avec l’IA jusqu’à obtenir le visuel recherché, puis j’ai créé le site avec des agents IA à partir de mon template de prompt et de mon dossier de projet IA.
Résultat final
Un site statique en ligne, hibakes.web.app ; les commandes passent par un message direct sur Instagram.