Google Stitch AI: Дизайн Интерфейсов БЕСПЛАТНО

Привет. В этом видео я расскажу о том, как можно создавать дизайн интерфейсов с помощью EИ.

Это видео будет полезно вайп-кодерам, разработчикам, дизайнерам, предпринимателям, которые хотят запустить свой стартап с помощью нейросетей. И речь пойдёт о сервисе Sitch от компании Google. Очень интересный и перспективный инструмент, на мой взгляд.

На текущий момент он находится в бета-тестировании, и использовать его можно бесплатно, без каких-либо ограничений. То есть он, в принципе, сейчас бесплатный. С помощью этого инструмента можно делать дизайн как для десктопов, так и для мобилок. Есть много вариантов экспорта. В частности, можно экспортировать дизайн в Фигму, можно экспортировать файлы для дальнейшей разработки, перенаправить сразу в Google AI Studio и создать в нём уже приложение. Также есть другие варианты, но об этом мы подробнее поговорим чуть позже.

Давайте начнём с самого начала. Когда мы открываем Стиch, у нас появляется вот следующий экран. Здесь у нас есть поле для промта, в котором можно описать, какой дизайн мы хотим сделать, выбрать формат экрана для мобилок или веб. Здесь написано web, но никто не мешает вам делать и десктопные приложения. В общем, разница в том, что это мобильное расширение экрана, а это десктопное. Также здесь есть несколько моделей на выбор, с помощью которых можно генерировать дизайны, можно добавлять в контекст какие-то файлы. Это могут быть изображения, которые будут использоваться в качестве референсов. Либо можно указать URL веб-страницы и также использовать её в качестве референсов. Ну, кроме того, текстовые файлы здесь тоже можно прикладывать, например, Marкdдау с какой-то документацией или описанием задачи, может быть, схемой в ASQ формате для интерфейса. В общем, да, можно добавлять какие-то файлы в контекст. Также здесь можно выбрать дизайнсистему, чтобы создавать интерфейсы в заранее заданной цветовой палитре. И ещё и здесь есть режим Live Mode, про который поговорим чуть позже. Из основного интерфейса для создания нового проекта это всё. Также у нас здесь на экране есть список последних проектов и какие-то уже заранее заготовленные примеры, которые можно посмотреть.

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

Что интересно, здесь сразу при первом запросе помимо самой основной страницы генерируется ещё дизайн-система, в которой указаны цвета, шрифты, какие-то примеры элементов типа кнопок, каких-то прогресс-баров, меню, поиска. Не помню, генерируется ли этот набор элементов каждый раз одинаковый. Ну, в плане кнопки прогресс бары, меню и так далее, либо же он отличается. Но сейчас мы с вами попробуем создать дизайн и посмотрим. И что интересно, эту дизайн-систему можно также экспортировать. То есть экспортировать можно не только HTML-странички, которые потом использовать в разработке, но и дизайн-систему в формате MarkDown. Здесь в правом меню есть иконка палитры. Если мы на неё нажмём, у нас будет список используемых дизайн-систем. В данном случае она у нас только одна. Здесь мы можем нажать на вот эту стрелочку, перейти в раздел design.m. и скачать вот эту дизайнсистему в формате тоm. Можно так скопировать save. Он сохраняет изменения в этой дизайн-системе. То есть давайте ещё раз я сюда перейду. Здесь можно цвета менять, после этого нажимать "Сохранить", и дизайнсистема изменится.

Но давайте создадим новый проект, чтобы наглядно посмотреть на весь процесс взаимодействия с этим инструментом. Перед тем, как мы начнём писать сюда какие-то промты, хочу сказать, что это не волшебная кнопка, которая по одному предложению будет генерировать идеальный интерфейс. По крайней мере, пока что я надеюсь, что Google будут дорабатывать этот инструмент. Мне он кажется интересным и перспективным, но даже сейчас этим можно пользоваться, и это достаточно удобно. Но нужно понимать, что описывать свой запрос нужно как можно подробнее и точнее. К примеру, до того, как я создал вот этот дизайн, который в целом меня устроил, и я его оставил. Я пробовал сделать дизайн для того же приложения, у меня получалось примерно следующее. Вот так он выглядит. Но, на мой взгляд, он не совсем подошёл, хотя, в принципе, тоже прикольно. До финального интерфейса здесь, конечно, далеко. Это, правда, не лендинг, это дизайн интерфейса самого приложения, но тем не менее по стилистике, если посмотреть, да, он как будто бы чуть похуже, мне кажется. получился. Ну, кому как. Именно для этого проекта мне он показался не настолько интересен, как предыдущий дизайн, который я вам показывал.

О'кей, давайте вернёмся на главную страницу и поговорим о том, как писать сюда промты, что имеет смысл указывать. Во-первых, здесь есть примеры, то есть по ним можно покликать, и здесь генерируется какой-то короткий промт. Естественно, это сработает. То есть он дизайн нам сделает. Насколько он будет интересный? Вопрос хороший. Давайте просто запустим и сделаем. Посмотрим, что у нас получится. То есть в данном случае мы какой-то landдинing page генерируем. Нажимаю отправить. Как я уже сказал, сервис бесплатный, но здесь есть ограничения на использование. Его, на самом деле, хватает для персонального использования. Так точно. Я потратил 52 кредита из 400. При этом, ну, я сидел тут, тестировал, разные промты отправлял. То есть по ощущениям этих кредитов должно хватать, чтобы сделать там, ну, несколько проектов точно можно сделать, может быть, даже больше.

