Как устроен AI Playground у дизов в Notion

В ноушене есть дизайнер (о чёрт это) Брайан, который любит вайбкодить и прототипировать. Ведущая с канала “How I AI” взяла у него интервью где он показал как устроен воркфлоу прототипирования и работа с их AI Playground. А я позабочусь о том, чтобы тезисно пересказать основные тейки в этом посте 😎

Что вообще такое AI плейграунд (aka AI песочница)?
Это место, где дизайнеры создают прототипы фичей, смотрят решения других и обсуждают их. Также это служит единым пространством для компонентов, типографики и иконок, чтобы не пересобирать всё у себя локально.

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

Тезисы:

1. Весь AI плейграунд - это просто Next.js проект.
В /apps директории у всех дизайнеров есть папки под своим именем со своими прототипами.

2. Функционал песочницы
а) Страница со всеми прототипами
б) Темплейты, которые нужны для ускорения работы и создния прототипа. Например, есть темплейт сайдбара ноушна. И если есть идея, что в этом сайдбаре можно улучшить/изменить, то не надо собирать его с нуля.
в) Иконки, типографика и компоненты
г) Можно добавить прототип из внешних ресурсов таких как Lovable, v0, Figma Make и вставить в общий список.
д) Есть прикольная функция при нажатии на кнопку “New”. Создается новая страница, а также с интерфейса можно сразу открыть файл в IDE.

3. /deploy скилл
При вызове скилла, запускается скрипт, который создает новую ветку в гитхабе, пушит коммит и деплоит на версель.

Если что-то пошло не так, то скрипт бесконечно перепроверяет ошибки деплоя и исправляет их пока не будут проставлены все чеки при деплое. Тем самым уходит мозгоебка и фрустрация из разряда “почему не деплоица 🆘😭😣❌💁😫”

Также в видео рассказывается про их работу с MCP Figma при переносе дизайна в код, но это уже сами можете посмотреть🙏⬇️

➡️Смотреть фулл

P.S. Мне кажется еще прикольно было бы иметь функционал фидбэка, где можно прямо в прототипе оставить комменты в проде, а другой диз их увидит.

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

Хотелось, чтобы они запоминались, но при этом выглядели лаконично, поэтому наконец-то добрался до использования Paper в реальной работе.

Сначала сделал в нём дизайн карт на основе встроенных Mesh Gradients и прокинул в код через MCP. И все это ваншотом. После использования MCP Фигмы это особенно приятно👌

Но в браузере карты выглядели слишком плоско, не хватало "вау" вайбика. Вспомнил про библиотеку spell.sh, где есть tilt-эффект при наведении на карту. И получилось то, что получилось)

Демо: https://mesh-card-demo.vercel.app/

➡️ Поддержите плиз в X: https://x.com/artyoyom/status/2053082429120782778?s=20

Прикольная интерактивность с QR кодом, когда коннектишь новый девайс к Codex

У QR для андройда такого нет🤓

Paper убьет Figma?

Сделал новое видео на YouTube про инструмент, которым я пользуюсь все чаще и чаще.

Внутри:
• В чем отличие от Figma
• Обзор интерфейса
• Перенос макетов из Figma в Paper
• Анимированные шейдеры
• Перенос дизайна в код через Codex

🎬 Смотреть на YouTube
(пролистай поиск и найди видео, надо для алгоритмов)

Приятного просмотра

Завтра в 20:00 стрим с Даней @danokhlopkov

Лампово посидим и поразгоняем про вайб-дизайнинг. Поделюсь своим опытом вайб-кодинга со стороны дизайнера и постараюсь дать пользу разработчикам, которые хотят получать на выходе не просто рабочий, а действительно адекватный и стильный UI.

Что будем разгонять:
• Как я вообще начал вайбкодить и какие факапы словил по пути
• Paper, Figma MCP, Lovable, v0 и другие инструменты для вайб-дизайна
• Как переносить дизайн в код и выжимать максимум из Figma MCP
• Дизайн-инженеры и будущее UI: смогут ли разработчики делать не AI-слоп без дизайнеров

🎞 Стрим будет на YouTube канале Дани - youtube.com/@danokhlopkov

Figma анонсировала своего AI агента прямо на канвасе

Я думал анонсируют на их конфе "Config", но решили пораньше

Основные тезисы:
- Можно создавать макеты через промпт
- Работать с компонентами в дизайн-системе
- Создавать компоненты и их стейты
- Итерировать существующий дизайн на основе комментариев

🤓 Но кому какая разница, если сегодня стрим с Даней в 20:00 на его YouTube канале о вайб-дизайнинге-кодинге

Всем спасибо, кто пришел на потоковое вещание! Как вам? Было ли полезно?

Обсудили:
• нужны ли дизайнеры, если AI уже умеет генерить интерфейсы
• почему AI slop всё ещё легко считывается
• как дизайнерам двигаться в сторону design engineering
• Figma MCP, Paper, Codex, Lovable, v0 и другие инструменты
• как переносить дизайн в код и где это пока ломается
• зачем агентам дизайн-системы, токены, референсы и нормальный контекст

🎞 Запись уже на канале у Дани: https://www.youtube.com/watch?v=fIEMOzz0_AI

🔗 Ссылки со стрима:
1. Emil Design Engineer Skill - полезный скилл для анимаций и дизайна
2. Paper - аналог фигмы, только лучше переносит дизайн → код
3. Impeccable - тоже скил для дизайна
4. Lovable
5. Web-хаптики
6. Кто такой дизайн-инженер
7. Agentation - MCP для точечного редактирования фронтенда
8. Evil Rabbit Shaders
9. Mobbin MCP - MCP, чтобы ваш агент знал лучшие паттерны UX/UI
10. Design.md app - либа design[.]md файлов

Новый видос про Codex, shadcn и Figma

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

Внутри
• что такое vibe coding в целом
• создадим и запусим проект на Next.js;
• как устроена структура файлов;
• соберём интерфейс из готовых компонентов на базе Shadcn
• перенесём дизайн из Figma в код через Figma MCP (перенесло ахуенно)

🎬 Смотреть на YouTube
(пролистай поиск и найди видео, надо для алгоритмов. Обложка может отличаться из-за A/B тестов)

Буду благодарен за подписку, лайк, коммент

p.s. Как вам обложка?