Documentation HorizonX
Ce qu'est HorizonX, ce que contient la bibliothèque et comment l'utiliser : Figma et code.
Introduction
Comment l'utiliser
Qu'est-ce que HorizonX ?
HorizonX vous permet de démarrer un projet à partir de quelque chose de réel, plutôt que d'une page blanche. Demandez à une IA un site web à partir de rien et vous obtiendrez la moyenne de tout ce qu'elle a vu : un hero centré, trois cartes, un dégradé plat. Ce n'est pas le modèle qui échoue, c'est le modèle sans rien sur quoi s'appuyer.
Une couche, c'est cette fondation. Chacune est une pièce de design terminée, avec le mouvement, la profondeur et l'atmosphère déjà résolus. Prenez-la, adaptez-la, apprenez comment elle a été construite, ou servez-vous-en pour lancer quelque chose de nouveau. C'est une bibliothèque pour inspirer et accélérer, pas un générateur à partir de zéro.
Quand l'utiliser
Quand vous voulez avancer vite sur quelque chose qui reste intentionnel, et que vous préférez adapter un point de départ solide plutôt que de concevoir à partir de zéro.
Comment ça marche
Trois étapes, et celle du milieu dépend du format.
Choisissez une couche
Parcourez Explore et ouvrez ce qui vous convient. La page de chaque asset indique son Format exact, pour que vous sachiez d'emblée s'il s'agit de Figma, de code ou d'un mélange.
Copiez ou téléchargez
Figma → copiez-la dans votre espace de travail. HTML → téléchargez-la et ouvrez-la. Bundles → un seul téléchargement avec tous les fichiers dont la pièce a besoin.
Faites-la vôtre
Restylez-la, portez-la vers votre framework, ou utilisez-la comme étincelle pour quelque chose de nouveau. Le travail de création est fait ; c'est votre direction créative qui fait le reste du chemin.
Formats : Figma et code
Toutes les couches ne sont pas disponibles dans tous les formats. Certaines sont Figma uniquement, d'autres code uniquement, et quelques-unes sont mixtes. La page de chaque asset affiche son Format exact à l'avance, pour que vous sachiez toujours ce que vous obtenez.
Fichier Figma
Le design modifiable, prêt à être copié directement dans votre espace de travail Figma. Calques, styles et structure intacts, prêts à être restylés pour devenir les vôtres.
Code (HTML)
Un fichier HTML autonome. Ouvrez-le, publiez-le tel quel, ou portez-le vers React, Svelte ou Vue, selon votre stack. Volontairement indépendant du stack.
Bundle
Quand une pièce nécessite plus d'un fichier (assets, spécifications ou export empaqueté), elle est livrée sous forme de bundle que vous téléchargez en une fois.
Pour quel modèle d'IA construisez-vous ?
Il n'y a pas un seul modèle verrouillé. Beaucoup de designs sont réalisés à la main par notre équipe. Certaines pièces utilisent Fable, d'autres GPT 5.6, et ce que nous publions est testé pour fonctionner correctement avec les outils d'IA actuels.
Au final, la qualité vient de l'équipe de designers et de développeurs derrière chaque couche, et de la direction créative que vous y apportez. Le modèle n'est qu'un outil dans ce processus, pas celui qui fait le travail difficile.
La bibliothèque, trois formes
01Templates
Des pages complètes et des heroes autonomes. Un point de départ complet que vous pouvez adapter de bout en bout, ou dont vous pouvez extraire un écran unique.
Sections
Des blocs autonomes : sliders, grilles de fonctionnalités, tarifs, FAQ, formulaires. Intégrez-en un dans un projet ou étudiez comment il est construit.
Composants
Les pièces plus petites : cartes, navigations, boutons, micro-interactions. Les briques derrière les layouts plus grands.
Éditeurs : la partie avec laquelle vous construisez
Une moitié de HorizonX est une bibliothèque dans laquelle vous téléchargez. L’autre moitié, ce sont des éditeurs qui tournent dans votre navigateur. Vous en ouvrez un, vous changez ce que vous voulez, vous voyez le résultat se mettre à jour au fur et à mesure, et vous repartez avec le fichier quand il vous convient.
Il existe quatre collections d’éditeurs. Tools propose des composants interactifs. Textures applique des effets à vos images et vidéos. Shaders propose des couleurs animées et du mouvement. Mockups place vos designs dans des scènes 3D et photographiques. Chaque éditeur possède un aperçu en direct et des formats d’export adaptés à votre création.
Essayez dans le navigateur
Vous pouvez ouvrir un éditeur et toucher à chaque réglage sans compte. Une adhésion vous permet d’emporter le résultat, dans le quota d’export de votre offre.
Tools : des composants interactifs que vous réglez
Un tool n’est pas un fichier fini. C’est le générateur qui se trouve derrière. Ouvrez-en un et le vrai composant tourne dans la page : un menu qui se déplie, une galerie qui pivote, un bouton qui répond au curseur. À côté, un panneau réunit tous les réglages de ce composant.
Mettez vos propres visuels. Changez le sens, les espacements, la durée, la courbe d’easing. L’aperçu est le composant lui-même et non un enregistrement : ce que vous validez à l’écran est exactement ce que vous exportez.
Quand le rendu vous va, vous choisissez un format et vous exportez. Vous obtenez un fichier HTML autonome qui s’ouvre partout, un composant Svelte ou du JSX React. Les versions Svelte et React sont écrites à partir du document que vous venez de valider : le code reçu ne peut pas s’écarter de l’aperçu approuvé.
Textures : vos images et vidéos, dans une autre matière
Textures part d’un média que vous apportez. Choisissez un rendu dans la collection, déposez votre photo ou votre séquence, et l’effet la calcule en direct. Un portrait devient un champ de caractères. Une photo de produit prend la lueur d’un vieil écran cathodique. La lumière se change en encre tramée ou en feuille irisée.
Chaque rendu a ses propres réglages : jeu de caractères, grille, tonalité, couleur, halo, mouvement. Vous bougez un curseur et l’aperçu suit.
Ce que vous pouvez exporter dépend du rendu et de ce que vous lui avez donné. Les images fixes sortent en PNG ou JPEG. Les sources vidéo et les rendus animés proposent MP4 ou une séquence PNG. Certains rendus ajoutent le SVG, l’ASCII peut vous donner du texte brut, et WEB PACK rassemble ce dont un site a besoin. Le panneau d’export n’affiche que les formats réellement pris en charge par votre combinaison.
Shaders : couleur, lumière et mouvement animés
Un shader est une image dessinée en temps réel plutôt que lue. Pensez au dégradé qui respire derrière un hero, au champ de bruit qui suit le curseur, aux vagues qui roulent sous un titre. Rien de tout cela n’est un fichier vidéo : aucune boucle ne se voit et rien ne perd en netteté quand la surface grandit.
Les réglages sont à côté du canevas : palette, vitesse, échelle, grain, direction. Changez une valeur et l’animation répond aussitôt, à pleine fréquence d’images.
Les shaders s’exportent comme les composants, en HTML, Svelte ou React, avec le code de l’animation tel que l’aperçu l’exécute. Aucun runtime à installer, et rien qui nous rappelle.
Mockups : placez votre design dans une scène
Mockups réunit des mockups 3D de téléphones, ordinateurs portables, tablettes, montres et cartes.
Ouvrez un mockup, déposez votre design, puis réglez l’angle, l’éclairage, le fond et le cadre : 9:16, 4:5, 1:1 ou 16:9. Les scènes 3D peuvent aussi être animées avec la timeline de keyframes ou les presets Motion. Mockups est inclus dans chaque offre sans frais supplémentaires. Sans offre, vous pouvez ouvrir chaque mockup et l’essayer ; l’export nécessite une offre.
Emporter votre travail
Les options d’export dépendent de l’éditeur. Les composants et les shaders livrent du code : ils proposent les frameworks, la copie Figma et le prompt. Les textures livrent des fichiers finis. Les mockups s’exportent en images PNG ou JPG, en vidéo MP4 ou en intégration HTML. Les exports comptent dans le quota des éditeurs décrit dans « Téléchargements, limites et réinitialisations ».
HTML
Un seul fichier autonome contenant le balisage, les styles et le code de l’animation. Ouvrez-le dans un navigateur, déposez-le dans une page, ou confiez-le à la personne qui construit le site.
Svelte et React
Le même composant écrit pour votre framework. Les deux sont générés à chaque export à partir du document que vous avez validé, d’où leur correspondance systématique avec ce que vous avez vu.
Copy to Figma
Sur les composants et les shaders, cela place la pièce dans le presse-papiers sous une forme que Figma comprend. Collez-la dans un fichier : elle arrive en vrais calques avec lesquels continuer à concevoir, ou en image aplatie quand le visuel n’a aucune forme à décrire.
Copy Prompt
Sur les composants et les shaders, cela écrit votre configuration actuelle sous forme de texte pour un outil d’IA, avec chaque valeur choisie. La section suivante détaille ce qu’il contient.
Images, vidéos et HTML de mockups
PNG, avec fond transparent quand la scène le permet, et JPG jusqu’à 4096 px sur le grand côté. Vidéo MP4 en H.264 sans son, jusqu’à 1920 px sur le grand côté à 30 ou 60 fps ; les presets de clip vont de 3 à 15 secondes et une timeline de keyframes peut durer de 1 à 30 secondes. Le HTML fournit une intégration interactive en direct, comme un composant. Chaque mockup différent compte une fois dans le quota des éditeurs ; les vidéos MP4 comptent aussi dans leur propre limite, le HTML jamais.
Copy Prompt : confiez votre configuration à un outil d’IA
À côté d’Export, les composants et shaders proposent Copy Prompt. Cette fonction décrit vos réglages actuels en mots simples, prêts pour Claude, Cursor, ChatGPT ou un autre outil d’IA. Textures et Mockups ont leurs propres panneaux d’export à la place.
Ce que contient le prompt
- Le nom de la pièce et la description en une ligne de sa page catalogue.
- Le framework que vous avez choisi, pour que la réponse revienne en HTML, Svelte ou React plutôt qu’au hasard.
- Chaque réglage à la valeur exacte que vous venez de choisir, regroupé comme dans le panneau de contrôle.
- Les règles maison que nous demanderions de toute façon : remplir son conteneur, rester net sur un écran haute résolution, s’immobiliser pour qui demande un mouvement réduit, et livrer du code qui marche, sans remplissage.
- Un lien vers la page d’origine, pour pouvoir orienter le modèle vers la source.
L’idée est que le modèle parte de vos décisions au lieu de faire la moyenne de tout ce qu’il a lu. Demandez-lui de reconstruire la pièce dans votre stack, de la réhabiller à votre design system, ou d’emmener l’idée là où nous ne sommes jamais allés.
Le prompt est écrit à partir de ce que l’éditeur sait déjà : il ne coûte rien à produire et fonctionne même pendant le chargement du visuel.
Pourquoi certains assets sont Figma uniquement (et d'autres code uniquement)
Nous construisons chaque pièce dans le support où elle vit le mieux. Un design d'abord visuel, avec un détail graphique important, vit naturellement dans Figma, c'est donc ce que nous publions. Une pièce orientée code ou générative (mouvement, interaction, 3D) a plus de sens en HTML. Plutôt que de forcer une version bâclée dans chaque format, nous livrons chaque couche dans le format qui lui rend réellement justice. Certaines existent en plusieurs formats ; la page de l'asset indique exactement ce que vous obtenez.
Pourquoi certains codes sont livrés uniquement en HTML
Le HTML est indépendant du stack et autonome. Un fichier qui s'ouvre partout, se lit facilement et se porte proprement vers React, Svelte, Vue ou un hébergement statique simple. Livrer le HTML vous donne le résultat complet sans vous enfermer dans un framework : vous gardez la main sur le portage vers ce que vous construisez réellement. Pour le rendu côté serveur et le SEO, intégrez-le dans le framework de votre choix.
Inspiration vs production
Les deux, et nous voulons être réalistes. Le travail est de qualité production : soigné, réel, réalisé par une équipe senior. Mais beaucoup de couches sont conçues pour inspirer un projet ou vous faire démarrer vite, pas pour être un composant prêt à l'emploi dans tous les contextes. Utilisez-les comme un point de départ solide, puis apportez votre propre direction.
Licences et accès
Tout abonnement actif débloque toute la bibliothèque, sans achats séparés. Les produits HorizonX vous appartiennent sous licence commerciale : utilisez-les et adaptez-les librement dans vos projets personnels, clients et commerciaux. Vous ne pouvez pas revendre, redistribuer ou sous-licencier les fichiers sources eux-mêmes. Les packs open source conservent la licence de leurs auteurs, incluse dans le téléchargement.
Téléchargements, limites et remises à zéro
Chaque offre débloque toute la bibliothèque, et la parcourir est illimité. Les quotas ci-dessous s’appliquent quand vous téléchargez ou exportez. Les téléchargements de la bibliothèque utilisent deux quotas séparés : une journée chargée en téléchargements standard n’entame jamais votre quota Premium. Les exports depuis les éditeurs ont leur propre quota.
Assets classiques · quotidien
Composants, sections, design systems, palettes et assets : Starter 10 · Pro 25 · Max 50 téléchargements par jour. Remise à zéro chaque jour.
Articles Premium · mensuel
Des pièces haut de gamme sélectionnées, marquées d'un badge Premium (une couronne dorée) : Starter 5 · Pro 12 · Max 25 par mois. Remise à zéro le 1er.
Exports depuis les éditeurs · par jour et sur 30 jours
Les exports depuis les éditeurs Tools, Textures, Shaders et Mockups partagent un quota d’éléments différents, selon votre offre : jusqu’à 30 par jour et 100 tous les 30 jours avec Starter, 60 et 200 avec Pro, et 150 et 600 avec Max. La journée correspond aux 24 dernières heures. Réexporter un élément dans les 30 jours ne compte pas à nouveau, quel que soit le format : autant d’images PNG ou JPG du même mockup que nécessaire comptent pour un seul élément.
Vidéos de mockups (MP4) · tous les 30 jours
En plus du quota des éditeurs, les vidéos MP4 ont leur propre limite sur les 30 derniers jours : 20 avec Starter, 100 avec Pro et 400 avec Max, ou 5 si votre seul accès est un essai. Une deuxième vidéo du même mockup dans les 10 minutes ne compte pas à nouveau : un nouvel essai ou une petite retouche est gratuit. Dans une équipe Max, chaque membre a son propre compteur aux limites de l’offre.
Exports de votre agent IA (MCP) · quotidien
Composants, looks de texture, shaders et intégrations HTML de mockups que votre agent de code IA exporte via MCP, selon votre offre : jusqu’à 30 différents par jour et 100 tous les 30 jours avec Starter, 60 et 200 avec Pro, et 150 et 600 avec Max. La journée est remise à zéro à minuit UTC, et un élément déjà exporté n’est jamais décompté à nouveau.
Deux autres choses à savoir : re-télécharger quelque chose que vous possédez déjà ne compte jamais deux fois, et un produit composé de plusieurs fichiers compte pour un seul téléchargement. La page de chaque article Premium indique combien de téléchargements Premium il vous reste pour le mois.
Les exports des éditeurs Tools, Textures, Shaders et Mockups ne consomment jamais les quotas de téléchargement de la Library. Les fichiers de la Library téléchargés pour vous par votre agent IA via MCP comptent comme des téléchargements classiques.
Guides
Figma → Code avec l'IA
De nombreuses couches HorizonX sont Figma uniquement : un design de 3 à 4 sections soignées, sans code associé. Vous pouvez les transformer en site web entièrement fonctionnel en connectant un agent de codage IA (comme Claude Code) à Figma via le Figma MCP. Voici comment.
L'idée
Partagez le fichier Figma avec Claude Code et utilisez un prompt structuré pour recréer chaque section avec une fidélité au pixel près. Une fois qu'il a développé les sections existantes et compris le langage visuel (layout, espacements, typographie, couleurs), vous pouvez lui demander de générer des sections supplémentaires qui suivent le même style et restent cohérentes avec le design original.
Le flux de travail
Lisez avant d'écrire
Demandez à l'agent d'utiliser le Figma MCP pour lire d'abord le design : structure, tokens (couleurs, typographie, espacements, rayons) et une capture d'écran de référence. Il ne doit pas encore générer de code. Si une valeur ne provient pas du MCP, l'agent doit vous le dire plutôt que l'inventer.
Fournissez les assets manuellement
Le Figma MCP n'extrait pas toujours correctement chaque asset : les images peuvent manquer, être compressées ou mal référencées. Les éléments complexes comme les dégradés, masques, ombres, modes de fusion et textures peuvent ne pas se reproduire avec précision. Le cas échéant, exportez-les directement depuis Figma : les images en WebP ou PNG (selon la transparence), les icônes et logos en SVG, et les dégradés ou effets complexes en SVG lorsque le CSS ne peut pas les égaler.
Établissez d'abord le design system
Avant la première section, extrayez et centralisez les tokens (couleurs, échelles typographiques, espacements, rayons, ombres, breakpoints) dans un seul endroit : config Tailwind, fichier de variables CSS ou thème. Nommez-les de façon sémantique. Transformez les éléments réutilisables en composants (boutons, titres, conteneurs). C'est ce qui permet aux sections 2, 3 et 4 d'arriver rapidement et de façon cohérente, au lieu de réinventer la roue à chaque fois.
Construisez une section à la fois
Implémentez une section, puis comparez-la directement au design Figma original à la même taille d'écran. Vérifiez espacements, tailles de police, interlignes, alignement, positionnement des images, dégradés, rayons de bordure et comportement responsive. Corrigez toute différence avant de passer à la section suivante. Vous obtenez ainsi un résultat bien plus précis qu'en demandant à l'agent de recréer toute la page d'un coup.
Allez au-delà de l'original
Une fois les sections existantes construites et le design system établi, demandez à l'agent de créer de nouvelles sections (tarifs, FAQ, témoignages, contact) qui suivent le même langage visuel. Les tokens et composants du design system que vous avez mis en place rendent cela rapide et cohérent.
Conseils
- Assurez-vous que l'URL Figma inclut le
node-idde la section concernée, et non du fichier entier. - Organisez les assets exportés dans des dossiers clairement nommés avant de les donner à l'agent.
- Fournissez les bonnes polices, les breakpoints responsive, les états de survol et les spécifications d'animation.
- Précisez votre stack (Astro, Next.js, React, etc.) à l'avance ; sinon, l'agent en supposera un.
Modèle de prompt réutilisable
Copiez ce prompt et collez-le dans Claude Code (ou tout agent de codage IA avec accès au Figma MCP). Renseignez l'URL Figma et votre stack.
I want you to replicate this Figma section in code with PIXEL-PERFECT fidelity. SOURCE - Figma: [PASTE URL WITH node-id] - This is ONE section of a larger landing page. We will build the remaining sections later, reusing whatever you define here. STACK - [e.g. Astro + Tailwind / Next + CSS Modules / React + styled-components] - Package manager: pnpm PHASE 1: READ (do not write code yet) 1. Use the Figma MCP on the exact node: - get_design_context → structure + reference styles - get_variable_defs → real tokens (colors, typography, spacing, radii) - get_screenshot → reference image to compare against - get_metadata → node hierarchy if the section is complex 2. If a color, spacing or size does not come from the MCP, tell me instead of inventing it. PHASE 2: ASSETS - Images, photos, complex gradients, textures, videos, custom icons, logos, or anything else that cannot be reproduced 1:1 with pure CSS/SVG: STOP and ask me to attach it. List what you need (layer name + purpose). - Pure CSS gradients / shadows / borders: reproduce them from the tokens. PHASE 3: DESIGN SYSTEM - Extract tokens into a single place (Tailwind config / CSS vars / theme): colors, typography, spacing, radii, shadows, breakpoints. - Name them semantically (bg-surface, text-primary, etc.). - Componentize reusable pieces (buttons, chips, headings, containers). PHASE 4: BUILD - Build ONLY this section using the tokens from Phase 3. - Responsive: respect the design's breakpoints. If Figma only shows desktop, tell me and propose mobile behavior before coding. - Semantic, accessible markup (headings, alt, aria). PHASE 5: VERIFY - Compare your result against the get_screenshot reference. - Report remaining differences. - Final visual sign-off is mine.
Travailler avec les couches HTML
Les couches HTML sont des fichiers autonomes : un seul fichier avec tout (markup, styles, scripts) qui s'ouvre dans n'importe quel navigateur. Voici comment en tirer le meilleur parti.
Prévisualisez instantanément
Téléchargez le fichier HTML et ouvrez-le dans votre navigateur. C'est le résultat complet : pas d'étape de build, pas de dépendances. C'est votre référence pour l'apparence et le ressenti de la section.
Portez-le vers votre framework
Le HTML est volontairement indépendant du stack. Donnez-le à Claude Code ou à votre agent de codage IA et demandez-lui de porter la section vers votre framework : React, Svelte, Vue, Astro, Next.js. L'agent peut lire le markup, extraire les styles et le recréer dans la structure de vos composants. Fournissez-lui directement le fichier HTML pour qu'il ait la référence exacte.
Extrayez le design system
Comme avec les couches Figma, demandez à l'agent d'extraire les tokens (couleurs, typographie, espacements, rayons) et de les configurer dans le design system de votre projet avant le portage. Vous pourrez ainsi ajouter d'autres sections plus tard, visuellement cohérentes.
Remplacez les placeholders
Certaines couches HTML incluent des images de placeholder ou des contenus de démonstration. Remplacez-les par votre contenu, vos images et votre marque. La structure et les styles restent ; seul le contenu change.
Astuce
Si le fichier HTML inclut des animations, des interactions ou des scripts tiers qui ne se portent pas proprement, ouvrez le fichier original dans un navigateur, étudiez son comportement et décrivez-le à votre agent IA : parfois, une description est plus efficace que d'essayer de parser du JS minifié.
FAQ
Tout abonnement actif inclut toute la bibliothèque. Aucun achat séparé. Ouvrez un asset et ses actions de format (Copier dans Figma, Télécharger le HTML, etc.) apparaissent. Connectez-vous, allez dans Explore et commencez à récupérer ce dont vous avez besoin.
Deux quotas indépendants selon le plan. Assets classiques : 10 (Starter), 25 (Pro) ou 50 (Max) téléchargements par jour, remis à zéro quotidiennement. Articles Premium (ceux avec le badge Premium doré) : 5, 12 ou 25 par mois, remis à zéro le 1er. La navigation est toujours illimitée et les re-téléchargements ne comptent jamais deux fois.
Oui. Votre abonnement inclut une licence commerciale pour les produits HorizonX. Utilisez et adaptez ces fichiers dans vos projets personnels, clients et commerciaux, sans coût supplémentaire. Les packs open source conservent la licence de leurs auteurs, incluse dans le téléchargement.
Non. Vous pouvez les utiliser et les adapter librement dans vos propres projets, mais vous ne pouvez pas revendre, redistribuer ou sous-licencier les fichiers sources eux-mêmes.
Oui. Nous publions régulièrement de nouvelles sorties, et tout ce que nous ajoutons est inclus dans votre abonnement tant qu'il est actif, sans coût supplémentaire.
Non. Vous pouvez ouvrir un outil, une texture, un shader ou un mockup et toucher à chaque réglage sans inscription. Emporter le résultat nécessite une adhésion.
Non. Rien à installer, rien qui rappelle nos serveurs. Les pièces simples sortent en balisage et CSS purs, et celles qui demandent une vraie timeline emportent le code de l’animation, celui-là même que faisait tourner l’aperçu.
Non. Les exports de mockups n’utilisent jamais les limites de téléchargement quotidiennes ou mensuelles Premium de la bibliothèque. Chaque mockup différent compte une fois dans le quota des éditeurs que vous partagez avec Tools, Textures et Shaders, et les vidéos MP4 ont en plus leur propre limite.
Sur les 30 derniers jours : 20 avec Starter, 100 avec Pro et 400 avec Max, ou 5 si votre seul accès est un essai. Une deuxième vidéo du même mockup dans les 10 minutes ne compte pas à nouveau. Dans une équipe Max, chaque membre a son propre compteur aux limites de l’offre.
Parcourez la bibliothèque.
Ouvrez Explore, trouvez une couche et commencez à construire à partir de quelque chose de réel.