Если вы до сих пор пишете код через

нейронку, там чат GPT, Clod, Deepsek в

браузере, то мы, конечно же, видим, что

код она пишет. Но у этого есть проблема,

потому что когда файл становится больше,

логики становится больше, честно говоря,

становится сложнее понимать, а как

вообще этим оперировать и как минимум

тратится время. Поэтому существуют

программы, которые позволяют прямо сразу

же в текстовый редактор интегрировать

весь код и с ним уже работать внутри с

агентом. И в этом видео я вам расскажу

про прекрасную программу, которая

называется Кодик. Это российская

разработка, которая была форкнута от

ВС-кода. То есть вы видите привычный

интерфейс здесь, но при этом это

полноценная программная среда, в которой

мы работаем с искусственным интеллектом.

И мы пойдём от простого к сложному.

Давайте для начала я сделаю

демонстрацию. У меня открыт первый

проект. Значит, здесь вправо вверху вы

можете нажать на кнопочку логотипа

кодика. И дальше мы начинаем

взаимодействовать с иишкой. Для первого

запроса я пишу обычными человеческими

словами: "Напиши мне игру Сап на HTML

CSS и JavaScript." И для этой реализации

я выберу следующую модель Google Gemini

3 Pro preview. Итак, мы заходим в

выполнить и нажимаем. Давайте смотреть

теперь, как на основе просто обычных

человеческих слов я получу результат.

Сперва идёт некое размышление.

Он анализирует проект. Причём интересно,

мы видим, что в процессе он даже создаёт

для себя собственный toли list. И кодик

это прекрасно отображает. То есть

вначале он хочет инициализировать

проект, написать HTML, CSS, JS-логику,

взаимодействие, игровой цикл. И

буквально через несколько секунд мы

получаем готовое приложение. Я нажимаю

сохранить. Всё. И теперь нам нужно его

запустить приложение и посмотреть, как

оно работает. Как видите, кода здесь

написано довольно-таки много. Так как

это forфоркод VS-кода, мы можем

использовать те же самые расширения. И я

рекомендую установить Open in браузеer.

Значит, это позволяет нам открывать в

браузере сразу же игру. И как видите, мы

получаем рабочий сапёр. Я проиграл здесь

сразу. То есть,

[смех]

блин, вот теперь он работает.

Значит, и это всё было написано сразу же

просто когда я обозначил словами, что

мне нужно. То есть теперь, на самом

деле, мы можем реализовывать огромное

количество проектов, просто используя

обычную логику и человеческий язык. Я

считаю, что это очень классный

результат, но, безусловно, это только

самая база возможностей, которые есть. И

давайте копнём немножечко вглубь. Теперь

смотрите. Так как кодик - это всё-таки

интегрированная среда разработки с

искусственным интеллектом, то помимо

окна взаимодействия с иишкой мы также

можем делать дополнительные вещи. Сразу

же покажу. Скажем, мне непонятна

строчка, например, в джаваскрипте. Вот

эта вообще не понимаю, что она значит. Я

её выделяю. Как видите, сразу же здесь

выделяется контекст. И дальше я перехожу

в режим спросить и спрашиваю. И давайте

здесь я поменяю его на флш, потому что

он просто будет быстрее работать и ест

меньше токенов. И мы видим, что он нам

сразу же отвечает, что этот блок кода

отвечает за перезапуск игры при нажатии

кнопку со смайликом, что происходит

пошагово. То есть мы даже не обладая

знаниями программирования в определённом

языке или технологии можем всегда

выделить нужный нам кусочек и спросить

сразу же искусственный интеллект нам

подскажет. Это очень сильно ускоряет

разработку. И поэтому теперь я предлагаю

углубиться сейчас в то, что мы можем

здесь делать, чтобы рассмотреть все

возможности, чтобы вы разрабатывали

класс. Для следующего примера я удалил

все файлы и буду генерировать новый

проект на NextJS. Это, по сути,

frontend/backend

framework, который позволяет создавать

уже полноценные такие комплексные

приложения. Сейчас это является одним из

ключевых стандартов в мире фронтда. И я

просто генерирую здесь это приложение и

дальше буду создавать из него прямо

готовую систему. Допустим, я хочу

сделать что-нибудь,

какой-нибудь сервис, который хранит себе