Итак, у нас в первую очередь сгенерировалась палитра. Вот эта дизайн-система. Набор элементов здесь такой же. Он, конечно, по стилистике отличается, цвета отличаются, шрифты, скругление углов. В общем, дизайнсистема отличается, но в первую очередь генерируется она. После этого на основе этой дизайн-системы Стич создаёт уже страницу. Вот так выглядит процесс создания этой страницы. Сейчас мы немножко подождём и посмотрим, что у него получится. Вот такой дизайн мы получили. На самом деле очень неплохо. Я думал, будет похуже. Ну, как-то менее интересно. Здесь Hero Action выглядит достаточно интересно и эстетично, на мой взгляд. Картинка классно дополняет в общем-то этот блок. И, кстати, про картинки. Здесь их можно также генерировать. В моделях можно выбрать нанобана и попросить сгенерировать либо заменить какую-то картинку. Давайте, кстати, это сейчас и сделаем, раз уж мы про это заговорили. Вот эту картинку я всё-таки менять не буду, но давайте вот эту поменяем. Для этого нужно сделать следующее. Нажимаем на иконочку карандаша. И теперь нам нужно попробовать выделить этот блок. Да, вот он. То есть мы можем на него нажать, он выделится. И здесь мы можем нажать edit with AI. У нас добавится это изображение в контекст. И здесь мы можем попросить его изменить это изображение. При выбранном режиме редактирования у нас при наведении подсвечиваются какие-то блоки, которые можно выделить и прикрепить в контекст. А выделяются они на самом деле не все. Допустим, если посмотреть на последний вот этот экран, то здесь выделяется текст, но не выделяется основной вот этот карточка полностью. Для этого можно использовать вот этот инструмент Mark. Когда мы его выбираем, мы можем вот так вот выделить какую-то зону. Она не всегда сразу здесь сейчас отрабатывает. Не знаю, с чем это связано, но, в принципе, если подождать немножко, он должен вот отследить именно элементы, которые попадают под эту зону. У меня это пока что происходит с небольшой задержкой, но тем не менее это работает. Вот сейчас у нас получилось выделить несколько блоков. Сейчас можно их подключать и попробовать выделить заново. Я думал, он моментально это сделает, но всё равно придётся немножко, видимо, подождать. Сейчас он выделил только один блок целиком вот с этой карточкой. Таким образом мы можем добавить его целиком. Ну, тут второй какой-то добавился случайно, но его можно просто отключить. Вот у нас, во-первых, подсвечивается тот блок, который мы выделили. Ну, во-вторых, он добавляется сюда в контекст, и мы можем писать сюда какие-то промты для изменения этого блока. Пока что уберём его из контекста и попробуем отредактировать изображение. У меня нету конкретных каких-то претензий к этому изображению, просто хочу другое, поэтому напишу ему generate new image и отправим.

Стич сгенерировал нам изображение, но сделал он на самом деле не то, что я от него хотел. Он сделал целиком изображение всего экрана. Он не поменял здесь картинку, а просто сгенерировал изображение этого лендинга. То есть в данном случае есть разница между вот этими двумя секциями. Вот эта страница, мы её можем растягивать, и у нас адаптируется вёрстка под ширину и высоту, которую мы здесь устанавливаем. То есть, да, вот вы могли заметить, что картинка двигается относительно того, как я изменяю размеры этого окна. В случае же с изображением ничего такого нету и, естественно, ничего адаптироваться не будет. То есть это просто изображение, которое вставлено у нас в проекте в стиch. И никакой вёрстки здесь нет. Мы его можем скачать, нажав на more и Download. У нас скачается изображение. Вот, собственно, оно. Но, кстати, кроме изображения у нас скачался также файл diign.md. - это дизайнсистема нашего проекта. Давайте всё-таки попробуем изменить это изображение. Ещё одну попытку я сделаю. Опять же выделяю здесь изображение, нажимаю Edit with AI. Здесь я переключу модель на трифш, потому что последний пункт редизаign - это нано банана, она генерирует именно изображение. Возможно, проблема была в этом, но изображение перегенерировать точно можно. Я это делал. Давайте напишем здесь change this image. Может быть, так он поймёт нас лучше. И подождём, пока он закончит обработку этого запроса.

И смотрите, что произошло. Он сначала сгенерировал изображение, а потом сгенерировал новую версию вот этого экрана и поместил сюда это изображение. У него это получилось. И здесь хочу обратить внимание на то, что все файлы, которые генерируются стичем, они появляются вот в этой области, в этом интерфейсе нашего проекта. То есть в данном случае у нас появилось новое изображение. Он добавил его как изображение, потом уже создал с ним какой-то экран. И точно так же, если мы сюда будем добавлять в контекст какие-то изображения либо текстовые файлы, они тоже будут появляться вот в этой области, и мы сможем на них посмотреть.

О'кей, дизайн у нас получился неплохой. Я думал, что результат будет похуже. Давайте посмотрим, как его можно быстро экспортировать. Выделяем какой-нибудь экран. Допустим, вот этот нам понравился. Нажимаем на экспорт. Здесь можно выбрать Фигму и нажимаем конверт. Это займёт немного времени. Фигма сгенерировалась. Дальше нужно нажать на кнопочку copy. У нас скопировался этот экран в буфер обмена. Открываем Фигму, нажимаем вставить, и у нас появляется здесь вот такой экран. Да, тут немножко какой-то косяк с вот этим изображением. Слишком сильно оно растянулось, но в остальном всё выглядит хорошо, так как у нас это было на дизайне в Стиче. Здесь можно просто поправить. Нет, нельзя. Ну, короче, вот можно вставить это в Фигму и дальше с этим что-то делать. Если вы дизайнер, то вы можете генерировать здесь какие-то концепты и после этого переносить их в Фигму, дальше с ними работать.

Давайте посмотрим на другие опции. В экспорте можно открыть VII Studio. Давайте сразу это сделаем. Нажимаю Build with AI Studio. У нас открывается интерфейс Google AI Studio. В контекст добавляются файлы из Стича. Сейчас у нас догрузится последняя картинка и пишется сразу промт для генерации. У нас начинается процесс генерации в AI Studio, и он займёт какое-то время. Пока что вернёмся обратно к нашему проекту. Что у нас здесь по экспорту есть ещё? Jees - это какой-то AIгент для разработки. Я им не пользовался, но если вы его используете, то да, здесь есть такой вариант. Давайте попробуем экспортировать в ZIP. Посмотрим, что у нас экспортируется. Здесь у нас картинка с нашим экраном, потом MD файл с описанием дизайн системы и есть файл код HTML - это веб-страничка, которую можно открыть и посмотреть на эту страницу. Дальше с этой веб-страницей можно уже работать. Можно использовать эту веб-страницу как референс и дальше на её основе создавать уже веб-приложение или сайт или что вам там нужно. Может быть десктопное приложение. Эту страницу можно загонять в контекст нейронки и просить её делать что угодно. То есть в этой странице, в принципе, содержатся уже все стили, содержится вот эта вся информация, которая здесь написана. Дальше всё зависит от ваших задач. Файл design.m. На самом деле очень классно, что он генерируется и его можно засовывать в документацию и использовать с ней неронкой. То есть, чтобы и агенты основывались на описании вот этой дизайн системы и руководствуясь ею, генерировали интерфейс.

