J'ai construit 9 sites Web en moins d'une heure avec Claude.

Les chatbots comme ChatGPT, Gemini et Claude simplifient plus que jamais le codage, même sans expérience en programmation. Grâce à ce qu'on appelle « écrire du code par suggestion »Les utilisateurs peuvent Créer des sites Web En quelques minutes seulement, ou même développer des applications pratiques en donnant simplement une commande simple.

J'ai créé 9 sites web en moins d'une heure avec Claude : un guide complet sur la façon dont cela s'est produit | Le guide de Tom

J'ai moi-même expérimenté le « codage inspirant » et j'ai récemment découvert que vous pouvez créer jusqu'à cinq sites Web en une seule session avec un abonnement. Claude Gratuit. Après cela, vous devrez attendre cinq heures pour réutiliser le service ou passer à Cloud Pro.

J'ai fait un test Claude J'ai créé neuf sites web uniques en moins d'une heure. Voici le résultat.

1. Page de destination pour les anciens jeux d'arcade

ScreenshotDemandeur:Un design de jeu d'arcade à l'ancienne, avec un style néon, une police pixelisée, un arrière-plan animé et trois gros boutons lumineux qui créent une ambiance arcade classique. Des effets sonores ont été ajoutés au survol des boutons.

Inspiré des jeux d'arcade rétro, ce site au thème néon offre une véritable ambiance d'arcade des années 80. Le pixel art est vraiment amusant et chaque bouton possède son propre effet sonore interactif. Avec ses coins lumineux et ses subtils effets de glitch, le design est exactement ce que j'espérais : réactif, compatible avec le clavier et prêt à être utilisé avec de vrais jeux. En résumé, ce site donne l'impression d'être entré directement dans une salle d'arcade classique.

2. Blog de recettes simples

Screenshot

Demandeur:Une page d'accueil simple pour un blog de recettes, avec un fond blanc immaculé, d'élégantes polices serif et une grille de trois fiches de recettes. Chaque fiche doit inclure une image, le titre de la recette et un effet de survol révélant les ingrédients. Optimisez l'affichage sur mobile.

Cette page d'accueil simple pour un blog de recettes est élégante et épurée. Son design optimisé pour les appareils mobiles offre des interactions tactiles faciles avec la possibilité de révéler les ingrédients d'un simple toucher, ce qui la rend idéale pour une utilisation mobile. La typographie et l'espacement sont adaptés à toutes les tailles d'écran.

Le design offre un équilibre parfait entre simplicité fonctionnelle et typographie sophistiquée. Des détails uniques, comme l'animation superposée des composants, unifient l'ensemble de la page, lui conférant un aspect haut de gamme et accueillant.

3. Page de démarrage inspirée de la science-fiction

Capture d'écran du site Web de Claude

Demandeur: Concevez un site web futuriste d'une page pour une société minière spatiale fictive. Incluez un arrière-plan animé d'étoiles remplissant l'écran, une déclaration de mission en caractères gras et métalliques et un vaisseau spatial animé volant lentement à l'écran. Ajoutez un bouton d'appel à l'action : "Rejoindre la flotte".

Des jeux d'arcade des années 80 aux films de science-fiction, ce site propose un fond étoilé à couper le souffle, avec des étoiles scintillantes, des comètes volantes et des particules spatiales à la dérive, tandis qu'un adorable vaisseau spatial traverse l'écran. L'imprimé métallique audacieux, le texte brillant et les boutons vibrants ajoutent une touche d'exploration.

Des éléments interactifs tels que les traces de souris, la navigation au clavier et le défilement parallaxe donnent vraiment vie à l'expérience utilisateur. Claude Excellent travail avec les détails.

4. Site d'histoires pour enfants

Capture d'écran du site

Demandeur: Un site web ludique et coloré pour un livre de contes pour enfants. Utilisez de grandes polices originales, des illustrations d'animaux et un bouton permettant de feuilleter trois pages de contes grâce à des animations simples. Ajoutez un arrière-plan qui change de couleur à chaque page.

Claude a créé un site web époustouflant au charme fantaisiste. L'histoire suit trois animaux : un renard nommé Félix, un ours nommé Benny et un papillon nommé Bella, dans une aventure colorée sur trois pages interactives.

Chaque page du site présente des dégradés de couleurs d'arrière-plan ludiques, des émojis d'animaux éclatants et des animations fluides, donnant l'impression d'un véritable livre interactif. Les polices sont claires et gaies, les détails animés sont attrayants et, dans l'ensemble, ce site plaît aux jeunes lecteurs, notamment ceux habitués aux écrans.

5. Tableau de bord de données interactif

Capture d'écran du site Web de Claude

