design-to-code — сайт из изображения дизайна
design-to-code
Скилл превращает скриншот, макет, кадр Figma или живую страницу в адаптивный сайт и сверяет результат с дизайном
- 140 ★ репозитория
- Последний коммит
Минимальный доступ
Почему такой уровень
- Скилл пишет и запускает код фронтенда в проекте, а сборка и зависимости ставятся на вашей машине
- Воспроизведение чужого дизайна и бренда может нарушать права владельца
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/design-to-codeОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл пишет и запускает код фронтенда в проекте, а сборка и зависимости ставятся на вашей машине
- Воспроизведение чужого дизайна и бренда может нарушать права владельца
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
design-to-code — скилл, с которым агент по изображению дизайна собирает рабочий адаптивный сайт. Источником может быть скриншот, макет, кадр Figma или живая страница. Агент считывает компоновку, отступы, цвета и шрифты прямо с пикселей, подбирает шрифты и собирает каждый раздел как семантический HTML и компоненты. Сайт делается адаптивным для размеров экрана, которых в дизайне не было. Затем агент снимает скриншоты собственной сборки, сравнивает их с дизайном и исправляет расхождения: цикл идет, пока результат не совпадет. В репозитории лежит шесть сайтов на Next.js, собранных этим скиллом из одних изображений, как доказательство. Скилл состоит из `SKILL.md` с основным процессом и справочников, которые агент открывает по необходимости: разбор референса, арт-дирекшн, оформление интерфейса, типографика и шрифты, анимация, проверка и оценки. Для обмена метаданными есть `agents/openai.yaml`. Автор ставит ставку на скилл, а сайты считает подтверждением.
Для кого. Фронтенд-разработчикам и дизайнерам, которым нужен быстрый переход от скриншота или макета к рабочей странице на Next.js с проверкой результата.
Подходит, если
- По скриншоту страницы надо собрать адаптивный сайт на Next.js с семантической разметкой
- Кадр Figma превращается в код, и скриншот сборки сверяют с макетом
- Шрифты из дизайна опознаются или подбираются близкие
- Размытый превью-скриншот низкого разрешения доводится до рабочей страницы
- Анимации и тонкости оформления из референса должны перейти в код по справочнику скилла
Не подходит, если
- Нужно скопировать чужой сайт один в один: права на дизайн и бренд остаются у владельца, их придется проверять самим
- Нужен бэкенд, база данных и авторизация: скилл строит интерфейс по картинке
- Нужен файл Figma с токенами и макеты для передачи: скилл работает по изображению
- Нужно распознать по картинке работу интерактивных состояний: статичное изображение их не показывает
Пример запроса к агенту
Собери по этому скриншоту адаптивную страницу на Next.js, сверь скриншот сборки с дизайном и исправь расхождения.Ограничения
Скилл строит интерфейс по изображению, поэтому состояния, которых на нем нет (наведение, ошибки формы, пустые экраны), агент достраивает сам и они могут отличаться от замысла дизайнера. Шрифты подбираются по виду, а точное совпадение с оригиналом не гарантируется.
Шесть примеров в репозитории показывают результат на конкретных брендах, а переносить чужой дизайн в продукт нужно только с правом на это. Проверка сверкой скриншотов ловит визуальные расхождения, но не доказывает доступность и производительность, их стоит проверять отдельно.
Как отключить. Удалите папку `design-to-code` из каталога скиллов агента, например `~/.claude/skills/` или `~/.codex/skills/`. Папку `websites/` из клонированного репозитория удалите вручную.
Частые вопросы
Как поставить design-to-code?
Выполните `npx skills add https://github.com/Atharvsinh-codez/skills --skill design-to-code`. Вручную папку `design-to-code` копируют в каталог скиллов агента: `~/.claude/skills/`, `~/.codex/skills/` или `~/.factory/skills/`.
Что можно подать на вход?
Скриншоты, макеты, кадры Figma и живые страницы. Агент берет раскладку, цвета и типографику из пикселей, а затем сверяет собственную сборку с изображением.
Какие справочники входят в скилл?
Семь файлов: разбор референса, арт-дирекшн, оформление интерфейса, шрифты, анимация, проверка и оценки. Агент открывает только нужный по ходу работы.
Какой фреймворк использует скилл?
Примеры в репозитории написаны на Next.js, но сам скилл генерирует «настоящий» фронтенд по дизайну, а выбор стека зависит от вашего проекта и просьбы.
Какие агенты поддерживаются?
Любые, что читают папки с `SKILL.md`: в таблице README указаны Factory Droid, Claude Code и Codex. Файл `agents/openai.yaml` содержит метаданные для агентов OpenAI.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл рисует макеты интерфейсов и лендингов и переносит их в HTML, в проект на React или в мини-приложение WeChat
Скилл /taste разбирает дизайн сайта по ссылке: токены, принципы с компромиссами и готовые правила для Cursor и Claude Code
Скилл превращает референсы интерфейсов в структурированный профиль дизайна в JSON и генерирует по нему новый интерфейс под ваш контент
Скилл для Codex: три разных визуальных концепта, ревью по скриншотам и чистка лишнего, чтобы интерфейс не выглядел шаблонно.
Скилл дизайна интерфейсов, презентаций и графики для кодинг-агентов: черновики на холсте через CLI superdesign
Скилл Claude Code и других агентов для сборки сайтов, где режиссура задается до кода: арт-дирекшн, генерация ассетов локальными CLI и проверка анти-слоп линтеро
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| design-to-code — сайт из изображения дизайна (эта карточка) | нет | 140 | ||
| Yueban Image to Code | нет | 129 | скилл перевода изображения в код, без цикла сверки скриншотов и справочников дизайна | |
| Figma To Code MCP — макет Figma в код | нет | API-ключ | 7 | MCP-сервер для кадров Figma, а этот скилл работает и по скриншотам и живым страницам |
Коротко о README
README показывает идею скилла и шесть сайтов, собранных из одних изображений, с попарным сравнением дизайна и результата. Затем описано содержимое репозитория, установка через CLI skills и вручную, таблица каталогов для разных агентов и порядок работы агента, включая самопроверку по скриншотам.