промты. Так как сейчас при работе с

искусственным интеллектом это тоже очень

важно м правильно структурировать.

Проект у меня сгенерирован, то есть мы

видим его базу. Далее я перехожу в окно

с яишкой и пишу следующий промт. В этом

непроекте я хочу создать приложение для

хранения списка моих промтов для EИ,

которые я смогу фильтровать, создавать и

категоризировать. И теперь смотрите,

прежде чем я нажму а работать, я перейду

в другой режим, который называется план.

То есть этот режим очень рекомендую для

тех промтов, когда вы что-то новое

создаёте, чтобы сперва вы побрейнрмили

вместе с искусственным интеллектом,

чтобы лучше выработать план действий. И

для этого давайте мы будем использовать

в данном случае тоже также Gemini 3 Pro.

Чуть позже я вам расскажу про модели,

потому что здесь, как видите, есть

китайские модели, и они обладают, на

самом деле, очень крутым функционалом,

но это будет в следующем блоке. Сперва

поговорим про план. Итак, после анализа

Нейронка мне выдаёт следующее: план

реализации, то есть он описывает, как он

видит создание всего этого приложения.

Настроить окружение и зависимости,

выбирает библиотеки Зустан Wind, merch.

В принципе, о'кей. А структуры данных,

работа со сторон, выбрал Зустан, поэтому

тоже нормально. Есть структура

компонентов,

разработка компонентов и сборка

страницы. Смотрите, а также остаются ещё

нерешённые вопросы.

А нужно ли предустановленные категории

или пользователь создаёт их сам? Для

первой версии сделаю фиксированный

список плюс другое. Мы можем

адаптировать этот файл, то есть

сказать, с чем мы согласны, с чем нет.

Предположим, сейчас я совсем согласен,

кроме вот этого нерешённого вопроса,

поэтому давайте я на него отвечу. Пишу

ему следующий запрос. Категории нужны

разработка, маркетинг-продукт, команда и

личная. И попросил его добавить ещё, а,

пять примеров промтов для дема.

Закидываю в промт. Пускай он всё это

интегрирует в итоговый план. Всё. После

этого я жму начать реализацию.

Видите, он переключился в режим

выполнить. То есть вот эти вот режимы,

да, пока он генерит, скажу спросить -

это режим, когда ему запрещено вносить

какие-либо изменения в файлы в принципе.

То есть он просто отвечает на вопрос и

работает как консультант.

План - это изначальный

brainstшторм проект, то, что мы только

что видели. А выполнить это, собственно

говоря, а конкретные действия, которые

он предпринимает. То есть сейчас он,

видите, он останавливает необходимые

библиотеки,

а разрабатывает план действий по

чек-листу и всё. Нам остаётся только

сидеть и ждать, когда мы получим готовое

приложение. Так вот просто это работает.

И, безусловно, у этого есть философская

подоплёка. Я рассказывал это на докладе

в конце двадцать пятого года про то, что

да, профессия разработчика, сейчас она

трансформируется крайне сильно.

благодаря вот таким инструментам. То

есть, если раньше ты получал деньги за

то, что ты сидел, разрабатывал вот эти

интерфейсы, там, архитектура и прочее,

то сейчас ты всё ещё занимаешься этим,

но уже с Ишкой. То есть ты делегируешь

ей, как нужно делать, как быть, и

ментально переходишь на такую плоскость

больше архитектора, инженера, визионера,

продукт-менеджера, да, который правильно

может настроить неронку, но плюс её

отвалидировать. Это, конечно же, требует

знания для более сложной разработки. Но

если вы, допустим, не из мира

разработки, то вы можете спокойно этим

пользоваться на относительно средних или

там простых приложениях. Итак, после

какого-то времени, значит, у нас

приложение было написано. В данном

случае мы написали довольно-таки большое

количество файлов с неронки. То есть

есть и промпты, есть UI компоненты,

а, 16 файлов, 723 строчки. Я нажимаю

сохранить. Всё.

И теперь давайте всё это запустим. Можно

ему сказать запусти. Ну вот он пишет

mpmandf, поэтому мы это в терминале

припишем.

И давайте смотреть, как это работает. У

нас есть полностью готовое приложение на

нексте. И смотрите, сразу же есть все

категории промтов, которые мы изначально

