Новый видос про 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
Завтра я и @og_mishgun устраиваем вайб-код баттл на стриме
Будем генерировать одну и ту же идею, а потом разбирать и прожаривать решения друг друга.
Вы тоже будете судьями: поможете понять, кто справился лучше.
Миша - фронтенд-разработчик с опытомдохуя лет. Активно использует иишки в работе. Сейчас работает в White Circle — французском стартапе, который занимается безопасностью в сфере AI.
Также поотвечаем на вопросы и пообщаемся про дизайн и фронтенд
Завтра, в 19:00 МСК
👉 Стрим будет тут: https://www.youtube.com/@artem_uxdesign
Будем генерировать одну и ту же идею, а потом разбирать и прожаривать решения друг друга.
Вы тоже будете судьями: поможете понять, кто справился лучше.
Миша - фронтенд-разработчик с опытом
Также поотвечаем на вопросы и пообщаемся про дизайн и фронтенд
Завтра, в 19:00 МСК
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥9
Сегодня жесткий стак собирается на стрим. К нам ещё придёт @danokhlopkov
Будем вайбкодить штуки с голосовым управлением 🐕🏎️
👉 Стрим тут: https://www.youtube.com/live/PdmV5MMCrjo?feature=share
🔔 Сегодня в 19:00
Будем вайбкодить штуки с голосовым управлением 🐕🏎️
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5
Я делаю видос на ютуб и встал вопрос об улучшении качества монтажа. А как это классно это делать - я вообще хз
Посмотрел парочку видео, где опытные челы делают крутые эффекты в After Effects. Но у меня нет столько времени, чтобы его вспоминать, хоть и знаю базу
И тут я вспомнил про Remotion. Сервис, который делает анимации через код, а потом дает возможность экспортнуть их в MP4.
Начал тыкаться. Получалось полное дерьмище. Настолько слопово, что показывать стыдно и я забил
И буквально 10 минут назад мне в X вылезает это чудо: https://remocn.dev/docs/getting-started/introduction . Чел сделал библиотеку с готовыми паттернами анимации на базе shadcn компонентов. Я просто скармливаю это Codex и получаю готовое видео в MP4.
Мой мир никогда не будет прежним. Теперь можно очень красивые анимашки для видосов генерить через КОД БЛЯТЬ! Перебивки делать очень просто, но какие же стильные они получаются. И ничего не надо рендерить... Amen🙏
P.S. А ЕЩЕ вы можете попробовать нарисовать раскадровку в Figma в своем стиле, потом через Figma MCP скормить это Клавдии или Codex, применить скилл Emil Design Eng для плавности, описать анимацию и на выходе будет вообще уникальное видео. Так я сделал с фиолетовой кнопкой.
Посмотрел парочку видео, где опытные челы делают крутые эффекты в After Effects. Но у меня нет столько времени, чтобы его вспоминать, хоть и знаю базу
И тут я вспомнил про Remotion. Сервис, который делает анимации через код, а потом дает возможность экспортнуть их в MP4.
Начал тыкаться. Получалось полное дерьмище. Настолько слопово, что показывать стыдно и я забил
И буквально 10 минут назад мне в X вылезает это чудо: https://remocn.dev/docs/getting-started/introduction . Чел сделал библиотеку с готовыми паттернами анимации на базе shadcn компонентов. Я просто скармливаю это Codex и получаю готовое видео в MP4.
Мой мир никогда не будет прежним. Теперь можно очень красивые анимашки для видосов генерить через КОД БЛЯТЬ! Перебивки делать очень просто, но какие же стильные они получаются. И ничего не надо рендерить... Amen
P.S. А ЕЩЕ вы можете попробовать нарисовать раскадровку в Figma в своем стиле, потом через Figma MCP скормить это Клавдии или Codex, применить скилл Emil Design Eng для плавности, описать анимацию и на выходе будет вообще уникальное видео. Так я сделал с фиолетовой кнопкой.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥13❤4
Новый видос как я переделываю AI Slop в нормальный дизайн в Кодексе
За 12 минут расскажу, что влияет на генерацию дизайна и что нужно стараться избегать. Рассказал про скилы, референсы и agents.md. Показал процесс от генерации дизайна до внесения правок,
Также показал новый продукт, где задеплоить сайт, чтобы он открывался и в РФ, и за рубежом.
Ссылки на эффекты из видео:
1. Эффект 3D наведения на карту - https://spell.sh/docs/tilt-card
2. Пульсация градиентов в контейнере карты - https://beam.jakubantalik.com/
🎬 Смотреть на YouTube (пролистай поиск и найди видео, надо для алгоритмов. Обложка может отличаться из-за A/B тестов)
P.S. Пока что мой самый тяжелый видос в плане монтажа, но кмк получилось хорошо. Буду благодарен за лайк и подписку!
За 12 минут расскажу, что влияет на генерацию дизайна и что нужно стараться избегать. Рассказал про скилы, референсы и agents.md. Показал процесс от генерации дизайна до внесения правок,
Также показал новый продукт, где задеплоить сайт, чтобы он открывался и в РФ, и за рубежом.
Ссылки на эффекты из видео:
1. Эффект 3D наведения на карту - https://spell.sh/docs/tilt-card
2. Пульсация градиентов в контейнере карты - https://beam.jakubantalik.com/
P.S. Пока что мой самый тяжелый видос в плане монтажа, но кмк получилось хорошо. Буду благодарен за лайк и подписку!
Please open Telegram to view this post
VIEW IN TELEGRAM
❤9⚡6🔥4