Опенсорсний інструмент screenshot-to-code аналізує референсний скриншот і автоматично відновлює розташування елементів, відступи, кнопки, шрифти і кольори - все що бачить, те і кодує.
Якщо при вайбкодингу референс і результат постійно розходяться, можна кинути скриншот - отримати перший чернетковий варіант, а потім вже підганяти під свій проект. Якщо показати сценарій використання через запис екрана, інструмент вміє відтворювати навіть взаємодії та анімації.
В Codex або Claude Code достатньо передати скриншот разом з промптом. Приклад промпта, що залізно працює:
Використовуючи цей репозиторій, реалізуй доданий скриншот як повністю робочий екран фронтенду.
Відтвори розташування елементів, пропорції, відступи, шрифти, кольори і позиції зображень за скриншотом, але не додавай нічого від себе.
Після реалізації зроби скриншот результату, порівняй його з оригіналом і послідовно виправ усі помітні відмінності.
Розділи компоненти і стилі за їх ролями, а елементи що повторюються - винеси в структуру що перевикористовується.
Після завершення коротко поясни, як запустити проект і які відмінності від оригіналу ще залишились.
74k зірок на GitHub - без маркетингу, суто через сарафанне радіо розробників 🔥