Hostinger Horizons : créer un site en vibe coding, pas à pas

Tu veux créer ton site rapidement, sans compétence en design ni en technique, et sans jongler entre un hébergeur, un nom de domaine et un outil de création ? Hostinger Horizons fait tout ça avec un seul abonnement : tu décris ton site en français, et l'IA le génère. C'est ce qu'on appelle le vibe coding. Je te montre comment créer ton site avec Horizons, de la première version à la mise en ligne, et je te donne mon retour d'expérience : j'ai moi-même vibe codé une précédente version de nomadicsteph.com avec cet outil.

Le tuto en vidéo

Je crée en direct le site d'une conseillère en gestion de patrimoine (fictive), du prompt à la publication.

▶ YouTube · 16 min Regarder la vidéo sur YouTube

Hostinger Horizons, c'est quoi exactement ?

Hostinger Horizons est un outil de vibe coding : tu décris ton site ou ton application en langage naturel, l'IA écrit le code et te montre le résultat en direct. Pas de code, pas de thème, pas d'extension à installer : tu discutes avec l'IA, comme avec ChatGPT ou Claude.

Sa grande différence avec les autres outils de vibe coding : tout est sur la même plateforme, avec un seul abonnement.

C'est pour ça que je l'ai choisi pour mon site plutôt que Lovable ou Claude Code : je suis cliente et partenaire de Hostinger depuis plusieurs années, leur interface est ultra simple et leur service client efficace.

Certains liens sont affiliés : ça ne te coûte rien de plus et ça soutient mes tutos gratuits.

Étape 1 : prendre ton plan Hostinger Horizons

Sur la page Hostinger Horizons, descends jusqu'aux formules. Je te recommande de choisir au minimum celle qui inclut le nom de domaine gratuit la première année et les e-mails professionnels. Garde la durée de 12 mois, ajoute le code NOMADICSTEPH pour une réduction supplémentaire, crée ton compte Hostinger et passe au paiement.

Tu arrives directement dans Horizons. Sinon : tableau de bord Hostinger › Sites web › Ajouter un site web › Hostinger Horizons.

Étape 2 : créer la première version de ton site

Tout commence par un prompt qui décrit ton site. Mais écrire un prompt détaillé n'est pas facile, surtout si tu ne sais pas encore exactement ce que tu veux. Ma méthode, en trois temps :

Trouve tes inspirations

Va sur Dribbble (visuels et interfaces) ou les templates Framer (mises en page) et cherche des designs qui te plaisent. Pour capturer une page entière, une extension de navigateur comme GoFullPage fait l'affaire. Pour la précédente version de mon site, je m'étais inspirée des templates Framer du créateur Hamza Ehsan.

Fais rédiger ton prompt par Claude

Envoie à Claude tes captures et ce message de départ. Il va t'aider à définir la structure et l'identité visuelle de ton site, te poser des questions, puis rédiger un prompt détaillé pour Horizons.

Tu es un vibe coder professionnel avec Hostinger Horizons. Je veux créer mon site de [ton activité] avec Hostinger Horizons : un site one-page qui présente [les sections : proposition de valeur, services, comment ça marche, tarifs, qui je suis, contact…]. En PJ, screenshot d'un site pour inspiration design, structure et contenu.
1) Peux-tu commencer par m'aider à définir la structure et l'identité visuelle de mon site one-page ?
2) Pose-moi des questions pour être sûr d'avoir toutes les infos dont tu as besoin.
3) Génère un prompt simple mais détaillé pour créer ce site avec Hostinger Horizons.

Lance la création dans Horizons

Colle le prompt de Claude dans la barre de Horizons. Tu peux aussi y joindre ta capture d'inspiration, en précisant ce que tu veux reproduire. Envoie : quelques minutes plus tard, la première version de ton site est prête. Clique sur Ouverture de l'aperçu pour la voir comme un visiteur.

Sur ma démo, le résultat était déjà convaincant pour une première version : le menu, l'en-tête, toutes les sections, et la palette demandée. Avec quelques défauts à corriger, comme une police de titres trop grande pour un rendu premium.

Étape 3 : ajuster et améliorer ton site

La première version n'est qu'une base. Horizons te donne cinq façons de la modifier :

• Les prompts : écris simplement ce que tu veux, par exemple « Peux-tu réduire la police des titres ? ».
• Une image d'inspiration : joins une capture et précise ce qu'elle doit inspirer (la structure, les polices, les couleurs…).
• L'outil de sélection : sélectionne un texte ou une section avant d'écrire ta demande. Horizons sait alors exactement de quoi tu parles. Plus tu es précis, meilleur est le résultat.
• L'éditeur visuel : active « Modifier le contenu », clique sur un texte ou une image et modifie-le toi-même. Tout n'est pas modifiable de cette façon, mais c'est idéal pour tes textes et tes photos.
• Le code : selon ta formule, tu peux accéder aux fichiers du site, si tu t'y connais un peu.

