Zbudowałem 9 stron internetowych w niecałą godzinę korzystając z usług Claude'a.

Osobiście wypróbowałem metodę „pisania kodu na podstawie sugestii” i niedawno odkryłem, że można stworzyć do pięciu stron internetowych w jednej sesji, korzystając z bezpłatnej subskrypcji Cloud . Po tym czasie trzeba odczekać pięć godzin, aby ponownie skorzystać z usługi lub dokonać aktualizacji do Cloud Pro.

Przetestowałem Cloud i stworzyłem dziewięć unikalnych stron internetowych w niecałą godzinę. Oto wyniki.

1. Strona docelowa dla starych gier arcade

Prawo:„Strona internetowa z grami arcade w stylu oldschoolowym, z neonowym stylem, pikselową czcionką, żywym, animowanym tłem i trzema dużymi, podświetlanymi przyciskami, które tworzą wrażenie klasycznej arkady. Dodano efekty dźwiękowe po najechaniu kursorem na przyciski.”

Zainspirowana retro automatami, ta neonowa strona naprawdę przypomina salon gier z lat 80. Grafika pikselowa jest naprawdę urocza, a każdy przycisk ma swój własny interaktywny efekt dźwiękowy. Dzięki świecącym akcentom w narożnikach i subtelnym efektom glitch, projekt jest dokładnie taki, jakiego oczekiwałem: responsywny, przyjazny dla klawiatury i gotowy do połączenia z prawdziwymi grami. Ogólnie rzecz biorąc, ta strona sprawia wrażenie, jakbyś wszedł prosto do klasycznego salonu gier.

2. Blog z prostymi przepisami

Zlecenie: „Zaprojektuj prostą stronę główną bloga z przepisami, z czystym białym tłem, eleganckimi czcionkami szeryfowymi i siatką trzech kartek z przepisami. Każda karta powinna zawierać obraz, tytuł przepisu oraz efekt przewijania, który ukazuje składniki. Zadbaj o to, aby strona była dostosowana do urządzeń mobilnych”.

Ta prosta strona główna bloga z przepisami jest elegancka i przejrzysta. Projekt dostosowany do urządzeń mobilnych oferuje łatwą interakcję dotykową z wyświetlaniem składników jednym dotknięciem, co czyni ją idealną do korzystania z niej na urządzeniach mobilnych. Typografia i odstępy między wierszami dobrze sprawdzają się na wszystkich rozmiarach ekranów.

Projekt idealnie łączy w sobie prostą funkcjonalność i wyrafinowaną typografię. Wyjątkowe detale, takie jak nakładające się animacje komponentów, spajają całą stronę, nadając jej ekskluzywny, przyjazny charakter.

3. Strona startowa inspirowana science fiction

Polecenie: „Zaprojektuj futurystyczną, jednostronicową witrynę internetową dla fikcyjnej firmy zajmującej się wydobyciem kosmicznym. Dodaj animowane tło w kształcie gwiazdy wypełniające ekran, pogrubiony, metaliczny tekst i animowany statek kosmiczny powoli przelatujący przez ekran. Dodaj przycisk wezwania do działania: „Dołącz do floty”.

Od gier arcade z lat 80. po filmy science fiction – ta strona oferuje rozgwieżdżone tło wypełniające ekran migoczącymi gwiazdami, latającymi kometami i dryfującymi cząsteczkami kosmitów, a po ekranie przelatuje uroczy statek kosmiczny. Wyrazista metaliczna czcionka, błyszczący tekst i pulsujące przyciski dodają poczucia eksploracji.

Elementy interaktywne, takie jak efekty myszy, nawigacja za pomocą klawiatury i przewijanie z efektem paralaksy, naprawdę ożywiają wrażenia użytkownika. Claude wykonał świetną robotę, dbając o szczegóły.

4. Strona z opowiadaniami dla dzieci

Zlecenie: „Zaprojektuj zabawną i kolorową stronę internetową dla książki z opowiadaniami dla dzieci. Użyj dużych, oryginalnych czcionek, ilustracji zwierząt i przycisku, który przerzuca trzy krótkie „strony” opowiadania za pomocą prostej animacji. Dodaj tło zmieniające kolor na każdej stronie”.

Claude stworzył zachwycającą stronę internetową, która emanuje kapryśnym urokiem. Historia opowiada o trzech zwierzętach: lisie o imieniu Feliks, niedźwiedziu o imieniu Benny i motylu o imieniu Bella, które przeżywają barwną przygodę na trzech interaktywnych stronach.

Każda strona witryny charakteryzuje się wesołymi gradientami kolorów tła, żywymi emotikonami zwierząt i płynnymi animacjami, dzięki którym książka sprawia wrażenie prawdziwej, interaktywnej książki. Czcionki są wyraźne i radosne, a dodane animowane detale angażują i ogólnie rzecz biorąc, strona jest atrakcyjna dla młodych czytelników, zwłaszcza tych przyzwyczajonych do spędzania czasu przed ekranami.

5. Interaktywny panel danych

Polecenie: „Stwórz nowoczesny, ciemny panel danych z interaktywnymi wykresami, wykorzystujący dane pozorne. Dodaj pasek boczny, zegar na żywo u góry oraz trzy wykresy: słupkowy, liniowy i kołowy. Dodaj efekty najechania kursorem i płynne przejścia między sekcjami”.

