Narzędzie open-source zamieniające zrzuty ekranu na kod

Przegląd narzędzia

Otwartoźródłowe narzędzie do konwersji zrzutów ekranu interfejsu na kod zdobyło już ponad 74 tysiące gwiazdek na platformie GitHub.

Zasada działania

Sztuczna inteligencja analizuje referencyjny zrzut ekranu i automatycznie odtwarza układ elementów, marginesy, przyciski oraz inne detale interfejsu w formie kodu. Rozwiązanie to jest szczególnie przydatne podczas tzw. "vibe coding", gdy oczekiwany efekt często różni się od rzeczywistego wyniku. Narzędzie pozwala szybko wygenerować pierwszy szkic, który można następnie dostosować do specyfiki projektu.

Scenariusz zastosowania

Jeśli prześlesz nagranie ekranu prezentujące przypadek użycia, narzędzie potrafi nawet odwzorować interakcje i animacje.

W środowiskach takich jak Codex czy Claude Code wystarczy dostarczyć zrzut ekranu wraz z odpowiednim promptem. Przykład:

Using this repository, implement the attached screenshot as a fully functional frontend screen.

Reproduce the layout of elements, proportions, margins, fonts, colors, and image positions according to the screenshot, but do not add anything of your own.

After implementation, take a screenshot of the result, compare it with the original, and sequentially correct all noticeable differences.

Separate components and styles by their roles, and extract repeating interface elements into a reusable structure.

After completion, briefly explain how to run the project and what differences from the original still remain.

Dodatkowe informacje

Repozytorium GitHub