Давайте посмотрим на оставшиеся пункты в экспорте. И обратите внимание, что если мы не выбрали никакую из секций, то экспорт у нас недоступен. То есть нам надо обязательно выбрать какой-то экран. Дальше уже у нас появляется возможность его экспортировать. С ЗИПом разобрались. Код to clipboard. В общем, можно скопировать код этой страницы. Давайте перейдём в курсор и просто посмотрим, что у нас там скопировалось. То есть это HTML-страница. Мы скопировали HTML-код этой страницы. Если мы её сейчас сохраним, допустим, файл Landing 2 HTML, то мы сможем его открыть. У нас получится, собственно, та же самая страница, которую мы до этого экспортировали в ZIP архиве. Также у нас здесь есть MCP, про него чуть позже поговорим. Это для разработки. можно в свою дели иагента добавить MCP стича, и у него будет доступ к вашим проектом. Он сможет скачивать веб-страницы от ваших экранов, сможет отправлять запросы на редактирование в стиче и генерацию новых экранов. На самом деле, что касается генерации и изменения, если вы там разрабатываете свой продукт, как будто бы в стиче это удобнее делать, чем через MCP. Потому что, когда мы работаем уже с инструментом для разработки, то мы можем напрямую в нём уже всё это редактировать. Если мы через MCP отправляем запрос на редактирование в Стиче, это получается, что нам нужно сначала отправить запрос отредактировать что-то в Стиче, потом снова скачать код из Стича и уже дальше его использовать. Ну, как будто бы лишнее действие. Но тем не менее есть такая опция. И то, что Google добавили сюда поддержку MCP- это очень классно.

В экспорте у нас осталось два пункта. Это Project Brief. Ну, давайте посмотрим, что он сгенерирует. На самом деле я пробовал, у меня как будто бы не то он сделал. То есть я, по крайней мере, когда выбираю Project Brief и вижу вот здесь описание generate a product requirement document for your project. То есть я ожидаю в результате PRD для моего проекта готовый. А у меня, когда я это делал, он какой-то шаблон сгенерировал, не относящийся к моему проекту. Поэтому не знаю, посмотрим, что у него получится сделать сейчас. Вот он его сгенерировал. Ну, кстати, сейчас у него получилось сделать это хорошо. То есть это уже документ, который связан напрямую с нашим проектом, который мы тут разрабатываем. И тут уже про наш проект, в общем-то, написано. Это текстовый файл. Обратите внимание, он тоже появился вот в этом поле, в общем поле нашего проекта. И мы можем на него кликнуть и даже поскролить. Поскролить пока не могу. А, наверное, нужно другой инструмент, да? Если выбрать вот эту стрелочку, то мы можем дальше уже его скролить. И это тоже очень круто, потому что мы можем взять этот product requirement document, взять нашу дизайн систему, которую мы сгенерировали со ститчем тоже, ну, вот эту экспортировать и в zipрхиве она экспортируется, и уже с этим идти к нейронке и просите её разработать проект. Но это классно, конечно, стоит это всё прочитать. То есть, ладно, мы сейчас на примере это делаем. Понятно, что тут не принципиально, что написано в Product Requirement Document, но когда вы делаете свой проект, который вы хотите там дальше публиковать, то, естественно, этот файл стоит прочитать. И воспринимать его стоит скорее как шаблон, а не готовый документ. Но тем не менее это удобно, то, что можно сразу сгенерировать Product Requirements document просто по дизайну какого-то экрана.

И давайте посмотрим на последний пункт. Это instant Prototypes. Это даже не столько экспорт, хотя не знаю, может быть, и экспорт. В общем, он генерирует прототип, который можно покликать, посмотреть, как он будет работать, кому-то скинуть. Ну, на самом деле, да, тоже классная функция. Сейчас он сгенерирует, покажу, как это выглядит. У нас открылся прототип. Мы его можем поскролить. Вообще-то говоря, мы его даже понажимать можем. То есть какие-то элементы здесь уже интерактивные. При наведении усылок меняется цвет. Кнопочки вот при нажатии тоже в размере меняются какие-то другие элементы. В общем, это уже не статичная картинка, это уже похоже на прототип. Помимо того, что его можно здесь поскролить, посмотреть, как это будет выглядеть, его можно также отредактировать. Для этого переходим в режим вот здесь во вкладке. И дальше нам нужно выбрать какой-то элемент, который мы хотим отредактировать. Редактирование здесь отличается от того редактирования, которое было до этого. То есть в данном случае оно относится именно к прототипу. И, соответственно, некоторых вариантов редактирования здесь нет, но мы можем отредактировать текст сами прописать сюда какой-то заголовок ссылки. Также здесь у нас есть пункт change with AI. Также мы можем изменять какие-то элементы с AI. Нажимаем, у нас открывается поле для промта. Всё, классно. Но показать я хотел ещё вот что здесь можно добавить другой экран, который мы также генерировали в этом проекте. Ну, либо его сгенерировать с AI, либо добавить существующий экран. Давайте я добавлю существующий экран. В принципе, у нас их всего два. А вот он, второй экран. Отличаются они пока что только тем, что у них картинка здесь разная. И мы их можем перелинковать, например, в режиме редактирования. Пускай ссылка events, она у нас будет соединяться с вторым экраном. Для этого вот здесь нужно выбрать экран. В принципе, у нас здесь один, поэтому вариантов других нет. Можно выбрать эффект перехода. Ну, например, push Slft. Их тут не очень много. Допустим, оставим этот. И также здесь есть ещё разные состояния. Мы можем добавить какое-то новое состояние, например, ну, disabled, например, пусть будет. О'кей, добавили. И теперь у нас здесь появляется селектор с состояниями. Default disabled. Ну, честно говоря, пока что не знаю, чем они отличаются. О'кей, тут можно нажать на Apply Connection, либо он там сам применится. И теперь мы можем вернуться во вкладку Preview. Если мы нажимаем навеent, у нас открывается там предыдущая страница. И причём, кстати, home у нас автоматически привязался к первому нашему экрану. Ну вот так можно странички менять. То есть интересная штука в том плане, что можно набросать какие-то экраны, сделать между ними перелинковку и скинуть этот прототип, посмотреть, я не знаю, заказчику или кому-то ещё. Чтобы посмотреть на работу прототипа в полном экране, они в режиме вот этого редактирования, нужно нажать на вот эту кнопочку Open in Utap, и у нас откроется страница уже полноценная с этим экраном. А, ну нет, не с этим экраном. Открывается всё ещё страница с вот этим предпросмотром. Но если мы нажмём вот здесь на open direct link, то откроется уже в полном экране. И здесь мы можем также поскролить, посмотреть, прикинуть, что нам нравится, что не нравится, переходить по ссылкам. И, в принципе, как прототип, очень даже неплохо. Также здесь есть кнопочка для просмотра QR-кода. По ней можно открыть эту страницу, например, на мобильном устройстве, посмотреть, как это с мобилки выглядит. Это что касается режима превью и вот этого прототипирования. И по поводу экспорта это всё. Про MCP тоже поговорим, просто чуть попозже. Что касается экспорта, это все варианты, и на самом деле этого уже достаточно. То есть дизайнера можно экспортировать эти экраны в Фигму и продолжать в них работать. А для вайп-кодинга и разработки можно экспортировать в формате ZIP, нажимать экспорт и использовать дальше в своём проекте. Это очень классно. То есть дизайнсистема генерируется, генерируется пример страницы. Можно их сгенерировать там несколько для разных страниц, разных экранов и потом использовать это уже для разработки полноценного приложения. Это круто. Кроме того, да, здесь есть вот варианты AI Studio и Jules, которых как раз можно сразу начать разработку. Я, честно скажу, не пользовался ни тем, ни другим, но давайте посмотрим, что у нас получилось в AI Studio. Мы же всё-таки туда отправили на генерацию этот проект. И давайте развернём на весь экран, чтобы посмотреть страницу, как она у нас получилась. Ну, здесь уже поинтереснее. То есть у нас, во-первых, тут какие-то появляются эффекты появления этих элементов. В принципе, неплохо. То есть, если делать какой-нибудь OS, то как будто бы уже на текущий момент он мог бы быть готов. Вот. Но также давайте глянем, что у нас на мобилки. На мобилке, ну, в принципе, пойдёт. Тоже вполне нормально воспринимается информация. Мобилка сделана корректно. Но если нам нужно сгенерировать именно дизайн мобильной версии, то для этого выбираем соответствующий экран. В верхней панели переходим во вкладку Generate. И здесь есть пункт Mobile Appsion. Давайте на него нажмём. и Стич нам сгенерирует мобильную версию этой страницы.

