Бесплатный генератор стилевых гайдов для Next.js: как обойти платный Design API через Jina Reader и Vercel AI SDK
Команда open-designmd выкатила форк сервиса designmd.supply, в котором проприетарный Context.dev API заменён на связку бесплатных инструментов — Jina Reader, Microlink и любая LLM через OpenRouter или Ollama. Для бизнеса это значит простую вещь: генерировать стилевые гайды для AI-агентов теперь можно без подписки, локально, на своём железе. Для команд, которые гоняют Next.js-проекты через Cursor, Claude Code и подобные инструменты, это снимает зависимость от внешнего платного контура.
Что вообще случилось и зачем это нужно
Если коротко — designmd.supply решает узкую, но болезненную задачу. Когда вы просите AI-агента «сделай страницу в стиле нашего основного сайта», агент честно лезет в HTML. И тонет. React-приложение на проде — это десятки тысяч токенов разметки, где 90% — пустые обёртки, классы Tailwind в три ряда и закрывающие теги. На полезный сигнал — типографику, палитру, отступы, ритм — остаётся процентов десять.
Идея DESIGN.md в том, чтобы один раз пройтись по сайту, вытащить из него систему: цвета, шрифты, размеры, тени, скругления, паттерны компонентов. И сложить это в один компактный Markdown-файл, который агент проглатывает за пару тысяч токенов. Дальше он сам генерирует страницы и блоки в нужной стилистике, не дёргая исходный сайт.
Изначально сервис собирал этот файл через Context.dev API — платный эндпоинт, который делал тяжёлую работу: рендерил страницу, чистил DOM, выдавал структурированный JSON. В конце весны 2026-го бесплатный тариф там закрыли, и куча мелких пользователей оказалась перед выбором — платить или искать обход. Открытый форк выбрал второе.
Как устроен пайплайн в форке
Архитектурно всё разложено на три независимых блока, и каждый можно менять, не трогая соседей.
Парсинг HTML в Markdown. Вместо Context.dev — Jina Reader. Это публичный эндпоинт, который принимает URL и возвращает чистый Markdown: без скриптов, без шумных обёрток, с сохранением структуры заголовков и ссылок. Запрос — обычный GET с префиксом перед целевым адресом. На стороне Next.js это выглядит как одна функция fetch, и всё. Никаких headless-браузеров, никакого Playwright в Docker, никаких квот.
Скриншоты для визуального контекста. Microlink даёт API для снимков страницы. LLM в современных мультимодальных версиях умеют смотреть на картинку и описывать палитру, типографику и общий вайб куда точнее, чем по голому тексту. Скриншот идёт во второй промпт — как опорный визуал, по которому модель проверяет свои же выводы из Markdown.
Сама LLM. Здесь самое интересное. Вместо хардкода на одного провайдера команда воткнула Vercel AI SDK с адаптерами под OpenRouter и Ollama. То есть локально можно крутить Llama 3.3 или Qwen на своей машине, а если нужно качество — переключаться на Claude или GPT через единый интерфейс. Код приложения при этом не меняется ни на строку — только переменная окружения.
Подводные камни, которые всплыли по дороге
Первое, что ловится сразу — Jina Reader иногда отдаёт Markdown с битой кодировкой, если на исходной странице кривой meta charset. Лечится принудительным указанием UTF-8 в заголовках запроса и пост-обработкой через простой регэксп, который выкидывает мусорные символы вне допустимого диапазона.
Второе — Microlink на бесплатном тарифе режет 50 запросов в день с одного IP. Для разработки хватает, для прод-использования в команде на десяток человек — уже впритык. Авторы форка прикрутили локальный кэш на файловой системе: повторный запрос на тот же URL в течение суток скриншот не дёргает, а берёт из папки .cache. Мелочь, но экономит лимит.
Третье и самое неочевидное — Ollama на дефолтных настройках режет контекст до 4096 токенов. Markdown с большой landing-page в этот размер не помещается, и модель начинает галлюцинировать дизайн-систему из обрывков. Решение — поднять num_ctx до 16384 в Modelfile и взять модель, которая реально умеет в длинный контекст (тот же Qwen2.5 в 14B-варианте справляется). На M1/M2 Mac с 16 ГБ ОЗУ работает терпимо, секунд 40 на полный проход.
Четвёртое — промпт. Если просто сказать «опиши дизайн-систему этого сайта», модель выдаст пресное «современный минималистичный дизайн с акцентом на типографику». Бесполезно. В форке используется структурированный промпт с явной схемой через Zod: модель обязана вернуть JSON с конкретными полями — primaryColor в HEX, fontFamily массивом, spacingScale, borderRadius. Vercel AI SDK через generateObject валидирует ответ и переспрашивает, если что-то не так. Это и решает проблему мусорных описаний.
Что это даёт бизнесу, а не только разработчикам
На первый взгляд история чисто техническая — заменили один API на другой, сэкономили условные 19 долларов в месяц. Но если копнуть, экономический смысл шире.
Когда мы делаем редизайн или новый раздел для клиента, у которого уже есть основной сайт, половина бюджета уходит на «попадание в стиль». Дизайнер сидит, пипеткой ловит цвета, замеряет отступы, гадает, какой именно вес шрифта использован в кнопках. На средний проект это легко 8–12 часов работы — а в деньгах для агентства это 25–40 тысяч рублей только за выравнивание визуала, без самой разработки.
Связка вроде open-designmd сокращает эту часть до минут. AI-агент получает DESIGN.md, генерирует первый драфт компонентов уже в стиле бренда, дизайнер только докручивает мелочи. Не магия, не замена человека — но реальная экономия часов на рутине. И главное: всё это работает локально, исходники клиента не утекают в чужое облако, что для корпоративных проектов с NDA принципиально.
Второй эффект — стандартизация внутри студии. Если у вас десять активных клиентов на поддержке, у каждого свой стек цветов и шрифтов, держать это в голове невозможно. DESIGN.md в репозитории решает вопрос: новый разработчик заходит, читает один файл, видит всю систему. На поддержке сайтов это вообще базовая гигиена — без живой документации каждая мелкая правка превращается в археологию.
Где это применимо, а где не стоит
Честно говоря, не для всякого проекта это нужно. Если у вас лендинг на 5 экранов и AI-агенты в работе не используются — генератор DESIGN.md решает несуществующую проблему. Поставьте Storybook, опишите токены руками в один присест, забудьте.
А вот где история взлетает:
- Команды, которые активно пишут код с Cursor, Claude Code, Aider или Cline. Им файл с дизайн-системой экономит токены в каждом промпте.
- Большие проекты с десятками страниц и компонентов, где живой дизайн-системы нет, а время её собирать — тоже нет.
- Студии и инхаус-команды, обслуживающие много клиентов с разными брендами.
- Кейсы, где нужно быстро воспроизвести стиль внешнего сайта — например, при миграции на новый стек с сохранением визуала.
Не подойдёт там, где дизайн-система живая и развивается каждый спринт: автогенерация всё равно отстанет от реальности. И там, где визуальный язык построен на сложных иллюстрациях, анимациях, нестандартных интеракциях — LLM их не считывает корректно ни по HTML, ни по скриншоту.
Технический вердикт по форку
Решение взрослое, без понтов. Команда не стала городить свой парсер на Playwright, не полезла в headless Chrome — взяла существующие бесплатные сервисы и сшила их через Vercel AI SDK, который для подобных задач сейчас удобнее всего. Код читается, репозиторий понятный, документация по запуску занимает страницу.
Из минусов — зависимость от чужих эндпоинтов остаётся, просто бесплатных. Если завтра Jina Reader тоже введёт жёсткие лимиты, придётся менять адаптер. Но архитектурно форк к этому готов: парсинг изолирован в одном модуле, замена занимает час работы.
Для команд на Next.js, которые ещё не выстроили процесс работы с AI-агентами, это хороший повод попробовать. Стоимость входа — ноль рублей, время на разворачивание — вечер. Если ваш стек тяжелее или хочется заранее понять, как такие инструменты встраиваются в продуктовую разработку, мы в DS495 регулярно собираем подобные пайплайны под конкретные задачи клиентов — от автогенерации компонентов до парсинга устаревших сайтов под миграцию. Если интересно посмотреть, как это переложить на ваш проект, приходите за разбором и расчётом в веб-разработку DS495 — обсудим конкретную задачу и прикинем, где AI-инструменты реально сэкономят бюджет, а где будут декорацией.