просили. Разработка, маркетинг, продукт,

команда личная. Они красиво

отображаются, мне очень нравятся.

А их можно, значит, копировать. Супер.

Их можно редактировать. Единственное,

что здесь, видите, шрифты, а-э, не очень

красивые. Мы сейчас это исправим. И как

бы на самом деле всё очень круто. Есть

хэштеги, есть способ создания промта. Ну

вот текста, да, здесь как бы не очень

красивые, поэтому давайте, собственно

говоря, ещё проверим функционал.

Да, он работает, просто не видные

шрифты. Делаем следующее. Покажу сразу

же лайфхак, который очень сильно

помогает вот в таких ситуациях. Я

выбираю какой-то пример и сразу же делаю

скриншот.

Копирую скриншот. Дальше перехожу в

кодик, вставляю сюда. Видите, она

вставляется картиночка. И говорю: "Всё,

пускай он работает". Смотрите, какой

есть тоже нюанс. А когда мы работаем в

одном окне, здесь присутствует

лимитированный контекст. То есть вот

сейчас, да, мы, э, проделали

довольно-таки большую работу, и вся эта

информация, она попадает в нейронку. То

есть,

когда я прописываю следующую задачу, мне

нужно убедиться в том, что она

не нарушит всю вот эту логику, потому

что если произойдёт переполнение

контекста, то могут быть, а, проблемы,

задачи может быть сложно реализованы и

так далее. Почему я в данном случае

решил добавить её в этом окне? Потому

что она по смыслу попадает. И я знаю,

что контекста здесь хватит. Но если бы

шла речь, например, про создание нового

функционала, то нужно было бы создавать,

соответственно, новое контекстное окно.

Безусловно, в кодик присутствует очень

классная история, когда контекст

забивается, он автоматически за этим

следит. Он берёт и делает суммаризацию

этого контекста. То есть он

самостоятельно вычленяет все основные

тезисы и ключи, после чего уже сокращает

его, чтобы контекст не терялся. Это

очень классная встроенная фишка, но тем

не менее хорошей практикой является

следить за тем, чтобы а вы новую задачу

делали в новом окне. Итак, проверяем. И,

как видите, всё это было исправлено.

Соответственно, вот по такой аналогии мы

можем сразу же создавать приложение. В

данном случае мне всё нравится, но

кажется, что светлая тема не самая

прикольная. А давайте-ка попробуем

добавить сюда тёмную тему. Да, я захожу

в новое окно, да, это считаю уже другая

задача. Пусть в данном случае работает у

нас флешка.

И говорю, это пока можно остановить. И

ждём, пока Ишка также реализует

следующую задачу. То есть, как видите, я

прямо даже в код не лезу, не смотрю,

ничего не делаю. Это очень классно, на

самом деле. В данном случае функционал

был написан довольно-таки быстро. Сразу

же продемонстрирую фишку, что, смотрите,

можно не только нажимать "Сохранить всё,

очевидно, да? Можно ещё отменить всё

либо посмотреть все изменения, которые

были". То есть для того, чтобы мы

понимали вообще и контролировали яишку.

Так как всё же мы с вами больше про deep

cдинг, нежели vipкодинг, но сочетаем в

себе лучшие части, да. Deepдинг - это

когда ты осознанно контролируешь

процесс реализации задачей иишкой, то

есть, что он вообще пишет. Вот. А не

просто слепо нажимаешь. В данном случае

выглядит всё о'кей. Я нажимаю всё

сохранить. И в итоге мы получаем вот

такой результат. Мне в итоге нравится

тематика, как она тёмная сделана. Да,

внутри всё адаптировано, опять же, кроме

категория.

При переключении обратно есть

определённые нюансы, но я думаю, вы уже

поняли принцип, по которому мы это

исправляем. То есть можно сделать и

скриншотом,

сказать, что мужик вот это только

поменьше, наверное, да, нужно тревочку

брать. Э вот это или там словами

описать, исправь. Вот. Ну, мы пойдём

дальше, поскольку мне сейчас важно

показать вам, как это работает. Теперь я

бы хотел поговорить про модели, которые

поддерживаются в кодике. Потому что,

если вы, например, работали с курсором,

то видели, что там совершенно иные

модели. И в этом я нахожу большое

преимущество. Во-первых, нахожусь на

