Hub : une page d’accueil qui interprète son contenu

Le besoin

L’idée initiale était de créer une page d’accueil donnant accès à mes différentes applications. Ces liens devaient être répartis entre deux périmètres : une liste publique et une liste disponible derrière mon VPN, réservée aux outils internes de Paretolabs qui n’ont pas vocation à être exposés.

Je souhaitais pouvoir faire évoluer facilement ce catalogue sans modifier l’interface à chaque ajout. J’ai donc demandé que la liste des applications soit décrite dans un fichier JSON simple à lire et à éditer. Le Hub devait interpréter cette configuration et matérialiser clairement les deux niveaux d’accès.

Ce besoin fonctionnel en a rejoint un autre, imaginé un ou deux ans auparavant : disposer d’un champ capable de recevoir un contenu textuel, d’en reconnaître la nature et d’afficher immédiatement les informations utiles. Il pouvait s’agir, par exemple, d’une chaîne encodée en Base64 ou d’un JWT à examiner.

L’hypothèse

Mon hypothèse de départ était qu’une page d’accueil pouvait devenir plus qu’un simple répertoire de liens. En lui ajoutant une zone de saisie centrale et un système de détection, elle pouvait aussi servir de point d’entrée vers de petits outils du quotidien.

Ce champ omni devait accepter aussi bien du contenu à analyser que des commandes. Selon ce qui lui est fourni, le Hub identifie le format ou l’intention, puis présente une réponse adaptée. L’enjeu était de réunir l’accès aux applications et plusieurs opérations rapides dans une interface unique, sans transformer la page en tableau de bord surchargé.

La réalisation

J’ai commencé par échanger avec un premier LLM afin de transformer l’idée en cahier des charges. La préparation du prompt initial a pris environ quinze minutes. J’ai ensuite transmis ce travail à Claude Design en lui demandant plusieurs propositions visuelles.

Les deux premières pistes étaient relativement classiques. La troisième adoptait en revanche un style proche d’un terminal. Cette direction me parlait davantage et offrait surtout un cadre naturel pour concrétiser mon ancienne idée d’analyse de contenu. J’ai poursuivi les itérations avec Claude Design pendant environ une heure afin de préciser l’interface et son comportement.

Une fois le design stabilisé, j’ai envoyé l’ensemble à Claude Code pour la réalisation. Le Hub a été développé sous la forme d’une SPA en Svelte. Le catalogue des applications est alimenté par sa configuration JSON, tandis que le champ omni applique un système de détection au texte ou aux commandes qui lui sont soumis.

Au fil de la réalisation, j’ai ajouté de nouvelles extensions au champ omni à mesure que les usages me venaient. Cette structure permet au Hub de dépasser progressivement son rôle de page d’accueil sans remettre en cause son interface principale.

Le résultat

La production du code Svelte avec Claude Code a pris environ quinze minutes. Le déploiement sur ma plateforme a demandé quinze minutes supplémentaires. La SPA produit une page HTML accompagnée de quelques fichiers JavaScript, servis en production par Caddy avec une exposition en HTTPS, ce qui rend sa mise en production particulièrement légère.

Entre la préparation du premier prompt, les itérations de design, le développement et le déploiement, environ une heure et quarante-cinq minutes ont été nécessaires pour passer de l’idée au Hub opérationnel.

Le résultat réunit désormais deux usages dans une même interface : retrouver rapidement une application selon qu’elle est publique ou accessible par le VPN, et coller du contenu dans un champ omni pour obtenir une lecture adaptée à sa nature.

Les limites et les enseignements

La principale difficulté réside dans la détection. Certains contenus possèdent une signature claire, tandis que d’autres peuvent être ambigus ou correspondre à plusieurs formats. Chaque nouvelle extension doit donc définir précisément les données qu’elle reconnaît et la manière dont elle restitue le résultat, sans perturber les détections déjà présentes.

La séparation entre les périmètres public et VPN doit également rester explicite. Le Hub facilite l’accès aux outils internes, mais leur protection continue de dépendre de l’infrastructure et du contrôle d’accès du VPN : leur présence dans une sous-liste ne constitue pas, à elle seule, une mesure de sécurité.

Cette expérimentation montre aussi la valeur des propositions de design multiples. Les deux premières répondaient au besoin initial, mais la troisième a fait émerger une direction capable d’accueillir une idée plus ancienne. Le design n’a donc pas seulement habillé le catalogue : il a permis d’élargir utilement le produit avant même le début du développement.

Conclusion

Le Hub est passé d’une simple page de liens à un point d’entrée polyvalent pour mon environnement. Sa configuration JSON simplifie l’évolution du catalogue, ses deux périmètres rendent les usages lisibles et le champ omni transforme des contenus bruts en informations directement exploitables.

Cette expérimentation a surtout reconnecté un besoin immédiat à une idée laissée de côté depuis plusieurs années. En moins de deux heures, les échanges successifs avec les LLM, Claude Design et Claude Code ont permis de la matérialiser dans une SPA Svelte légère, facile à déployer et prête à recevoir de nouvelles extensions.