Jak stworzyć stronę WWW z AI? Część 1: od zera do pierwszej wersji

Nie musisz znać programowania. Potrzebujesz pomysłu na stronę i komputera z Windows 11. Naszym przykładem jest fikcyjna firma ogrodnicza. Ty możesz opisać dowolną stronę firmową lub portfolio. Dobrze na początku wskazać jej odbiorców, cel, styl i główne funkcje.

W folderze Dokumenty utwórz przez prawy przycisk myszy → Nowy → Folder katalog MojaStronaAI. Możesz też wybrać inną lokalizację. Będziemy konsekwentnie używać PowerShell, nie mieszając poleceń CMD i Bash.

Najpierw uruchom lokalnego Codexa i wskaż mu katalog roboczy. Agent może sprawdzić i pomóc zainstalować narzędzia, ale dostęp do komputera i uprawnienia zależą od używanej wersji aplikacji. Nie zgadzaj się automatycznie na zmiany systemowe.

Pracujemy na Windows 11 w PowerShell. Przygotuj komputer do budowy strony w Astro.
Sprawdź VS Code, Node.js, npm i Git. Sprawdź zgodność wersji Node z Astro.
Brakujące programy zaproponuj do instalacji przez winget, ale przed instalacją zapytaj mnie o zgodę.
Nie modyfikuj innych projektów. Po każdej instalacji sprawdź wersję i przedstaw wynik.

Ten prompt określa system i powłokę, wskazuje narzędzia, wymaga sprawdzenia ich wersji, a przede wszystkim żąda zgody przed instalacją. Agent nie powinien zgadywać, czy instalacja się udała.

winget install --id Microsoft.VisualStudioCode -e
winget install --id OpenJS.NodeJS.LTS -e
winget install --id Git.Git -e

code --version
node --version
npm --version
git --version

Otwórz katalog roboczy w Eksploratorze, kliknij pasek adresu, wpisz powershell i naciśnij Enter. Sprawdź lokalizację komendą:

Get-Location

Teraz możesz zlecić Codexowi utworzenie minimalnego projektu albo samodzielnie uruchomić kreator:

npm create astro@latest

W katalogu właściwego projektu uruchom:

npm run dev

Otwórz adres podany przez Astro, zwykle http://localhost:4321/. W naszym teście Astro 7.4.2 wystartowało w 417 ms, a strona główna zwróciła HTTP 200.

npx astro telemetry disable

Tu zaczyna się Twoja część pracy. Napisz własnymi słowami, dla kogo powstaje strona i co ma pokazywać. Możesz zmieniać pomysł w rozmowie z agentem. Najpierw jednak omawiamy koncepcję, bez modyfikowania kodu.

Pracujemy w istniejącym projekcie Astro. Chcę stworzyć stronę internetową:
[TU OPISZ SWÓJ POMYSŁ, ODBIORCÓW, KOLORY I FUNKCJE]
Przeanalizuj obecne pliki. Zaproponuj układ, styl i potrzebne sekcje.
Uwzględnij telefon, dostępność i SEO. Jeśli czegoś nie wiesz, zapytaj.
Na razie nie instaluj bibliotek i nie zmieniaj plików. Poczekaj na moją akceptację.

Jeżeli Codex pyta o zaufanie do folderu, udzielaj go tylko katalogowi, którego pochodzenie znasz. Zaufanie może pozwolić agentowi wykonywać kod z tego folderu.

W naszej rozmowie Codex zaproponował kremowo-zieloną paletę, duży szeryfowy nagłówek, asymetryczne hero, mobilną nawigację i delikatny efekt światła pod kursorem. Nie musisz kopiować tej stylistyki. Gdy zaakceptujesz swoją koncepcję, pozwól agentowi zaimplementować mały etap.

Akceptuję ustaloną koncepcję. Zaimplementuj najpierw pierwszą część:
layout, nawigację, hero, style i responsywność.
Nie dodawaj niepotrzebnych frameworków i nie wymyślaj opinii, statystyk ani danych firmy.
Sprawdź istniejące pliki przed ich zmianą. Uruchom npm run build.
Pokaż listę zmienionych plików oraz wyniki testów. Nie twórz jeszcze commita.

Nie zlecaj od razu całej witryny z formularzem, galerią i integracjami. Pierwsza wersja powinna być możliwa do obejrzenia i sprawdzenia.

U nas powstały pliki Header.astro, Hero.astro, BaseLayout.astro, index.astro, global.css i favicon.svg. Codex następnie przeprowadził audyt pierwszego layoutu. Warto skopiować ten sposób pracy:

Sprawdź git status i git diff --check, działanie wszystkich linków,
responsywność przy 375, 768, 1024 i 1440 px, obsługę klawiatury,
kontrast, polskie metadane SEO, menu mobilne i prefers-reduced-motion.
Uruchom npm run build. Rozdziel rzeczywiście przetestowane elementy
od niezweryfikowanych. Podaj problemy oraz proponowane poprawki.
Nie zmieniaj jeszcze kodu i nie twórz commita.

Raport Codexa wskazał poprawne działanie nawigacji, test czterech szerokości ekranu, brak błędów konsoli i udany build. Znaleziono drobną wadę w dynamicznej obsłudze prefers-reduced-motion; agent ją poprawił i przetestował ponownie. Nie przeprowadzono testów na fizycznym ekranie dotykowym, w Safari ani Firefoxie. Takie ograniczenia należy ujawniać, a nie przemilczać.

Po zaakceptowaniu działającej wersji zapisujemy stan kodu w Git. Commit jest lokalnym punktem historii plików objętych repozytorium; nie jest publikacją strony. Możesz sprawdzić stan w PowerShell:

git status
git log -1 --oneline

W naszym projekcie Codex po testach utworzył commit 62cd7baa8af11ac2b50a3835b90368740d0ee187 z opisem feat: initial responsive garden landing page. Repozytorium pozostało czyste, a git push nie wykonano.

Teraz możecie śmiało próbować innych kolorów, układów, animacji i pomysłów. Nie trzeba umieć programować: opiszcie Codexowi, co chcecie zobaczyć, i oceniajcie wynik w przeglądarce.

Jeśli rezultat się spodoba, każcie agentowi najpierw wykonać testy i zapisać zaakceptowaną zmianę w nowym commicie:

Podoba mi się obecna wersja. Sprawdź git status, git diff,
uruchom npm run build i dopiero po udanych testach zapisz zaakceptowane
zmiany w nowym commicie. Nie wykonuj git push.

Jeżeli nie spodoba się Wam zmiana, poproście o plan bezpiecznego cofnięcia:

Nie podoba mi się ostatnia zmiana. Sprawdź git status, git diff
oraz historię commitów. Wskaż ostatni zaakceptowany commit i pokaż,
które pliki zostaną cofnięte. Nie usuwaj innych zmian bez mojej zgody.
Najpierw przedstaw plan przywracania i poproś o zatwierdzenie.

W kolejnej części rozbudujemy stronę o następne sekcje i przygotujemy ją do publikacji w internecie. Na razie macie coś ważnego: działający fundament i możliwość świadomego eksperymentowania.