100+ часов вайбкодинга. Курсор начал лучше меня понимать

💬 Тултип

Библиотека UI элементов

Чекайте библиотеку всяких UI приколюх. Тут кнопки, инпуты, формы с прикольными анимациями. Все элементы можно забрать как компоненты на React, Tailwind или Html/CSS, а можно просто себе в фигму и там уже довести его до ума.
Мне кажется, неплохо, чтобы быстро найти вариант, как сделать свой концепт поживее и поинтереснее или вдохновиться на анимацию.
Этот ресурс уже на доске

Чекнуть ресурс ▶️

💬 Тултип

Анимации в интерфейсе

До анимаций в интерфейсе обычно доходят в последнюю очередь — когда кажется, что всё остальное уже доведено до идеала (никогда). Про анимации часто говорят, но действительно полезной информации о том, как их правильно использовать, не так уж много.
На русском языке внятных гайдлайнов я не нашёл, поэтому собрал подборку англоязычных источников. Эти материалы помогут разобраться:
· когда анимация действительно нужна;
· какой она должна быть, чтобы не мешать, а улучшать опыт пользователя;
· как корректно подготовить и передать анимацию разработчикам для продакшна

Как передают анимацию в разработку в Wise

Криптокошелек Family и про консистентность анимации в нем

Как устроены 2D,3D анимации и motion в Cash App

Material Design 3: Motion physics system

Animation/Motion дизайн токены от дизайнера LinkedIn

Дизайнер из IBM рассказывает про основные параметры анимаций

Если есть примеры русскоязычных статей про анимации в интерфейсах — жду ваши ссылки в комментах👁

💬 Тултип

Как делают вкусные сайты?

Недавно поймал себя на мысли: а как вообще делают все эти крутые 3D-анимации на сайтах, где можно покрутить модельку мышкой или подвигать что-то скроллом? Типа вот этого или вот этого

Расскажу, как сам это понял. В основе лежит WebGL — штука, которая напрямую общается с видеокартой и позволяет рисовать 3D прямо в браузере. Но в самом WebGL хер разберешься, поэтому обычно никто не пишет напрямую на нём. Вместо этого используют Three.js — такую библиотеку-надстройку. С ней уже всё проще: создал сцену, поставил камеру, закинул свет, подгрузил модель — и у тебя на экране готовая тридэшка.

Дальше встаёт вопрос: а как оживить эту сцену? Чтобы не просто стояло, а красиво двигалось, реагировало на скролл, меняло угол обзора при движении мышкой. Тут подключается GSAP — библиотека для анимаций. Она отвечает за плавность, тайминги и синхронизацию: камеры двигаются вместе со скроллом, объекты появляются и исчезают как по нотам, всё крутится и переливается.

И вот именно связка Three.js + GSAP даёт тот самый эффект, когда сайт не просто смотришь, а прям хочется «пощупать» и залипнуть. В общем, тот самый эмоциональный дизайн.

Не то, чтобы это практически применимое знание для продуктового дизайнера, по всегда полезно расширить кругозор и иметь хотя бы верхнеуровневое понимание, что и как устроено. Может потом пригодится, когда решите делать очень дорогие лэндосы на фрилансе 🤑
Поэтому вот вам еще небольшая библиотека реализованных WebGl анимаций с открытым исходным кодом, чтобы вдохновляться

Покидайте в комменты сайты, которые вам настолько нравятся, шо прям не оторваться. Интересно будет глянуть 👁

💬 Тултип

Матрица DACI от Avito

В Avito заметили, что не все всегда понимают, кто и какую роль играет в задаче — это порождает хаос и замедляет принятие решений.
Чтобы навести порядок, ребята внедрили таблицу по модели DACI, где:

Driver — организатор, ведёт процесс и отвечает за результат.

Approver — заказчик, принимает и оценивает итоги.

Contributor — исполнитель, делает руками или консультирует.

Informed — информированный, просто в курсе.

Полезный инструмент, который поможет повысить прозрачность процессов и поможет организовать процессы в команде. Они еще и симпатичный лендос на эту тему подготовили

Смотреть таблицу 🔣

💬 Тултип