Postanowiłem stworzyć tę stronę internetową jako przykład biznesowy. Ciemny panel zawiera wszystkie funkcje, o które prosiłem w poleceniu, w tym elegancki pasek boczny z płynnymi animacjami. Responsywny design działa zarówno na komputerach stacjonarnych, jak i na urządzeniach mobilnych i zawiera cztery główne sekcje z płynnymi przejściami.

Spodobał mi się zegar czasu rzeczywistego w nagłówku, a interaktywne wykresy to świetny dodatek. Doceniam to, że Claude dodał dane pozorne, dzięki czemu mogłem zwizualizować wyświetlacz.

6. Miejsce medytacji w ogrodzie zen

Zlecenie: „Stwórz prostą, jednostronicową stronę internetową do medytacji z delikatnym gradientem tła, animowaną wodą u dołu i kwitnącą wiśnią powoli opadającą płatkami na ekran. Dodaj duży przycisk „Rozpocznij medytację”, który odtwarza relaksującą muzykę ambientową i wycisza się, wyświetlając inspirujący cytat”.

Byłem bardzo zadowolony z efektu końcowego tej strony. Delikatne, gradientowe tło w kolorach takich jak brzoskwiniowy, różowy, koralowy i fioletowy wyróżnia się, sprzyjając wyciszeniu i uważności. Strona tworzy prawdziwie spokojną atmosferę, idealną do medytacji.

7. Rynek cyberpunku

Zlecenie: „Stwórz stronę internetową inspirowaną światem neonowego cyberpunku, prezentującą futurystyczny targ uliczny. Użyj efektów glitch po najechaniu myszką na ekran, migających neonów i animowanych menu w stylu hologramu. Każda karta produktu powinna się świecić po najechaniu na nią myszką i zawierać krótki efekt dźwiękowy synthwave. Dodaj powtarzającą się animację deszczu, aby stworzyć ekscytującą atmosferę”.

Cechą charakterystyczną tej witryny jest efekt atmosferyczny. Od powtarzających się animacji deszczu i migających neonów po animowane tło w formie siatki, witryna jest wizualnie atrakcyjna.

Trzy różne dźwięki syntezatora i interaktywne przyciski sprawiają, że strona jest zarówno przyjazna dla użytkownika, jak i angażująca. Nie mógłbym zaprogramować tych funkcji samodzielnie, gdyby nie Claude . Strona doskonale oddaje surową, rozświetloną neonami atmosferę cyberpunkowego targu ulicznego z płynnymi animacjami, autentycznymi dźwiękami synthwave i wciągającymi efektami wizualnymi.

8. Dziennik misji fantasy

Zlecenie: „Zaprojektuj stronę internetową z przygodami fantasy inspirowanymi starożytnym manuskryptem. Spraw, aby wskaźnik pióra świecił i pozostawiał iskrę po poruszeniu, boczny pasek nawigacyjny wyglądał jak średniowieczna księga zaklęć, a użytkownicy mogliby „zebrać” trzy magiczne przedmioty, klikając ikony, które poruszają się po znalezieniu”.

Ten przykład pokazuje, że Claude z łatwością radzi sobie z tworzeniem urzekających, pomysłowych projektów. Świecący wskaźnik w kształcie pióra pozostawia migoczące ślady podczas eksploracji witryny, a menu nawigacyjne rozwija się niczym średniowieczna księga zaklęć w skórzanej oprawie z animowanymi efektami najechania kursorem.

Główna treść opiera się na zwojach papirusu, ozdobionych starożytnymi inskrypcjami i ozdobną średniowieczną typografią, co nadaje stronie autentyczny, starożytno-światowy urok. Dzięki responsywnemu projektowi, interaktywnym podświetleniom i interaktywnym osiągnięciom, każde kliknięcie jest wypełnione starożytną, magiczną interakcją.

9. Adoptuj zwierzaka z kreskówki

Prośba: „Stwórzcie zabawną, interaktywną stronę internetową, na której odwiedzający będą mogli „adoptować” zwierzaka z kreskówki (kota, psa lub smoka). Każdy zwierzak powinien mieć animację w trybie bezczynności, reagować na kliknięcie (mruczenie, merdanie ogonem, zianie ogniem) i można go „karmić” poprzez przeciąganie ikonek jedzenia. Dodajcie wesołą muzykę w tle z opcją wyciszenia”.

Stworzyła interaktywną stronę internetową o adopcji zwierząt, która jest równie urocza, co angażująca. Każde zwierzątko ma swoją własną postać z kreskówki o zabawnej osobowości. Claude ułatwia przeciąganie i upuszczanie jedzenia, aby je nakarmić, obserwując wzrost ich wskaźników szczęścia i odblokowując urocze reakcje, od mruczenia po ziejące ogniem ryki.

Powtarzająca się, optymistyczna melodia pomaga stworzyć odpowiedni nastrój. Strona jest w pełni responsywna, przyjazna dla dotyku i przejrzyście zaprojektowana, aby zapewnić przyjemne, emocjonalne i interaktywne wrażenia.