**74k зірок: перетворює скриншот інтерфейсу на робочий код**

Опенсорсний інструмент [screenshot-to-code](https://github.com/abi/screenshot-to-code) аналізує референсний скриншот і автоматично відновлює розташування елементів, відступи, кнопки, шрифти і кольори - все що бачить, те і кодує.

Якщо при вайбкодингу референс і результат постійно розходяться, можна кинути скриншот - отримати перший чернетковий варіант, а потім вже підганяти під свій проект. Якщо показати сценарій використання через запис екрана, інструмент вміє відтворювати навіть взаємодії та анімації.

В Codex або Claude Code достатньо передати скриншот разом з промптом. Приклад промпта, що залізно працює:

Використовуючи цей репозиторій, реалізуй доданий скриншот як повністю робочий екран фронтенду.

Відтвори розташування елементів, пропорції, відступи, шрифти, кольори і позиції зображень за скриншотом, але не додавай нічого від себе.

Після реалізації зроби скриншот результату, порівняй його з оригіналом і послідовно виправ усі помітні відмінності.

Розділи компоненти і стилі за їх ролями, а елементи що повторюються - винеси в структуру що перевикористовується.

Після завершення коротко поясни, як запустити проект і які відмінності від оригіналу ще залишились.

74k зірок на GitHub - без маркетингу, суто через сарафанне радіо розробників