200 часов вайбкодинга | Первые результаты

Начну сначала. Мой друг в последнее время достаточно часто переезжал. В это период жизни он наиболее остро ощутил потребность в живом общении и как сложно, при нынешнем темпе жизни и с текущей тенденцией на уменьшение социальной активности, адаптироваться к новым местам, найти друзей, банально социализироваться и развивать нетворкинг. Одна из вещей которая помогла ему везде найти единомышленников это его велосипед)

У велосипедистов сейчас в целом достаточно развитое и сплоченное комьюнити. Причем все не ограничивается только поездками. Это и предварительная беседа за чашкой кофе, поездка, также отдых после поездки и ее обсуждение. В общем целый процесс. Бегуны тоже не отстают в это плане и имеют сильное комьюнити и несомненное преимущество в более низком пороге входа. И то и другое это отличные варианты провести время с кайфом, завести новые знакомства и принести пользу своему организму. Не всегда понятно с чего начать, где искать заезды, забеги и другие мероприятия. Так родилась идея сделать место, где можно будет найти единомышленников с которыми можно провести время за любимым хобби.

После этого все было по классике — анализ рынка, бенчмаркинг, концепт и затем проработка основных флоу. Помимо этого мы накидали роадмап, где думали о том, за счет чего мы сможем выделиться среди остальных cервисов, которые занимаются мероприятиями. Когда мы закончили с дизайном встал вопрос о том, а как вообще теперь все это реализовать и первой мыслью, естественно, было нанять разработчика, который нам это все запилит. Но бюджет на такие вещи сложно поддается анализу и прогнозу, поэтому мы конкретно застопорились, так как у нас нет понимания того, насколько будет востребован это продукт на рынке и сколько в него нужно вложить, чтобы создать mvp от которого уже можно отталкиваться. Ну и нанимая разработчика на такое дело любая доработка, проверка той или иной гипотезы будет выражаться для тебя в определенной сумме деняк

После долгих размышлений было принято решение попробовать навайбкодить mvp сервиса. Целью было попробовать возможности вайбкодинга ну и, в идеале, создать работающий прототип, который позволит собрать обратную связь и понять че мы вообще хотим дальше.
Что сейчас можно сделать:
1. Зарегаться через гугл и заполнить свой профиль
2. Просматривать ивенты, добавлять их в избранное и делиться
3. Создать свой ивент и загрузить туда GPX маршрута, который отобразится в виде интерактивной карты

Такие дела. Потыкайте интерфейс и скажите как вам)
А я в следующий раз расскажу подробнее про процесс, поделюсь основными инсайтами после 3 месяцев проведенных с Курсором, а также про дальнейшие планы

Посмотреть че там ➡️

💬 Тултип

Правила вайбкодинга
За последние 3 месяца я провел 200 часов в Cursor и хочу поделиться мыслями, которые сэкономят вам нервы и время, если вы решились повайбкодить. Я буду рассматривать Cursor, но эти правила подойдут и для других аналогов

Cursor — это стажер
Представьте Курсор, как стажера, который готов стараться, но которого критически нельзя оставлять наедине со своими мыслями и нужно давать четкое направление что делать, каким образом либо наводить его на эти мысли. Без вашего направления он может, допустим, решить, что для того, чтобы поменять цвет у кнопки Primary он не будет переписывать стиль, а навесит сверху еще парочку, которые затем усложнят ваш код и жизнь

Вы должны знать, что вы хотите
Нельзя просто написать прост «сделай страницу как у Apple по братски, чтоб красиво было». Ну точнее можно, но результат вас неприятно удивит. Чем конкретнее промт — тем меньше итераций до нормального результата. Это как с дизайнером: скажете «сделай что-нибудь красивое» — получите что-нибудь

Начинаем с дизайн системы
Не буду рассказывать про преимущества использования дизайн системы. Это просто нужно сделать, иначе каждая кнопка будет вырисовываться каждый раз заново и ваш проект будет готов тогда, когда ИИ наши рабочие места. Я использовал Ant Design, потому что в ней есть все (или почти все), что вам нужно. Можно также подключить Shadcn — более современный вариант. Или Framework7, если делаете что-то мобильное.
Главное — выберите одну систему и скажите Cursor использовать только её. Пропишите это в rules или просто напоминайте в каждом промте: «Используй компоненты из Ant Design». Иначе он начнет импровизировать, и вы получите адскую мешанину из самописных компонентов, библиотечных и вообще непонятно откуда взявшихся

