ИИ-кодинг с MCP для GetCourse

В разработке с нейромартышками есть такое понятие, как MCP — это некий ИИ-консультант, которого создают для различных сервисов (например для Figma). Такой консультант в реальном времени может передавать вашему ИИ-агенту по разработке экспертную информацию о своем сервисе, помогая работать. Например, с Figma MCP достаточно скинуть ссылку на макет в чат нейроассистента, и он начнет верстать по макету

Оценить качество можно по ссылкам:

Макет
Результат

Так как это верстка по макету, интерактивные элементы пока что нерабочие. Результат был сделан с одного промпта + двумя дополнительными промптами и поправил небольшие визуальные баги. Любопытно, что нейросеть ошиблась там, где дизайн-макет собран неидеально и содержал подводные камни, которые не видно невооруженным глазом, но о которые обычно спотыкаются разработчики при верстке

Применяемые инструменты:
Cursor — приложение для ИИ-кодинга, поддерживающее MCP
Figma MCP — MCP от фижмы

На разработку потрачено 0 рублей 😏

Нейроагент может верстать как в синтаксисе GetCourse IDE, так и в любом другом

Добавил в GetTools (плагине для GetCourse, одна из функций которого — модерировать сообщества от спама) вывод общей статистики

📊 Статистика модерации

🚫 Забаненные упоминания (уникальные никнеймы спамеров):
Всего: 409
За 7 дней: 5

🗑 Удалённые сообщения:
Всего: 3611
За 7 дней: 77

И это притом, что этот мой бот модерирует сообщество игроков в Civilization VI на ~500 человек и чат по Taplink на 1360 человек. Защита от ботов самого телеграма оставляет желать лучшего 😂

К слову, GetTools (как и другие плагины) не перестает дорабатываться даже после инфраструктурных изменений. В этом году туда добавился контроль в чатах Вконтакте по группе GetCourse, улучшено качество модерации и других функций. Также благодаря GetTools можно частично или полностью вернуть поддержку нового sdk для доработки новых функций

Если в вашей школе по адресу *ваш_домен*/chtm/app/gc-tgproxy/ открывается приложение GetTools, то вам доступна возможность продления плагина и использования всех его функций 😎

Когда "прошел" вайбкодинг 😏

Дайджест изменений за последние месяцы

Работал не покладая рук с начала года, аж некогда было выкладывать посты в канале. Так что постараюсь срезюмировать все проделанное в одном посте 😎

✅ Сайт с портфолио получил пополнение. Теперь там пара новых проектов, где для реализации использовался GetCourse IDE в школах, где он остался
✅ С сайта портфолио можно перейти на страницу продления плагинов. Продление плагинов также доступно из самих плагинов
✅ Плагины были улучшены: GetTable теперь имеет виджет для экспорта старых ответов, интерфейс приложения стал проработаннее и понятнее, в GetTools были оптимизированы функции модерации и добавлен контроль пользователей в вк-чатах по группе GetCourse. В бесплатном виджете "актуальное расписание" добавилась возможность приобрести дополнения — редактора маскотов и расширенную статистику по рассылкам внутри аккаунта
✅ Для школ с IDE появилась новая возможность поставить систему статистики. Пока что она поставляется в виде готовой системы со стандартным набором функций и я дорабатываю его для каждой школы отдельно. Система собирает все события https://getcourse.gcext.ru/docs/events, а также фиксирует время пребывания на страницах, устройство пользователя, саммаризирует данные с помощью прямой интеграции с нейросетями (не берет наценку за токены)
✅ Написал несколько решений для ученицы кружка по разработке. Заметил, что и без IDE с нейросетями можно собрать довольно много крутого на GetCourse, что было попросту лень писать вручную раньше. Не исключено, что кружок будет перезапущен и будет содержать кодовые решения "со звездочкой"
✅ Прокачал бота-нейромодератора. Это мой первый проект, написанный с использованием нейросетей (но когда еще не было нейросетевых агентов). Вчера был улучшен механизм модерации, оптимизирован код и отчеты по модерации стали информативнее
✅ Доделал Telegram mini App для онлайн-школы на базе GetCourse IDE по фитнесу. В приложении есть трекер активности, начисление бонусных рублей в GetCourse за выполнение заданий, а после проблем с Telegram мы просто дублировали приложение в веб-версию
✅ Сделал для онлайн-школы прокси-сервер, которые позволяют в перспективе подключить к GetCourse-боту ИИ-бота, чтобы он одновременно выполнял и стандартные для GetCourse функции, и отвечал с ИИ для покупателей определенного продукта
✅ Начал работу над масштабным проектом. Вайбкодинг без использованием конструкторов или платформ

