Web-steps клуб

▶️ Новый курс в школе — «Локальный сервер WordPress». Для обучения конвертеру, разработке сайтов под клиентов и вайбкодинга нет необходимости сразу оплачивать хостинг. Можно запустить локальный сервер на своём компьютере. При этом будут работать все плагины и конвертер. В новом курсе также показал, как перенести сайт с компьютера на хостинг без потери данных. Курс состоит из 8 уроков на 40 минут просмотра. P.S. Новичкам смотреть ОБЯЗАТЕЛЬНО.

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

Если ты вайбкодишь и пишешь полезные решения или плагины — можешь делиться на форуме клуба. Там же можешь найти уже готовые полезные материалы для себя.

Новые уроки курса WtW7 доступны в школе

По мере записи уроков по конвертеру WtW7 начали наполнение справочника. P.S. Новые уроки в школе выходят каждый день.

Выкатил новый плагин меток WtW7 с AI. Пусть нейронка работает за вас 🤓

📎 Переделал дизайн плагина «Типограф» для Webflow. Теперь плагин в одной стилистике с основной панелью Webflow. И его можно разворачивать в более широкий режим для удобства. Обновить можно в школе. Скиры кину в коменты Webflow Typograf помогает быстро привести русский и английский текст в аккуратный типографский вид прямо внутри Webflow Designer. Плагин нужен веб-мастерам, дизайнерам и редакторам, которые работают с текстами на сайте и хотят быстро исправить кавычки, тире, неразрывные пробелы, единицы измерения, символы © ® ™, многоточия и другие типографские ошибки — без копирования текста во внешние сервисы. Как работает: 1. Выбираете текстовый элемент в Webflow Designer 2. Открываете плагин 3. Нажимаете «Загрузить из выбранного элемента» 4. Выбираете язык и нужные правила типографики 5. Нажимаете «Типографировать» 6. Проверяете результат в предпросмотре 7. Нажимаете «Применить к выбранному элементу» Плагин ничего не меняет автоматически — пользователь всегда видит результат перед применением. Обработка происходит локально внутри расширения, без сервера и внешних API.

🔥 AI-плагин расстановки меток WtW7. Переработал плагин по расстановке меток и добавил AI-функцию. Теперь метки можно расставлять нейросетью автоматически. Возможности кратко: — Можно подключать два провайдера нейросетей: https://openrouter.ai/ https://hubris.pw/ (оплата картами РФ) — Расстановка меток — одной кнопкой. Выбираете секцию (можно весь сайт) и жмёте кнопку. Нейросеть анализирует структуру и всё расставляет. Где надо — оборачивает в дополнительные DIV-блоки. — Есть возможность на сложных блоках использовать дополнительно Rules и Skills. — Промты, Rules и Skills можно добавлять свои собственные. Сейчас идёт финальное тестирование и запись уроков. На следующей неделе выкатим в школе. Ну это по моему лайк товарищи 🫶

Что нового вышло за сегодня: — Опубликовал новый плагин для расстановки меток конвертера WTW 7. Ссылка на раздел в школе с видеоуроками по настройке и исходниками. — Вышли новые уроки в курсе конвертера WtW7: 1. Установка и настройка темы конвертера WtW. Тема сейчас является одновременно и самим конвертером. 2. Прошли статичные метки: _text, _area, _editor, _link, _image, _group, _meta. — Появилось два раздела: «Плагины Webflow» и «Плагины WordPress». Пора разделить эти два каталога. На этом всё 🤓

Ребята навайбкодили качалку видео и музыки. Использовать на из сервере Поставить на свой сервер - github P.S. Скоро обещают Youtube добавить

🔥 WEBFLOW ВЫКАТИЛ MCP 2.0 И AI INSTRUCTIONS! В Webflow произошло важнейшее обновление для тех, кто использует нейросети (Cursor, Windsurf, Claude Code) при верстке. Вышел протокол MCP 2.0 (Model Context Protocol), а в настройках сайтов и воркспейсов появился новый раздел — AI Agent Instructions. Если раньше ассистенту приходилось каждый раз объяснять правила заново, то теперь это полноценная система управления ИИ-ассистентами. 🧠 ЧТО ТАКОЕ AI INSTRUCTIONS И КАК ЭТО РАБОТАЕТ? Прямо в Webflow (раздел *Site Settings / Workspace Settings ➔ AI Agent Instructions*) теперь можно создавать инструкции двух типов на языке Markdown: * Rules (Правила) — постоянно действующие «ограничители» для ИИ. Они работают всегда. Например: *«Всегда используй переменные design tokens, не хардкодь цвета, соблюдай BEM, используй семантичные теги»*. * Skills (Скиллы) — пошаговые инструкции и «плейбуки», которые ИИ подключает только под конкретную задачу. Например, отдельный скилл под создание компонента: как называть классы, какую структуру элементов делать и какие пропсы добавлять. 🚀 ЧТО НОВОГО В MCP 2.0? (САМЫЕ КРУТЫЕ ФИШКИ) 1. Больше НЕ НУЖНО держать открытым фоновое приложение Bridge! Раньше для работы MCP требовалось открытое десктопное приложение Webflow Bridge в браузере. Теперь большинство операций выполняется напрямую через API сервера без браузера. Соединение требуется только если ИИ нужно работать с активным холстом (canvas) прямо на ваших глазах. 2. Работа со сложными компонентами, пропсами и вариантами ИИ теперь умеет создавать полноценные Webflow-компоненты с редактируемыми свойствами (props), вариантами и слотами прямо из скриншотов или макетов. При этом он строго опирается на ваш Design System и переменные. 3. Смена цветовых палитр и Variable Modes в один клик ИИ может проанализировать существующую дизайн-систему, предложить альтернативные палитры (создав интерактивный превью-холст) и сразу применить изменения через режимы переменных (Variable Modes), не переписывая каждый цвет вручную. 4. Формы, медиафайлы и аналитика ИИ получил доступ к управлению заявками с форм (просмотр, выгрузка), автоматической оптимизации изображений (конвертация в WebP/AVIF) и аналитике трафика. Вы можете спросить ИИ на обычном языке: *«Какие страницы сейчас самые посещаемые?»* 5. Кастомный код, история изменений и роли Ассистент теперь умеет читать и писать Head/Footer код на уровне страниц и всего сайта, управлять ветками (Branches) и понимать по истории изменений, какие правки были внесены человеком, а какие — ИИ. Будем тестить.

