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 / Trzy role
Co wnosi każdy plik?
DESIGN.md może opisywać styl; RECREATE.md wyjaśnia odtworzenie konkretnego projektu; HTML to rzeczywista strona do otwarcia i edycji. Sprawdzone projekty OneDollarStock zawierają HTML i RECREATE.md, bez dodatkowego DESIGN.md. Przy personalizacji zacznij od plików strony i własnego briefu.
Kontekst stylu
Typografia, kolor, odstępy i zasady komponentów; nie cała strona.
Instrukcja odtworzenia
Struktura, treści i działanie konkretnego wzorca.
Działający HTML
Interfejs do uruchomienia i edycji; usługi sprawdź osobno.
AI ChatPrzykładowy proces
Folder projektu strony
Ty
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.
02 / Dostęp do plików
Czy sama nazwa sprawi, że AI uwzględni plik?
Nie. Udostępnij plik narzędziu AI i wskaż jego nazwę w poleceniu. Poproś agenta o przeczytanie i wyjaśnienie roli przed edycją. Sama nazwa nie sprawi, że każdy interfejs AI automatycznie wczyta plik lub uwzględni treść.
01
Przekaż rzeczywiste materiały
Użyj obsługi plików lub projektu i nazwij pliki.
02
Poproś o sprawdzenie
Poproś o określenie roli, obecnego kodu i braków przed edycją.
AI ChatPrzykładowy proces
Sprawdzenie zmienionej strony
Ty
Porównaj zmienioną stronę z moim poleceniem. Sprawdź nagłówek, ścieżki zdjęć, menu i kontakt na komputerze i telefonie.
AI · przykładowa odpowiedź
Wypiszę różnice i sprawdzę to, co rzeczywiście wyświetla przeglądarka. Sam zapis pliku nie potwierdza efektu wizualnego.
Ty
Na telefonie nagłówek jest ucięty. Popraw to bez zmiany tekstu.
AI · przykładowa odpowiedź
Poprawię układ mobilny i ponownie sprawdzę tę samą szerokość telefonu. Potem możesz zaakceptować wynik.
Kroki do wykonania
Porównaj zmiany
Sprawdź swoje teksty, zdjęcia i zakres polecenia.
Otwórz podgląd
Sprawdź komputer i telefon; kliknij menu i kontakt.
Opisz problem
Powiedz agentowi, co jest źle, i zleć ponowne sprawdzenie poprawionego widoku.
Efekt: sprawdzona wersja gotowa do dalszej edycji lub publikacji.
Przykładowy przebieg pracy. Bez połączenia z AI na żywo.
03 / Zobacz zmianę
Na jakie wymagania odpowiada kod?
Możesz porównać brief z rzeczywistą stroną: teksty, kolory, strukturę i działanie przycisków. Przykład poniżej przypisuje sześć wymagań do ich realizacji w Clearstead. Zleć agentowi takie samo porównanie, gdy sprawdzasz wdrożenie swoich zmian.
Wymaganie
Autorska notatka stylu
RECREATE.md
index.html
Hierarchia wizualna
Role, nie dokładna strona
Opisane dla fikcyjnej referencji
Zaimplementowane bieżące źródło
Paleta
Role, nie dokładna strona
Opisane dla fikcyjnej referencji
Zaimplementowane bieżące źródło
Kolejność sekcji
Nie określa
Opisane dla fikcyjnej referencji
Zaimplementowane bieżące źródło
Fakty właściciela
Nie określa
Osobne dane właściciela lub usługi
Wymaga danych/konfiguracji; lokalna demo
Realny odbiór zapytania
Nie określa
Osobne dane właściciela lub usługi
Wymaga danych/konfiguracji; lokalna demo
Późniejsza edycja/publikacja
Nie określa
Osobne dane właściciela lub usługi
Wymaga danych/konfiguracji; lokalna demo
14-clearstead · oryginalna referencja
Oryginalne angielskie źródło. Porównanie dotyczy treści, nie jakości AI lub dostarczanego DESIGN.md.Otwórz pełny podgląd ↗
Jeden brief, trzy różne role plików
Autorski arkusz z fikcyjnym przykładem. Zastąp zatwierdzonymi danymi; lokalne kopiowanie/pobranie nie daje praw, akceptacji lub usługi.
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 / Wybierz według zadania
Jakie materiały pasują do zadania?
Do zmiany obecnej strony przekaż HTML i polecenia edycji. Do odtworzenia projektu daj RECREATE.md i potrzebne zasoby. Do zmiany stylu przekaż aktualny kod i zasady wyglądu. Agent może wyjaśnić, które materiały są potrzebne do Twojego zadania.
Zmień styl
Projekt + sprawdzone reguły stylu + konkretna zmiana.
Odtwórz wzorzec
Instrukcja + wzorzec; porównaj z nim wynik.
Dostosuj gotową stronę
HTML + instrukcja + fakty + jasne zachowaj/zmień.
AI ChatPrzykładowy proces
Dostosowanie istniejącej strony
Ty
Zmień nazwę firmy, nagłówek i opisy usług na przesłane teksty. Zachowaj układ i wymień tylko wskazane zdjęcia.
AI · przykładowa odpowiedź
Edytuję istniejący HTML, zachowam pozostałe sekcje i pokażę zmienione pliki.
Ty
Podłącz główny przycisk do mojej strony rezerwacji. Użyj przesłanego adresu.
AI · przykładowa odpowiedź
Zmieniam link przycisku, a potem sprawdzam go oraz nowy nagłówek w przeglądarce.
Kroki do wykonania
Przekaż treści
Podaj dokładne teksty, nazwy zdjęć i adresy linków.
Dostosuj szablon
Zleć edycję obecnych plików i zachowanie elementów, które Ci pasują.
Sprawdź podgląd
Przeczytaj nowe treści i kliknij właściwe linki na telefonie i komputerze.
Efekt: Twoja firma w wybranym projekcie strony.
Przykładowy przebieg pracy. Bez połączenia z AI na żywo.
05 / Rozstrzygnij konflikty
Co jeśli wzorzec wymaga dokładnego tekstu?
Powiedz AI wprost, że treści Twojej firmy mają pierwszeństwo przed przykładami. Wymień teksty do zastąpienia i wygląd do zachowania. Dzięki temu odtworzenie fikcyjnej firmy nie zostanie pomylone z przygotowaniem Twojej strony.
Zaznaczone lokalnie na tym urządzeniu; nic nie jest wysyłane.
AI ChatPrzykładowy proces
Cloudflare Pages · od folderu do strony online
Ty
Moja strona jest gotowa. Opublikuj ten folder na Cloudflare Pages przez Wrangler. Najpierw powiedz, jakiego dostępu do konta i zgody potrzebujesz.
AI · przykładowa odpowiedź
Sprawdzę pliki i ścieżki zdjęć. Zaloguj się do swojego Cloudflare i zatwierdź utworzenie lub aktualizację projektu Pages, zanim wyślę pliki.
Ty
Zgadzam się na publikację w nowym projekcie Pages. Nie zmieniaj obecnej domeny, dopóki nie sprawdzę podglądu.
AI · przykładowa odpowiedź
Po zatwierdzonym wysłaniu podam adres zwrócony przez Cloudflare i sprawdzę zdjęcia oraz linki. Domenę możemy podłączyć po akceptacji podglądu.
Kroki do wykonania
Przekaż projekt agentowi
Użyj agenta AI z dostępem do plików i terminala; trzymaj index.html oraz zasoby razem.
Zatwierdź wysłanie
Zaloguj się do hostingu i zatwierdź konkretny projekt. Agent może użyć obsługiwanego CLI lub API.
Sprawdź rzeczywisty adres
Otwórz zwrócony adres; własną domenę podłącz po sprawdzeniu strony.
Efekt: Twoja strona pod publicznym adresem, a następnie pod własną domeną.
Przykładowy przebieg pracy. Bez połączenia z AI na żywo.
06 / Pliki i zakres
Co wymaga człowieka lub usługi?
Ty przekazujesz fakty o firmie, materiały do publikacji i konta do kontaktu lub hostingu. AI może edytować pliki i pomóc podłączyć obsługiwane usługi; Ty zatwierdzasz dostęp i sprawdzasz stronę oraz odbiór zapytania.
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.
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 →
