Насмотренность в вайбкодинге — где черпать идеи для своих проектов

Сайты, куда стоит заглянуть

Наведите курсор на «Смотреть сайты», затем нажмите.Нажмите «Смотреть сайты», чтобы раскрыть подборку. Эффект курсора можно попробовать на компьютере с мышью.

Больше примеров можно найти по запросу «модификации на Тильде» — введите его в поисковую строку браузера.

Тот самый курсор

Над надписью «Смотреть сайты» курсор становится кругом со словом «Подробнее». По нажатию открывается подборка.

За основу взяли пример курсора у Matilda. Круг и надпись «Подробнее» — наш вариант оформления.

Такой приём можно использовать для слов с пояснениями. Наводим на слово — курсор подсказывает, что его можно нажать. Нажимаем — читаем пояснение.

Можно оставить круг с надписью. А можно заменить его контрастным вопросительным знаком. Попробуйте оба варианта:

На компьютере попробуйте навести курсор на подчёркнутое слово, а на телефоне — сразу нажмите. На телефоне эффект курсора не появляется, но пояснение открывается в обоих случаях.

Логика одна: навели → увидели подсказку → нажали → открыли пояснение. Изменился только вид курсора.

Когда найдёте что-то интересное, запишите: что понравилось и что именно происходит. Например:

Этого уже достаточно, чтобы сохранить идею и объяснить её нейросети.

Показываем и объясняем

Нашли понравившийся пример — теперь нужно показать нейросети, что мы хотим сделать у себя.

1. Делаем скриншоты до и после

Для нашего примера: на первом скриншоте курсор обычный, на втором — над словом, уже в виде круга «Подробнее». Если по нажатию открывается пояснение, сделайте ещё один скриншот с ним.

Проверьте, попал ли курсор на снимок: некоторые инструменты его не захватывают. Если нет, отдельно приложите изображение нужного курсора или опишите его вид.

2. Описываем своими словами

Напишите, что происходит между скриншотами и что хотите изменить. Для этого не нужно знать название эффекта:

3. Отправляем пример и задачу ИИ

Прикладываем скриншоты, ссылку на пример и файл своего проекта. Вот промпт для нашего курсора:

Хочу добавить подсказки к терминам в моём лонгриде. Прикладываю текущий код, ссылку на пример и скриншоты до и после наведения.

В примере курсор над элементом превращается в круг «Подробнее». Мне нужно похожее поведение, но вместо круга с надписью — контрастный вопросительный знак.

Термины выделены пунктирным подчёркиванием. При наведении на них обычный курсор превращается в контрастный вопросительный знак. Когда уводим мышь, возвращается обычный курсор.

По нажатию на термин под примером открывается пояснение. Оно остаётся открытым, пока пользователь не нажмёт «Закрыть» или другой термин. При выборе другого термина показывается его пояснение.

На телефоне пояснение открывается нажатием на подчёркнутое слово.

Сначала сделай пример на одном термине: «Референс». Пояснение: «Пример, на который мы опираемся при создании своего решения: оформление, элемент или его поведение».

Если на сайте есть доступный для использования код эффекта, приложите его к запросу — нейросеть сможет взять его за основу.

Собираем свой банк идей

Понравилась фишка, но пока некуда её применить? Сохраните в картотеку. Для начала хватит одной заметки в Obsidian или документа со скриншотами.

В картотеку можно сохранять и сам фрагмент кода вместе со ссылкой, откуда его взяли. А если уже доработали эффект с ИИ — сохранить рядом свой вариант и подписать, что изменили.

Отправьте нейросети материалы и комментарий своими словами:

Один раз задайте правила, по которым оформлять находки:

Помогай вести мой банк идей для проектов. Я присылаю ссылки, скриншоты, код, если он есть, и свои комментарии. Для каждой находки записывай:

— название;
— источник и приложенные материалы;
— исходный код, если я его приложу;
— что мне понравилось и как это работает;
— где хочу применить и что изменить;
— теги для поиска.

Сохраняй мои пояснения. Свои предложения отмечай отдельно. Если по материалам непонятно, как что-то работает, не додумывай.

Приложенный код сохраняй без изменений в блоке кода или отдельном файле со ссылкой из записи. Если кода нет, так и отметь. Доработанный вариант сохраняй отдельно и подписывай, что изменилось.

Добавляй находки в существующую картотеку, сохраняя предыдущие записи. Если доступа к файлу нет, подготовь запись для сохранения.

В базе получится такая запись:

Храните базу у себя. Если нейросеть умеет работать с вашими файлами, она сможет добавлять записи прямо туда. Если нет — сохраняйте подготовленные записи и прикладывайте актуальную базу к следующей задаче.

Позже можно попросить: «Найди в моей картотеке примеры подсказок к тексту. Хочу выбрать вариант для нового лонгрида».