И давайте посмотрим, что здесь есть ещё вот в этой верхней панели. А, во-первых, здесь есть генерация variations, то есть это вариации какой-то страницы. Это, вообще-то, прикольный функционал, потому что если вы смотрите на дизайн, вам что-то не нравится, но вы толком сформулировать, что именно не можете, то можно сгенерировать просто несколько вариантов. И давайте это тоже сделаем. Сейчас я перейду во вкладку Generate, нажимаю на Variations, и у нас открывается новый интерфейс для этого. Во-первых, мы можем указать, сколько вариаций нам генерировать. Во-вторых, мы можем изменять степень креативности. То есть либо просто подредактировать, либо вообще кардинально всё переделать, переосмыслить и что-то среднее между этими двумя крайностями. Мы также можем здесь задать какие-то инструкции для обновления дизайна в вариациях и указать, какие конкретно элементы мы хотим, чтобы были изменены. При этом, если ничего здесь не указывать, то он по умолчанию вообще всё будет менять. То есть не будет учитывать выбор этих элементов. А давайте это сделаем. Я напишу здесь promptт сделаю новую версию с wua эффектом, чтобы это выглядело уникально. А пускай он сделает три вариации. Я поставлю здесь максимальную креативность и не буду ничего выбирать из вот этих элементов. Пускай он всё переделывает, всё переосмыслит. Нажимаю generate versions. И сейчас у нас начнут начнут генерироваться эти три вариации. А тем временем у нас уже закончилась генерация мобильной версии. Вот такую сейчас, секунду. Вот такую мобильную версию он нам создал. Ну, в принципе, пойдёт. Не знаю, вот этот блок, наверное, стоит подправить, чтобы здесь было поменьше пустого пространства. Чуть-чуть подвинуть вверх, но это уже, не знаю, дело вкуса. В принципе, с этим можно работать. Причём работать можно как в Стиче, так и в Фигме, так и в вайпкодерских всяких приложениях, типа курсора, клодкода и так далее. Чтобы изменить что-то в стиче, напоминаю, у нас здесь есть карандашик. Мы можем выбрать какой-то элемент для редактирования. Они у нас здесь подсвечиваются, и мы можем выбрать и изменить его. Для выбора секции у нас используется вот такой инструмент. Он немного с задержкой работает, но вообще работает. Вот у нас выбралась секция, даже две почему-то, но, в принципе, можно так, наверное, оставить, если бы мы хотели это поменять. Сейчас я этого делать не буду. В принципе, мы с вами уже попробовали этим позаниматься. Сейчас давайте вернёмся обратно к вот этой верхней панели. Ну и, кстати, тут у нас сгенерировались уже новые дизайны. Вот он сделал что-то вообще другое. Ну, это прикольно, кстати, реально нестандартно. Что-то уникальное. Насколько это удобно, вопрос хороший. Какие-то логи, ещё что-то. Э, но в целом прикольно. О'кей, есть вот такой вариант. И можете заметить, что здесь обрезается текст. На самом деле, ничего страшного в этом нет. Мы можем подвинуть вот так вот размер этого экрана, чтобы у нас текст помещался. И давайте вот эти немножко не получается у нас переместить. И теперь текст у нас помещается в нашем экране. Мы можем на разных разрешениях посмотреть, как это отображается. Ну, здесь он, по-моему, некорректно переносится, но да ладно. Это уже детали, которые можно исправить даже на разработке. Ну, можно и ему здесь, конечно, что-то попросить исправить. Здесь он вообще, по-моему, тематику другую поменял. Вот, в общем, такой дизайн у него получился. Ну, прикольно, действительно, отличается от того, что было до этого. И последний уже более приближённый к первой версии. Тоже выглядит неплохо, более минималистично, но при этом достаточно стилёво. О'кей, вот такие варианты у нас получились. Так работает вариация. Если бы нам нужно было корректировать что-то не настолько глобально, то можно было бы выбрать режим версионирования там попроще. Не самую максимальную креативность, а наоборот поскромнее что-то. О'кей, давайте посмотрим, что у нас здесь есть ещё. А, instant