официальном сайте, ссылочку оставлю в

описании. Здесь присутствуют в основном,

китайские модели, а, которые на текущий

момент кушают намного меньше контекста,

чем те же самые знаменитые опусы, хотя

они действительно очень хороши. А, либо

кодекс. Сейчас на момент записи это 5,3

версия последняя. Смотрите, значит,

присутствует список моделей, мы сейчас

про них поговорим, но обещали уже, что

буквально через неделю, скорее всего,

когда вы будете это смотреть, уже это

будет доступно, будет возможность

подключить, в том числе и ваши любимые

там кодексы, опусы, санеты, ну, и так

далее, и так далее. Тем не менее, те,

которые идут из коробки, следующее.

Значит, мы с вами сейчас работали в

основном с Gemini 3. Это нейронка от

Гугла. Она действительно хороша, у неё

большой контекст, и она служит для того,

чтобы точно рассуждать с контекстом и

более точно предпринимать решения.

Также моим фаворитом на текущий момент

остаётся GLM 4,7- это китайская нейронка

от компании Za. И на самом деле я её

использую как аналог опуса. То есть я

сравнивал очень долго, на протяжении

месяца примерно, как это работает всё. И

4,7 он, конечно же, немного хуже, потому

что, честно говоря, пока кроме лучше,

чем опуса 4,6 я ничего не встречал, но

тем не менее вот этот очень близок с

учётом того, что он кратно дешевле. И

опять же обещали в скором времени

анонсировать JLM5. Ждём с нетерпением. Я

напишу пост в Telegram-канале по этому

поводу с бенчмарками и сравнением.

Подпишитесь, если интересно будет

следить.

Дальше понятно. Deпсик он очень неплох

для того, чтобы решать какие-то более

точечные ультилитарные задачи. Ну,

вообще псик в целом неплох для написания

кода. Вот это внезапная нейронка,

которая является на текущий момент одной

из топовых вообще по логике. То есть,

если вам нужно сформировать архитектуру,

принять какие-то сложные вычисления и

так далее,

К2.5 супер классная. И также не хочу

обойти вниманием нейронку

от Квена, называется Quadr+. Она,

во-первых, кушает довольно-таки большой

контекст, а, во-вторых, она очень

классно служит для того, чтобы решать

быстрые задачи. То есть даже вот,

например, сейчас то, что мы разбирали

задачи с сменой темы, можно было

использовать QEN. То есть вот такой

набор, если подытожить быстрые задачи,

вот это вот лучшее качество кода, а вот

это для того, чтобы лучше планировать,

лучше понимать контекст. JN 4,7 также

идёт параллельно с Gemini 3 Pro prev.

Также я хочу вам напомнить, что,

безусловно, вот сейчас мир нейронак

модели, он очень быстро меняется. Как бы

не нужно заучивать там все подряд,

потому что с ума сойти можно будет в

итоге следите за обновлениями, выбирайте

одну, там, две самые важные модели,

пробуйте с ними, учитесь, и со временем

просто будет понимание там потом раз там

в 2 недели достаточно будет обновить

актуальную текущую информацию. Следующая

концепция, которую в кодике хочу

показать - это правила, и они на самом

деле очень важны. Приведу практические

примеры. То есть в интерфейсешки

мы нажимаем кнопочку "Нет, нету".

Правило кодик. И смотрите, присутствует

как

глобальные правила, то есть те правила,

которые потом будут работать в каждом

проекте, вне зависимости от проекта,

также и правила рабочей области. Давайте

сперва поговорим про глобальные правила,

то есть они все описываются в формате

MD. Вот на текущий момент, да, у меня

есть одно правило, я могу его

посмотреть.

И здесь присутствуют мои настройки,

которые я использовал до этого в

курсоре. То есть здесь отвечаем не

постоянно на русском. Приоритизируй

чистый, эффективный и поддерживаемый

код. Ну, вы можете на русском писать

неронки, без разницы, если честно. То

есть это супербазовые правила, да,

которые вполне себе хорошо ложатся на

глобальные. Давайте создадим ради

примера. Допустим,

я назову его план.

Видите, создаётся в корне кодик Rules,

да, вот это вот правило глобальное. И

здесь я напишу перед написанием кода

всегда показывай план действий. То есть

это позволит мне более точно

