Библиотеки и ресурсы для вайбкодинга

Phosphor — открытая библиотека иконок с несколькими начертаниями (regular, bold, fill, duotone и другие) и единообразной сеткой, которая хорошо ложится в разные стили интерфейса. В промпте агенту достаточно явно назвать библиотеку и нужное начертание: «используй иконки из Phosphor, начертание regular, размер 24px». Иначе агент нарисует SVG-иконки сам, и они получатся неровными по толщине линии и несогласованными между собой.

Промпт

Нарисуй SVG-иконку статуса «[заказ создан / оплачен / собирается / в пути / доставлен / отменён]» для интерфейса интернет-магазина. Верни только SVG-код.

Apache ECharts — открытая библиотека для графиков и дашбордов: линейные, столбчатые, круговые диаграммы, тепловые карты, графы связей. Анимация и адаптивность идут из коробки. Если ты вайбкодишь прототип с данными (аналитика, дашборд, отчёт), явное указание «построй график на ECharts» экономит массу времени и агенту, и тебе. Без него агент собирает график вручную на <canvas> или SVG с нуля.

shadcn/ui — набор готовых, стилистически нейтральных UI-компонентов (кнопки, модалки, формы, таблицы) для React. Они не устанавливаются как обычная библиотека, а копируются прямо в код проекта. Агент видит исходный код компонента целиком и может свободно его редактировать, а не работает с «чёрным ящиком» из node_modules. Именно поэтому shadcn/ui стал частым выбором по умолчанию в агентных инструментах: в v0 это стандартный набор компонентов, охотно берут его и другие агенты. Агенту физически проще и безопаснее менять то, что он может прочитать целиком, чем гадать о поведении скрытой зависимости. Хорошая привычка — так и просить: «собери форму на компонентах shadcn/ui, не изобретай свои».

Плюсы и минусы shadcn/ui и сравнение с другими открытыми системами — в теме «Дизайн-система в коде: из Figma, с нуля или готовая».

Референс с Codrops (раздел ниже) задаёт идею, но код по нему всё равно пишет агент, и ему нужна библиотека, чтобы реализовать задуманное надёжно, а не собирать анимацию вручную на голом CSS. Motion (до конца 2024 года — Framer Motion; под старым именем она до сих пор встречается в гайдах и в ответах агентов) — самая частая библиотека анимации для React-проектов. Сейчас это независимый open-source проект (Framer остался лишь спонсором). У неё декларативный синтаксис: «анимируй это свойство от A до B за столько-то времени». Она хорошо ложится на компонентный подход и на анимации появления и исчезновения элементов интерфейса. GSAP — более взрослый, платформонезависимый инструмент. Он сильнее в сложных таймлайнах и синхронизации множества анимаций друг с другом, например в анимации, привязанной к скроллу страницы. Для типового прототипа дизайнера обычно достаточно Motion. GSAP называй агенту явно, когда нужен сложный, синхронизированный сценарий, который простым «анимируй это» не описать.

Иногда задача шире, чем вайбкодить прототип с помощью ИИ: нужно встроить вызов ИИ-модели внутрь самого продукта (тема «ИИ как функция внутри прототипа»). Агенту не обязательно писать интеграцию с API модели с нуля. Vercel AI SDK — популярная библиотека для этого от Vercel. Она даёт готовые, проверенные способы отправить запрос к модели, обработать потоковый (постепенно печатающийся) ответ и показать состояние загрузки. Изобретать это заново для каждого проекта не нужно. Формулируй промпт агенту так же явно, как и с остальными библиотеками этой темы: «подключи вызов модели через Vercel AI SDK, а не пиши интеграцию с API вручную».

У любой такой интеграции есть цена: вызов модели идёт через платный API-ключ провайдера. Ключ должен жить только на сервере — в серверном роуте и переменной окружения, а не в клиентском коде. Иначе любой посетитель заберёт его из браузера и будет тратить твои деньги. Сразу поставь в консоли провайдера месячный лимит расходов. Подробнее — в теме «Безопасность вайбкодинг-проекта».

Готовый визуал карты в прототипе — частый запрос. Здесь важно сразу понимать разницу тарифов, иначе она сработает как неприятный сюрприз в продакшене:

