Ik heb met Claude 9 websites in minder dan een uur gebouwd.

Chatbots zoals ChatGPT, Gemini en Claude maken programmeren makkelijker dan ooit, zelfs als je geen programmeerervaring hebt. Dankzij wat bekend staat als "code schrijven op basis van suggestie"Gebruikers kunnen Websites maken In slechts enkele minuten, of ontwikkel zelfs praktische toepassingen door simpelweg een eenvoudige opdracht te geven.

Ik bouwde 9 websites in minder dan een uur met Claude: een uitgebreide gids over hoe het gebeurde | Tom's Guide

Ik heb zelf geëxperimenteerd met 'inspirerend coderen' en ontdekte onlangs dat je met een abonnement maximaal vijf websites in één sessie kunt maken. Claude Gratis. Daarna moet u vijf uur wachten voordat u de service opnieuw kunt gebruiken of kunt upgraden naar Cloud Pro.

Ik heb een test gedaan Claude Ik heb negen unieke websites gebouwd in minder dan een uur. Hier zijn de resultaten.

1. Landingspagina voor oude arcadespellen

Een screenshotEiser:Een ouderwets arcadespelontwerp met een neonstijl, pixellettertype, een pulserende geanimeerde achtergrond en drie grote, verlichte knoppen die een 'klassieke arcade'-uitstraling creëren. Geluidseffecten toegevoegd wanneer je met de muis over de knoppen beweegt.

Geïnspireerd door retro arcadegames, geeft deze site met neonthema een echte arcade-sfeer uit de jaren 80. De pixelart is echt leuk en elke knop heeft zijn eigen interactieve geluidseffect. Met oplichtende hoekaccenten en subtiele glitch-effecten is het ontwerp precies wat ik hoopte: responsief, toetsenbordvriendelijk en klaar om te worden gecombineerd met echte games. Al met al voelt deze site alsof je rechtstreeks een klassieke arcade bent binnengestapt.

2. Simpele receptenblog

Een screenshot

Eiser:Een eenvoudig homepageontwerp voor een receptenblog, met een zuiver witte achtergrond, elegante schreefloze lettertypen en een raster van drie receptenkaarten. Elke kaart moet een afbeelding, de titel van het recept en een hover-effect bevatten dat de ingrediënten onthult. Maak het mobielvriendelijk.

Deze eenvoudige homepage voor een receptenblog is strak en overzichtelijk. Het mobielvriendelijke ontwerp biedt eenvoudige touch-interacties met tik-om-de-ingrediënten te onthullen, waardoor het ideaal is voor mobiel gebruik. De typografie en spaties werken goed op alle schermformaten.

Het ontwerp biedt een perfecte balans tussen eenvoudige functionaliteit en verfijnde typografie. Unieke details zoals de overlappende animatie van de componenten brengen de hele pagina samen en geven deze een premium, uitnodigende uitstraling.

3. Sci-Fi geïnspireerde startpagina

Schermafbeelding van Claude's website

Eiser: Ontwerp een futuristische website van één pagina voor een fictief ruimtemijnbouwbedrijf. Voeg een geanimeerde achtergrond toe met sterren die het scherm vullen, een missieverklaring in vetgedrukte metallic tekst en een geanimeerd ruimteschip dat langzaam over het scherm vliegt. Voeg een call-to-action toe: 'Sluit je aan bij de vloot.'

Van arcadegames uit de jaren 80 tot sciencefictionfilms: deze site heeft een schermvullende sterrenachtergrond met fonkelende sterren, vliegende kometen en zwevende ruimtedeeltjes, terwijl een schattig ruimteschip over het scherm vliegt. De opvallende metallic print, glanzende tekst en pulserende knoppen geven een gevoel van ontdekkingstocht.

Interactieve elementen zoals muisbewegingen, toetsenbordnavigatie en parallax-scrolling brengen de gebruikerservaring echt tot leven. Claude Uitstekend werk met details.

4. Kinderverhalensite

Schermafbeelding van de site

Eiser: Een leuk en kleurrijk websiteontwerp voor een kinderboek. Gebruik grote, speelse lettertypen, dierenillustraties en een knop waarmee je door drie korte verhalenpagina's bladert met simpele animaties. Voeg een achtergrond toe die met elke pagina van kleur verandert.

Claude heeft een prachtige website gemaakt die een speelse charme uitstraalt. Het verhaal volgt drie dieren: een vos genaamd Felix, een beer genaamd Benny en een vlinder genaamd Bella, op een kleurrijk avontuur verspreid over drie interactieve pagina's.

Elke pagina van de site bevat speelse achtergrondkleurovergangen, levendige dierenemoji's en vloeiende flip-animaties, waardoor het voelt als een echt, interactief boek. De lettertypen zijn helder en vrolijk, de toegevoegde animaties zijn boeiend en over het algemeen spreekt deze site jonge lezers aan, vooral degenen die gewend zijn tijd achter een scherm door te brengen.

5. Interactief datadashboard

Schermafbeelding van Claude's website