координировать свои действия вместе с

нейронкой.

Это правило будет работать в любом

проекте.

Но если мы хотим а сделать правило,

которое будет работать только в рамках

этого проекта, то смотрите, я выбираю

правила для рабочей области. Допустим,

назову его changes и опишу вот такое

правило: после каждого действия

записываю ключевые изменения filees.m.

Собственно говоря, давайте потестим, как

это работает сейчас. А для этого, для

демонстрации, давайте поработаем с и

здесь

я напишу следующий: Мт. Напиши мне

простую HTML-страницу, где будет

красивый слайдер на CSS и на jQuery, где

можно будет переключать три картинки мм

природы и чтобы они шли по циклу.

Кстати, очень удобная программа. По

сути, мне даже теперь писать не нужно

руками. Никакие промты. За меня всё это

делает неронко.

Оп. Всё, это переводится в текст.

Погнали. Мы сейчас тестируем наши

правила, как это вообще будет выглядеть.

Сначала создам план реализации. Опа,

видите, он уже пошёл в задаче. То есть

он выполняет как раз-таки глобальные

правила. Глобальные правила лежат где-то

там в корне.

А вот он, да, план. А локальные файлы,

видите, они лежат прямо здесь. То есть в

файле кодик, ну, и так далее. То есть

здесь можно будет использовать разные

команды.

Так, он всё завершил. Сохраняем. Значит,

давайте проверим сразу же file changes.

Видите? То есть при первой реализации

он, кстати, здесь можно сделать вот так

вот,

открыть превью и почитать нормально. В

этом преимущество маркдауна, то есть

создана HTML-структура, добавлены

CS-стиле, реализован JavaScript логика

на jQuery. Красавчик. Предыдущий,

следующий и так далее. Да, давайте

посмотрим, как это работает. Значит,

open default браузер.

И, ну, природа такая, конечно же, но, во

всяком случае, это работает. А, супер.

Давайте протестируем дальше. Значит,

наше правило. Здесь я напишу: "Сделай

так, чтобы фон задний был в тёмной

теме". Ну и вуаля, мы получаем красивое

приложение. То есть всё прекрасно

работает. Если посмотреть именно на

changes, то видите, то есть у нас

присутствует уже полноценный лог того,

что происходило. Ну и в случае чего мы

можем откатиться, да? То есть, например,

во-первых, мы можем редактировать

промты, да, или переходить на конкретную

контрольную точку, что тоже очень

классно. То есть сохраняется изменения и

стоит проекты. То есть если даже где-то

что-то не так сделал яишко, вы можете

всегда вернуться. Вот, например, а

вот так вот.

И всё.

Мы возвращаемся в старую версию. То есть

с этим тоже можно работать. Покажу вам

лайфхак. Значит, э-э, когда у нас

присутствует уже проект готовый, мы

можем взять и написать по нему

документацию. Смотрите, для этого я буду

использовать, э, папку Слайдеer, потому

что, собственно говоря, весь проект у

нас слайдер хранится. И здесь я скажу,

чтобы пускай это будет

Н тоже

напиши мне документацию по этому

проекту. Супер. Содержание есть

описание. Ну, то есть, видите, как бы

красота полнейшая даже на такой простой

проект. То есть теперь ваши проекты

могут быть в актуализированном состоянии

и лучше поддерживаться.

Поговорим про следующую важную

концепцию. Она называется MCP. И мы не

будем сейчас прямо подробно разбирать,

что такое MCP, как это работает, но,

грубо говоря, простыми словами, это

некоторый мостик между средой разработки

и внешними ресурсами. То есть

в кодике сделана очень классная система,

позволяющая работать с MCP. Приведу

несколько примеров. Ну и в

дополнительных материалах в Телеграме

тоже выложу прямо топовые MCPшки. Можете

зайти, забрать и использовать в

зависимости от ваших задач. То есть MCP

- это, в общем-то, некоторая сущность,

да, которую мы можем использовать для

того, чтобы расширять функционал кодика

как такового. И прикол в том, что у них

есть готовый целый marкетплейс, который

мы можем здесь получить. Собственно

говоря, давайте попробуем поработать с

этим.

А пускай пока этот проект останется у

нас. Значит, как это работает, да? Вот

здесь наверху, во-первых, безусловно,

