Курс по Figma — https://purpleschool.ru/course/figma-basics?utm_source=youtube&utm_medium=video&utm_campaign=pencil&utm_content=description В этом видео — полный разбор Pencil.dev: мощного и бесплатного AI-инструмента для создания дизайн-макетов с Claude Code или Codex. Вместо долгой ручной верстки — просто пишете промпты и получаете готовые макеты с пиксель-перфект точностью. Я покажу каждый шаг: от первого запуска и формирования технического задания до продвинутых фич вроде Variables, компонентов и экспорта в HTML. На реальном примере создадим лендинг с нуля и проверим, можно ли доверить дизайн нейросети. Приходите учиться! ❇️ Удобная платформа с AI-тренажерами, менторами и практикой (50+ курсов для разработчика, цены от 999р) — https://purpleschool.ru?utm_source=youtube&utm_medium=video&utm_campaign=pencil&utm_content=description 🎁 Приветственный бонус каждому, кто зарегистрируется на платформе сегодня — +300р Телеграм-канал с новостями веб-разработки, полезными материалами, возможностью участвовать в карьерных консультациях, мок-интервью и активным чатом на 4 000 ребят с самым разным опытом, присоединяйтесь! ✈️ https://t.me/purple_code_channel Бесплатные материалы 🗂 Карьерные пути для развития в разработке под вашу ситуацию — https://purpleschool.ru/skills/?utm_source=youtube&utm_medium=video&utm_campaign=pencil&utm_content=description 🗂 Курс «Основы разработки» — https://purpleschool.ru/course/code-basics/?utm_source=youtube&utm_medium=video&utm_campaign=pencil&utm_content=free_course 🗂 Курс «CSS Flexbox» — https://purpleschool.ru/course/flexbox/?utm_source=youtube&utm_medium=video&utm_campaign=pencil&utm_content=free_course Содержание: 00:00 — Интро 00:51 — О Pencil 02:01 — Старт работы 05:53 — Notes 07:33 — Редактирование 08:44 — Variables и компоненты 09:43 — Правки по блокам 10:29 — Адаптив интерфейса 11:26 — Доработка дизайна 12:16 — Создание HTML на основе 13:31 — Использование макетов Figma 16:13 — Аутро