Опенсорсний інструмент для перетворення скріншотів в код
Новий опенсорсний інструмент на GitHub дозволяє перетворювати скріншоти інтерфейсів у код, спрощуючи процес розробки. ШІ автоматично відновлює елементи інтерфейсу, що значно пришвидшує роботу.
Огляд інструменту
Опенсорсний інструмент, який перетворює інтерфейс зі скриншота в код, вже набрав понад 74 тисячі зірок на GitHub.
Як це працює
Штучний інтелект аналізує референсний скриншот і автоматично відновлює в коді розташування елементів, відступи, кнопки та інші деталі інтерфейсу. Це може бути особливо корисно, якщо при вайбкодингу референс і результат постійно розходяться. Інструмент дозволяє швидко отримати перший варіант, а потім підлаштувати його під свій проект.
Сценарій використання
Якщо показати сценарій використання через запис екрану, інструмент може відтворювати навіть взаємодії та анімації.
У Codex або Claude Code достатньо передати скриншот разом з промптом. Наприклад:
Використовуючи цей репозиторій, реалізуй приклад скриншота як повністю робочий екран фронтенду.
Відтворюй розташування елементів, пропорції, відступи, шрифти, кольори та позиції зображень за скриншотом, але не додавай нічого від себе.
Після реалізації зроби скриншот результату, порівняй його з оригіналом і послідовно виправ усі помітні відмінності.
Розділи компоненти та стилі за їх ролями, а повторювані елементи інтерфейсу винеси в переиспользувану структуру.
Після завершення коротко поясни, як запустити проект і які відмінності від оригіналу ще залишилися.
Додаткова інформація
Чому це важливо
АналітикаЦей інструмент значно спрощує процес розробки, дозволяючи швидко перетворювати дизайни в код. Це може зекономити час розробникам та підвищити ефективність роботи.
Обговорити новину у спільноті
Діліться своїм досвідом та думками з ШІ-розробниками
Пов'язані матеріали екосистеми
Практичні гайди, термінологія та агентські скіли
AGENTS.md у репозиторіях Ghostty та Turborepo змушують ШІ-агентів «доносити» на користувачів
Приклади файлів AGENTS.md показують, як інструкції в репозиторіях можуть змушувати ШІ-агентів додавати до PR принизливі нотатки про розробника.
DeepSeek представила Creator Mode: харнес можна переписувати під себе
Open-source харнес DeepSeek отримав Creator Mode: ШІ-агент сам пише плагіни за описом і вбудовує їх в інтерфейс.
Jev та System One AI: повний практичний гайд по моделі рішень від TypeSafe
Глибокий інженерний розбір флагманської моделі Jev: архітектура System One проти LLM, примітиви Choice/Score/Noul, паралелізм запитів, математика впевненості, відео-кейси, код та огляд локальних open-weight альтернатив (Laya, GLiNER2.5, CLM-8B).
10 GitHub-репозиторіїв, які допоможуть стати AI-інженером за 90 днів
Стати AI-інженером сьогодні — це не лише про моделі та промпти. Більша частина реальної роботи будується навколо агентів, RAG-систем, оркестрації (orchestration), векторних баз даних (vector databases) та AI-інфраструктури.