есть настройки, да, где вы можете

посмотреть там модели, которые доступны,

всякие дополнительные фишки. Ну, в

принципе, по базе нормально всё было

установлено. И присутствует Marketпйс

MCP серверов.

А можно посмотреть на установленные,

можно посмотреть на те, которые

присутствуют по рейтингу. И меня будет

интересовать здесь это Hyperбраузер.

Смотрите, я просто его нахожу. это

продвинутый

сервер для того, чтобы предоставлять

возможности как бы скрепинга, то есть

забора данных с удалённого сервера.

Здесь я нажимаю унстановить

и просто смотрим магию. Нам даже не

нужно, вот если вы работали опять же в

курсоре, настраивать эти MCP сервера

самостоятельно, там в JSON лезть. Тут,

конечно же, тоже есть JSON, но здесь всё

это делают агенты. Это очень удобно, на

мой взгляд, потому что это очень похоже

по концепции на как бы экстеншены,

которые есть в в-коде классическом.

Работает быстро, просто фокусируешься на

функционале как таковом. А здесь вы

можете обратить внимание, что

для установки MCPшки мы используем файл

MCP settings, да, который присутствует в

а кодике. У меня уже здесь установлен

мой любимый MCP, который обязательный

для каждого из вас. Это контекст 7. Вот

этот прямо можете установить без

вариантов, потому что этот MCP, он

позволяет как бы агенту, прежде чем

что-либо реализовывать, брать актуальную

информацию про документацию. То есть

условно, а если вы без него будете

генерировать Next, он создаст там

четырнадцатую версию. Сейчас с ним он

будет там пятнадцатую версию. Это очень

такой прямолинейный пример, но тем не

менее. То есть жизнь разработчиков, она

существенно упрощается с контекстом.

Используйте его, пожалуйста. Значит,

смотрите, всё, э, браузер наш

установлен. Это было быстро и круто.

Дальше для того, чтобы

продемонстрировать, я вставлю сюда

ключик, чтобы он работал. И теперь

давайте попробуем что-нибудь с ним а

сделать. Ну, например, такой будет

простой вариант для демонстрации.

используй extract structure data и

забери топ-10 цитат из вот этого URL

адреса.

Давайте посмотрим, как он будет

работать. То есть, э, в чём смысл по,

видите, он обращается как раз-таки к MCP

Hyperбраузеer. Я это одобряю, да, и к

его функционалу structure data. Смысл в

том, что изначально агенты внутри

кодика, они не умеют лазить куда-то там

на цитаты, забирать информацию.

Вот. А мы расширили его функционал через

вот такой хаyпербраузер. И всё, теперь

это прекрасно работает. Ну давайте

сейчас посмотрим. Конечно, причём мы

видим как бы конкретные действия,

которые здесь происходят, то есть какие

аэ шаги он предпринимает. Это scratch

web pages, extract structure data. Нам

важен результат. И вуаля. Смотрите, мы

получаем здесь цитаты. Зачем это нужно?

Ну, например, когда вы разрабатываете

интерфейсы, а вы хотите получить данные,

информацию из документации или МОК

данные, да, с какого-то ресурса и вместо

того, чтобы копировать, просто,

пожалуйста, у вас всё это вот уже

сгенерировано. И это не генерация

идишки, это прямо конкретные факты с

нужного ресурса. Давайте приведу ещё

один пример. Значит, заходим в MCP и

устанавливаю здесь Redes. Как видите, у

меня установился readyс. Здесь тоже

очень комфортно. И что я делаю дальше? Я

создаю после этого глобальное правило.

Назову его Redis. И теперь скажу

следующим образом. Теперь всё, что

относится к Long termory

храни, пожалуйста, в редисе.

Давайте себе напишу MCP. Забыл.

Таким образом, мы теперь получаем

глобальное правило, которое берёт и

сохраняет какой-то наш контекст

уникальный, нашу там стилистику кода,

наши нюансы, детали или стилистику речи

прямо в редисе. И теперь наша работа с

кодиком становится более эффективной.

Теперь поговорим про следующую тему,

прежде чем идти дальше, это про основы

вайп-кодинга. У меня на канале есть

полный курс по вайп-кодингу, где понятен

алгоритм, но здесь я вам покажу самую

суть. И это очень важно при работе с