Demandeur:Créez un tableau de bord de données moderne et sombre avec des graphiques interactifs à partir de données fictives. Ajoutez une barre latérale, une horloge en temps réel en haut et trois graphiques : un graphique à barres, un graphique linéaire et un graphique à secteurs. Ajoutez des effets de survol et des transitions fluides entre les sections.

J'ai choisi de créer ce site web comme exemple d'étude de cas. Le tableau de bord au thème sombre inclut toutes les fonctionnalités demandées, notamment une barre latérale élégante avec des animations fluides. Le design réactif est compatible avec les ordinateurs et les appareils mobiles et comprend quatre sections principales avec des transitions fluides.

J'apprécie l'horloge en temps réel dans l'en-tête et les graphiques interactifs sont un excellent ajout. J'apprécie l'ajout Claude Données factices pour que je puisse réellement visualiser la vue.

6. Site de méditation du jardin zen

Capture d'écran du site Web de Claude

Demandeur: Créez un site web de méditation simple, d'une seule page, avec un arrière-plan légèrement dégradé, une eau vive animée en bas et un cerisier en fleurs dont les pétales tombent lentement sur l'écran. Ajoutez un grand bouton « Démarrer la méditation » qui diffuse une musique d'ambiance relaxante et s'estompe sur une citation inspirante.

J'ai été très satisfait du résultat de ce site. Le fond dégradé doux aux couleurs pêche, rose, corail et violet se démarque, favorisant le calme et la pleine conscience. Le site crée une atmosphère véritablement sereine, idéale pour la méditation.

7. Marché Cyberpunk

Capture d'écran du site Web de Claude

Demandeur: Créez un site web néon d'inspiration cyberpunk mettant en scène un marché de rue futuriste. Utilisez des effets de glitch au survol, des enseignes lumineuses clignotantes et des menus animés de style hologramme. Chaque fiche produit doit s'illuminer au survol et inclure un court effet sonore synthwave. Ajoutez une animation de pluie récurrente pour créer une ambiance animée.

L'élément le plus remarquable de ce site réside dans son atmosphère. Des animations de pluie récurrentes aux néons clignotants, en passant par le fond quadrillé animé, ce site est visuellement attrayant.

Les trois sons de synthé différents et les boutons interactifs rendent ce site facile à utiliser et captivant. Je n'aurais pas pu programmer ces fonctionnalités moi-même sans Claude Avec toute l'action. Le site capture parfaitement l'atmosphère austère d'un marché de rue cyberpunk éclairé au néon, avec une animation fluide, des sons synthwave authentiques et des effets visuels immersifs.

8. Journal de mission fantastique

Capture d'écran du site Web de Claude

Demandeur:« Concevez un site web d'aventure fantastique inspiré d'un manuscrit ancien. Faites briller le curseur en forme de plume et laissez une traînée d'étincelles lorsqu'il est déplacé, la barre latérale évoque un grimoire médiéval et une page où les utilisateurs peuvent « collecter » trois objets magiques en cliquant sur des icônes qui se déplacent lorsqu'ils les trouvent. »

Cet exemple prouve que Claude Il s'adapte facilement à un design fantastique et magique. Le curseur plume lumineux laisse des traces chatoyantes lors de votre exploration du site, tandis que le menu de navigation se déploie tel un grimoire médiéval relié en cuir avec des effets de survol animés.

Le contenu principal repose sur des rouleaux de papyrus ornés d'inscriptions anciennes et d'une typographie médiévale richement ornée, conférant au site un charme authentique du monde antique. Grâce à un design adaptatif, des effets lumineux interactifs et des succès interactifs, chaque clic est rempli d'interactions magiques ancestrales.

9. Adoptez un animal de compagnie de dessin animé

Capture d'écran d'un site Web créé par Claude

Demandeur: Créez un site web ludique et interactif où les visiteurs peuvent « adopter » un animal de compagnie (chat, chien ou dragon). Chaque animal doit avoir une animation inactive, réagir au clic (ronronnement, frémissement de la queue, cracheur de feu) et être nourri en faisant glisser des icônes de nourriture dessus. Ajoutez une musique de fond entraînante avec une option de sourdine.

J'ai créé un site web interactif d'adoption d'animaux de compagnie, aussi amusant qu'attrayant. Chaque animal a son propre personnage de dessin animé, doté d'une personnalité amusante. C'est facile à utiliser. Claude Faites glisser et déposez de la nourriture pour les nourrir, regardez leurs compteurs de bonheur augmenter et débloquez des réactions délicieuses allant du ronronnement aux rugissements cracheurs de feu.

Un air rythmé et récurrent contribue également à créer l'ambiance. Le site est entièrement responsive, tactile et clairement conçu pour une expérience ludique, émotionnelle et interactive.

Les commentaires sont fermés.