Responsywne szablony HTML. Zbuduj stronę, którą klienci wygodnie obejrzą na telefonie i komputerze.
Wybierz układ dla prawdziwych treści, a potem sprawdź go w wąskich i szerokich oknach. Sprawdź nawigację, kadry i dłuższe teksty przed publikacją własnej wersji.
Projekty demonstracyjne · zastąp fikcyjne treści własnymi.
AI ChatPrzykładowy proces
Zaobserwowane testy
Ty
Pokaż sposób sprawdzenia projektu w szerokościach telefonu, tabletu i komputera.
AI · przykładowa odpowiedź
Mogę otworzyć projekt przy 390, 768 i 1440 pikselach CSS oraz sprawdzić wychodzący tekst, kadry i menu. Po zmianach sprawdzimy Twoją wersję, zamiast zakładać, że oryginalne zrzuty ją potwierdzają.
Sprawdź telefon, tablet i komputer
Otwórz telefon i komputer
Sprawdź nagłówek, kadr, menu i główny przycisk w obu rozmiarach.
Opisz widoczny problem
Podaj AI ekran i zrzut, np. ucięty tekst albo zbyt dużo pustego miejsca.
Sprawdź poprawiony podgląd
Powtórz te same działania w obu szerokościach i na opublikowanej stronie.
Potem: otwórz zmienioną stronę na urządzeniach odbiorców.
Przykładowa rozmowa, bez sesji AI na żywo.
01 / Zaobserwowane testy
Co sprawdzono w tej wersji Relayline?
Relayline otwarto w szerokościach telefonu, tabletu i komputera: 390, 768 i 1440 pikseli CSS. W tych próbach przeglądarkowych strona nie wychodziła poziomo poza ekran. Obrazy poniżej pokazują tę wersję. Powtórz sprawdzenie po dodaniu własnych tekstów i zdjęć.
Źródło i warunki
Aktualna paczka 14080be0…13ca · sprawdzona 2 października 2026. Rozmiary okna desktopowego, nie prawdziwe telefony; wersja przeglądarki nie była udostępniona.
Zakres sprawdzenia
Oryginalny układ i ładowanie obrazów, otwarcie kursorem, Escape, przebieg okna i powrót fokusu. To nie pełna certyfikacja dostępności ani całego katalogu.
Oryginalny Relayline · okno desktopowe 1440 × 900 · ta sama aktualna paczkaOryginalny Relayline · okno desktopowe 768 × 900 · ta sama aktualna paczkaOryginalny Relayline · okno desktopowe 390 × 900 · ta sama aktualna paczka
02 / Propozycje układów
Które układy warto sprawdzić dokładniej?
Wybierz ramki obrazów i miejsca tekstu pasujące do swoich materiałów. Otwórz stronę na telefonie i komputerze, sprawdź długi nagłówek, własne zdjęcie oraz menu. Podglądy pozwalają porównać układy przed wyborem projektu do dostosowania.
Relayline
Wyjaśnienie produktu z wprowadzeniem w trzech kaflach i rozbudowaną nawigacją do sprawdzenia.
Aktualny pakiet sprawdzony 2 października 2026. Sprawdź wybrane pliki na stronie produktu.
index.html
RECREATE.md
assets/vyne-clay-glass-still-life.png
assets/vyne-cobalt-editorial.png
assets/vyne-ivory-portrait.png
Część zasobów może być pobierana z zewnętrznych adresów. Sprawdź wybrany projekt przed publikacją.
Projekty demonstracyjne · zastąp fikcyjne treści własnymi.
AI ChatPrzykładowy proces
Długi tekst i pionowy obraz
Ty
Portret jest za mocno ucięty na telefonie. Pokaż całą twarz bez zmiany komputera.
AI · przykładowa odpowiedź
Prześlij zrzut i podaj problematyczną szerokość. Mogę zmienić CSS nagłówka, odstępu lub kadru w tym widoku, zachowując układ komputera. Potem porównamy oba podglądy.
Dopasuj widok telefonu
Otwórz telefon i komputer
Sprawdź nagłówek, kadr, menu i główny przycisk w obu rozmiarach.
Opisz widoczny problem
Podaj AI ekran i zrzut, np. ucięty tekst albo zbyt dużo pustego miejsca.
Sprawdź poprawiony podgląd
Powtórz te same działania w obu szerokościach i na opublikowanej stronie.
Potem: otwórz zmienioną stronę na urządzeniach odbiorców.
Przykładowa rozmowa, bez sesji AI na żywo.
03 / Długi tekst i pionowy obraz
Co stało się po dodaniu dłuższego tekstu i pionowego obrazu?
W osobnej kopii testowej dłuższy nagłówek zawijał się bez wypychania strony poza ekran. Pionowy obraz był kadrowany różnie zależnie od szerokości. Możesz zlecić AI dopasowanie zawijania i kadru do swoich materiałów; obrazy pokazują, dlaczego warto sprawdzić podgląd.
Twoja decyzja
Oryginalna paczka
Zmieniona kopia testowa
390 × 900
Nie zaobserwowano poziomego wyjścia strony poza ekran.
Dłuższy nagłówek zawinął się; pierwszy portret ukrywało istniejące CSS.
768 × 900
Nie zaobserwowano poziomego wyjścia strony poza ekran.
Pionowy portret przycięto do kwadratu 236 × 236 przez cover.
1440 × 900
Nie zaobserwowano poziomego wyjścia strony poza ekran.
Pionowy portret przycięto do kwadratu 460 × 460 przez cover.
Kopia testowa Relayline · 1440 × 900 · dłuższy nagłówek i portret 1:3; nie ZIP klientaKopia testowa Relayline · 768 × 900 · dłuższy nagłówek i portret 1:3; nie ZIP klientaKopia testowa Relayline · 390 × 900 · dłuższy nagłówek i portret 1:3; nie ZIP klienta
AI ChatPrzykładowy proces
Użycie elementów
Ty
Sprawdź menu, szczegóły i Escape po zmianach responsywnych.
AI · przykładowa odpowiedź
Mogę sprawdzić linki menu i okna szczegółów: cel sekcji, zamykanie oraz powrót do otwierającego elementu. Jeśli projekt potrzebuje własnego linku, możemy dodać osobną podstronę HTML.
Sprawdź menu i szczegóły
Użyj menu
Sprawdź widoczność sekcji bez zasłonięcia przez nagłówek.
Otwórz i zamknij szczegóły
Sprawdź zamknięcie, Escape i powrót do przycisku projektu.
Dodaj potrzebny adres
Zleć osobną podstronę projektu, jeśli ma mieć własny link do udostępnienia.
Potem: użyj menu oraz szczegółów na telefonie i komputerze.
Przykładowa rozmowa, bez sesji AI na żywo.
04 / Użycie elementów
Czy odwiedzający obsłuży menu i szczegóły?
W sprawdzonej wersji Relayline menu i okno szczegółów reagowały na kliknięcia, a Escape zamykał okno. Na swojej stronie otwórz menu, użyj linku i zamknij szczegóły na urządzeniach, z których korzystasz. Poproś AI o naprawę elementu, który przestał działać po edycji.
01
Menu
Otwórz je, użyj linku i sprawdź, czy właściwa sekcja jest widoczna.
02
Szczegóły
Otwórz projekt i przetestuj przycisk zamknięcia oraz Escape.
03
Po edycji
Powtórz na telefonie i komputerze, a przy błędzie przekaż AI zrzut.
AI ChatPrzykładowy proces
Dostosuj i sprawdź
Ty
Zmniejsz odstęp hero na telefonie i zachowaj odstępy komputera.
AI · przykładowa odpowiedź
Prześlij zrzut i podaj problematyczną szerokość. Mogę zmienić CSS nagłówka, odstępu lub kadru w tym widoku, zachowując układ komputera. Potem porównamy oba podglądy.
Dopasuj widok telefonu
Otwórz telefon i komputer
Sprawdź nagłówek, kadr, menu i główny przycisk w obu rozmiarach.
Opisz widoczny problem
Podaj AI ekran i zrzut, np. ucięty tekst albo zbyt dużo pustego miejsca.
Sprawdź poprawiony podgląd
Powtórz te same działania w obu szerokościach i na opublikowanej stronie.
Potem: otwórz zmienioną stronę na urządzeniach odbiorców.
Przykładowa rozmowa, bez sesji AI na żywo.
05 / Dostosuj i sprawdź
Czy dopracuję odstępy z AI?
Tak. Napisz AI, co jest zbyt ciasne lub duże i na jakim ekranie, np. zmniejsz odstęp hero na telefonie bez zmiany komputera. Poproś o podgląd obu szerokości. Dopasujesz odstępy i fonty do swoich tekstów, zamiast zostawać przy początkowym układzie.
Zobacz przygotowany przykład szablonu
›_ Przykład edycji z AIFormwell
Ty
Dostosuj odstępy sekcji, zachowując treści i styl.
AI · przykładowa odpowiedź
Przygotowany przykład Formwell zmienia odstępy. Po każdej zmianie sprawdź własne nagłówki, obrazy, elementy obsługi i wąskie widoki.
Przygotowana rozmowa i wersje projektu. Bez połączenia z AI na żywo.
AI ChatPrzykładowy proces
Ruch i zasoby
Ty
Skompresuj duże zdjęcia i ogranicz animację bez usuwania treści.
AI · przykładowa odpowiedź
Mogę sprawdzić rozmiary obrazów oraz reguły animacji. Poproś o kompresję i ograniczenie ruchu przeszkadzającego w czytaniu. Potem sprawdzimy jakość zdjęć i działanie elementów strony.
Popraw ciężkie obrazy i animacje
Sprawdź media
Wskaż zbyt duże obrazy i animacje do zmiany.
Zleć poprawkę
Zmniejsz i skompresuj zdjęcia oraz ogranicz lub usuń wybrany ruch.
Sprawdź rezultat
Oceń ostrość zdjęć, czytelność tekstu i działanie elementów.
Potem: sprawdź publiczną stronę z nowymi plikami.
Przykładowa rozmowa, bez sesji AI na żywo.
06 / Ruch i zasoby
Co z animacją, ładowaniem i brakującymi zasobami?
Jeśli zdjęcia ładują się wolno, poproś AI o zmniejszenie i kompresję. Jeśli animacje przeszkadzają, zleć ich ograniczenie lub usunięcie. Po publikacji sprawdź obrazy i fonty. Próba Relayline potwierdziła ładowanie zdjęć, ale nie mierzyła szybkości, działania offline ani ograniczania ruchu.
Pliki strony + instrukcje projektu
Zdjęcia
Zleć zmniejszenie i kompresję dużych obrazów oraz sprawdzenie ładowania online.
Ruch
Poproś o ograniczenie lub usunięcie animacji, których nie chcesz na własnej stronie.
Zasoby
Sprawdź publiczną stronę pod kątem brakujących zdjęć i fontów oraz zleć naprawę ścieżek.
AI ChatPrzykładowy proces
Wybierz i sprawdź ponownie
Ty
Pomóż sprawdzić edytowaną stronę na telefonie, komputerze i publicznym hostingu.
AI · przykładowa odpowiedź
Prześlij zrzut i podaj problematyczną szerokość. Mogę zmienić CSS nagłówka, odstępu lub kadru w tym widoku, zachowując układ komputera. Potem porównamy oba podglądy.
Sprawdź stronę przed publikacją
Otwórz telefon i komputer
Sprawdź nagłówek, kadr, menu i główny przycisk w obu rozmiarach.
Opisz widoczny problem
Podaj AI ekran i zrzut, np. ucięty tekst albo zbyt dużo pustego miejsca.
Sprawdź poprawiony podgląd
Powtórz te same działania w obu szerokościach i na opublikowanej stronie.
Potem: otwórz zmienioną stronę na urządzeniach odbiorców.
Przykładowa rozmowa, bez sesji AI na żywo.
07 / Wybierz i sprawdź ponownie
Co potwierdzić przed publikacją?
Sprawdź edytowaną stronę na telefonie i komputerze: nagłówki, kadry, menu, przyciski oraz kontakt. Po publikacji powtórz te działania na publicznej wersji. Gdy coś różni się od podglądu, przekaż AI zrzut ekranu i poproś o naprawę konkretnego problemu.
OneDollarStock is implementing a project to prepare the platform for entry into the German market under the “Go Global” acceleration track of the “Unicorn Hub Startup Booster” programme, project no. FENG.02.28-IP.02-0013/23. The project is co-financed by the European Funds for Smart Economy 2021–2027 under the priority “Innovation-friendly environment”, Measure FENG.2.28 Startup Booster Poland.
Learn more about the project →