кодиком, в том числе, потому что

и яишка - это не какая-то коробочка,

которая за тебя делает всё. Нет, это

инструмент в первую очередь твоего

мышления. И поэтому есть очень простые

правила. Давайте начнём с промтинга. Вот

смотрите, перед вами прекрасный промт

"Сделай сайт для трекинга задач". Нет

контекста, технологий, пониманий, вот

эти, ну, то есть вообще ничего

непонятно. как бы их, конечно, напишет,

но это, скорее всего, будет не то, что

вы хотите.

Мы добавляем дальше некоторые детали,

которые позволят ему лучше понять.

Создай простое ту-ду приложение на

React. О'кей, теперь Иишка уже понимает,

да, что не нужно переусложнять там,

пожалуй, что будем использовать только

React, не какой-нибудь там сразу

redit и так далее.

Но это ещё не всё, да. Следующий этап

оптимизации, это создай туду приложение

на React.

И вначале предложи архитектуру, а потом

сгенерируй код. То есть, по сути, мы

здесь уже имитируем непосредственно

нашей стратегией план мод в котике, да,

это он за нас уже может сделать. Как

можно ещё улучшить? Создать ду

приложение на React плюс Typesриpt. Мы

добавляем здесь уже новую технологию, то

есть усложняем его. И сначала предложи

архитектуру, а потом сгенерируй код,

который должен быть готов к вставке в

Next Proе. Мы добавляем больше

контекста. То же, вы понимаете, да, это

сильная разница между первым запросом.

Можем ещё добавить следующую строчку.

Если тебе нужно больше контекста,

задавай вопросы перед генерацией. Это

одна из техника промтинга с иишкой,

когда мы не промтим что-то, а мы его

заставляем нас спросить по всем

необходимым данным. Ну и на самом деле

финальное очень полезно будет для

разработки. После генерации

проанализирую результат предложи

улучшения в архитектуре UX и

безопасности. Это тоже, что мы можем

делать. И конкретные действия с

непосредственно с кодингом, они выглядят

следующим образом. То есть, а, давайте я

пока верну самый первый запрос, чтобы вы

видели. А первое, как я и говорил, на

каждую задачу новое окно

не добавляйте сразу же множество задач в

один промт. То есть вы должны узко

специализировать ту задачу, которую вы

делаете. Ну и, безусловно, не забывайте

про то, что после каждого шага не нужно

сразу же стремиться и создавать новый

функционал. Попробуйте оттестировать,

подебажить, посмотреть, зафиксировать

результат и после этого опять же

начинать новое окно и работать с ним

дальше. Давайте вот попробуем с учётом

текущих нововведений переработаем промт,

который был со слайдером. Да, для этой

задачи я выберу в данном случае

продемонстрирую, как работает, и будет у

меня следующий промт. Мне необходимо

создать HTML-страницу, которая будет

написана HTML, CSS и JavaScript. И в

первую очередь я хочу, чтобы там был

слайдер посередине. Теперь смотри

задачи. И с точки зрения технологии мы

будем использовать jQuery для того,

чтобы проще автоматизировать и добавить

интерактивности.

Центральный блок, он должен быть всегда

фиксированной ширины. По краям этого

блока, то есть она должна быть полностью

обведена в картинку, должны быть

стрелочки, а при нажатии на которые мы

будем переключать на следующую картинку.

Они должны быть зациклены, то есть если

мы доходим до конца, значит, они должны

а переходить на сразу же на первую. А

должен быть headдер фиксированной

ширины, который по центру будет

отображать себе информацию о том, что

это мегаслайдер, который мы создали с

помощью мишot.

И после того, как ты всё это реализуешь,

а предложи мне несколько действий,

которые позволят мне улучшить данное

приложение с точки зрения архитектуры

UX.

Ну и всё, этого будет достаточно, я

думаю. Видите, какой прот у нас

получился красивый.

В следующем блоке я вам покажу, как ещё

можно этого будет улучшать, но тем не

менее практика есть практика. Вы должны

понимать, как это работает. Ну,

собственно говоря, вот и результат. Мы

получили его. Тут есть автопереключение,

есть мегаслайдер, созданный с помощью ми

стрелочки, как мы и говорили. Ну, в

общем, красота красотецкая. А, пробуйте,