• OpenStreetMap + Leaflet/MapLibre — открытые картографические данные и открытые библиотеки для их отображения. Для прототипа это почти всегда лучший стартовый выбор: без ключа и без привязки карты. Но публичные тайл-серверы OpenStreetMap не рассчитаны на продакшен. Для живого продукта нужен тайл-провайдер вроде MapTiler или Stadia. Их бесплатные тарифы рассчитаны на прототипы и некоммерческие проекты, для коммерческого продукта нужен платный. Не обещай клиенту, что карта «бесплатная навсегда».
• Google Maps API, Mapbox — качественнее по визуалу и данным (в частности, локально для многих регионов). Но оба начинаются с ограниченного бесплатного лимита запросов в месяц, после которого включается оплата. Проговори этот момент клиенту до старта, а не после того, как счёт за API придёт неожиданно.

Формулируй промпт агенту с явным указанием источника: «добавь интерактивную карту на Leaflet с тайлами OpenStreetMap, без платного API-ключа» — для прототипа, а для продакшена — с тайлами MapTiler или Stadia. Иначе агент может по умолчанию подставить Google Maps и незаметно завести проект в платный тариф.

Codrops — сайт с туториалами и открытым кодом по фронтенд-анимации, интерактивным эффектам и нестандартной вёрстке. Он хорош не столько как библиотека для прямого использования, сколько как референс-банк, который можно скормить агенту напрямую: «вот пример эффекта с Codrops (вставить ссылку или код) — адаптируй похожую анимацию появления карточек под мой проект». Полезная привычка при вайбкодинге нестандартного, «вкусного» интерактива: искать референс на Codrops до того, как просить агента придумать анимацию с нуля.

Рядом с Codrops держи ещё четыре ресурса. Fountn — отобранные дизайнерами инструменты, мокапы и UI-киты. Главное в нём — конвертация живого сайта в слоёный Figma-файл (бесплатно одна в день), удобно для разбора референса. 60fps — коллекция микровзаимодействий из лучших приложений (референс поведения, а не кода). 21st.dev — готовые React-компоненты, которые можно отдать агенту как образец. CodePen — живые примеры с кодом. По ссылке агент увидит только оболочку страницы, поэтому скопируй ему три панели кода (HTML, CSS, JS) или экспортируй пен в zip.

Общий принцип для всех категорий этой темы: называй конкретную библиотеку по имени прямо в постановке задачи. Не полагайся на выбор агента по умолчанию.

Добавь на дашборд график продаж по месяцам на Apache ECharts, иконки статуса — из Phosphor (regular), карту магазинов — на Leaflet с тайлами OpenStreetMap без платного ключа, форму фильтра — на компонентах shadcn/ui

Если библиотека уже используется где-то в проекте, явно попроси агента её переиспользовать, а не подключать вторую похожую: «в проекте уже подключён shadcn/ui — используй его компоненты, не добавляй новую библиотеку для той же задачи».

Вот скриншот дашборда конкурента с графиками (вставить) — предложи, какие типы графиков ECharts подойдут для похожей структуры данных

Собери набор из 5 иконок статуса заказа (в обработке, отправлен, доставлен, отменён, возврат) из библиотеки Phosphor — начертание duotone

Сравни OpenStreetMap/Leaflet и Google Maps для карты доставки в приложении: что выбрать для MVP без бюджета на API

Вот референс анимации с Codrops: ссылка на статью и ссылка на репозиторий демо на GitHub (вставить обе). Объясни своими словами, что там происходит технически, прежде чем я попрошу агента её повторить

Код демо лежит в отдельном репозитории, ссылка на него обычно есть в самой статье.

Собери анимацию появления карточек товаров на скролле на GSAP, а не на CSS-переходах — нужна точная синхронизация с положением скролла

Подключи чат-помощника к моему прототипу через Vercel AI SDK, покажи ответ модели по мере печати (стриминг), а не единым куском после полного ответа. Ключ API — только на сервере: серверный роут и переменная окружения, в клиентский код он не попадает. Если у проекта нет серверной части, сначала скажи, где она будет жить