Projekty demonstracyjne · zastąp fikcyjne treści własnymi.
01 / Wybierz projekt
Który kierunek pasuje do przekazu?
Forma Studio daje miejsce projektom. Clearstead wykorzystuje ilustracje panelu, Velora ciemny układ narzędzia, Formwell jasne studio. Wybieraj według treści, nie obietnic konwersji.
Forma Studio
Redakcyjne portfolio identyfikacji i designu cyfrowego z realizacjami i podejściem.
Ciemne powierzchnie, jasny akcent i nagłówek/media produktu.
Prezentacja nie dostarcza kont ani integracji.
Forma Studio
Angielskie źródło editorial. Sprawdzono: papier/ciemny/ceglasty; kontener 1440px i kolumna projektów 896px.Otwórz pełny podgląd ↗
Clearstead · 14-clearstead
Źródło produktu. Sprawdzono: --teal:#215e64 i kompozycję hero/mediów. Interfejs finansowy jest przykładowy.Otwórz pełny podgląd ↗
Velora
Marketing produktu developerskiego. Sprawdzono tło #070d1b i akcent #75ebcf. Bez silnika kont/integracji.Otwórz pełny podgląd ↗
AI ChatPrzykładowy proces
Dopasowanie hierarchii strony
Ty
Główny przekaz ginie. Wyróżnij nagłówek hero mocniej od etykiet, skróć wprowadzenie do mojego tekstu i sprawdź łamanie na telefonie.
AI · przykładowa odpowiedź
Poprawię rozmiary nagłówków i kolumnę tekstu, zachowam teksty oraz linki, a potem porównam te same szerokości strony.
Ty
Pokaż przed i po. Zachowaj zmianę, jeśli przekaz jest czytelniejszy na moim telefonie.
Kroki do wykonania
Nazwij widoczny problem
Wskaż nagłówek, kolumnę lub odstęp wymagający poprawy.
Zleć konkretną poprawkę
Określ oczekiwaną hierarchię i elementy do zachowania.
Porównaj widoki
Sprawdź przed i po przy tych samych rozmiarach telefonu i komputera.
Efekt: główny przekaz jest łatwiejszy do znalezienia i przeczytania.
Przykładowy przebieg pracy. Bez połączenia z AI na żywo.
02 / Typografia i hierarchia
Co powinno być duże, a co spokojniejsze?
Główne przesłanie powinno być wyraźniejsze od opisów i podpisów. W Forma Studio duże nagłówki wprowadzają stronę, a mniejsze etykiety opisują prace. Zleć AI dopasowanie tej hierarchii do Twoich tekstów i kontrolę długich nagłówków na telefonie.
Krótki oryginalny tytuł
Rzeczywista zmiana samego tytułu; układ i .word zachowano. Przykład długości, nie gwarancja tłumaczenia lub responsywności.Otwórz pełny podgląd ↗
Długi niemiecki tytuł testowy
Rzeczywista zmiana samego tytułu; układ i .word zachowano. Przykład długości, nie gwarancja tłumaczenia lub responsywności.Otwórz pełny podgląd ↗
03 / Zobacz zmianę
Jak odstępy zmieniają czytanie?
Przykład Formwell zmienia odstępy i szerokość tytułu. Porównaj łamanie i rytm. Przestrzeń podkreśla mniej elementów, gęstszy interfejs grupuje więcej informacji.
›_ Przykład edycji z AIFormwell
Ty
Zwiększ odstępy w Formwell i ogranicz szerokość głównego nagłówka. Zachowaj treści i linki.
AI · przykładowa odpowiedź
Przygotowany przykład pokazuje odstępy. Porównaj rzeczywisty wynik na obsługiwanych ekranach.
Przygotowana rozmowa i wersje projektu. Bez połączenia z AI na żywo.
AI ChatPrzykładowy proces
Wykorzystanie własnych materiałów marki
Ty
Wymień przykładowe zdjęcia na moje pliki w materials. Użyj mojego logo i fontów, do których mam licencję.
AI · przykładowa odpowiedź
Zmieniam odwołania do plików i opisy obrazów, potem sprawdzam komputer i telefon. Wskaż zdjęcie dla każdego projektu, jeśli nazwy nie są jednoznaczne.
Ty
Użyj tych trzech zdjęć na kartach portfolio i usuń nieużywane przykładowe logotypy klientów.
Kroki do wykonania
Przekaż dozwolone materiały
Podaj własne zdjęcia albo zasoby z licencją do Twojej strony.
Przypisz zdjęcia
Powiedz agentowi, które zdjęcie pasuje do sekcji lub projektu.
Sprawdź kadry i ładowanie
Sprawdź rzeczywiste zdjęcia na telefonie i komputerze.
Efekt: strona korzysta z Twoich zatwierdzonych zdjęć i identyfikacji.
Przykładowy przebieg pracy. Bez połączenia z AI na żywo.
04 / Kolor i media
Które decyzje wymagają zdjęć lub fontów z prawami?
Użyj własnych zdjęć albo materiałów z licencją pozwalającą na publikację na stronie. Zrzut referencji nie daje praw do zdjęć, logo lub fontów. Wskaż agentowi swoje pliki i zleć wymianę przykładowych zasobów, których nie możesz użyć.
Zaznaczone lokalnie na tym urządzeniu; nic nie jest wysyłane.
AI ChatPrzykładowy proces
Zmiana projektu własnymi słowami
Ty
Użyj kolorów marki i mojego logo. Popraw czytelność głównego nagłówka na telefonie i dodaj moje zdjęcia projektów. Zachowaj sekcje oraz linki.
AI · przykładowa odpowiedź
Zmieniam style i zdjęcia w obecnym HTML, a potem sprawdzam łamanie nagłówków i kadry na telefonie oraz komputerze.
Ty
Logo jest za małe. Powiększ je, ale zachowaj miejsce na menu.
AI · przykładowa odpowiedź
Poprawię rozmiar i ponownie sprawdzę odstępy menu. W podglądzie ocenisz, czy wygląd Ci odpowiada.
Kroki do wykonania
Nazwij zmianę
Opisz oczekiwany kolor, element, zdjęcie lub układ.
Przekaż materiały
Podaj logo, kolory i zdjęcia; AI edytuje pliki szablonu.
Oceń efekt
Sprawdź stronę i poproś o konkretne poprawki.
Efekt: projekt dopasowany do marki bez ręcznej edycji CSS.
Przykładowy przebieg pracy. Bez połączenia z AI na żywo.
05 / Opisz kierunek
Jak zamienić preferencję w jasne polecenie?
Opisz zmianę, którą chcesz zobaczyć: cieplejszą paletę, większe zdjęcia prac lub mniej tekstu we wstępie. Nazwij szablon i przekaż treści. Np. zachowaj układ Formwell, użyj moich zdjęć portfolio i skróć opisy usług do tekstów poniżej.
01
Przykładowy brief
Zachowaj spokojny wstęp Formwell i nacisk na projekty. Użyj moich realizacji, ciepłej palety i krótszych usług. Usuń fikcyjnych klientów.
Mój kierunek wizualny oparty na źródle
Autorski arkusz z fikcyjnym przykładem. Zastąp zatwierdzonymi danymi; lokalne kopiowanie/pobranie nie daje praw, akceptacji lub usługi.
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.
06 / Pliki i zakres
Czy sprawdzisz więcej niż obrazek?
Tak. Szablon daje edytowalny HTML i instrukcję: otworzysz stronę, klikniesz elementy i zlecisz AI zmiany. Sam zrzut nie pokazuje tych zachowań i nie dostarcza plików do edycji. Usługi online nadal wymagają osobnej konfiguracji.
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.
07 / Wybierz kolejny krok
Sprawdzić projekt czy wybrać inny materiał?
Wybierz pasującą strukturę. Dla stylu porównaj role materiałów. Przy częstej edycji CMS najpierw ustal system.
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 →
