Spis treści
Odtwórca projektów — w fazie rozwojuCo wychodzi z odtworzonego projektuJak z tego korzystaćInspiracja, nie kopiowanieDlaczego Rekreate to budujeNajczęściej zadawane pytaniaProjektanci i programiści front-end codziennie analizują interfejsy: mierzą odstępy na podstawie zrzutu ekranu, zgadują skalę typografii, odtwarzają komponenty, aby zobaczyć, jak działają. Odtworzenie projektu zamienia to w jeden krok — wrzuć zrzut ekranu lub URL i uzyskaj tokeny projektowe, podział komponentów oraz działający kod front-endowy.
To narzędzie jest w fazie rozwoju w Rekreate. Poniżej znajduje się dokładnie to, co będzie produkować, oraz co nasze istniejące narzędzia mogą dla Ciebie zrobić już teraz.
- Wejście: zrzut ekranu, ramka Figma lub URL. Wyjście: tokeny, komponenty, kod.
- Paleta kolorów, skala typografii, rytm odstępów, promienie i cienie wyodrębnione jako zmienne.
- Wyjście na poziomie komponentów — karta, nawigacja, tabela cenowa — zamiast jednego płaskiego bloku kodu.
- W fazie rozwoju. Narzędzia do obrazów w
/makesą już dostępne.
Odtwórca projektów — w fazie rozwoju
Podaj interfejs i uzyskaj system, który za nim stoi: paletę kolorów z nazwanymi tokenami, skalę typografii, rytm odstępów, promienie narożników i elewację, a następnie każdy komponent odtworzony w HTML i CSS z sensownymi nazwami klas i responsywnym zachowaniem.
Chodzi nie o klonowanie czyjegoś produktu, ale o odpowiedź na pytanie, które każdy projektant zadaje zrzutowi ekranu — jak to właściwie jest zbudowane? — w kilka sekund zamiast całego popołudnia.
To narzędzie nie jest jeszcze dostępne. Utwórz darmowe konto, a poinformujemy Cię w aplikacji, gdy tylko zostanie uruchomione.
Co możesz zrobić już dziś
Co już działa w Rekreate:
- Odtwórz zdjęcie — odtwórz wizualizację, makietę lub ilustrację w swoim własnym stylu.
- Odtwórz logo — czyste zasoby marki z przezroczystym tłem.
- Ideogram — grafiki w stylu interfejsu, gdzie tekst musi być czytelny.
Do kodu użyj dedykowanego narzędzia zrzut-ekranu-do-kodu; wróć tutaj, gdy odtwórca będzie dostępny.
Co wychodzi z odtworzonego projektu
| Warstwa | Planowany wynik |
|---|---|
| Kolor | Paleta z rolami — powierzchnia, tusz, stonowane, akcent, semantyczne — jako zmienne CSS, jasne i ciemne |
| Typografia | Rodziny fontów, używana skala, grubości, wysokości linii i odstępy między literami |
| Odstępy | Podstawowy rytm (4/8pt lub inny) plus szerokości kontenerów i odstępy między elementami |
| Komponenty | Przyciski, karty, nawigacja, formularze, tabele — każdy jako odizolowany HTML i CSS |
| Stany | Hover, focus, disabled i error tam, gdzie można je wywnioskować |
| Uwagi dotyczące dostępności | Ostrzeżenia o kontraście i brakujące stany focus oznaczone, a nie kopiowane po cichu |
Jak z tego korzystać
Wrzuć referencję
Zrzut ekranu produktu, który podziwiasz, ramkę Figma lub aktywny URL.
Wybierz zakres
Cały ekran lub jeden komponent, który chcesz zrozumieć — karta cenowa, pasek boczny, pusty stan.
Przejrzyj system
Najpierw tokeny: czy paleta jest odpowiednia, czy skala typografii pasuje, czy odstępy są na siatce? Popraw wszystko, co model zgadł źle.
Weź kod
Skopiuj komponenty do swojego projektu lub zachowaj je jako implementację referencyjną, podczas gdy Twój zespół buduje właściwą wersję.
Inspiracja, nie kopiowanie
Wzorce interfejsów to wspólne rzemiosło. Nikt nie posiada karty z tytułem, treścią i przyciskiem; branża zbliżyła się do tych wzorców, ponieważ działają.
Co jest własnością: wizualna tożsamość produktu — jego logo, styl ilustracji, niestandardowe fonty, obrazy i teksty — oraz wszelki kod zastrzeżony. Odtworzony projekt powinien nauczyć Cię mechaniki, a następnie zostać ubrany w Twoją własną markę.
Jeśli Twój ekran wygląda jak ekran konkurencji z innym logo, skopiowałeś ich tożsamość, a nie nauczyłeś się ich struktury. Użyj tokenów jako punktu wyjścia i dostosuj je do swojego systemu.
Dlaczego Rekreate to buduje
Cały nasz produkt opiera się na jednej idei: zacznij od czegoś, co już działa, a potem dostosuj to do siebie. Zaczęło się od viralowych filmów, przeszło do reklam, zdjęć i głosów, a projektowanie to ten sam ruch zastosowany do interfejsów.
To także uzupełnia rodzinę /make dla zespołów: odtwórz reklamę, odtwórz stronę docelową, odtwórz system projektowy za nią — wszystko w jednym miejscu, w języku, w którym pracujesz.
Śledź odtwórcę stron internetowych i odtwórcę aplikacji, jeśli chcesz sąsiednich narzędzi.
Najczęściej zadawane pytania
Czy AI może odtworzyć projekt UI ze zrzutu ekranu?
Tak — modele wizji mogą wyodrębnić paletę, skalę typografii i układ z obrazu oraz odtworzyć komponenty w kodzie. Odtwórca projektów Rekreate jest w fazie rozwoju; obecnie nasze dostępne narzędzia obejmują obrazy, loga i wideo.
Czy dostanę pliki Figma?
Planowany wynik to tokeny projektowe i kod front-endowy. Tokeny można łatwo zaimportować do większości narzędzi projektowych, ale narzędzie jest skierowane na uzyskanie działającego kodu.
Czy legalne jest odtworzenie czyjegoś UI?
Układ i wzorce interakcji nie są chronione w taki sposób, jak zasoby marki. Nie używaj ich logo, ilustracji, niestandardowych fontów, tekstów ani zastrzeżonego kodu — weź strukturę, dodaj swoją własną tożsamość.
Czy obsługuje tryb ciemny?
Tak, taki jest plan: tokeny są wyodrębniane dla każdego motywu, więc odtworzone komponenty działają zarówno w trybie jasnym, jak i ciemnym, zamiast być zakodowane na stałe.
Kiedy będzie premiera?
Brak publicznej daty. Załóż darmowe konto, a nowe narzędzia /make pojawią się w aplikacji, gdy zostaną udostępnione.
Czego używać w międzyczasie?
Rekreate odtwórca obrazów do wizualizacji i odtwórca loga do zasobów marki, plus dedykowane narzędzie zrzut-ekranu-do-kodu do kodu.
Stwórz swoje kolejne viralowe wideo z Rekreate
Znajdź sprawdzone wideo krótkiego formatu, odtwórz je ze swoim skryptem, awatarem i głosem, a sceny wygeneruj za pomocą Seedance, Kling i Veo w jednym miejscu.
Rozpocznij darmowy okres próbny →