Прототип - это, в принципе, вот прототипирование, которое мы с вами посмотрели, вариации посмотрели. Есть кнопочка regenerate, чтобы сгенерировать заново. Ну, давайте это сделаем. Давайте нажмём regenerate. Вот у этого, вот у этой секции я нажал. Сейчас он запустится.

Пока что посмотрим на другую. Да, ещё здесь есть прикольный пункт. Это predictive hit map. То есть он сейчас, да, давайте выполним и наглядно покажу вам, как это выглядит. То есть он сгенерирует тепловую карту этой страницы, на которой можно будет посмотреть, какие заголовки, какие места вообще на странице привлекают больше всего внимания. Пока он генерирует две вот эти наши задачи. Во-первых, регенерацию вот этого экрана. Во-вторых, он начал здесь генерировать вот этот hit map.

Давайте посмотрим, что есть здесь ещё. А есть вкладка Modify и вкладка Preview. Ну, Preview в целом понятно, можем на неё посмотреть чуть позже. Давайте посмотрим на Modify. Тут у нас есть edit, по-моему, да, это то же самое. То есть это в общем-то тот же самый инструмент, и он на тот же hotkey вызывается. Также можно здесь какие-то элементы выделить, только они у меня почему-то сейчас не выделяются. Э, не знаю, вообще похоже немножко на баг. То есть, если у меня вот здесь выбрано другой инструмент, вот такой, а здесь я нажимаю на edit, то они как бы подсвечиваются, но выделения нету. А всё, что он делает - это фокусирует наш экран на этом блоке. Вот. Ну не знаю, баг это или фича, но hotkey здесь одинаковый. То есть здесь нужно нажать на кнопку E, здесь нужно нажать на кнопку E. То есть по идее эта кнопочка должна работать идентично вот этой кнопочке. Ну да ладно.

Есть ещё annotate. Вот этого у нас не было в правой панельке. Давайте посмотрим на него. Ну, интересная штука. Не знаю, насколько она действительно удобная. Просто прикольно. Здесь можно вот так что-то нарисовать. Давайте попробуем нарисовать ему типа какие-то карточки, чтобы он поместил их в карточки, вот эти вот элементы. И что ещё здесь можно добавить? Какой-то комментарий. Ну да, давайте попробуем добавить какой-то комментарий. То есть выделить какую-то зону и написать здесь какой-то комментарий. Давайте попробуем это сделать. Тут, правда, очень плохо видно текст, который я здесь пишу. Set 420 time. Вот так я сделаю ему комментарий. О'кей, я его сохранил. А, да, сохранил. Вот так можно выделить, посмотреть. О'кей. И есть кнопочка Apply, чтобы применить эти изменения. Давайте это сделаем. Нажимаем apply, и у нас пошёл процесс применения вот этих изменений в аннотации.

Пока у нас генерируется аннотация, давайте перейдём к вот этому пунктику Design System. Нажмём на него, открывается блочок с дизайн-системой. А, да, я вроде уже сказал про него. То есть здесь, во-первых, можно посмотреть на цвета, которые используются в дизайн-системе. Их можно подредактировать. Кроме того, шрифты можно поменять и можно поменять степень скругления углов. Ну, давайте поменяем степень скругления углов на вот такую, более резкую. Также здесь есть sector mode. Ну, давайте попробуем вот здесь в light версии более тёмную сделать в dark. Ну, нет, я не знаю, на что это влияет. В принципе, всё дальнейшее редактирование, оно не зависит от выбора вот этой вкладки. Мы можем, наверное, просто указать, в какой теме этот дизайн сделан. О'кей. Save and apply. А, кстати, да, если мы нажмём save and apply, то у нас применится эта дизайн-система к вот этой секции. Не ко всем секциям, а именно к той, которую мы выделили. Ну, давайте это сделаем. Единственное, по-моему, что я поменял - это степень скругления углов. Нажмём Save and Apply. И пока он применяется, давайте ещё раз вернёмся к этой дизайн-системе. Здесь можно скопировать её в вкладке design.md. Это информация по дизайн-системе в формате Markdown. Её можно отсюда скопировать, куда-нибудь себе в проект вставить. Но она же у нас и экспортируется, если мы zip-архивом его экспортируем эту секцию.

Тут у нас пошла генерация. Давайте глянем, что у нас здесь есть ещё. В Modify мы всё посмотрели. Есть вкладка Preview. Мы можем нажать на preview и new tab. И открывается, собственно, вот такая превьюшка. Сейчас она только прогрузится. Прогрузилась. Вот. Можно посмотреть в таком формате, как это выглядит. Это похоже на прототип, но ничего не кликается, то есть просто статичная превьюшка генерируется дизайном. Из интересного здесь всё. Можно на разных разрешениях посмотреть. Во вкладочке More можно посмотреть на код страницы, скопировать его, скопировать Figma, экспортировать и скачать. Ну, скачать, мы уже поняли, там zip-архив качается. В принципе, по интерфейсу именно Stitch вот этому, это всё, что здесь есть на текущий момент.

Давайте посмотрим, что у нас здесь нагенерировалось. А, во-первых, помните, мы здесь в аннотации рисовали вот эти какие-то блоки. Причём сделал несколько вариантов. И не нужно думать, что он для первых вариантов сделал только первый блок. На самом деле они просто друг на друга здесь наслаиваются. И если мы их вот так подвинем, то у нас будет три полноценных страницы. И мы можем дальше с какой-то из них работать. Ну, в принципе, прикольно. На самом деле все три варианта имеют место быть. Все они выглядят неплохо. Единственное, что на одном он время не поменял. Ну, ничего страшного, бывает.

