Projekty demonstracyjne · zastąp fikcyjne treści własnymi.
AI ChatPrzykładowy proces
HTML + instrukcja projektu
Ty
Mam index.html i RECREATE.md. Chcę dostosować tę stronę, a nie odtwarzać fikcyjną firmę. Na których plikach będziesz pracować?
AI · przykładowa odpowiedź
Edytuję index.html, a RECREATE.md potraktuję jako opis wyglądu. Twoje teksty, zdjęcia i polecenia mają pierwszeństwo przed przykładową firmą.
Ty
Zachowaj układ, użyj mojej oferty i kontaktu oraz usuń fikcyjne opinie.
Kroki do wykonania
Obecna strona
HTML jest plikiem do edycji przy personalizacji.
Kontekst projektu
RECREATE.md opisuje oryginalny układ i działanie.
Twój brief
Przekaż informacje o firmie i oczekiwane zmiany.
Efekt: wybrany projekt staje się Twoją stroną przez edycję rzeczywistych plików.
Przykładowy przebieg pracy. Bez połączenia z AI na żywo.
01 / Rzeczywista instrukcja
Co zawiera szczegółowy prompt strony?
Opisuje stronę do zbudowania: sekcje, zasady wyglądu, treści i interakcje. Dostarczony RECREATE.md Forma Studio zawiera te szczegóły. Połącz go z HTML i własnymi poleceniami, żeby odtworzyć przykład albo dostosować obecny projekt.
Oryginalny fragment EN · sekcja 1
No framework, build step, module loader or external JavaScript dependency is needed.
Zobacz pliki źródłowe i szczegóły techniczne
Oryginalna specyfikacja wyjścia Forma Studio
11-forma-studio / RECREATE.md / §1 / line 5
Oryginalny angielski fragment własnej paczki, sprawdzony 2 października 2026. Pełny przewodnik i pliki należą do produktu; ten publiczny fragment nie jest całym promptem.
Build an English single-page fictional design studio in `index.html`, with inline CSS and plain inline JavaScript at the end of its body. No framework, build step, module loader or external JavaScript dependency is needed.
Forma Studio · oryginalna fikcyjna referencja
Oryginalny angielski frontend z 11-forma-studio. Zdalne media i lokalne kontrolki demonstracyjne pozostają bez zmian.Otwórz pełny podgląd ↗
02 / Wybierz projekt
Czy możesz sprawdzić opisany projekt?
Tak. Otwórz podgląd szablonu, żeby zobaczyć projekt przed wyborem, a potem sprawdź HTML i instrukcję. Forma Studio, Formwell, VYNE i Offset poniżej mają różne układy; wybierz ten, z którego chcesz zrobić swoją stronę.
Forma Studio
Redakcyjne portfolio identyfikacji i designu cyfrowego z realizacjami i podejściem.
HTML korzysta z Google Fonts i zdalnych adresów obrazów mimo trzech dołączonych plików WebP.
Brak automatycznego wariantu offline.
Zapytanie i podgląd e-maila to lokalne demonstracje (§1).
RECREATE.md:7; index.html:42, enquiry form handler near end of script
Natywne okno tworzy lokalny podgląd; sprawdzony handler nie wysyła danych do usługi.
Podgląd nie oznacza dostarczenia ani backendu.
AI ChatPrzykładowy proces
Odnalezienie zasad projektu w kodzie
Ty
Znajdź reguły tła i akcentu w tym HTML. Wymień je na kolory marki, zachowując układ.
AI · przykładowa odpowiedź
Znajdę zmienne CSS albo reguły stylu, wymienię wartości i sprawdzę czytelność tekstów oraz przycisków.
Ty
Pokaż zmienione pliki i podgląd w przeglądarce, zamiast tylko wklejać kod do czatu.
Kroki do wykonania
Znajdź regułę
Zleć agentowi odnalezienie właściwego CSS w HTML.
Zastosuj zmianę
Podaj oczekiwane kolory, rozmiar lub odstępy.
Obejrzyj stronę
Oceń widoczny efekt przed akceptacją plików.
Efekt: wskazujesz zmianę wyglądu, a AI edytuje kod.
Przykładowy przebieg pracy. Bez połączenia z AI na żywo.
03 / Prześledź reguły
Gdzie reguły znajdują się w kodzie?
Zasady wyglądu są zapisane w CSS strony, a interakcje w JavaScript. Np. papierowe tło i ceglasty akcent Forma Studio mają swoje zmienne kolorów. Zleć agentowi znalezienie i zmianę tych reguł; nie musisz szukać ich ręcznie.
Paleta · sekcja 2 i :root
Ciepły papier i ceglasty akcent odpowiadają --paper:#f2f0e9 i --accent:#c53c22.
Struktura · sekcja 2
Instrukcja rozdziela szerokie kontenery, kolumnę projektów i siatkę zakresu. Kod ma różne systemy wyrównania.
Działanie · sekcja 1
Zapytania i podglądy e-mail to lokalne demonstracje, nie wysyłka.
AI ChatPrzykładowy proces
HTML + instrukcja projektu
Ty
Mam index.html i RECREATE.md. Chcę dostosować tę stronę, a nie odtwarzać fikcyjną firmę. Na których plikach będziesz pracować?
AI · przykładowa odpowiedź
Edytuję index.html, a RECREATE.md potraktuję jako opis wyglądu. Twoje teksty, zdjęcia i polecenia mają pierwszeństwo przed przykładową firmą.
Ty
Zachowaj układ, użyj mojej oferty i kontaktu oraz usuń fikcyjne opinie.
Kroki do wykonania
Obecna strona
HTML jest plikiem do edycji przy personalizacji.
Kontekst projektu
RECREATE.md opisuje oryginalny układ i działanie.
Twój brief
Przekaż informacje o firmie i oczekiwane zmiany.
Efekt: wybrany projekt staje się Twoją stroną przez edycję rzeczywistych plików.
Przykładowy przebieg pracy. Bez połączenia z AI na żywo.
04 / Odtwórz lub dostosuj
AI ma odtworzyć przykład czy zrobić Twoją stronę?
Wybierz, od czego chcesz zacząć. Do odtworzenia przykładu przekaż RECREATE.md i potrzebne zasoby. Żeby zrobić własną stronę z obecnego projektu, daj agentowi HTML, teksty i zdjęcia oraz wprost zleć edycję tej strony i wymianę fikcyjnej firmy.
Zachowaj referencję albo dostosuj
Autorski arkusz z fikcyjnym przykładem. Zastąp zatwierdzonymi danymi; lokalne kopiowanie/pobranie nie daje praw, akceptacji lub usługi.
Przeczytaj index.html, RECREATE.md i zasoby w tym folderze. Zanim edytujesz, pokaż, gdzie są nagłówek, zdjęcia i linki kontaktowe.
AI · przykładowa odpowiedź
Sprawdzę pliki i wypiszę sekcje, ścieżki zdjęć oraz linki. Wskażę też formularze, które tylko demonstrują działanie.
Ty
Pracuj na istniejącym HTML. Teksty mojej firmy i zdjęcia są w folderze materials.
AI · przykładowa odpowiedź
Przypiszę materiały do istniejących sekcji i zapytam o brakujące treści, zamiast je wymyślać.
Kroki do wykonania
Otwórz folder
Rozpakuj projekt i udostępnij go agentowi.
Poznaj stronę
Przeczytaj HTML i instrukcję przed wymianą treści.
Dodaj własne materiały
Przekaż własne teksty, zdjęcia i prawdziwy kontakt.
Efekt: agent pracuje na rzeczywistych plikach Twojej strony.
Przykładowy przebieg pracy. Bez połączenia z AI na żywo.
05 / Pliki i zakres
Czy dostajesz tylko tekst prompta?
Nie. Pakiet Forma Studio zawiera index.html, RECREATE.md i trzy WebP. Zewnętrzne zdjęcia i fonty wymagają sieci.
Pliki strony + instrukcje projektu
Kod i instrukcja
Sprawdzone przykłady zawierają index.html i RECREATE.md. Dodatkowe pliki zależą od produktu; część zdjęć lub fontów jest zewnętrzna.
Twoja osobna konfiguracja
Używaj własnego narzędzia edycji z dostępem do plików. AI, domena, hosting i usługi operacyjne są osobne.
06 / Zobacz zmianę
Co może zmienić osobne polecenie?
Możesz zlecić zmianę nazwy firmy, tekstów, kolorów, zdjęć lub układu sekcji. Przygotowany przykład Clearstead poniżej zmienia nazwę, akcent, nagłówek i wprowadzenie w tym samym źródle. Pozostałe treści przykładowe i lokalne działanie formularza pozostają bez zmian.
Zobacz pliki źródłowe i szczegóły techniczne
Dokładna zmiana i zachowany zakres
14-clearstead / index.html · actual diff: LP43-bounded-edit.diff
Metoda: bezpośrednia edycja źródła. Zachowano skrypty, kolejność i media. Nie twierdzimy, że wykonano AI, publikację lub dostarczenie.
Clearstead → WorkshopDesk
--teal:#215e64 → --teal:#6d4382
Hero → Give your next workshop a clear plan.
#features introduction → fictional workshop planning; other sections unfinished.
Przed · oryginalny Clearstead
Przygotowana edycja źródła, nie rozmowa z AI na żywo ani gotowa strona firmy.Otwórz pełny podgląd ↗
Po · ograniczona edycja WorkshopDesk
Przygotowana edycja źródła, nie rozmowa z AI na żywo ani gotowa strona firmy.Otwórz pełny podgląd ↗
AI ChatPrzykładowy proces
HTML + instrukcja projektu
Ty
Mam index.html i RECREATE.md. Chcę dostosować tę stronę, a nie odtwarzać fikcyjną firmę. Na których plikach będziesz pracować?
AI · przykładowa odpowiedź
Edytuję index.html, a RECREATE.md potraktuję jako opis wyglądu. Twoje teksty, zdjęcia i polecenia mają pierwszeństwo przed przykładową firmą.
Ty
Zachowaj układ, użyj mojej oferty i kontaktu oraz usuń fikcyjne opinie.
Kroki do wykonania
Obecna strona
HTML jest plikiem do edycji przy personalizacji.
Kontekst projektu
RECREATE.md opisuje oryginalny układ i działanie.
Twój brief
Przekaż informacje o firmie i oczekiwane zmiany.
Efekt: wybrany projekt staje się Twoją stroną przez edycję rzeczywistych plików.
Przykładowy przebieg pracy. Bez połączenia z AI na żywo.
07 / Wybierz materiał
Czy wystarczy krótki prompt, zrzut lub opis stylu?
Krótki prompt może opisać zmianę, ale nie zawiera plików strony. Zrzut pokazuje wygląd, lecz nie działający kod. Do edycji wybranego szablonu przekaż agentowi HTML i instrukcję, a krótką wiadomością opisz oczekiwane zmiany.
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 →
