Скриншот в код на ИИ бесплатно: опенсорсный конвертер и путь через DeepSeek Vision
Два способа превратить скриншот макета в рабочий код: поставить abi/screenshot-to-code под MIT-лицензией через Docker и один ключ модели — либо прикрепить картинку в DeepSeek и попросить собрать её одним HTML-файлом. 15 шагов, каждое утверждение сверено с репозиторием и api-docs.deepseek.com.
Коротко
- Софт бесплатный, токены — нет. abi/screenshot-to-code распространяется под MIT и не требует платы за запуск у себя, но нужен хотя бы один ключ модели — OpenAI, Anthropic или Gemini, — и вы платите этому провайдеру за токены.
- DeepSeek в списке его моделей нет. Дефолтный список в README — Gemini 3 Flash / 3.1 Pro, GPT-5.5 / 5.4 Mini и Claude Opus 4.6 / 4.8, а строка "deepseek" не встречается в репозитории ни разу.
- Зрячая модель DeepSeek — это deepseek-flash: в официальной таблице цен по строке Vision у flash стоит ✓, у deepseek-v4-pro — «Not supported». Картинку передают base64, публичной ссылкой или file_id из Files API.
- Оба пути приходят к одному: один HTML-файл, который открывается двойным кликом. По опубликованным тарифам Flash скриншот плюс несколько тысяч токенов разметки стоят заметно меньше цента.
Install Screenshot-to-Code Locally — Convert Screenshot to Functional Code
Канал:Fahd Mirza9:38
DeepSeek R1 Coding — Testing Screenshot to Code Conversion
Канал:United Top Tech3:06
abi/screenshot-to-code README — supported stacks, required keys, Docker
Документация:github.com/abi/screenshot-to-codeDocs
DeepSeek API Docs — Vision (base64, external URL, Files API)
Документация:api-docs.deepseek.comDocs
DeepSeek API Docs — Models & Pricing (the Vision row)
Документация:api-docs.deepseek.comDocs
Кадры взяты из двух чистых экраных записей (без веб-камеры и без жжёных субтитров); поддерживаемые стеки, обязательные ключи, команды Docker и лимиты DeepSeek на изображения сверены с README abi/screenshot-to-code, файлами репозитория и api-docs.deepseek.com.
Скриншоты подписаны каналами-авторами записи, каждый шаг даёт глубокую ссылку на точный таймкод. Обе записи сняты до текущих названий моделей DeepSeek, поэтому если на кадре старый ярлык, текст шага следует официальной документации.
Все 15 шагов: от скриншота до открывшейся страницы
Начать со скриншота
- 1
Снимите тот участок интерфейса, который хотите пересобрать
Подойдёт любая статичная картинка — в демо самого конвертера это страница YouTube-канала, а в пути DeepSeek ниже — макет формы входа весом 68 КБ, сохранённый как log.PNG. Скриншот лучше письменного ТЗ: отступы, цвета и иерархия уже решены, модели остаётся прочитать, а не выдумать. Обрезайте до нужного компонента — целый экран сжигает токены на рамку, которую вы всё равно удалите.
Точка отсчёта: карточка логина в PNG, ничего ещё не сконвертировано.Смотреть на 1:02 - 2
Откройте конвертер и посмотрите на четыре способа ввода
После локальной установки http://localhost:5173 даёт одно поле загрузки и три коротких пути: Record Screen (записать живое видео сайта), Enter URL и Capture (конвертер сам снимет страницу по ссылке) и Import from Code (вставить существующий HTML, чтобы доработать). В выпадающем Generating выбирается стек — HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap или Ionic + Tailwind. Никаких аккаунтов: приложение обращается к вашему провайдеру моделей напрямую.
Прихожая self-hosted версии: зона перетаскивания, запись экрана, съём по URL и импорт кода.Смотреть на 4:00
Установить бесплатный опенсорсный конвертер
- 3
Перед установкой проверьте систему
Приложение состоит из React/Vite-фронтенда и FastAPI-бэкенда, а путь через Docker требует рабочего Docker Engine. Fahd Mirza сначала смотрит cat /etc/*release — тут Ubuntu 22.04.4 LTS, — потому что дальше команды предполагают POSIX-оболочку и доступный docker compose. macOS и Windows подходят так же, лишь бы Docker Desktop был запущен.
Проверка на две секунды: Ubuntu 22.04.4 LTS, позади работает Docker Desktop.Смотреть на 2:12 - 4
Склонируйте репозиторий и положите один ключ в backend/.env
Выполните git clone https://github.com/abi/screenshot-to-code, зайдите в каталог и запишите ключ в файл .env, который читает стек Compose, — строка из README дословно: echo "OPENAI_API_KEY=sk-your-key" > .env. Для старта хватает одного; README признаёт OpenAI, Anthropic и Gemini, а с несколькими ключами приложение каждый прогон подбирает более сильную комбинацию моделей. DeepSeek в этом перечне нет, и почему переопределение OpenAI Base URL этого не меняет — см. вопрос 2.
Ключ-заполнитель прямо из README, записанный в файл, который бэкенд читает при старте.Смотреть на 2:55 - 5
Соберите и запустите оба контейнера одной командой
В корне репозитория docker compose up -d --build скачает базовые образы, поставит Poetry для бэкенда и пакеты yarn для фронтенда, после чего оставит оба сервиса в фоне. Без кэша закладывайте несколько минут: compose-файл публикует бэкенд на порту 7001, фронтенд на 5173. README предупреждает, что этот путь — для запуска, а не для разработки: правки файлов не вызывают пересборку.
Вся установка — одна команда; с -d она отвязывается, терминал можно закрыть.Смотреть на 3:25 - 6
Посмотрите, как собираются слои бэкенда и фронтенда
Лог — самая полезная часть, когда что-то падает: backend 2/7 RUN pip install "poetry==1.4.1" и frontend 4/5 RUN yarn install — те слои, которые ломаются за прокси или в закрытой сети. Если встало здесь, чинить почти всегда нужно DNS у Docker или зеркало npm, а не приложение. Когда последний слой закончен, localhost:5173 начинает отвечать.
Прошло 20 секунд сборки, оба образа уже прошли слои зависимостей.Смотреть на 3:45
Конвертировать, сохранить, дошлифовать
- 7
Перетащите скриншот внутрь
Бросьте файл на пунктирную рамку или кликните по ней, чтобы открыть выбор; картинка осядет в левой колонке как ORIGINAL SCREENSHOT и останется там ориентиром для всех последующих версий. Тёмная или светлая тема — настройка под шестерёнкой, а не разница в возможностях. В этом же диалоге можно вставить и ключи, не трогая .env: по заметке в README ключи отсюда живут только в браузере и перекрывают конфигурацию .env.
То же приложение в тёмной теме ждёт файл — зона перетаскивания и есть почти весь интерфейс.Смотреть на 4:45 - 8
Сгенерируйте и сравните варианты
На один прогон приложение запускает несколько моделей, чтобы вы выбирали результат, а не принимали первый попавшийся: Option 1 и Option 2 — вкладки над одним и тем же скриншотом, а их количество задаёт NUM_VARIANTS в backend/config.py — четыре для картинки и два для видео. Код прилетает в боковую панель по мере генерации, и если направление не то, есть кнопка Cancel. Каждый запуск сохраняется в Versions, так что эксперименты ничего не стоят.
Два варианта одного скриншота посреди стрима, ниже закреплено оригинальное изображение.Смотреть на 5:00 - 9
Три взгляда: Desktop, Mobile и Code
Над областью предпросмотра три переключателя — Desktop, Mobile и Code, — и для передачи дела важен Code: там лежит сырая разметка, которую можно скопировать. Reset выбрасывает запуск, Download выгружает, а под вкладками вариантов стоят Update (отправить новое указание), Regenerate (повторить то же) и Select and update (обвести рамкой то, что менять). Здесь screenshot-to-code перестаёт быть демо и становится циклом правок.
Пересобранная страница рядом с органами управления для дальнейшей работы над ней.Смотреть на 5:20 - 10
Сохраните разметку как обычный .html-файл
Скопируйте код из вкладки Code в файл — здесь это test.html в папке mycode, — и на этом весь «сборочный этап» заканчивается. На выходе самодостаточный HTML с классами Tailwind, так что между вами и страницей нет ни установки пакетов, ни dev-сервера. Если нужно встроить в настоящее дерево компонентов, вставьте в файл React или Vue и перенесите имена классов уже там.
Один файл, 3,1 КБ, открыт в Firefox через контекстное меню.Смотреть на 5:40 - 11
Откройте с диска и честно сравните с оригиналом
Загрузка файла прямо из файловой системы доказывает, что результат работает без всякого сервера. Теперь сравните его с миниатюрой ORIGINAL SCREENSHOT без снисхождения: вёрстка, типографическая иерархия и отступы обычно переносятся хорошо, а вот сторонние логотипы и фотографии — то, что аппроксимируется. Именно поэтому README так настойчиво советует ключ Gemini (на извлечении ассетов он переиспользует настоящие картинки со скриншота) и ключ Replicate (генерация изображений и вырезание фона). Недостающее добирается ещё одним указанием, а не переписыванием с нуля.
Сконвертированная страница запущена с локального диска — баннер и шапка канала пересобраны.Смотреть на 6:12 - 12
Дошлифовывайте обновляющим промптом, а не перегенерацией
Напишите правку в поле под вариантами — здесь «change the background color to deep blue» — и приложение выдаст новую версию вместо новой страницы, поэтому в Versions останутся обе: Create v1 и обновление как v2. Галочка «Include screenshot of current version?» отправляет вместе с указанием и текущий рендер — именно это не даёт правке уехать обратно в шаблонную вёрстку. Ради этого цикла установку и стоит затевать.
После одной команды правка лежит в v2, а v1 по-прежнему в одном клике.Смотреть на 6:45
Путь B: DeepSeek смотрит на картинку
- 13
Путь B: прикрепите скриншот в DeepSeek
Если ничего не хочется ставить, DeepSeek принимает картинку прямо в чате: скрепка добавляет log.PNG, поле ввода показывает вложение на 68,14 КБ, а указание умещается в одну фразу — «give me html and css code for this image in a single html file». Чип на этой записи подписан DeepThink (R1); подписи в селекторе меняются быстрее, чем туториалы, так что доверяйте механизму, а не надписи. На выходе — файл, который можно вставить и открыть.
Скриншот прикреплён в чате DeepSeek, ниже набрано требование одного HTML-файла.Смотреть на 1:22 - 14
Сначала прочитайте план, потом код
Панель размышления показывает, смотрела ли модель по-настоящему: она перечисляет заголовок «Login», подписи «User Name» и «Password», поля ввода и кнопку Submit, а затем выбирает flexbox с центрированием justify-content и align-items на высоте 100vh. Когда пересборка выходит кривой, смотреть надо сюда — модель, пропустившая подписи, вернёт форму без подписей. Разверните панель; если описание неверное, обрежьте скриншот заново и отправьте снова.
Десять секунд размышления: модель называет по имени каждый элемент, который собирается воспроизвести.Смотреть на 1:45 - 15
Гляньте предпросмотр и забирайте код
DeepSeek сам рендерит ответ в модальном предпросмотре — карточка входа с подписями над полями, двумя инпутами и синей кнопкой Submit на всю ширину, под ней приписка «AI-generated, for reference only». Это упрощение, а не копия: градиентные пятна и иконки полей из макета пропали. Скопируйте HTML, сохраните как index.html и откройте — ровно как в шагах 10 и 11. Скажем прямо: и чат DeepSeek, и его API принимают изображения, а чисто текстовые генераторы — включая наш собственный генератор артефактов на этом сайте — нет; там описывайте интерфейс словами, а не ждите, что он увидит ваш скриншот.
Пересобранная карточка в предпросмотре DeepSeek: достаточно близко, чтобы продолжить, достаточно упрощённо, чтобы проверить.Смотреть на 2:48