Projet personnel Application web Sport · Loisirs Figma & code Vibe coding Claude Code

Sorties Enduro — Trouver sa prochaine randonnée enduro, près de chez soi

Création d'une plateforme web dédiée aux randonnées enduro organisées à travers la France. Pensée pour les pratiquants amateurs, elle centralise les événements pour repérer rapidement les sorties proches de chez soi, consulter le détail de chaque randonnée et contacter l'organisateur pour réserver sa place. Conçue dans Figma, puis développée en vibe coding avec Claude Code, l'agent de développement d'Anthropic.

Rôle Product Designer · Créateur du projet

Cible Pratiquants d'enduro amateurs · clubs organisateurs

Type Application web responsive · Figma & code

Statut En ligne · V1 en construction

Voir le site

01 — Contexte

Des randonnées partout en France, mais aucun endroit pour les trouver

Chaque week-end, des moto-clubs organisent des randonnées enduro aux quatre coins de la France. Mais l'information est éparpillée : pages Facebook, billetteries en ligne, affiches, bouche-à-oreille. Pour un pratiquant amateur, savoir qu'une sortie a lieu à une heure de chez lui tient souvent du hasard.

Côté organisateurs, le constat est symétrique : de petites structures bénévoles, sans moyens de communication, qui peinent à toucher des pilotes au-delà de leur cercle habituel.

Le problème à résoudre

Réunir toutes les randonnées enduro en un seul endroit, et permettre à un pilote de répondre en quelques secondes à trois questions : quand, où, et qui contacter pour réserver sa place.

02 — Mon rôle

Porter le produit de bout en bout, du cadrage à la mise en ligne

J'ai porté le projet de bout en bout : cadrage du besoin, conception de l'expérience, direction visuelle dans Figma, puis réalisation du site avec Claude Code — en restant garant de chaque décision de design jusqu'à la mise en ligne.

Vision & cadrage

Définition de la proposition de valeur pour les deux publics — pilotes et organisateurs — et d'un périmètre de V1 volontairement resserré : trouver, consulter, contacter.

UX & architecture

Parcours de recherche par le temps (calendrier) et par l'espace (carte), fiche randonnée orientée réservation, formulaire de proposition pour les organisateurs.

UI dans Figma

Exploration de plusieurs directions visuelles, puis construction des maquettes et des variables (couleurs, typographie, rayons, espacements) qui servent de source au code.

Réalisation avec Claude Code

Développement du site avec Claude Code à partir des maquettes et des variables Figma : intégration, responsive, carte interactive, formulaires. Je pilote, relis et teste chaque écran jusqu'à la mise en ligne.

03 — Processus

Figma pour décider, le code pour livrer

Le projet s'appuie sur un aller-retour constant entre Figma et le code. Figma reste l'espace où se prennent les décisions de design ; Claude Code permet de les transformer rapidement en un produit réel, testable sur un vrai téléphone.

Cadrage — trois questions, trois écrans

Le besoin du pilote se résume à « quand ? », « où ? » et « qui contacter ? ». L'architecture en découle directement : un calendrier, une carte et une fiche randonnée, reliés par une page d'accueil qui donne accès aux prochaines sorties en un coup d'œil.

Directions visuelles dans Figma

Plusieurs pistes graphiques explorées avant de retenir une direction « sportive » claire : un rouge vif réservé à la marque et aux sorties à venir, une typographie Inter très contrastée, et une photo de pilote en sous-bois pour ancrer immédiatement l'univers.

Des variables Figma aux tokens CSS

Couleurs, tailles de police, rayons et espacements sont définis comme variables dans Figma, puis reportés à l'identique en tokens CSS. Le code parle le même langage que la maquette, ce qui rend chaque itération plus rapide et plus fiable.

Réalisation avec Claude Code

Les maquettes validées passent ensuite dans Claude Code, selon une méthode détaillée ci-dessous.

Sorties Enduro — calendrier des randonnées avec recherche et filtres

04 — Méthode Claude Code

Je décris l'intention, Claude Code écrit le code, je vérifie

Le site est développé avec Claude Code, l'agent de développement d'Anthropic, qui travaille directement dans le dossier du projet : il lit les fichiers, écrit le HTML, le CSS et le JavaScript, puis les modifie au fil des retours. Mon rôle n'est pas d'écrire le code, mais de cadrer chaque demande et de valider chaque rendu.

Donner un cadre au projet

Des fichiers de référence sont rangés dans le projet : structure du site, règles d'accessibilité, décisions de contraste et de zones tactiles. Claude Code s'y appuie à chaque demande, ce qui garde toutes les pages cohérentes d'une session à l'autre.

