OpenCode для дизайна: показываю интерфейс и рабочий процесс

Сейчас разберём, как использовать OpenCode при разработке дизайна сайта или приложения. Платформа не имеет значения покажу на своём примере.

Если вам нужно узнать, как установить программу, напишите мне. Покажу, как это сделать.тПосле установки перед нами появляется главное окно.

Это главное меню. Чтобы полностью с ним ознакомиться, нажмите в левом верхнем углу на значок из двух соединённых прямоугольников.

После главного экрана ниже, под иконкой домика, мы увидим раздел «Проекты». Здесь отображается всё, что мы делали ранее в этом приложении.!

Далее идёт раздел «Дизайн». Это дизайн-система. Здесь мы создаём стили, внешний вид, цветовые схемы и взаимодействия, чтобы в будущем использовать их в проектах.

Следующий раздел позволяет скачать готовые скиллы навыки и шаблоны, которые помогают при разработке дизайна. Честно говоря, я пока не использовал эту функцию. Не видел в ней необходимости. Если вам пригодится используйте.

Плагины нужны для того же: улучшить конечный дизайн. Но я этими двумя вкладками практически не пользуюсь. Считаю: если слишком много полагаться на чужие наработки, это негативно сказывается на уникальности. Поэтому подсказать по этому разделу не могу.

Теперь раздел «Интеграции». Через него мы подключаем к OpenCode различные API и ключи. Изучите всё самостоятельно. Я подключил ту же модель, что использую в основном проекте, и она работает замечательно.

После ознакомления с интерфейсом начинаем разработку. Заходим на главный экран, в раздел Template. Выбираем, что будем разрабатывать, и вписываем промпт. Язык не важен.В начале нажмите на кнопку Design и переключите её на Plan.

Это нужно для того, чтобы перед созданием сайта составить полноценный план. Затем нейросеть автоматически всё сгенерирует. Так вы не потратите зря токены, которые пригодятся для последующей работы.После генерации плана у вас получится что-то подобное.!

Затем переключите кнопку Plan обратно на Design. Это делается в левом нижнем углу. Теперь можно просить систему генерировать и начинать создавать прототипы через Open Design.Также обратите внимание на кнопку «Choose Design System» в левом нижнем углу. При нажатии открывается окно выбора стиля приложения.

Это нужно, чтобы задать визуальный ориентир для проекта. Например, если хотите сделать сайт, похожий на Binance, выбираете соответствующую дизайн-систему и объясняете OpenCode, что именно вам оттуда нравится и что должно попасть в ваш проект.

Рядом со строкой ввода текста есть кнопка с плюсом. При нажатии раскрываются дополнительные параметры. Можно добавить файл, показать референсы из другого проекта или сделать ссылку на локальный код.Но самое полезное это Design Tools, скиллы, плагины и подключения. Дизайн-систему мы уже рассмотрели: берёте готовые элементы и добавляете их. Всё остальное, думаю, вы разберёте сами.Если хотите узнать подробнее, как используются эти инструменты, я написал об этом в своём Telegram-канале: DevLab Automate.