Repolode
Предложить
abi

abi/screenshot-to-code

Преобразует скриншоты, макеты, дизайны Figma и записи экрана в код интерфейса на HTML, Tailwind, React, Vue и других технологиях с помощью AI-моделей.

Открыть на GitHubСайт
Звёзды
80,547
Форки
9,842
Открытые issues
148
Последний коммит
11 дней назад

Что это?

screenshot-to-code преобразует визуальные материалы — например, скриншот, макет, дизайн Figma или запись экрана — в готовый код интерфейса. Можно выбрать целевой стек: HTML с Tailwind или CSS, React с Tailwind, Vue с Tailwind, Bootstrap либо Ionic с Tailwind. Инструмент сгенерирует код, воспроизводящий исходную компоновку.

Для генерации используются размещённые в облаке AI-модели OpenAI, Anthropic, Google Gemini и Replicate. Если настроен Gemini, инструмент может извлечь из скриншота настоящие логотипы и изображения и использовать их в результате. Записи экрана можно преобразовать в работающий прототип показанного сайта.

В проекте используются React/Vite во frontend и FastAPI в backend; запускать его локально можно с помощью Docker Compose. Также доступна hosted-версия. Для локального запуска понадобятся собственные API-ключи провайдеров моделей.

Ключевые возможности

  • 01Преобразует скриншоты и дизайны Figma в код на HTML, React, Vue или Bootstrap
  • 02Поддерживает Tailwind, обычный CSS и Ionic
  • 03Создаёт прототипы сайтов по записям экрана
  • 04Извлекает настоящие логотипы и изображения из скриншотов, если настроен Gemini
  • 05Позволяет выбирать модели OpenAI, Anthropic и Gemini

Сценарии использования

  • Превратить макет дизайна в основу для страницы интерфейса
  • Воссоздать компоновку существующего сайта по скриншоту
  • Создать прототип интерфейса по записи экрана существующего приложения

Быстрый старт

  1. 1

    Настройте бэкенд с помощью Poetry и установите зависимости

    cd backend && poetry install
  2. 2

    Установите браузер Chromium для инструмента предварительного просмотра снимков экрана

    poetry run playwright install chromium
  3. 3

    Запустите сервер бэкенда на порту 7001

    poetry run uvicorn main:app --reload --port 7001
  4. 4

    Установите зависимости фронтенда и запустите сервер разработки, затем откройте http://localhost:5173

    cd frontend && pnpm install && pnpm dev

Что важно знать

  • Для локального запуска нужен как минимум один ключ API модели. Для доступа ко всем функциям настоятельно рекомендуется Replicate.
  • Настройка включает и бэкенд на FastAPI, и фронтенд на React, поэтому самостоятельное размещение потребует некоторых усилий.
  • Модели с открытым исходным кодом в Ollama не рекомендуются из-за низкого качества результатов.

Темы

#ai#code-generation#screenshot-to-code#frontend#react#vue#tailwind#llm

Частые вопросы

Что такое screenshot-to-code?
Преобразует скриншоты, макеты, дизайны Figma и записи экрана в код интерфейса на HTML, Tailwind, React, Vue и других технологиях с помощью AI-моделей. screenshot-to-code преобразует визуальные материалы — например, скриншот, макет, дизайн Figma или запись экрана — в готовый код интерфейса. Можно выбрать целевой стек: HTML с Tailwind или CSS, React с Tailwind, Vue с Tailwind, Bootstrap либо Ionic с Tailwind. Инструмент сгенерирует код, воспроизводящий исходную компоновку.
screenshot-to-code можно использовать бесплатно? Какая у него лицензия?
screenshot-to-code распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
screenshot-to-code всё ещё поддерживается?
Активно поддерживается. Последний коммит в screenshot-to-code — 9 окт. 2026 г..
Для чего можно использовать screenshot-to-code?
Превратить макет дизайна в основу для страницы интерфейса Воссоздать компоновку существующего сайта по скриншоту Создать прототип интерфейса по записи экрана существующего приложения
Как установить screenshot-to-code?
Настройте бэкенд с помощью Poetry и установите зависимости: cd backend && poetry install Установите браузер Chromium для инструмента предварительного просмотра снимков экрана: poetry run playwright install chromium Запустите сервер бэкенда на порту 7001: poetry run uvicorn main:app --reload --port 7001 Установите зависимости фронтенда и запустите сервер разработки, затем откройте http://localhost:5173: cd frontend && pnpm install && pnpm dev
Где скачать screenshot-to-code?
Исходный код и инструкции по установке — на GitHub: https://github.com/abi/screenshot-to-code

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты

dyad-sh / dyad

Локальный конструктор приложений на базе AI с открытым исходным кодом: работает на вашем компьютере и позволяет использовать собственные API-ключи — альтернатива Lovable, v0 и Bolt.

ИИ и машинное обучение#ai-app-builder#llm#code-generation
22 тыс.2,9 тыс.TypeScriptOtherОбновлён 14 часов назад

algorithmicsuperintelligence / openevolve

Эволюционный агент для генерации кода с открытым исходным кодом: он итеративно изменяет и оценивает программы с помощью LLM, чтобы находить более эффективные алгоритмы, реализуя подход AlphaEvolve.

ИИ и машинное обучение#ai#llm#evolutionary-algorithms
7,6 тыс.1,2 тыс.PythonApache-2.0Обновлён 15 часов назад