This media is not supported in your browser
VIEW IN TELEGRAM
Завайбкодил приятную анимашку открытия/скрытия сайдбара.
Сапортните плиз: https://x.com/artyoyom/status/2047043335022346713?s=20
Сапортните плиз: https://x.com/artyoyom/status/2047043335022346713?s=20
🔥3😁2
Media is too big
VIEW IN TELEGRAM
На этой неделе я первый раз поработал в качестве дизайнера-инженера над проектом виртуальных банковских карт.
Хотелось, чтобы они запоминались, но при этом выглядели лаконично, поэтому наконец-то добрался до использования Paper в реальной работе.
Сначала сделал в нём дизайн карт на основе встроенных Mesh Gradients и прокинул в код через MCP. И все это ваншотом. После использования MCP Фигмы это особенно приятно👌
Но в браузере карты выглядели слишком плоско, не хватало "вау" вайбика. Вспомнил про библиотеку spell.sh, где есть tilt-эффект при наведении на карту. И получилось то, что получилось)
Демо: https://mesh-card-demo.vercel.app/
➡️ Поддержите плиз в X: https://x.com/artyoyom/status/2053082429120782778?s=20
Хотелось, чтобы они запоминались, но при этом выглядели лаконично, поэтому наконец-то добрался до использования Paper в реальной работе.
Сначала сделал в нём дизайн карт на основе встроенных Mesh Gradients и прокинул в код через MCP. И все это ваншотом. После использования MCP Фигмы это особенно приятно
Но в браузере карты выглядели слишком плоско, не хватало "вау" вайбика. Вспомнил про библиотеку spell.sh, где есть tilt-эффект при наведении на карту. И получилось то, что получилось)
Демо: https://mesh-card-demo.vercel.app/
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11⚡2❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Прикольная интерактивность с QR кодом, когда коннектишь новый девайс к Codex
У QR для андройда такого нет🤓
У QR для андройда такого нет
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3
Paper убьет Figma?
Сделал новое видео на YouTube про инструмент, которым я пользуюсь все чаще и чаще.
Внутри:
• В чем отличие от Figma
• Обзор интерфейса
• Перенос макетов из Figma в Paper
• Анимированные шейдеры
• Перенос дизайна в код через Codex
🎬 Смотреть на YouTube
(пролистай поиск и найди видео, надо для алгоритмов)
Приятного просмотра
Сделал новое видео на YouTube про инструмент, которым я пользуюсь все чаще и чаще.
Внутри:
• В чем отличие от Figma
• Обзор интерфейса
• Перенос макетов из Figma в Paper
• Анимированные шейдеры
• Перенос дизайна в код через Codex
(пролистай поиск и найди видео, надо для алгоритмов)
Приятного просмотра
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10😁2
Завтра в 20:00 стрим с Даней @danokhlopkov
Лампово посидим и поразгоняем про вайб-дизайнинг. Поделюсь своим опытом вайб-кодинга со стороны дизайнера и постараюсь дать пользу разработчикам, которые хотят получать на выходе не просто рабочий, а действительно адекватный и стильный UI.
Что будем разгонять:
• Как я вообще начал вайбкодить и какие факапы словил по пути
• Paper, Figma MCP, Lovable, v0 и другие инструменты для вайб-дизайна
• Как переносить дизайн в код и выжимать максимум из Figma MCP
• Дизайн-инженеры и будущее UI: смогут ли разработчики делать не AI-слоп без дизайнеров
🎞 Стрим будет на YouTube канале Дани - youtube.com/@danokhlopkov
Лампово посидим и поразгоняем про вайб-дизайнинг. Поделюсь своим опытом вайб-кодинга со стороны дизайнера и постараюсь дать пользу разработчикам, которые хотят получать на выходе не просто рабочий, а действительно адекватный и стильный UI.
Что будем разгонять:
• Как я вообще начал вайбкодить и какие факапы словил по пути
• Paper, Figma MCP, Lovable, v0 и другие инструменты для вайб-дизайна
• Как переносить дизайн в код и выжимать максимум из Figma MCP
• Дизайн-инженеры и будущее UI: смогут ли разработчики делать не AI-слоп без дизайнеров
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9
This media is not supported in your browser
VIEW IN TELEGRAM
Figma анонсировала своего AI агента прямо на канвасе
Я думал анонсируют на их конфе "Config", но решили пораньше
Основные тезисы:
- Можно создавать макеты через промпт
- Работать с компонентами в дизайн-системе
- Создавать компоненты и их стейты
- Итерировать существующий дизайн на основе комментариев
🤓 Но кому какая разница, если сегодня стрим с Даней в 20:00 на его YouTube канале о вайб-дизайнинге-кодинге
Я думал анонсируют на их конфе "Config", но решили пораньше
Основные тезисы:
- Можно создавать макеты через промпт
- Работать с компонентами в дизайн-системе
- Создавать компоненты и их стейты
- Итерировать существующий дизайн на основе комментариев
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4😁2🔥1
https://www.youtube.com/watch?v=OzIyqIGS5qo
Газ знакомиться, общаться и обсуждать эти ваши вайбкодинги
Газ знакомиться, общаться и обсуждать эти ваши вайбкодинги
YouTube
ИИ не вывозит норм дизайн или это skill issue?
https://tg-me.sbs/danokhlopkov
⚡6
Всем спасибо, кто пришел на потоковое вещание! Как вам? Было ли полезно?
Обсудили:
• нужны ли дизайнеры, если 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 файлов
Обсудили:
• нужны ли дизайнеры, если AI уже умеет генерить интерфейсы
• почему AI slop всё ещё легко считывается
• как дизайнерам двигаться в сторону design engineering
• Figma MCP, Paper, Codex, Lovable, v0 и другие инструменты
• как переносить дизайн в код и где это пока ломается
• зачем агентам дизайн-системы, токены, референсы и нормальный контекст
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 файлов
Please open Telegram to view this post
VIEW IN TELEGRAM
YouTube
ИИ не вывозит норм дизайн или это skill issue? | Подкаст «Мой AI сетап»
Телеграм канал Дани: https://tg-me.sbs/danokhlopkov
Телеграм канал Артёма: https://tg-me.sbs/artem_designich
YouTube Артема: https://www.youtube.com/@artem_uxdesign
-------------------
Лампово посидели и разогнали тему того, что сейчас вообще происходит между дизайном…
Телеграм канал Артёма: https://tg-me.sbs/artem_designich
YouTube Артема: https://www.youtube.com/@artem_uxdesign
-------------------
Лампово посидели и разогнали тему того, что сейчас вообще происходит между дизайном…
❤12
Новый видос про Codex, shadcn и Figma
Хочу помочь снизить порог входа для дизов, которые столкнулись с проблемой как сетапить проект и прототипировать решения
Внутри
• что такое vibe coding в целом
• создадим и запусим проект на Next.js;
• как устроена структура файлов;
• соберём интерфейс из готовых компонентов на базе Shadcn
• перенесём дизайн из Figma в код через Figma MCP(перенесло ахуенно)
🎬 Смотреть на YouTube
(пролистай поиск и найди видео, надо для алгоритмов. Обложка может отличаться из-за A/B тестов)
Буду благодарен за подписку, лайк, коммент
p.s. Как вам обложка?
Хочу помочь снизить порог входа для дизов, которые столкнулись с проблемой как сетапить проект и прототипировать решения
Внутри
• что такое vibe coding в целом
• создадим и запусим проект на Next.js;
• как устроена структура файлов;
• соберём интерфейс из готовых компонентов на базе Shadcn
• перенесём дизайн из Figma в код через Figma MCP
(пролистай поиск и найди видео, надо для алгоритмов. Обложка может отличаться из-за A/B тестов)
Буду благодарен за подписку, лайк, коммент
p.s. Как вам обложка?
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10⚡9
Дизайныч | Артём Суслов
Новый видос про Codex, shadcn и Figma Хочу помочь снизить порог входа для дизов, которые столкнулись с проблемой как сетапить проект и прототипировать решения Внутри • что такое vibe coding в целом • создадим и запусим проект на Next.js; • как устроена структура…
This media is not supported in your browser
VIEW IN TELEGRAM
+1 причина свитчнуться с Claude на Codex - собственный иишный питомец
🗿7⚡3
А почему я должен?
Увидел пост в канале X с голосованием: пишут ли дизайнеры код.
Большинство ответили, что нет и это нормально. AI только стучится в наши двери.
Но чёрт дёрнул зайти в комментарии, и я удивился количеству «отрицал», которых возмущает сама идея, что дизайнер может что-то деливерить самостоятельно и хоть как-то прикасаться к коду.
Когда я уже освоил дизайн и поработал пару лет, то просто мечтал научиться кодить, чтобы пощупать собственную работу руками и экспериментировать. Делал первые шаги в HTML и CSS, пытался выучить сраный JS, который мне так и не поддался.
Поэтому для меня априори странно идти против технологического прогресса. Ты либо идёшь вместе с ним, либо рискуешь сильно отстать.
Я не говорю, что нужно отказываться от Фигмы и всем срочно становиться вайбкодерами с собственными продуктами
Но если в профессии становится скучно, почему бы не пощупать что-то новое? Может оказаться, что именно там тебя снова начнёт переть от работы.
Можете почитать ресёрч AI in Design 2026, цифры там интересные, может кого-то смотивируют переосмыслить свой вижн.
Увидел пост в канале X с голосованием: пишут ли дизайнеры код.
Большинство ответили, что нет и это нормально. AI только стучится в наши двери.
Но чёрт дёрнул зайти в комментарии, и я удивился количеству «отрицал», которых возмущает сама идея, что дизайнер может что-то деливерить самостоятельно и хоть как-то прикасаться к коду.
Когда я уже освоил дизайн и поработал пару лет, то просто мечтал научиться кодить, чтобы пощупать собственную работу руками и экспериментировать. Делал первые шаги в HTML и CSS, пытался выучить сраный JS, который мне так и не поддался.
Поэтому для меня априори странно идти против технологического прогресса. Ты либо идёшь вместе с ним, либо рискуешь сильно отстать.
Я не говорю, что нужно отказываться от Фигмы и всем срочно становиться вайбкодерами с собственными продуктами
Но если в профессии становится скучно, почему бы не пощупать что-то новое? Может оказаться, что именно там тебя снова начнёт переть от работы.
Можете почитать ресёрч AI in Design 2026, цифры там интересные, может кого-то смотивируют переосмыслить свой вижн.
🔥7❤5
This media is not supported in your browser
VIEW IN TELEGRAM
Новый видос про анимации через Codex
Сделал два эффекта при наведении, показал процесс от и до за 10 минут.
🎬 Смотреть на YouTube
(пролистай поиск и найди видео, надо для алгоритмов. Обложка может отличаться из-за A/B тестов)
Буду благодарен за подписку, лайк, коммент
Сделал два эффекта при наведении, показал процесс от и до за 10 минут.
(пролистай поиск и найди видео, надо для алгоритмов. Обложка может отличаться из-за A/B тестов)
Буду благодарен за подписку, лайк, коммент
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6
Ну что, господа, ждём авторизацию в App Store через приложение MAX?
😁3🔥1
Как за 5 минут загрузить всю палитру Tailwind CSS в Figma Variables и не страдать при выборе цветов для проекта
1. Коннектим MCP Фигмы в Codex или Claude. Авторизируемся через свой профиль.
2. Пишем промпт: «
3. Агент сам создаст переменные в Figma. У тебя появится большая цветовая палитра прямо внутри файла еще и сразу в Variables.
4. Готово. Теперь при переносе дизайна из фигмы в код агент будет видеть понятные токены. Также их можно будет привязать к семантическому слою дизайн-системы.
1. Коннектим MCP Фигмы в Codex или Claude. Авторизируемся через свой профиль.
2. Пишем промпт: «
Создай в Figma Variables актуальную палитру Tailwind CSS. Добавь все оттенки от 50 до 950». Также упоминаем Figma файл - просто вставляем ссылку на него. 3. Агент сам создаст переменные в Figma. У тебя появится большая цветовая палитра прямо внутри файла еще и сразу в Variables.
4. Готово. Теперь при переносе дизайна из фигмы в код агент будет видеть понятные токены. Также их можно будет привязать к семантическому слою дизайн-системы.
🔥6