Сначала план, потом действия
Допустим, стоит задача спроектировать целый сервис, и вы даже не знаете, с какой стороны начать. Прямо так и напишите в промте: «Мне нужно спроектировать сервис, но сначала я хочу, чтобы ты составил детальный план — как это эффективнее и лучше всего сделать, какие нюансы нужно учесть и так далее». Когда получите наброски плана, пробегитесь по оставшимся вопросам, а затем декомпозируйте задачу на части и начинайте. В плане написания промтов нет чего-то универсального, что подойдет к каждому случаю, но вы можете ознакомиться с официальной библиотекой промтов от команды OpenAI и что-то оттуда для себя подчерпнуть

Постановка задач среднего размера и брейншторминг
После того как у вас наметился план, беритесь за дело и задавайте задачи среднего уровня. Например: «Спроектируй главную страницу. На ней должен быть хедер, фильтры, карточки — как в макете». Если на странице будут использованы новые компоненты, обязательно напишите, чтобы Cursor брал их из дизайн-системы (которую вы уже, надеюсь, подключили). Но самое важное — дайте ему поразмышлять. Дополните промт фразами типа: «Пока не пиши код, поразмышляй о том, что я не учел. Какие у тебя еще есть вопросы? Как мое решение сделать более проработанным?». Это работает хорошо. Cursor начинает задавать вопросы, на которые вы сами не подумали: «А как должны вести себя фильтры на мобилке?», «А нужна ли пагинация для карточек?», «А что показывать, если карточек нет?». В общем, продумавыет разные корнерсы
Доработка и постановка маленьких задач. Максимум конкретики
Когда будет готова страница, то вам нужно будет пройтись по каждому блоку и контейнеру, рассказать, что в нем не так и попросить исправить. Нужно будет прям заходить в инспектор кода, скринить оттуда проблемное место и описывать то, что вы хотите сделать, а еще лучше давать скрин макета с правильной версткой. Во время исправлений можно попробовать обматерить ИИ, тогда эффективность вырастает на 4-6%. Не могу заверить, что это так, но по ощущениям работает 😅

Это была первая часть моих мыслей от опыта вайбкдинга. С какими проблемами вы сталкивались в вайбкодинге и что вас бесит больше всего?

💬 Тултип

Мокап за пару мин

Когда оформляю кейсы, иногда использую Shots — удобный сервис для быстрой упаковки вашего дезигна в устройства. Выбираешь айфон, айпэд или другой девайс, закидываешь скрины, настраиваешь фон, тени и композицию — затем быстренько все это экспортируешь

Много бесплатных возможностей, жаль только, что экспорт в 2x разрешении убрали из бесплатных плюшек, но всё равно сервис остается одним из самых быстрых решений для презентации работ.

Если нужно быстро собрать визуал для портфолио или показать клиенту концепт в красивой обертке — рекомендую попробовать 👊

Заценить че там ▶️

💬 Тултип

10 плагинов Figma

С тех пор, как в фигму накатили нейронку смысл многих плагинов исчез, но есть некоторые, которыми я пользуюсь до сих пор

HTML to Figma
Позволяет вставить ссылку на страницу сайта и перенести всю эту страницу в виде макетов в фигму с сохранением лэйаутов, всех свгэшек и так далее

Unsplash
Это незаменимый плагин, если нужно быстро и самое главное, качественно вставить профессиональные фото в свой дизайн. Самое интересно, что в Unsplash есть платные и бесплатные фото, но этот плагин дает вставлять фото даже из платных коллекций. Баг или фича?

Animate on path
Если очень нужно проанимировать элемент по определенной траектории и когда не помогает smart animate

Isometric
Сделать из фотографии или вектора изометричное изображение

I 3D
Когда нужно сделать 3D из вектора

Image tracer
Делает из фотографии вектор. Лучше всего работает с простыми формами