Чтобы уже полностью закончить с интерфейсом Stitch, давайте посмотрим на вот этот режим Start Live Mode. Давайте его включим и посмотрим, что у нас здесь произойдёт. Во-первых, здесь нужен микрофон. А я не знаю, слышите вы это или нет, но он со мной разговаривает. "Create another version of this page." Вот, можно ему что-то сказать. Я сейчас отключил это, наверное, да? Ну, давайте включим ещё раз. "Create another version of this page." Вот он, кстати, чатик. Здесь отображается то, что Stitch мне говорит. Но что ему нужно-то сделать? Я не понимаю. "Create version." "New version of this page, please." >> О, запустил. Прикольно. Ну, блин, я бы здесь какую-то паузу включил всё-таки. Ну, либо стоп я могу нажать, наверное, да? И вот он начал генерировать новый экран, новую версию этого экрана. Ну, прикольно, можно поиграться. Короче, это вот голосовое общение в реальном времени с AI-агентом. Можно ему что-то говорить, просить что-то изменить, и он будет редактировать, вносить эти изменения в проекте. Насколько это удобно, ну, не знаю. Всё-таки мне для редактирования удобно выделять конкретные элементы, но поиграться можно. В принципе, весело. Вот Stitch нам сделал другую версию страницы. Так вот, он это понял. Ну, в принципе, тоже интересно выглядит, на самом деле.

О'кей. А давайте ещё пару моментов обсудим. Вернёмся к списку проектов, точнее, к вот этой форме инициализации проекта. Посмотрим, как здесь работают вот эти прикрепления файлов. Это может быть полезно, если вы хотите склонировать какой-то дизайн, ну либо на основе какого-то дизайна сделать новый. Давайте в качестве референса дадим ему сайт Gem. Это сервис, с помощью которого можно презентации создавать. Ну и не только презентации. Вот я им, правда, не пользовался, ничего про него пока сказать не могу, но нас это сейчас мало интересует. Главное, что мы можем дать сюда ссылку в качестве контекста. И давайте ему скажем: "Copy of this site." Ой, только, блин, я сделал этот мобильное приложение, а не веб. Он, наверное, мобилку сейчас будет делать. Ну, точно по-любому он будет делать мобилку. Не знаю, как он это поймёт. И я ещё опечатку здесь допустил, но не суть. Короче, мы добавили сюда сайт в качестве референса. И по этому сайту сейчас он попробует что-то сделать. Ну, скорее всего, цвета выцепит, может быть, какие-то шрифты похожие подберёт, что-то такое. С изображениями здесь история аналогичная. Можем, ну, давайте там, не знаю, скриншот сделаем и скинем ему этот скриншот. А, пускай здесь будет вот эта главная панелька. Нажимаю capture и с помощью комбинации клавиш Command+W сюда вставляю. Сделаем здесь web и "Create a copy of this block." Ну давайте так, пускай всё отправим ему, да. И, кстати, вот по поводу выбора модели. Здесь есть несколько моделей: Three Flash, Sying, Quiz, 3.1 Pro. Ну, 3.1 Pro, наверное, типа чуть получше работает как Three Flash, но плюс-минус то же самое. Редизайн он делает с помощью Nanoban и делает он именно в формате изображения. То есть он не генерирует именно интерфейс, он делает изображение. И здесь есть ещё один режим, который, кстати, прикольный. Давайте на него посмотрим. Ну, сейчас посмотрим. Но сначала обратите внимание, что мы начали генерировать вот копию этого блока. И он сначала добавил изображение, которое мы в контекст ему прокинули. И только потом он начал генерировать уже саму страницу. То есть все вот эти изображения, референсы он добавляет тоже в эту секцию, в это поле. И мы можем их видеть. Вот. Ну, на Figma похоже, если вы как бы в Figma работали. Чем-то похоже. Вот, наверное, даже не только на Figma.

Клон веб-сайта он нам сделал, правда, в мобильной версии, но вот что у него получилось. То есть также он сгенерировал дизайн-систему, сделал мобильную версию сайта. Причём интересно, текст он скопировал или нет. "Create visi. It's free. From prom to presentation." А, в Gem у нас тоже. А, ну мы на русском тут, правда. Давайте посмотрим, что у нас тут на английском. Ну нет, как будто бы текст отличается. То есть текст он не скопировал. Ну, как бы не страшно. О'кей. Вот такую мобильную версию он сделал. Но на самом деле не то чтобы прям что-то с ног сшибательное, достаточно стандартный дизайн, но на тупую AI-генерацию не похоже. Ну, как мне кажется. То есть, да, здесь нету чего-то сверхъестественного и вау-эффекта здесь нет. Но если вы генерировали дизайны просто, ну, там, с Claude, например, с помощью промта, типа, сделай мне страничку, то вы, скорее всего, замечали, что они все плюс-минус похожи. Вот этот дизайн, он всё-таки отличается от того, что по дефолту, например, Claude генерит. Хотя, не знаю, если мы будем генерировать в Stitch, может быть, они все будут похожи тоже вот на этот дизайн. Но в целом выглядит нормально и воспринимается хорошо.

Тем временем он скопировал нам блок с изображения, который мы дали ему в качестве референса. Также сделал здесь дизайн-систему. Её также можно скачать, использовать и сделал нам блок. Здесь он всё-таки использовал уже текста. Ну, похоже, похоже, даже вот здесь эту плашечку такую же нарисовал. Ну, похоже. О'кей. Что у него получилось? Неплохо. Неплохо, на самом деле, можно использовать.

Давайте посмотрим на вот этот режим. Здесь написано: "Bring a problem to solve and see solutions." То есть здесь нужно описать какую-то проблему и посмотреть на решения, которые предложит Stitch. Давайте опишем следующую проблему. Пишу ему следующий промт. Я веду Telegram, YouTube и Twitter. И мне приходится загружать контент на все платформы отдельно. Это неудобно. Вот. Давайте посмотрим, как он решит мою проблему дизайном.

Пока он думает, в принципе, мы с интерфейсом разобрались. Хотел ещё по документации пробежаться и показать, что здесь есть. Да, очевидно, у Stitch есть документация. Она достаточно простая и её здесь немного. То есть тонуть в ней, как в каких-то крупных проектах, не придётся. Тем более, что больше половины здесь, скорее всего, вам не пригодится. Давайте по разделам. То есть здесь есть раздел, как пользоваться Stitch. Просто вот визуальным интерфейсом, который мы сейчас с вами смотрели. [фыркает] Есть раздел MCP про подключение MCP к разработке. Вот его мы попробуем сейчас подключить и посмотрим, как он будет работать. Есть раздел SDK, что на самом деле очень круто. То есть SDK от MCP отличается тем, что мы по сути в коде можем вызывать SDK вот этого Google, SDK Stitch и работать с генерацией Stitch по API из кода. То есть мы можем всё это автоматизировать не только через MCP, чтобы и AI-агенты у нас управляли вот этими генерациями, скачивали итоговые результаты, шаблоны, но и через код. То есть мы можем написать какое-то своё программное обеспечение, свой сервис, может быть, который будет брать дизайн из Stitch, генерировать код или что-то ещё. В общем, Stitch можно пользоваться из кода, это круто. И можно пользоваться из нейронок через MCP. Это тоже круто.