▶️ Ловите обзор нового плагина меток для конвертера WtW7. В комментариях много было обсуждений — и вроде все ваши хотелки реализовал. Плагин получился реально удобный. И, конечно, учёл все пожелания по работе со справочником. Смотрим и пишем в комментарии — какие ещё есть идеи по доработке. Дальше уже начинаю выпускать уроки с ним по WtW7.

Пошли первые уроки по WtW7 https://school.web-steps.ru/student/lessons/4622

🚀 AI Нейросети без VPN и танцев с бубном. Самая большая боль, когда тебе надо что-то сделать в нейросети, а очередной VPN отвалился и не работает. И вообще пофиг — платный он или нет. Ловите расширение для браузера, которое навсегда снимет вашу головную боль с AI. ProxyPilot — менеджер прокси и маршрутизации. Разработчик — мой хороший знакомый Константин Романков. Суть расширения в том, что оно не блокирует сайты Роскомнадзора, чтобы не нарушать закон, но при этом решает вопрос доступа к AI. Использованы передовые системы подмены трафика, есть возможность самостоятельного добавления доменов. Работает просто: через ваш собственный прокси или бесплатный публичный пул идут только выбранные сайты — остальной трафик напрямую . Всё локально, без аккаунтов и слежки. P.S. Не забываем лайки🔥, так мы понимаем, насколько интересен материал.

🟢 Ловите расширение, которое поможет скопировать дизайн любого сайта в один HTML-файл. Для чего это надо: — анализ дизайна в нейросети с целью получения всей дизайн-системы — перенос дизайна в Figma — сгенерировать в нейросети свой сайт на базе скопированного Ссылка на GitHub. Как пользоваться — смотрим в видео. P.S. Не забываем лайки🔥, так мы понимаем, насколько интересен материал.

Бесплатный сервис для набора текста голосом. Работает на: — MacOS — Windows Механика простая: — назначаешь горячую клавишу — зажимаешь её и говоришь — отпускаешь — и текст уже набран в том окне, где стоит курсор https://lispr.ai/ru/

Генерация дизайна сайта в ChatGPT. Профессионально дизайном сайтов занимаюсь уже больше 15 лет. Но сейчас сам пользуюсь этим методом для быстрой разработки дизайна. При этом дизайн получается на 80% лучше того, что сейчас рекламируется в Яндексе. В видео показал очень простую схему: как за 30 минут разработать дизайн для автосервиса и перенести его в Figma для доработки и согласования с заказчиком. P.S. Только не воспринимать это как «О, круто, мне не надо ничего уметь в Figma, знать базовые концепции дизайна и вёрстки. Сейчас буду генерить в нейросети и рубить бабло». Это инструмент быстрой разработки концепции сайта — на что уходит порой до 80% всего времени дизайнера.

▶️ Вышел урок — «Как сделать кнопку формы с вложением». В Webflow нет возможности добавить иконку в кнопку формы обратной связи. А иногда это нужно по задумке дизайнера. На эту тему вышел урок в школе.

Новости по Конвертеру WtW. Настройка конвертера завершена. Сейчас начинается этап записи уроков в формате справочника по переносу сайта с Webflow на WordPress. Как это будет выглядеть. Это отдельные уроки по переносу разных типов секций: — статичная секция только с текстом и графикой — секция с повторяющимися элементами (loop) — слайдер — формы — табы — меню — опции — и так далее Что это даёт. 1. Гибкость. Когда показываешь в рамках курса (сборки определённого сайта), какие-то секции не попадают в этот курс. А в формате справочника можно постоянно добавлять новые решения. 2. Удобство как справочника. Порой надо найти, как сверстать и перенести определённый блок сайта — и для этого пересматриваешь кучу уроков курса. В формате справочника найти нужное — просто. 3. Поддержка. Если появляются новые решения в конвертере по меткам или надо показать новую секцию — выпускается новый урок в справочник, и всё. Без переписывания сотни уроков очередного курса. Означает ли это, что мы отказываемся выпускать курсы по сборке сайтов? Нет. Уже предварительно свёрстан и подготовлен сайт «Фрилансер» для записи курса. Но это больше как практика разработки, чем обучение по конвертеру.