Figmoji
Добавляет векторые эмодзи в проект

Design Kit Pro
1200 3D объектов в разных стилях в качестве 4K для ваших дизайнс. Пока бесплатно. Не сильно успел его попробовать, но выглядит неплохо

Propstar
Очень полезно, если вы хотите создать полноценный UI Kit. Берет компонент и создает таблицу в которой показывает все его возможные состояния, размеры и другие настройки

Lazy load
За 5 сек делает скелетоны макета. Минус в том, что их нельзя кастомизировать

Вот такой набор. Если знаете что-то еще полезное — кидайте в комменты, всегда рад новым инструментам 👁

💬 Тултип

Шел 6 рабочий день

Любуемся интерактивной WebGL черной дырой с настраиваемыми параметрами, а также версией с музыкой из «Интерстеллара» для максимального погружения 👩‍🚀

💬 Тултип

Дизайн система Мегафон

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

📱 Смотреть сайт
📱 Фигма файл

💬 Тултип

Привила работы с Курсор | Часть 2

Продолжаю делиться инсайтами, которые я сделал после продолжительного (и не всегда приятного) общения с Курсор ☺️

Похожие ошибки
Если в процессе написания кода возникает ошибка, которая уже ранее была успешно решена в другом месте проекта, скажите Курсору, чтобы он посмотрел, как он уже решал её до этого. Это значительно сократит время на поиск решения и снизит риск новых ошибок.
В идеале попросите Курсор завести memorybank, где он запишет ошибку и найденное решение — так к ним будет легче возвращаться в будущем.
Пример: у меня в интерфейсе есть форма создания мероприятия и форма редактирования. И там, и там есть инпут с вводом локации, но в одной форме он отрабатывал правильно — при вводе показывал список потенциальных мест, а в другой список вообще не появлялся. Если просто сказать Курсору решить эту проблему, появляется куча рисков. Куда проще дать конкретную инструкцию: «Сходи в форму создания, посмотри как там это реализовано, найди отличия и примени то же решение здесь»

Правильные решения
Можно решить потенциальные проблемы ещё на этапе написания промта. Если у вас в интерфейсе уже есть решение, которое вас устраивает, просто скажите, чтобы при написании кода Cursor ориентировался на него.
Пример: на одной странице у вас есть красивый скелетон, а на другой просто крутится лоадер при загрузке. Если вы скажете сделать скелетон на другой странице, Cursor будет заново придумывать реализацию. Вместо этого лучше сказать: «Посмотри, как сделано на странице X, и реализуй так же». Таким образом вы избавите Cursor от лишних размышлений, а себя — от его возможных ошибок.

Следите за тем, что он делает
Вайбкодинг не такой уж и вайбовый. У меня ещё ни разу не получалось посмотреть ютубчик в этом процессе, потому что я всегда наблюдаю за тем, не пишет ли он лишний код, не нагромождает ли избыточные CSS-правила или вообще не сносит ли половину сервиса.
Однажды, пока я отвлёкся, Cursor долго не мог поменять стиль шрифта у заголовка на свёрстанной странице — и в этот момент решил, что легче удалить всю страницу и переписать её заново. По итогу, он удалил страницу и не смог заново её написать. Я попытался сделать бэкап в самом Cursor'е, но не получилось. А так как проект не был синхронизирован с репозиторием на GitHub, пришлось делать всё заново. Из этой истории логично исходит следующий пункт.

Заведите репозиторий на GitHub
Это позволит вам создавать облачные версии своего проекта и в случае чего откатиться к рабочей версии. Также последующий деплой будет делаться через него.
Разберитесь с понятиями: мердж, ветка, коммит и основными командами для Git. Таким образом вы не потеряете прогресс и будете лучше понимать, где искать ошибку.

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

А что случалось с вами во время вайбкодинга? Пишите в комментах свои инсайты, лайфхаки или просто истории про вайбкодинг — будет интересно глянуть 👁

Кстати, я немного причесал UI и поработал над навигацией, так что заходите посмотреть

💬 Тултип

DODO дропнули свои гайды в открытый доступ

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

Заценить

💬 Тултип