Дальше здесь есть пунктик про design.md. Ну, по сути, здесь описано, что такое design.md - это дизайн-система, и её можно прокидывать в AI-агентов, чтобы они ей руководствовались. По вот этим пунктам, которые есть в разделе Stitch в визуальном интерфейсе, мы в целом пробежались. Здесь есть какие-то примеры промтов, редактирования, предложения о том, какие модели когда лучше использовать. Но, в принципе, основную часть я вам показал. Если вас это сильно заинтересовало, то можете пробежаться. Здесь, на самом деле, очень простая и небольшая документация. Мне кажется, что основные вот эти аспекты мы с вами уже разобрали. Здесь есть примеры промтов, как лучше писать промты, как эти промты не писать. Ну, то есть, если вы хотите что-то отредактировать, то как написать этот промт на редактирование. Если вы хотите что-то создать, то здесь написано, какие промты лучше использовать, какие слова ключевые лучше использовать для того, чтобы создать, ээ, в общем, красивый дизайн.

Из интересных моментов здесь ещё есть раздел Design Mods. И тут написано про модели, которые можно использовать. Но я хотел вам показать следующее. Это Style WordBank. Это на самом деле классно, что они здесь указали. То есть здесь в документации написано просто список каких-то ключевых слов, которые можно использовать в промте для генерации. То есть есть ключевые моменты по лайауту и структуре, которые можно указать, по текстуре, по атмосфере, по цветам, контрасту. Вы можете использовать какие-то вот из этих параметров. Ну, например, текстура, да, можно Glassmorphism использовать, можно Grainy Noise использовать. В атмосфере можно использовать там, допустим, Brutalism или Cyberpunk или Retrofuturism. И здесь коротко описана эта стилистика. То есть вот этими ключевыми словами можно оперировать, когда мы пишем промты для создания дизайна. Ну, прикольно.

Но давайте уже перейдём к MCP. Здесь всего три странички с этой документацией. Первая страничка - это setup. Здесь у нас нужно сделать следующее. Ну, я документацию сейчас всю читать не буду, просто покажу вам, как это делается. Мы переходим вот здесь в настройки Stitch Settings. И здесь, я, кстати, не сразу понял, я думал, оно дальше не скролится. На самом деле скролится вот здесь. Переходим ниже в раздел Keys. Нажимаем create. У нас создаётся новый API-ключ, по которому мы будем подключаться к нашему Stitch-аккаунту через MCP. Здесь у нас создался новый ключ. Вот он. Его можно скопировать, но пока что это делать не обязательно. Нам нужно будет скопировать другой текст. Здесь в документации переходим ниже. И тут у нас есть команды для установки MCP для нашего инструмента. Здесь есть разные инструменты: Gemini CLI, Cursor, AntiGravity, VS Code, Code. Короче, я буду показывать на примере Cursor. Мне так будет проще. Нам нужно скопировать вот эту часть, то есть то, что относится к Stitch, поскольку у меня и так уже там есть другие MCP-сервера, мне нужно скопировать это. Но сейчас всё объясню. Если вы ни разу MCP-сервера не настраивали, не пугайтесь. Ничего страшного в этом нету. Сейчас я это скопирую.

Переходим в Cursor. Дальше что нам нужно сделать? Открываем вот здесь настройки, переходим в раздел Tools and MCP. У меня здесь, как вы можете заметить, установлены какие-то MCP-сервера. У вас их может не быть. Здесь нам нужно нажать на кнопку New MCP server. Нажимаем. И здесь у нас открывается файл mcp.json. Он имеет следующую структуру. То есть открывается фигурная скобка, объект, да, в нём есть вложенный объект MCP servers, и в нём, собственно, указаны сервера, которые мы подключаем. Здесь в конце у меня указан Stitch. Ну, естественно, у нас его здесь быть не должно, если мы ничего ещё не подключали. Вообще у вас может быть, вообще, в принципе, ничего здесь не быть. Может быть, даже просто фигурные скобки. Если у вас здесь просто фигурные скобки и пустота, тогда можете полностью копировать всё содержимое вот для для вставки. Если у вас там уже есть какие-то MCP-сервера, какая-то информация, то вам нужно вот внутрь MCP Servers закинуть Stitch. Я вернул всё, как было. Давайте скопируем вот этот Stitch. Ставим запятую после последнего MCP-сервера и вставляем сюда, собственно, Stitch. Дальше нам нужно вставить сюда API-ключ. Возвращаемся в настройки Stitch. Копируем наш созданный API-ключ. Возвращаемся в Cursor и сюда его вставляем. То есть внутри кавычек у нас должен отображаться API-ключ. Нажимаем Ctrl+S, Command+S, у кого как. Чтобы сохранить этот файл, всё, его можно закрывать. Здесь у нас в настройках Cursor должен появиться Stitch. Вот он появился. Можем посмотреть, какие у него методы доступны. Он может создавать проект, получать проект, получать список проектов, список экранов в проекте, получать конкретный экран, генерировать экран из текста. Ну, по сути, это то же самое, что мы делали, когда писали промт в Stitch. Создавать какие-то вариации, создавать дизайн-систему. Прикольно, да? А, обновлять дизайн-систему, получать список дизайн-систем и применять дизайн-системы. Вот, в принципе, и все инструменты. Ну, по большому счёту, он покрывает вот все процессы, которые мы с вами делали. Ну, по крайней мере, большинство из них. Он изменяет дизайн в Stitch промты. По сути, вот как мы здесь писали эти промты, также и он просто через MCP будет это писать. AI-агент, я имею в виду, будет отправлять эти промты на изменения. Поэтому, на мой взгляд, для редактирования, ну, смотря какая у вас задача, но если вы просто хотите создать дизайн, то вам проще в Stitch в интерфейсе это делать, а после этого через Stitch можно там подкачивать его. Удобно, если вы его обновляете, то есть вы создали какую-то версию, потом подкачали, обновили его в Stitch, снова подкачали. Да, это удобно можно делать через MCP. Хотя, с другой стороны, через экспорт это тоже удобно можно делать. Ну, в общем, для некоторых задач действительно может быть полезно. В принципе, что мы установили MCP-сервер. Э, первый этап у нас завершён.

