screenshot-to-code
Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.
How to use
Przygotuj zrzut ekranu interfejsu, który chcesz skonwertować na kod — może to być screenshot strony internetowej, aplikacji mobilnej lub projektu z narzędzia do projektowania.
Udostępnij zrzut ekran skillowi i wskaż preferowany framework (React, Vue, HTML/CSS lub Next.js). Jeśli nie podasz wyboru, skill domyślnie użyje React z Tailwind CSS dla nowoczesnych projektów lub czystego HTML/CSS dla prostszych stron.
Skill przeanalizuje obraz i zidentyfikuje strukturę layoutu (grid, flexbox), komponenty (przyciski, pola wejścia, karty, nawigacja), kolory, czcionki, odstępy i cienie.
Otrzymasz kompletny, działający kod z semantycznym HTML, nowoczesnym CSS i hierarchią komponentów. Kod będzie responsywny i będzie dokładnie odzwierciedlać kolory oraz proporcje z zrzutu ekranu.
Sprawdź wygenerowany kod — zawiera on atrybuty dostępności (alt text, ARIA labels) i jest gotowy do bezpośredniego użycia w projekcie.
Jeśli potrzebujesz zmian, poproś skill o dostosowanie konkretnych elementów — kolorów, rozmiarów, responsywności lub struktury komponentów.