Screenshot-to-Code: AI-конвертер дизайнов
Инструмент, который превращает скриншоты, макеты и Figma в чистый код на HTML, React, Vue и других фреймворках с помощью AI-моделей.
privacy
Эта заметка участвует в semantic memory.
AI Summary
- Короткий обзор сути: Screenshot-to-Code — это open-source инструмент, который с помощью AI-моделей (Gemini, GPT, Claude) конвертирует скриншоты, mockups, Figma и даже видеозаписи экрана в функциональный код на HTML+Tailwind, React+Tailwind, Vue+Tailwind, Bootstrap и Ionic+Tailwind. 🔑 Ключевые факты: поддерживает Gemini 3 Flash/Pro, GPT-5.5/5.4 Mini, Claude Opus 4.6/4.8, z-image-turbo; Gemini и Replicate рекомендованы для лучшего качества; требуется минимум один API-ключ (OpenAI/Anthropic/Gemini); Replicate обязателен для редактирования изображений и удаления фона; есть режим видео (screen recording → прототип). 📌 Важные детали: backend на FastAPI + Poetry, frontend на React/Vite; для локального запуска нужны API-ключи в .env; screenshot preview работает через Playwright + Chromium; Docker-вариант не поддерживает hot-reload; Ollama не рекомендуется из-за низкого качества; настройки можно менять в UI, но Replicate только через .env. 💡 Вывод и значение: для максимального качества использовать Gemini + Replicate; запускать через Docker для быстрого теста или локально для разработки; при проблемах с backend смотреть issue #3; для прокси OpenAI указывать OPENAI_BASE_URL с /v1.