Давайте посмотрим на гайд, как им пользоваться. Ну, здесь не то чтобы много какой-то информации, по большому счёту, мы просто пишем промты, нейронки, спрашиваем там, какие у нас есть, допустим, экраны или какие у нас есть проекты в Stitch. Ну и вообще, в принципе, мы можем про Stitch ему что-то говорить, он будет к нашим проектам обращаться. Давайте это сделаем. "Show My Stitch Projects." Отправляю здесь. Давайте удалим вот эти два файла, которые я временно создавал. Пускай у нас будет чистая папка с пустым проектом. Дальше у нас Cursor спрашивает, можно ли ему запустить MCP-сервер. Я добавлю его в allow list, чтобы он не спрашивал каждый раз. И подождём результата запроса. Вот Cursor сделал даже табличку. У нас здесь 10 проектов уже. Неплохо. Давайте посмотрим, какой мы проект создавали. Eclipse Festival Landing. Ну, давайте с него начнём. Хотя здесь куча экранов. В них, честно говоря, запутаться очень просто, потому что они все называются Eclipse Festival landing page. Ну неважно, давайте попросим его сделать какой-нибудь экран. Кстати, можно их тут переименовывать? Давайте посмотрим. Да, их можно переименовывать, поэтому если вы будете их в дальнейшем как-то использовать, ну, main screen, чтобы у нас хоть какой-то экран назывался по-другому. И сделаем этот экран в Cursor, допустим. Для этого можно написать следующий prompt: "Из проекта Eclipse Festival Landing Page, возьми Main Screen и сделай его на React JS." Ну, React JS - это, на самом деле, не обязательно было здесь указывать. Просто если бы мы этого не сделали, он бы скачал эту HTML-страничку и вообще никаких бы преобразований с ним не сделал. А мне интересно посмотреть, как он поведёт себя, если ему нужно будет что-то преобразовывать. Скачивать файлики он умеет без проблем. Ну, то есть он просто берёт код страницы и клонирует его, копирует в файл в проекте. Тут ничего сложного нет. А вот давайте посмотрим, как он себя поведёт, если мы ему дополнительное какое-то задание дадим. То есть ему мало того, что нужно посмотреть на этот код, ему нужно ещё и перевести его на React JS. Давайте глянем, как он справится.

Cursor создал папку. Получается, в первую очередь он проинициализировал React и файл отдельно он не качал. То есть у нас пока что голый React-проект здесь. Сейчас подождём, когда он закончит, и посмотрим, как у него получится вообще со страницей с этой разобраться. Но на самом деле это уже вопрос больше Cursor, то есть это даже не тест-драйв Stitch. Со Stitch-то он его скачает, там ничего сложного нету. Вот первый файлик, который вы здесь видели, это была просто HTML-страничка, которую Cursor скачал со Stitch по MCP. Второй файл, который мы здесь с вами создали, я просто скопировал HTML-код в интерфейсе Stitch и вставил в этот файл. И по сути это одно и то же. То есть ничего сверхъестественного в этом не было. То, что он сейчас делает, это уже не демонстрация Stitch. Это просто какой-то тест-драйв Cursor уже начинается. Ну и, судя по всему, он с этим тест-драйвом справился. Давайте посмотрим, что он сгенерировал. Откроем эту страницу в браузере. И вот что у него получилось. То есть изображение, он подкачал, текста он подкачал. В принципе, всё подкачал, всё, молодец. О, эм, интересно, это какой-то эффект. Прикольно. Картинка меняется, да? То есть, если я увожу отсюда курсор мыши, то она чёрно-белая, так цвета появляются. Прикольно. О'кей. Ну, в общем, вот что у него получилось. Это уже всё, он молодец.

Давайте, наверное, закругляться. Я думаю, что основной интерфейс мы с вами разобрали, посмотрели, что с этим можно делать, и давайте немножко подытожим. На мой взгляд, Stitch - очень интересный, перспективный проект. То есть сейчас он находится на стадии бета-тестирования и визуально как будто бы у него не очень много какого-то функционала. То есть он достаточно минималистично выглядит, ну, в плане вот редактирования каких-то элементов. Но с другой стороны, как будто этого функционала уже достаточно. И у меня складывается такое ощущение, что вроде бы функционала не очень много, но возможностей много. То есть куча возможностей экспорта. Редактировать всё можно. В общем-то, кайф. То есть достаточно интересная штука. Если вы занимаетесь дизайном или вам нужен дизайн для разработки там, UI-кодинга ваших приложений, сервисов, то обратите на него внимание. Я думаю, он может быть вам полезен. Очень много вариантов экспорта и для дизайнеров. Figma можно экспортировать и для разработки, и сразу в Visual Studio. В общем, классно. Я однозначно ставлю лайк этому сервису, и я думаю, что буду его ещё в дальнейшем использовать. Да, ещё забыл сказать, дизайн-систему он генерирует, что тоже классно. То есть не просто HTML-код какой-то, а вообще адаптирован и нацелен на использование дальнейшее с AI-агентами. Вот. Потому что дизайн-система - это круто. Плюс PRD можно сгенерировать. То есть мы не только здесь визуал делаем, но и он уже сразу готов для дальнейшей работы с нейронками. Вообще супер.

На этом всё. Если вам понравилось это видео, ставьте лайк, чтобы YouTube рекомендовал вам больше полезного контента. Подписывайтесь на Telegram-канал Годный UI-кодинг. В нём я публикую полезные материалы по UI-кодингу. Заходите в наш Telegram-чат. В нём можно пообщаться с другими UI-кодерами, позадавать вопросы, поотвечать ответы. Подключайтесь к группе ВКонтакте. Это сейчас резервная точка связи на случай, если всё будет плохо. Подписывайтесь на YouTube-канал. Если у вас остались какие-то вопросы, пишите комментарии. На этом я с вами прощаюсь. Всем крутых дизайнов и до скорых встреч.