Навыки для агентов, которые помогают создавать автономные HTML-каркасы, интерактивные прототипы, планы и диаграммы.
Nutlope/napkins
Опенсорсный инструмент, который превращает вайрфрейм или скриншот в работающее приложение с помощью Kimi K2.5 и Together AI.
- Звёзды
- 1,483
- Форки
- 206
- Открытые issues
- 6
- Последний коммит
- 14 дней назад
Что это?
Napkins.dev — генератор приложений по вайрфреймам. Загрузите набросок или скриншот пользовательского интерфейса, и приложение с помощью LLM, умеющей анализировать изображения, сгенерирует код работающего приложения. Результат можно посмотреть в браузерной песочнице для кода.
Проект создан на Next.js (app router) и Tailwind. Для инференса он обращается к Kimi K2.5 через Together AI, запускает сгенерированный код в Sandpack, а загруженные изображения хранит в S3-бакете. Для локального запуска понадобятся API-ключ Together AI и учётные данные S3 — их нужно указать в файле .env.
В планах — улучшить мобильную версию, показывать результат работы модели компьютерного зрения в боковой панели, редактировать сгенерированное приложение с помощью дополнительного промпта, добавить выбор тем и историю версий, сохраняющуюся по мере редактирования приложения.
Ключевые возможности
- 01Преобразует вайрфрейм или скриншот в код приложения с помощью Kimi K2.5 через Together AI.
- 02Позволяет просматривать сгенерированные приложения в браузерной песочнице Sandpack.
- 03Хранит загруженные изображения в S3.
- 04Создан на Next.js app router и Tailwind CSS.
Сценарии использования
- Превратить быстрый набросок интерфейса от руки в запускаемый прототип.
- Посмотреть, как vision LLM преобразует скриншоты во фронтенд-код.
- Использовать проект как основу для Next.js-приложения на Tailwind, которое можно дорабатывать.
Быстрый старт
- 1
Клонируйте репозиторий
git clone https://github.com/Nutlope/napkins - 2
Создайте файл .env и добавьте ключ API Together AI
- 3
Создайте бакет S3 и добавьте его учетные данные в .env, используя значения из .env.example
- 4
Установите зависимости и запустите проект локально
npm install && npm run dev
Что важно знать
- Для генерации приложений требуется платный ключ API Together AI.
- Для хранения изображений необходимо настроить бакет S3.
Темы
Частые вопросы
- Что такое napkins?
- Опенсорсный инструмент, который превращает вайрфрейм или скриншот в работающее приложение с помощью Kimi K2.5 и Together AI. Napkins.dev — генератор приложений по вайрфреймам. Загрузите набросок или скриншот пользовательского интерфейса, и приложение с помощью LLM, умеющей анализировать изображения, сгенерирует код работающего приложения. Результат можно посмотреть в браузерной песочнице для кода.
- napkins можно использовать бесплатно? Какая у него лицензия?
- napkins распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
- napkins всё ещё поддерживается?
- Активно поддерживается. Последний коммит в napkins — 23 окт. 2026 г..
- Для чего можно использовать napkins?
- Превратить быстрый набросок интерфейса от руки в запускаемый прототип. Посмотреть, как vision LLM преобразует скриншоты во фронтенд-код. Использовать проект как основу для Next.js-приложения на Tailwind, которое можно дорабатывать.
- Как установить napkins?
- Клонируйте репозиторий: git clone https://github.com/Nutlope/napkins Создайте файл .env и добавьте ключ API Together AI Создайте бакет S3 и добавьте его учетные данные в .env, используя значения из .env.example Установите зависимости и запустите проект локально: npm install && npm run dev
- Где скачать napkins?
- Исходный код и инструкции по установке — на GitHub: https://github.com/Nutlope/napkins
Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.
Похожие проекты
Открытая альтернатива Claude Artifacts: генерирует небольшие React-приложения по одному запросу с помощью Llama 3.1 405B через Together AI.
Персональный набор CLI-инструментов на TypeScript для разработки с помощью ИИ: чат в терминале, заполнение плейсхолдеров в файлах, разовые правки кода и рефакторинг.
Преобразует скриншоты, макеты, дизайны Figma и записи экрана в код интерфейса на HTML, Tailwind, React, Vue и других технологиях с помощью AI-моделей.
Эволюционный агент для генерации кода с открытым исходным кодом: он итеративно изменяет и оценивает программы с помощью LLM, чтобы находить более эффективные алгоритмы, реализуя подход AlphaEvolve.
Мультиагентный помощник для исследований на базе LangGraph: формулирует гипотезы, анализирует и визуализирует данные, готовит отчёты.