Знакомая ситуация: вы находите интересный приём на чужом сайте и сохраняете его в закладки с мыслью «обязательно попробую на следующем подходящем проекте». Постепенно папка превращается в архив идей, до которых так и не дошли руки.
Эта статья — про трансформацию подхода к складированию референсов и идей. С помощью нейросетей я научился не просто сохранять, но действительно пробовать и осваивать новые навыки.
Первая причина очевидна: чтобы разобраться в незнакомой находке, нужны свободное время и внимание. Это объяснимо, ведь в закладки обычно попадает то, что вы ещё не пробовали: новое, необычное, сложное.
Но дело не только в этом. Между «увидел идею» и «применил её на своём сайте» стоит длинная цепочка шагов, и остановиться можно на каждом:
найти время;
разобраться в документации;
настроить рабочее окружение;
запустить первый пример;
справиться с ошибками сборки.
Пройти все пять шагов подряд сложно, особенно в потоке текущих задач. Поэтому идея чаще всего отсеивается на одном из первых этапов, а ссылка так и остаётся в закладках.
Что изменилось: ИИ быстро даёт первый рабочий прототип
Теперь первый шаг выглядит иначе. Вы берёте ссылку на понравившийся эффект, отправляете её нейросети и формулируете запрос:
Посмотри, в чём главная особенность этого сайта. Объясни простыми словами и собери минимальный прототип, который воспроизводит этот эффект.
Многие представляют себе HTML как длинные строки кода, непонятные команды и высокий риск всё сломать. Но этот язык разметки работает иначе, чем программирование. Его проще воспринимать не как страшный код, а как понятную систему пометок для страницы.
Писать код самостоятельно при этом не нужно. ИИ-агент работает прямо внутри вашего проекта: читает файлы, пишет и правит код. Такие агенты показывают результат в окне браузера, поэтому вы сразу видите живое превью, крутите его и задаёте уточняющие вопросы.
В итоге получается черновой прототип. Публиковать его на рабочем сайте нельзя: адаптивность под разные экраны не проверена, тексты случайные, ошибок много. Но задача этого шага другая — увидеть, что эффект в принципе воспроизводится. Главное, что этап чистого листа пройден.
Кейс Pretext: дневник прототипирования
Разберём подход на конкретном примере. В конце марта 2026 года в соцсетях активно обсуждали Pretext — инструмент для вёрстки текста на странице. Это экспериментальная разработка Ченга Лу, бывшего участника основной команды React и нынешнего фронтенд-инженера Midjourney.
Суть приёма: текст перестаёт быть статичным блоком. Он ведёт себя как жидкость — обтекает сложные объекты и перестраивается в реальном времени, когда вы меняете размер окна или перетаскиваете блок мышью.
Причин добавить такой инструмент в закладки три:
Демонстрация выглядит убедительно, и хочется повторить эффект.
Инструмент решает давнюю и сложную задачу.
С текстом на страницах сайтов приходится работать часто, поэтому применение наверняка найдётся.
Так работает демонстрация Pretext — текст перестраивается, пока вы двигаете объект.
1
Первый запрос к нейросети
[ссылка на репозиторий github.com/chenglou/pretext] Посмотри, в чём главная особенность этого проекта. Объясни простыми словами.
Репозиторий — это папка с исходным кодом проекта, опубликованная на GitHub. В ответ на промпт нейросеть собирает из него короткую сводку. По ней можно за пару минут понять, что умеет инструмент, и не читать документацию целиком.
Сводка по репозиторию, которую нейросеть собрала из кода и README.
Сводка по репозиторию, которую нейросеть собрала из кода и README.
2
Второй запрос к нейросети
Собери простую HTML-страницу с этим эффектом.
Первый результат ожидаемо скромный: эффект работает, но оформление типовое — такое нейросеть выдаёт по умолчанию, без дополнительных указаний.
Первый прототип — эффект воспроизводится, но выглядит как черновик.
3
Третий запрос к нейросети
Уточним. Для этого:
Возьмём реальный рабочий проект вместо пустой страницы.
Попросим повторить конкретный эффект, ради которого инструмент и попал в закладки.
Уточнённый запрос с привязкой к реальному проекту.
Результат после уточнения запроса.
Работа идёт по кругу: запрос — проверка — ошибка — исправление вместе с нейросетью. Прототип в итоге появляется, но нового навыка пока нет: код написала нейросеть, а вы наблюдали за результатом. Публиковать такой прототип рано.
Как учиться с помощью нейросети, а не просто получать готовый код: три способа
Прототип за вечер — это половина дела. Если остановиться здесь, через неделю вы не вспомните, как всё работало, и в следующий раз начнёте с нуля. Но работу можно настроить так, чтобы с вами оставался не только прототип, но и новый навык.
До сих пор всё происходило в чате с нейросетью: вы отправляли ссылку, получали код и открывали его в браузере.
Дальше удобнее работать с ИИ-агентом. Это программа с нейросетью внутри: вы открываете в ней папку с файлами прототипа — того самого, что собирали на предыдущем шаге, — и агент сам читает эти файлы, правит код и запускает результат. Так устроены Cursor, Claude Code, GitHub Copilot, Gemini CLI и ещё пара десятков инструментов.
Обычно вы ставите задачу одной фразой: «Добавь на первый экран обтекание текста», «Почини ошибку в консоли». Агент её выполняет, но выполняет молча и отчитывается результатом: «Готово, эффект добавил». Почему он выбрал именно такое решение и что означают слова в его отчёте — приходится спрашивать отдельно и заново в каждом новом чате.
Ниже — три способа, как закрепить эту просьбу раз и навсегда. Они отличаются способом настройки и тем, сколько времени нужно вложить: от одного текстового файла до отдельного приложения-репетитора.
Вариант №1. AGENTS.md — памятка, которую агент читает сам
Что это. Просьбу «объясняй, что делаешь» можно записать один раз — в обычный текстовый файл. Агент открывает его сам, перед тем как взяться за любую задачу. Примерно так новый сотрудник читает памятку, прежде чем сесть за работу.
Файл называется AGENTS.md, и кладут его в ту самую папку, которую вы открыли в агенте, — её называют корнем проекта. Такое имя понимают Cursor, GitHub Copilot, Gemini CLI и другие агенты. У Claude Code файл называется иначе — CLAUDE.md. Чтобы не вести две памятки, в CLAUDE.md достаточно вписать одну строку @AGENTS.md: по ней Claude Code откроет тот же файл.
Как работает. Повторять просьбу больше не нужно — ни в этом чате, ни в следующих: агент сверяется с файлом сам. Для обучения хватает трёх пунктов:
Объяснять, не что сделано, а почему выбрано именно такое решение: какую ошибку оно исправляет и что сломается без него.
Расшифровывать сложный термин простыми словами при первом упоминании.
Записывать встреченные термины в отдельный файл GLOSSARY.md — это личный словарь по проекту, который агент пополняет сам.
Какой результат. На один и тот же запрос агент отвечает по-разному: без файла — коротким отчётом о проделанной работе, с файлом — объяснением, почему решение выглядит именно так.
Ответ агента без AGENTS.md.
Ответ агента с AGENTS.md.
Что нужно для старта. Файл работает с тем агентом, которым вы уже пользуетесь. Формат поддерживают более 20 инструментов, среди них Codex, Cursor, GitHub Copilot и Antigravity CLI. Платная подписка не обязательна — у большинства есть бесплатный тариф с ограничениями, и на один разбор его хватает.
Как внедрить: шаг за шагом.
Создайте в корне проекта файл с именем AGENTS.md. Это обычный текстовый файл, его можно сделать в любом редакторе.
Впишите в него требования из примера выше или свои формулировки. Для старта хватит трёх-четырёх пунктов.
Откройте чат с агентом внутри проекта и попросите разобрать конкретный файл или эффект. Ссылаться на памятку не нужно — агент найдёт её сам.
Если объяснения получаются слишком общими, добавьте в файл более конкретные правила и повторите запрос.
Вариант №2. Codebase-to-course — код превращается в интерактивный курс
Что это. Памятка из первого варианта задаёт агенту манеру: как разговаривать и что пояснять. Этот вариант предлагает создать отдельный навык (скилл) для ИИ-агента. Скилл — это готовый сценарий работы. Агент выполняет описанную в нём последовательность шагов, а не придумывает ход работы на месте.
Сам навык — это папка с инструкциями, главный файл в ней называется SKILL.md. Формат открытый, поэтому один и тот же скилл понимают десятки разных агентов.
Скилл codebase-to-course превращает чужой код в учебный курс: агент читает проект целиком, выделяет главное и собирает несколько страниц с объяснениями, которые открываются в браузере.
Как работает. Навык кладут в папку со скиллами — у каждого агента она своя. Дальше вы открываете нужный проект и пишете: «Преврати этот код в интерактивный курс». Вместо своего проекта можно дать ссылку на чужой репозиторий на GitHub. Агент читает код сам: выделяет ключевые механики, делит материал на 4−6 модулей и оформляет их по шаблону.
Готовый курс с интерактивными карточками, яркими подсказками и простыми объяснениями.
Какой результат. Получается папка с курсом: файлы оформления, скрипт сборки и несколько HTML-файлов — по одному на модуль. Скрипт склеивает модули в одну страницу index.html.
Структура собранного курса по Pretext.
Внутри курса — последовательное объяснение, схемы движения данных по проекту, вопросы для самопроверки и всплывающие расшифровки терминов при наведении курсора. Такой формат подойдёт, если нужно понять принцип работы, а не изучать документацию целиком.
Файл index.html открывается в браузере двойным кликом, сервер для этого не нужен. Но хранить и переносить нужно всю папку целиком: без соседних файлов оформление и скрипты не подтянутся.
Что нужно для старта. Подойдёт практически любой агент — навык нужно только положить в его папку со скиллами. Для разового запуска на небольшом проекте обычно хватает бесплатного тарифа. Дальше действует простое правило: чем больше кода агент прочитал, тем больше израсходовано токенов. На крупных проектах расход растёт быстро, поэтому для регулярной работы удобнее платный план.
Как внедрить: шаг за шагом.
Скачайте скилл codebase-to-course из публичного репозитория на GitHub.
Положите папку скилла туда, где ваш агент ищет скиллы. У Claude Code это папка ~/.claude/skills/ — она общая для всех проектов. Если скилл нужен только в одном проекте, подойдёт папка .claude/skills/ внутри него. У других инструментов путь свой, его лучше уточнить в документации.
Откройте в агенте нужный проект или подготовьте ссылку на репозиторий.
Напишите: «/codebase-to-course преврати этот проект в интерактивный курс». Косая черта в начале — это способ вызвать скилл по имени. В том же запросе можно указать язык курса.
После сборки откройте файл index.html из получившейся папки.
Куда положить скилл, чтобы агент его увидел.
Вариант №3. DeepTutor — личный репетитор по теме
Что это. Первые два варианта надстраиваются над агентом, которым вы уже пользуетесь. DeepTutor устроен иначе: это отдельное приложение, его устанавливают на свой компьютер и открывают в браузере. Вариант самый трудоёмкий из трёх, зато работает как персональный репетитор.
Как работает. Сначала приложение устанавливают — на свой компьютер или на сервер. Часть настройки идёт через командную строку: это окно, где программе отдают текстовые команды вместо нажатия кнопок.
Дальше приложению нужно объяснить, какой нейросетью пользоваться. Для этого подключают ключ доступа — строку символов, которую сервис нейросети выдаёт лично вам. DeepTutor понимает несколько десятков таких сервисов.
Есть и второй путь: запустить нейросеть прямо на своём компьютере через Ollama или LM Studio — тогда данные никуда не уходят, но нужен мощный компьютер.
Последний шаг — загрузить материалы: статьи, PDF, файлы проекта, собственные заметки. После этого DeepTutor:
отвечает на вопросы, опираясь на загруженные материалы;
собирает из них дополнительные форматы: вопросы для самопроверки, инфографику и даже книги;
составляет учебный план и запоминает, какие темы даются вам тяжелее, чтобы возвращаться к ним позже.
Какой результат. Вместо разового разбора одного приёма получается база знаний по теме. Она пополняется с каждым новым источником и подсказывает, что стоит повторить.
Что нужно для старта. Готового облачного тарифа у разработчиков нет, поэтому приложение придётся развернуть самостоятельно. Быстрее всего установить его из PyPI — это каталог, откуда программы на Python скачиваются одной командой. Другой вариант — Docker: он запускает приложение в готовом виде, настраивать окружение вручную не нужно.
Платить надо не за подписку, а за обращения к той нейросети, которую вы подключите. Чтобы просто попробовать, подойдёт бесплатный тариф Google AI Studio с недорогой моделью (например, gemini-3.1-flash-lite): бесплатных лимитов там хватает на первое время.
Как внедрить: шаг за шагом.
Проверьте, что на компьютере установлены Python 3.11 или новее и Node.js 20 или новее — без них приложение не запустится. Создайте отдельную папку для работы и установите DeepTutor командой pip install -U deeptutor.
Выполните deeptutor init. Мастер настройки попросит выбрать сервис нейросети и вставить ключ доступа либо указать локальную модель.
Запустите deeptutor start. В командной строке появится адрес — по умолчанию 127.0.0.1:3782. Откройте его в браузере, дальше всё происходит в обычном окне браузера.
Загрузите материалы по теме: PDF, статьи, свои заметки, а также файлы README или RESEARCH.md разбираемого проекта — так называются файлы с описанием, они есть почти в каждом репозитории.
Работайте в чате и используйте встроенные инструменты — вопросы для самопроверки и инфографику.
Интерфейс DeepTutor — база знаний слева, чат с репетитором справа.
Для одного приёма третий вариант избыточен: разворачивать отдельное приложение ради разбора единственного эффекта незачем. Он оправдан, когда вы хотите освоить целую область — не «как работает Pretext», а «как в принципе устроены раскладка и отрисовка текста».
Метод работает не только с Pretext: ещё два примера
Подход из разбора не привязан к самому Pretext — он работает с любой ссылкой из закладок. Вот ещё два примера в формате «было → стало», уже без разбора деталей.
1
Liquid Glass
Референс — репозиторий samasante/liquid-glass: компонент на React, который преломляет содержимое страницы, как стекло.
Было — первый экран без дополнительных элементов.
Стало — линза на первом экране, которая искажает фон под собой. Похожий приём Apple использует в своих интерфейсах.
2
Heerich
Референс — репозиторий meodai/heerich: движок, который собирает сцены из объёмных кубиков-вокселей и отрисовывает их в формате SVG.
Было — первый экран без дополнительных элементов.
Стало — та же форма, собранная из вокселей и вращающаяся на странице.
Вывод: что вайбкодинг даёт дизайнеру и малому бизнесу
Зачем дизайнеру или предпринимателю разбираться в таких деталях, пусть даже с помощью ИИ? Кроме вдохновения, у подхода есть практическая польза.
Закладки перестают быть недосягаемыми. Сложные механики с сильных сайтов можно разобрать по частям и применить у себя.
Гипотезы проверяются быстрее. Живой прототип собирается за пару часов, и уже на нём видно, помогает идея продукту или только мешает.
Появляется новый способ объяснять идеи. Рабочий прототип проще показать команде или клиенту, чем описать словами: демонстрацию можно открыть и покрутить.
Вайбкодинг часто ругают за горы небрежного кода, и претензия справедливая. Но у того же инструмента есть второе применение: он работает как мост в незнакомую область.
ИИ убирает то, что обычно останавливает в самом начале, — пустой экран и ощущение, что разобраться не получится.
Вы находите интересный приём, разбираетесь, как он устроен, собираете свою черновую версию, ломаете её и чините вместе с нейросетью. По ходу становится понятно, на каких принципах всё держится. В результате остаётся не только анимация, но и знание, которое пригодится в следующем проекте.
Tilda Education
