KREAGENT – Agentka

REFERENCJA (opcjonalnie)

Wgraj screen (png / jpg / webp)

Szerokość viewportu (px) Wysokość viewportu (px)

Możesz pracować z ekranem live albo całkowicie od zera. Ten rozmiar trafi do viewport w JSON-ie.

AKTUALNY BLOK

Brak grafiki przypisanej do tego bloczka.

ID bloku (np. b1) Rodzaj

Nazwa (np. logo.svg)

Instrukcja (opis dla AI)

Współpracuje z

Strona 1 z 1 · index.html

.html

REF

Spis podstron (.html)

Jak używać KREAGENT

Wgraj screen jako kalkę i odwzoruj układ do którego dążysz albo zostaw puste, jeśli rysujesz od zera.

Ustaw rozmiar viewport – szerokość i wysokość strony w pikselach. Te wartości trafią do Agentki.

Rysuj bloki na canvasie (kliknij i przeciągnij) lub użyj przycisku + Blok.

Każdemu blokowi nadaj ID, nazwę pliku (np. hero.svg, product-card.svg) i opis w polu Instructions.

Opcjonalnie – wizualizacja pojedynczego bloku: w panelu AKTUALNY BLOK użyj przycisku Wizualizuj, wybierz grafikę dla tego klocka i zaznacz, czy to 1:1 (generator ma odtworzyć wygląd dokładnie), 1:1 Fix (1:1, ale Agentka może poprawić detale na życzenie klienta) czy inspiracja (Agentka traktuje obrazek luźniej i dopasowuje styl do reszty strony). Ta informacja leci razem z układem do generatora.

Połącz bloki, które mają ze sobą współgrać: jeśli kilka klocków tworzy jedną funkcję (np. zdjęcie + podpis + przycisk, slider + strzałki), zaznacz główny blok i w polu Współgra z wybierz ID tych, które mają z nim chodzić w parze. Ta relacja trafia do JSON-a razem z układem i podpowiada Agentce, że te bloki stanowią jeden moduł.

Multi-select – przytrzymaj Ctrl lub Shift i klikaj bloki albo narysuj prostokąt z przytrzymanym Shift, żeby zaznaczyć kilka klocków naraz.

Przyciski Wyrównaj i Rozsuń działają na podświetlonych blokach.

Jeśli blok ma być stały na wszystkich podstronach (np. navbar) – zaznacz go i kliknij Blok stały dla podstron.

W polu Kind wybierz typ klocka: component (zwykły element, np. karta produktu), component / logo (logo w .svg), background (duże tła, gradienty), text-only (sekcje, w których generator robi głównie tekst).

Na końcu kliknij Zapisz układ lub Prześlij do generatora, żeby Agentka mogła zająć się kodem.

Tip: jeśli chcesz mieć ramkę .svg z podpisem typu pliku (np. „SVG”, „PNG”, „LOGO”), narysuj na to osobny blok, nazwij go np. tag-svg-frame.svg i w Instructions dopisz: „ramka z napisem SVG w rogu, do oznaczania typu assetu”.

Jak nazywać i opisywać pliki

Rozszerzenia:

.html – podstrony: index.html, oferta.html, kontakt.html…
.svg – logotypy, ikony, ramki, przyciski, elementy UI, proste ilustracje.
.jpg/.jpeg – duże zdjęcia (ludzie, wnętrza, krajobrazy).
.png – grafiki / zdjęcia z przezroczystym tłem.

Plików technicznych typu style.css, main.js nie wpisujesz tutaj – Agentka doda je sama.

Jak nazywać pliki:

Małe litery, zamiast spacji myślnik: hero-salon.svg, karta-oferty-1.svg.
Bez polskich znaków i dziwnych symboli: oferta-aut.svg, nie Oferta_Aut!!!.svg.
Nazwa ma mówić, co to jest i gdzie leży na stronie:
- hero-salon.svg – główny baner salonu.
- sekcja-opinie.svg – blok z opiniami klientów.
- galeria-aut.svg – kafelki ze zdjęciami aut.

Grafiki poglądowe (przycisk Wizualizuj):

To są pliki, które podpinasz pod konkretny blok z panelu AKTUALNY BLOK.
Nazywaj je tak, żeby było widać, do czego należą: b1-hero-podglad.jpg, sekcja-opinie-wizualizacja.png, cta-kontakt-1-1.webp.
W trybie 1:1 Agentka traktuje grafikę jak docelowy wygląd bloku; w trybie 1:1 Fix – trzyma ten sam układ, ale może poprawić grafiki (np. wyczyścić tło, dopracować elementy); w trybie inspiracja – obrazek jest tylko inspiracją (klimat / styl / kompozycja).

Ile bloków narysować:

1 blok = 1 logiczny element, który widzisz jako całość: baner, kafelek produktu, pasek z ikonami itp.
Nie trzeba rysować 10 bloków na każdy przycisk.
Więcej niż 1 blok:
- osobne tło na całą szerokość → blok background + osobny blok component na treść,
- to samo tło powtarza się na wielu stronach → tło jako osobny blok stały (globalny).

Instructions – co wpisać w opisie bloku:

1) Co to za element (baner, kafelek, sekcja).
2) Co ma się na nim znaleźć (nagłówki, tekst, grafika, przyciski).
3) Co jest klikalne i dokąd prowadzi.

Przykład jednego bloku:
„Grafika salonu samochodowego. W prawym dolnym rogu dwa przyciski: lewy prowadzi do oferta.html, prawy do aktualnosci.html. Kliknięcie całego baneru przenosi na stronę modelu bmw750.html.”

Pole Współgra z:

Używaj go, gdy ten blok jest częścią większej sceny, która ma działać jako całość (np. zdjęcie + podpis, slajd + strzałki, kafelek + tło).
W dymku wybierasz ID innych klocków, z którymi ten ma współgrać – Agentka w JSON-ie zapisze, że te bloki są ze sobą funkcjonalnie powiązane.

Linki do podstron:

Nazwy zapisuj dokładnie tak, jak mają się nazywać pliki: kontakt.html, oferta-flota.html.
W Instructions pisz wprost: „Po kliknięciu przycisku przejdź do kontakt.html.”

Duplikaty i kopie bloków:

Kopia może mieć roboczą nazwę hero-copy.svg, ale przed finałem warto ją zmienić: np. hero-zimowy.svg.
Unikaj dwóch różnych bloków o tej samej nazwie pliku w jednym projekcie.

Wyobraźnia:

Krótkie, konkretne opisy stylu pomagają: „jasny kafelek z cieniem”, „baner premium, ciemne tło, mocny przycisk kontaktu”.

Im lepiej nazwiesz blok i opiszesz, co ma robić, tym łatwiej Agentka ogarnie resztę w kodzie.