будет классно. А мы переходим при этом к

другому блоку и создадим крутое

приложение. Итак, начнём с того, что мы

будем генерировать приложение на Next

15, React 19 и TW Wind. И мы возьмём

большое правило, ссылочку оставлю также

в ТГЭшке вместе с MCP. Мы вот это всё

копируем и переходим в кодик, где

добавляем проектное правило, назовём его

Next. Для того, чтобы изначально

запрограммировать

кодик, чтобы он чётко понимал, как это

работает, да? Это первый шаг есть.

Дальше нам нужно создать спеку для

будущего проекта. И для этого я буду

использовать курсор Pront Builder. Ну,

потому что курсор просто наиболее

захайпленная как бы идешка, но мы будем

использовать кодик. И давайте здесь я

напишу следующим образом. Мне нужно

составить сейчас спеку, по которой

идешка создаст полноценное приложение.

Что будет в моём приложении? В первую

очередь это будет Next пятнадцатый

проект, Style Win, React 19 и так далее,

которые служит для того, чтобы хранить

промты в своей системе. Мне необходимо,

чтобы были разные категории. Пусть это

будут изначально разработка,

программирование, дизайн, UX,

бизнес и личное. Э должен быть

динамический фильтр по этим категориям,

должны быть карточки этих промтов, куда

я могу зайти, их отредактировать,

отсортировать.

изменить промт и скопировать этот промт.

Дальше напиши, пожалуйста, спеку по

этому поводу и давай приступим.

И смотрите, что он пишет. То есть на

самом деле очень подробную историю

Product Overview и XUI requirements.

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

Я даже больше скажу, что мы должны это

редактировать, потому что это как бы нам

помогает изначально сгенерить, да,

какой-то шаблон. То есть роутинг тут

присутствует замечательные сортировки,

видите, очень подробно описаны. Там

bounce есть, что важно, стек,

ошибки. Ну, то есть супер кайф.

А database он хочет, ну, допустим, можем

изменить пока призму. Implementation

steps, то есть план реализации.

В общем, кайф, мне всё нравится. Значит,

что мы делаем дальше? Я перехожу в

кодик. в корне создаю

filup.m

и закидываю сюда вот это вот всё. Прежде

прежде, что очень важно, мы нам нужно

сгенерировать

проект Next. Почему это важно? Потому

что лучше именно инициализировать проект

самостоятельно, да, после чего уже, э,

пускай он с ним работает так быстрее,

надёжнее и так далее. Это тоже очень

важное правило. Запомните его. Вот.

Теперь мы пишем, значит, добавляем

контекст. И мы ему говорим: "Посмотри на

этот файл с PCUP. И дай мне знать, всё

ли понятно перед тем, как реализовывать

приложение". Он говорит, что всё

понятно, изучил спецификацию и готов

приступить к реализации приложения

Prompt World. А план действий. Ну всё,

погнали. И в итоге смотрите, какую

красоту мы получили. То есть это

приложение написано полностью по спеке,

всё работает прекрасно. И таким образом

сейчас и выглядит разработка. Поэтому я

надеюсь, что этот алгоритм вам был

полезен в связке с моим кодиком. В

финале этого видео хочу сказать, что

кодик на самом деле довольно-таки живая

экосистема, поскольку я с ними

взаимодействую прямо с командой

разработки. И в на сайте в Downloads мы

можем смотреть список изменений, то есть

что добавлено, что исправлено, что

улучшено. Ребят довольно-таки быстро

адаптируют. То есть вот, например,

сейчас мы видим, 6 февраля было

изменение, потом 3 февраля, да, это всё

как бы оперативно добавляется и по

чуть-чуть поэтапно приложение строится

до хорошего качества, тем более, что у

него есть

ряд преимуществ,

в частности для жителей России, чтобы и

не платить с помощью зарубежных карт. То

есть всё это доступно в российских

картах есть способы защиты данных,

которых нет даже в курсоре. Ну и так

далее, и так далее. По ссылочке в

описании к данному видео вы также

сможете получить удвоенные бесплатные

лимиты для того, чтобы самостоятельно

протестировать, как кодик работает,

какие у него преимущества, нравится вам,

не нравится, там с модельками новыми

поиграться. В общем, залетайте, пробуйте

и программируйте. Желаю успехов. M.