Transmettre le design

Les maquettes Figma servent de référence visuelle, et les variables Figma (couleurs, typographie, rayons, espacements) sont reportées en tokens CSS partagés par toutes les pages. Le code est commenté avec le nom de la variable Figma d'origine.

Décrire chaque écran comme une intention UX

Une demande par écran ou par composant : structure, contenus, états (à venir, passée, annulée, chargement), comportements sur desktop et mobile, contraintes d'accessibilité. Plus l'intention est précise, plus le premier rendu est juste.

Vérifier dans le navigateur, puis itérer

Chaque rendu est vérifié dans le navigateur, sur desktop et sur mobile, au clavier comme au toucher, en le comparant à la maquette. Les écarts sont signalés à Claude Code par des retours précis, en itérations courtes, jusqu'au niveau attendu.

Mettre en ligne et faire évoluer

Le site est publié sur sortiesenduro.fr. Les évolutions suivent le même cycle : décision dans Figma, demande à Claude Code, vérification, mise en ligne.

Le rôle du designer avec Claude Code

Claude Code accélère l'exécution, il ne prend pas les décisions. L'architecture, les choix d'interface, l'accessibilité et le niveau de finition restent ceux du designer : la qualité du résultat dépend directement de la précision des demandes et de l'exigence de la relecture.

05 — L'expérience

Trouver une sortie, puis réserver sa place en un geste

L'expérience est construite autour de deux portes d'entrée complémentaires — le temps et l'espace — qui mènent toutes deux vers une fiche randonnée pensée pour passer à l'action.

Calendrier — les randonnées regroupées par mois, filtrables par département, date et statut, avec une recherche libre par nom ou par lieu.

Carte — toutes les sorties positionnées sur une carte de France, avec géolocalisation pour repérer d'un coup d'œil celles qui sont proches de chez soi.

Fiche randonnée — date, horaires, tarif, lieu de rendez-vous sur carte, présentation du club, et un bloc « Réserver / contacter l'organisateur » toujours visible.

Espace organisateurs — un formulaire pour proposer gratuitement sa randonnée, publiée au calendrier après vérification.

Sorties Enduro — carte de France des randonnées enduro

Un statut lisible en un instant

Chaque sortie porte un statut — à venir, passée ou annulée — exprimé à la fois par la couleur et par un libellé. Le rouge est réservé aux sorties à venir, pour que l'œil se pose d'abord sur ce qui reste possible.

Sorties Enduro — fiche détaillée d’une randonnée avec bloc de contact de l’organisateur

06 — Mobile & accessibilité

Pensé pour le téléphone, au bord du terrain

Les pilotes consultent les sorties depuis leur téléphone, souvent dehors. La version mobile n'est pas une adaptation après coup : la navigation passe dans une barre d'onglets en bas d'écran, à portée de pouce, et chaque écran garde l'essentiel visible sans défilement superflu.

Sorties Enduro — accueil, calendrier et carte sur mobile

Zones tactiles généreuses — boutons, filtres et champs d'au moins 44 à 48 px de haut, pour une utilisation confortable avec des gants ou en mouvement.

Contrastes vérifiés — des couleurs de texte et de badges choisies pour rester lisibles, y compris en plein soleil.

Navigation clavier — lien d'évitement vers le contenu et focus bleu bien visible, distinct du rouge réservé à la marque et aux erreurs.

Mouvements réduits — les animations sont désactivées pour les utilisateurs qui le demandent dans leurs réglages système.

07 — Résultats

Une V1 en ligne, prête à grandir

Sorties Enduro est en ligne et référence déjà des randonnées organisées partout en France. La V1 pose des bases solides — design system aligné entre Figma et le code, parcours complets côté pilotes et organisateurs — sur lesquelles le produit va continuer d'évoluer.

Un produit en ligne — accueil, calendrier, carte, fiches randonnées, proposition d'événement et contact, sur desktop comme sur mobile.

Figma et code alignés — les variables de design sont la source des tokens du site, pour une maquette et un produit qui ne divergent pas.

Accessibilité intégrée dès la conception — contrastes, zones tactiles et navigation clavier pensés dans la maquette, pas corrigés après coup.

Ce que ce projet dit de moi

Sorties Enduro est né d'une passion et d'un manque constaté sur le terrain. Il montre ma façon de travailler aujourd'hui : partir d'un vrai besoin, décider dans Figma, puis piloter Claude Code pour transformer ces décisions en un produit en ligne — en gardant l'exigence du designer sur chaque détail.