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 heb in minder dan een uur 9 websites gebouwd met behulp van de cloud: een uitgebreide handleiding over hoe je dat doet | DzTecnium

Ik heb zelf geprobeerd om "code te schrijven op basis van suggesties" en ontdekte onlangs dat je met een gratis Cloud -abonnement tot wel vijf websites in één sessie kunt maken . Daarna moet je vijf uur wachten voordat je de service opnieuw kunt gebruiken of kunt upgraden naar Cloud Pro.

Ik heb Cloud getest en binnen een uur negen unieke websites gebouwd. 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

De opdracht: "Ontwerp een eenvoudige homepage voor een receptenblog, met een spierwitte achtergrond, elegante schreeflettertypen en een raster van drie receptkaarten. Elke kaart moet een afbeelding, de recepttitel en een scrolleffect bevatten dat de ingrediënten onthult. Zorg ervoor dat de website mobielvriendelijk is."

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

De opdracht: "Ontwerp een futuristische website van één pagina voor een fictief ruimtemijnbouwbedrijf. Voeg een schermvullende, geanimeerde sterrenachtergrond toe, een missieomschrijving in vetgedrukte metallic tekst en een geanimeerd ruimteschip dat langzaam over het scherm vliegt. Voeg een call-to-action-knop 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 muiseffecten, toetsenbordnavigatie en parallax-scrolling brengen de gebruikerservaring echt tot leven. Claude heeft uitstekend werk geleverd met de details.

4. Kinderverhalensite

Schermafbeelding van de site

De opdracht: "Ontwerp een leuke en kleurrijke website voor een kinderboek. Gebruik grote, originele lettertypen, dierenillustraties en een knop waarmee je door drie korte verhaalpagina's kunt bladeren met een simpele animatie. Voeg een achtergrond toe die van kleur verandert bij elke pagina."

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

De opdracht: "Ontwerp een modern, donker datadashboard met interactieve grafieken op basis van fictieve gegevens. Voeg een zijbalk, een live klok bovenaan en drie grafieken toe: een staafdiagram, een lijndiagram en een cirkeldiagram. Voeg hover-effecten en vloeiende overgangen tussen de secties toe."

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 vond de realtime klok in de header geweldig, en de interactieve grafieken zijn een fantastische toevoeging. Ik waardeer het dat Claude fictieve gegevens heeft toegevoegd, zodat ik de weergave daadwerkelijk kon visualiseren.

6. Zentuin Meditatieplek

Schermafbeelding van Claude's website

De opdracht: "Ontwerp een eenvoudige meditatie-website van één pagina met een zachte kleurovergang als achtergrond, geanimeerd stromend water onderaan en een kersenbloesemboom waarvan de bloemblaadjes langzaam over het scherm vallen. Voeg een grote 'Start meditatie'-knop toe die rustgevende ambientmuziek afspeelt en vervaagt met 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

De opdracht: "Ontwerp een website geïnspireerd op de wereld van neon-cyberpunk, met een futuristische straatmarkt als thema. Gebruik glitch-effecten wanneer de muis eroverheen beweegt, knipperende neonreclames en geanimeerde menu's in hologramstijl. Elk productkaartje moet oplichten wanneer de muis eroverheen beweegt en een kort synthwave-geluidseffect bevatten. Voeg een terugkerende regenanimatie toe om een ​​opwindende sfeer 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 synthesizertonen en interactieve knoppen maken deze site zowel gebruiksvriendelijk als boeiend. Ik had deze functies zelf nooit kunnen programmeren zonder de hulp van Claude . De site vangt perfect de rauwe, neonverlichte sfeer van een cyberpunk-straatmarkt met vloeiende animaties, authentieke synthwave-geluiden en meeslepende visuele effecten.

8. Fantasy Mission Dagboek

Schermafbeelding van Claude's website

De opdracht: "Ontwerp een website voor fantasy-avonturen, geïnspireerd op een oud manuscript. Laat de ganzenveer gloeien en een glinstering achterlaten wanneer deze wordt bewogen, de zijnavigatiebalk eruitzien als een middeleeuws toverboek en een pagina waar gebruikers drie magische voorwerpen kunnen 'verzamelen' door op pictogrammen te klikken die bewegen wanneer ze worden gevonden."

Dit voorbeeld laat zien dat Claude moeiteloos een boeiend en fantasierijk ontwerp kan creëren. De oplichtende ganzenveer laat glinsterende sporen achter terwijl je de site verkent, terwijl het navigatiemenu zich ontvouwt als een middeleeuws toverboek met een leren omslag en 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

De opdracht: "Ontwerp een leuke, interactieve website waar bezoekers een cartoonhuisdier (kat, hond of draak) kunnen 'adopteren'. Elk huisdier moet een animatie hebben in de ruststand, reageren wanneer erop geklikt wordt (spinnen, kwispelen, vuur spuwen) en 'gevoerd' kunnen worden door voedselpictogrammen ernaartoe te slepen. Voeg vrolijke achtergrondmuziek toe met een optie om het geluid uit te zetten."

Ze heeft een interactieve website voor het adopteren van huisdieren gemaakt die even leuk als boeiend is. Elk huisdier heeft zijn eigen stripfiguur met een grappige persoonlijkheid. Claude maakt het gemakkelijk om voedsel te slepen en neer te zetten om ze te voeren, hun geluksmeter te zien stijgen en leuke reacties te ontgrendelen, variërend van spinnen tot vuurspuwende brullen.

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.