🛌 Верстальщики могут спать спокойно и не бояться конкуренции от нейросетей, пока на создание дизайн-макетов нанимают дизайнеров без опыта веб-дизайна

🤵 Верстка в вебе — это процесс воссоздания на реальной веб-странице того, что изобразил в макете дизайнер. Процесс это рутинный и кропотливый, поскольку каждый элемент нужно прокликать и посмотреть его свойства, чтобы написать эти свойства в виде кода разметки CSS

👨‍🎨 Figma этот процесс в свое время упростила. Платформа сама ведет учет расстояний, позиций, цветов и других свойств, чтобы разработчик мог копировать свойства, а не подбирать на глаз, как это было с макетами в фотошопе, к примеру

😒 Для автоматизации верстки нейросетями к Figma прикрутили возможность передавать структуру элементов и свойства в нейросеть, чтобы ей не приходилось верстать на глаз. Казалось бы, вот она автоматизация?

🤭"Как бы не так!" — скажет дизайнер, у которого кнопка отрисована как отдельно текст, отдельно иконка, фон состоит из отдельного прямоугольника и наложенными слоями картинок размерами 1920х1024 при размере самой кнопки 300х55. Текст при этом не вписан в границы кнопки, а расположен независимо от фона. Поменяли текст или размер шрифта — кнопка потеряла пропорции.

🦜 Эффекты наложения, которых не существует в вебе? Сюдааа. В идеале сделать несколько слоев таких эффектов, чтобы для воссоздания вида на глаз нужно было оркестровать сразу всеми. Красота требует жертв, и нет ничего красивее, чем разработчик в мыле и с выдранными волосами

😭 Элементы, которые могут меняться в размере в зависимости от контента (кнопки, формы, карточки) такой дизайнер сделает строго по размеру "рыбы". Притом выставляя размеры, он будет мышкой или тачпадом тянуть за край элемента, после чего отступы в каждом таком элементе будут разные и не кратные ничему. Почему отступы по четырем сторонам 23px 39px 18px 40px? "Я дизайнер, я так вижу" — будет ответ

🐸 Когда с такими макетами работает разработчик, зачастую проще исправить макет и сделать, чем объяснить заказчику или дизайнеру. Дизайнер будет утверждать, что "раньше никто не жаловался", "я не программист", а заказчику терки смежных специалистов тем паче не интересны. Хотя казалось бы, разве нужно быть программистом чтобы думать о том, что текст кнопки могут переименовать, из-за чего кнопка должна красиво адаптироваться под разный размер текста?

🐈 Когда с такими макетами работает нейросеть, она делает 1в1 как в макете. Кнопка сделана как 4 независимых элемента, а не единый компонент? Тогда так и будет. Что вебом не поддерживается, будет выглядеть как баг

🤔 Мораль сей басни такова: если вам придется верстать макеты с Figma с помощью MCP TalkToFigma силами нейросети — не всё, что по итогу выглядит криво, является галлюцинациями нейросети. Иногда галлюцинации имели место быть еще раньше, когда дизайнеру карточек товаров для Авито или рекламных макетов показалось, что он веб-дизайнер

Оформление для Школы органического земледелия на платформе GetCourse. Так как я уже много лет работаю с ШОЗ, помимо соответствия макету мне сказали "сделай как можно более автоматизированным".

Я постарался убрать из работы техспецов всю рутину, которая обычно съедает время между потоками и может привести к ошибкам из-за "замыленного глаза". Картинки для тренингов теперь можно загружать прямо из общего списка, не проваливаясь в настройки каждого урока по отдельности. Длительность видео в уроке считается автоматически. Для части уроков настраивается автоматический дедлайн и число дней на дедлайн. После пропуска дедлайна ответы учеников принимаются автоматически заранее настроенной отбивкой, экономя время кураторов

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

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

Сам пост на конкурсе в чате GetCourse

Не стал писать в конкурсном посте слишком подробно про используемые технолоджии, скажу лишь что для кастомных блоков я во многих местах теперь отхожу от использования IDE и использую способы, которые доступны в 100% аккаунтов GetCourse, за счет которой компоненты грузятся быстрее 😉

Теперь все чаще буду применять именно этот способ для создании кастомов для гк

Одно из моих оформлений попало в список финалистов 😎

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

https://t.me/getcourse_official/3689