Étape 4 : publier ton site et connecter ton nom de domaine

Tant que tu n'as pas publié, ton site est en aperçu, invisible sur le web. Quand tu es satisfait :

1. 1

   Publie ton site

   Clique sur Publier en haut : Horizons met ton site en ligne sur une adresse temporaire.

2. 2

   Connecte ton nom de domaine

   Clique sur Connecter un nom de domaine personnalisé et choisis ton nom de domaine (offert la première année avec ta formule), puis valide.

3. 3

   Patiente un peu

   La connexion peut prendre jusqu'à 24 heures. Ensuite, ton site est disponible sur ton nom de domaine.

Mon avis sur Hostinger Horizons

En mars 2026, j'ai vibe codé la précédente version de nomadicsteph.com avec Hostinger Horizons. Voici mon retour d'expérience.

Ce que j'ai aimé :

• la création ultra rapide : on fait en un prompt des choses longues ou difficiles avec WordPress, comme la frise chronologique de ma page À propos ;
• pas besoin de compétence en design : il pense le design pour toi et peut s'inspirer d'un modèle ;
• un site adapté au mobile automatiquement (à vérifier quand même) ;
• l'IA peut rédiger tes textes pour lancer ta première version rapidement ;
• tout est harmonisé, sans te prendre la tête avec les détails ;
• ultra personnalisable, à condition de lui envoyer des prompts détaillés ;
• il pense à des éléments auxquels tu n'aurais pas pensé ;
• aucune technique : tu discutes en français avec une IA, et tu annules une modification en un clic.

Ce que j'ai moins aimé :

• un design élégant demande de l'effort : comparé à Lovable, il faut beaucoup plus d'indications et de captures d'inspiration. Mais on arrive à un résultat qui dépasse WordPress ;
• il ne comprend pas toujours ce que je veux : j'ai parfois dû revoir mes prompts avec Claude, et ça peut être frustrant ;
• le SEO est moins avancé que sur un site WordPress ;
• pas idéal pour publier beaucoup de contenu : il n'a pas toujours respecté à 100 % les textes que je lui donnais.

Mon site a évolué depuis : la version que tu lis aujourd'hui a été créée avec Claude Design et Claude Code, pour aller plus loin dans le design sur mesure. Je te montre cette méthode dans mon tuto pour créer un site avec Claude Code.

Pour qui est fait Hostinger Horizons ?

Hostinger Horizons est fait pour toi si :

• tu veux créer un site ultra rapidement ;
• c'est un site vitrine, une landing page, une page de vente ou une application web ;
• tu n'as pas de compétence en design ni en technique ;
• tu ne veux pas jongler entre plusieurs outils : hébergement, nom de domaine, e-mails et vibe coding sont inclus ;
• tu veux ajouter des fonctionnalités avancées : espace membre, paiements avec Stripe, outil IA…

Il n'est pas fait pour toi si :

• tu veux une stratégie SEO avancée ;
• tu prévois de publier du contenu souvent (un blog actif, par exemple) ;
• tu veux une maîtrise et un contrôle poussés de ton site.

Dans ces cas-là, WordPress reste une meilleure option, et tu peux même le faire avec l'IA : je te montre comment créer un site WordPress avec Claude Code.

Et si ton projet est avant tout une application (comptes utilisateurs, base de données, IA intégrée), un outil tout-en-un pensé pour les apps comme Emergent AI peut aussi te convenir.

Et si ton site est déjà créé avec l'IA, tu n'as pas à tout refaire : je te montre comment convertir un site Lovable en WordPress, une méthode qui marche aussi pour d'autres outils.

Mes conseils pour réussir ton site en vibe coding

En pratique, un résultat sur mesure demande de bons prompts, et parfois de batailler un peu avec l'IA. Comprendre quelques termes simples de design (pixels, marges…) aide aussi pour les personnalisations précises. Mes conseils :

• Utilise Claude pour définir ce dont tu as besoin (style visuel, pages, sections, en-tête, pied de page), rédiger ton prompt de départ, puis formuler tes modifications précises.
• Donne un maximum d'inspiration à l'IA, avec des images et des captures.
• Utilise l'outil de sélection pour donner du contexte à chaque demande.
• Modifie tes textes et images toi-même dans l'éditeur visuel, pour économiser tes crédits IA.

Et après ?

Ton site est en ligne : maintenant, il faut qu'on le trouve. Sur Google, mais aussi dans les réponses des IA comme ChatGPT. C'est mon métier, je peux t'aider à le rendre visible.

Questions fréquentes

Écrit par

Stéphanie Canovas

Je crée des tutos et formations pour aider les entrepreneurs à créer et optimiser leur site web. +8 000 entrepreneurs formés.

Mon parcoursYouTube ↗LinkedIn ↗