Documentation HorizonX

Comment l'utiliser

Qu'est-ce que HorizonX ?

Comment ça marche

Trois étapes, et celle du milieu dépend du format.

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.

Pour quel modèle d'IA construisez-vous ?

La bibliothèque, trois formes

Templates

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.

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. Tout vous appartient sous licence commerciale : utilisez et adaptez librement dans vos projets personnels, clients et commerciaux. Vous ne pouvez pas revendre, redistribuer ou sous-licencier les fichiers sources eux-mêmes.

Téléchargements, limites et remises à zéro

Chaque plan débloque toute la bibliothèque et permet de la parcourir sans limite : les quotas ci-dessous ne s'appliquent qu'au téléchargement réel. Il y a deux compteurs indépendants, donc une journée chargée de téléchargements classiques ne consomme jamais votre quota Premium.

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.

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.

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 — anything 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.

FAQ