Бесплатные библиотеки компонентов

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

coss.com/ui
basecn.dev
ui.shadcn.com
smoothui.dev
hextaui.com
tailark.com
uxeui.com
magicui.design
heroui.com
shoelace.style
animate-ui.com
8bitcn.com

💬 Тултип

Как понять дизайн системы?

Одной из первых задач на моей текущей работе было собрать и описать все компоненты, которые используются в продукте, попутно дополняя и улучшая детали. То есть, по сути, создать Figma-файл с дизайн-системой, который впоследствии будет перенесен в код.
В первую очередь я задался поиском качественных примеров, чтобы спиздить переиспользовать лучшие практики. Сегодня хочу поделиться своим топом дизайн-систем, реализованных в Figma, на которые стоит посмотреть, если вы хотите понять, как грамотно выстроить свой Figma-файл так, чтобы все, кто туда заходят, сразу понимали, что к чему 🚬

Atomaro
Тут постарались ребята из Ростелекома. Отдельный лайк за классно выстроенную цветовую схему на variables, которая позволяет, меняя один цвет, переключать все связанные с ним цвета. Например, таким образом можно в один клик поменять брендовый цвет и всю структуру цвета Primary..
Также хочу отметить концепцию с слотами внутри компонентов. Слот — это пустой контейнер у которого внутри свойство swap instance. Если у вас есть компоненты с произвольным контентом (например, карточка), то с помощью слота вы сможете размещать внутри произвольный контент, не детача компонент

Taiga UI
Дизайн система от Т Банка. Есть светлая и темная тема, а также крутой сторибук в котором намного больше компонентов и все можно потыкать

EPAM UUI
Очень структурный подход от команды EPAM. Почти у всех компонентов есть ссылка на гайдлайны использования и, помимо этого, есть отдельный файл с паттернами Радует то, что дизайн система не прекращает развиваться, совсем недавно вышло свежее обновление

А какие дизайн-системы вы считаете эталонными? Поделитесь своими находками 🤨

💬 Тултип

Зачем продуктовому дизайнеру учить After Effects

Круто, когда ты можешь не просто показать свои макеты, но и вдохнуть в них жизнь💞 Например, с помощью After Effects. Почему именно Афтер эффектс, а не Jitter или еще какой-нибудь аналог? Обычная история для подобных сервисов, это взять урезанный функционал афтера, накинуть пресетов, выкатить в онлайн и просить деняк. Возможностей они дают намного меньше, а реальные плюсы размыты.

Дизайнеру необходимо знать только малую часть от Афтера, чтобы уже делать что-либо интересное. Я изучал этот инструмент и раньше, но сейчас вернулся к этому и последние 2 месяца активно практиковался и теперь готов показать, что получилось, а также свои мысли по поводу базовых знаний для дизайнера, который хочет красиво показать свою работу

1) Интерфейс. За что отвечает каждая из панелей. Как устроена рабочая область (сетка, направляющие) и таймлайн
2) Ключевые кадры. Это база
3) Изинги, работа с графиком скорости и силы анимации
4) Маски. Как и в каких случаях применять
5) 3D объекты. Как вставить 3D объект в сцену, покрутить его. Как сделать 3D мокап
6) Камера. Для чего она нужна, как менять её позицию и тд
7) Expressions (bounce, wiggle), которые дают эффект пружинистости в конце анимации
8) Морфинг (когда один объект принимает форму другого)
9) Анимация текста и цифр
10) Как импортировать дизайн из Figma в After Effects
11) Экспорт проекта. Bodymovin для векторных анимаций
12) Как вставить в интерфейс анимированный стикер из телеги (Не обязательно, но прикольно)

Эти знания можно получить за 2-3 месяца практики, советуясь с чатгпт и смотря туториалы на ютубе. Таким образом вы сможете вывести навык презентации на новый уровень и украсить портфолио всякими свистоперделкам. Но, главный профит в том, что при проектировании решений вы начнете чаще думать про анимацию, так как будете понимать как это можно реализовать 🤔

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

А вы делали анимации в After Effects или других инструментах? Если да — кидайте свои работы, интересно посмотреть ☺️

💬 Тултип