Eiser:Maak een modern, donker datadashboard met interactieve grafieken met behulp van fictieve data. Voeg een zijbalk, een live klok bovenaan en drie grafieken toe: een staafdiagram, een lijndiagram en een cirkeldiagram. Voeg hover-effecten toe en zorg voor vloeiende overgangen tussen secties.

Ik besloot deze website te maken als voorbeeld van een businesscase. Het dashboard met donker thema bevat alle functies die ik in de prompt had gevraagd, inclusief een strakke zijbalk met vloeiende animaties. Het responsieve ontwerp werkt op zowel desktop als mobiel en bestaat uit vier hoofdsecties met vloeiende overgangen.

Ik vind de realtimeklok in de header erg fijn en de interactieve grafieken zijn een geweldige toevoeging. Ik waardeer hoe het heeft bijgedragen aan Claude Dummy-gegevens, zodat ik het uitzicht daadwerkelijk kan visualiseren.

6. Zentuin Meditatieplek

Schermafbeelding van Claude's website

Eiser: Maak een eenvoudige meditatiewebsite van één pagina met een zachte gradiëntachtergrond, geanimeerd stromend water onderaan en een kersenbloesemboom die langzaam bloemblaadjes over het scherm laat vallen. Voeg een grote knop 'Start Meditatie' toe die ontspannende ambientmuziek afspeelt en overgaat in een inspirerende quote.

Ik was erg blij met het resultaat van deze site. De zachte achtergrond met kleurverloop in kleuren zoals perzik, roze, koraal en paars valt op en draagt ​​bij aan kalmte en mindfulness. De site creëert een echt serene sfeer, perfect voor meditatie.

7. Cyberpunkmarkt

Schermafbeelding van Claude's website

Eiser: Maak een neon-cyberpunk-geïnspireerde website met een futuristische straatmarkt. Gebruik glitch-effecten bij het bewegen van de muis, knipperende neonreclames en geanimeerde menu's in hologramstijl. Elke productkaart moet oplichten bij het bewegen van de muis en een kort synthwave-geluidseffect bevatten. Voeg een terugkerende regenanimatie toe om een ​​gevoel van opwinding te creëren.

Het meest opvallende aan deze site is het atmosferische effect. Van de terugkerende regenanimaties en knipperende neonreclames tot de geanimeerde rasterachtergrond, deze site is visueel aantrekkelijk.

De drie verschillende synth-geluiden en interactieve knoppen maken deze site gebruiksvriendelijk en boeiend. Ik had deze functies niet zelf kunnen programmeren zonder... Claude Met al die actie. De site weet de rauwe sfeer van een neonverlichte cyberpunk-straatmarkt perfect vast te leggen met vloeiende animaties, authentieke synthwave-geluiden en meeslepende visuele effecten.

8. Fantasy Mission Dagboek

Schermafbeelding van Claude's website

Eiser:Ontwerp een fantasy-avonturenwebsite geïnspireerd op een oud manuscript. Laat de pencursor oplichten en een spoor van glinsteringen achterlaten wanneer je hem beweegt, laat de zijbalk eruitzien als een middeleeuws spreukenboek en creëer een pagina waar gebruikers drie magische voorwerpen kunnen 'verzamelen' door op pictogrammen te klikken die bewegen wanneer ze worden gevonden.

Dit voorbeeld bewijst dat Claude Het kan gemakkelijk een magisch fantasy-ontwerp aan. De gloeiende pencursor laat glinsterende sporen achter terwijl je de site verkent, terwijl het navigatiemenu zich ontvouwt als een middeleeuws spreukenboek in leer met geanimeerde zweefeffecten.

De belangrijkste inhoud is gebaseerd op papyrusrollen met oude inscripties en sierlijke middeleeuwse typografie, wat de site een authentieke antieke charme geeft. Dankzij het responsieve ontwerp, interactieve lichteffecten en interactieve prestaties is elke klik gevuld met eeuwenoude magische interactie.

9. Adopteer een cartoonhuisdier

Screenshot van een website gemaakt door Claude

Eiser: Maak een leuke, interactieve website waar bezoekers een cartoonhuisdier (kat, hond of draak) kunnen 'adopteren'. Elk huisdier moet een inactieve animatie hebben, reageren wanneer erop wordt geklikt (spinnen, kwispelen, vuurspuwen) en 'gevoerd' kunnen worden door er voedselicoontjes naartoe te slepen. Voeg vrolijke achtergrondmuziek toe met een dempfunctie.

Ik heb een interactieve website voor huisdieradoptie gemaakt die even leuk als boeiend is. Elk huisdier heeft zijn eigen tekenfilmfiguur met een leuke persoonlijkheid. Het is gemakkelijk om Claude Versleep eten om ze te voeren, zie hun geluksmeters stijgen en ontgrendel leuke reacties, van spinnen tot vuurspuwende brulgeluiden.

Er is ook een terugkerende, vrolijke melodie om de stemming te bepalen. De site is volledig responsief, touchvriendelijk en duidelijk ontworpen voor een leuke, emotionele en interactieve ervaring.

Reacties zijn gesloten.