DigCover, du Figma au code
Concevoir, coder et publier seul une plateforme éditoriale musicale : un album par jour, choisi à la main, de la maquette Figma au site en production.
- Client
- DigCover
- Secteur
- Musique
- Rôle
- Concept & direction artistique · Design · Développement · Contenu & diffusion
- Statut
- En production
- Période
- 2026
- Périmètre
- Design-to-code · Pipeline éditorial
01 · Le défi
Comment donner envie d'écouter un album en entier, face à des plateformes qui en poussent des milliers par algorithme, et tenir ce rythme quotidien seul, du design au code ?
02 · Contexte & objectifs
Un projet porté de bout en bout.
DigCover est une plateforme éditoriale musicale, démarrée en mars 2026 et en ligne depuis avril : un album par jour, avec son édito, ses liens d'écoute et une page qui prend les couleurs de sa pochette. J'en porte tout : concept, design, code, contenu et diffusion. C'est le projet où je livre de bout en bout, et où je documente le process design-to-code qui l'alimente.
- Proposer un album par jour, sans algorithme, avec un édito et ses liens d'écoute
- Publier chaque semaine sans toucher au code : une fiche par artiste, le reste généré
- Rendre chaque album trouvable par les moteurs de recherche
- Faire de l'archive un catalogue qu'on parcourt album par album
03 · Démarche
Comment j'ai résolu le problème.
Concept & Direction
« Un jour. Un album. Zéro algorithme. » : un positionnement contre la surcharge des plateformes. Je garde la direction visuelle et les arbitrages ; l'arborescence, je la travaille avec Claude : album du jour, archive chronologique, fiche album.
- Concept
- Direction visuelle
- Arborescence
Pipeline éditorial
Une fiche JSON par artiste comme source unique. Un script de prebuild en génère les pages statiques et leur JSON-LD MusicAlbum ; un contrôle valide chaque semaine de sélections avant publication. Les pochettes partent ensuite en reels et carrousels sur Instagram.
- Fiches JSON
- Génération statique
- JSON-LD
- Validation hebdomadaire
Boucle design-to-code
Figma, Claude via MCP, Next.js, Vercel. Maquette avant code, même pour un simple lien : chaque élément est montré en capture sur le vrai site avant d'être développé. Itérations sur le responsive, les couleurs extraites des pochettes et l'archive.
- Figma
- Claude (MCP)
- Next.js
- Vercel
Indexation & Suivi
Un audit Search Console révèle 74 pages sur 98 explorées mais non indexées. Corrections : un seul domaine canonique, des fiches album rendues côté serveur au lieu d'une redirection côté client, un maillage interne depuis l'archive et entre fiches (précédent, suivant).
- Search Console
- Canonical unique
- Rendu serveur
- Maillage interne
Archive & Partage
L'archive liste toutes les sélections, numérotées et datées, et mène à chaque fiche album. « Copier le lien » partage l'adresse de la fiche, pas celle de l'accueil qui change chaque jour, et le pied de page renvoie vers Instagram.
- Archive
- Partage de fiche
04 · Flow clé
Une fiche JSON, tout le reste généré.
- Entrée
- Action
- Système
- Écran
- Fin
- 1Liens vérifiés un à un : l'album exact, jamais une recherche générique ni un lien affilié
- 2Aucune fiche incomplète n'atteint la production : le contrôle passe avant chaque commit
- 3Aucune lecture de fichier à l'exécution : chaque page est générée au build, lisible par les robots
05 · Interface finale
Un album, un univers de couleurs.
- Flow · étape 06 / 07
Album du jour : pochette, clip et liens d'écoute
En haut de page, l'artiste, le titre, l'année, le label et les genres, à côté de la pochette. Puis un clip en avant-goût et les liens vers les plateformes d'écoute.
Fiche album : édito et liens d'achat
Le même en-tête que l'album du jour, avec la date de sélection et un retour à l'archive, puis l'édito et les offres d'achat.
Fiche album sur mobile
La pochette ouvre la page, puis le numéro, la date de sélection et le titre suivent en une colonne.
Archive : toutes les sélections, numérotées et datées
Toutes les sélections en grille, de la plus récente à la plus ancienne : pochette, numéro, artiste, titre, genres et date. Chaque carte mène à la fiche de l'album.
À propos : le concept en trois phrases
Le manifeste en titre, puis quatre rubriques courtes : le concept, pourquoi DigCover, la sélection, qui est derrière.
06 · Impact & apprentissages
157 albums, trois leçons.
Publication
157
albums publiés entre le 1er avril et le 5 novembre 2026, un par jour ouvré
- Un contenu rendu côté client reste invisible pour le robot : l'accueil servait « Chargement… » ; rendu côté serveur, il sert l'album du jour.
- Une page orpheline, même présente au sitemap, reste non indexée : le maillage interne est le vrai levier.
- L'IA accélère un système, elle n'en crée pas : sans styles, variables et composants, un script produit des valeurs en dur.