72. Avalonia UI Real World (Jobs Page Mockup)
00:00 Введение в использование ИИ в разработке • ИИ требует практики и обучения для эффективного использования. • ИИ не заменит работу разработчиков, но значительно облегчит её. • Автор успешно использует ИИ уже много недель. 00:32 Начало работы с ИИ • Настройка и адаптация ИИ к проекту требуют времени. • ИИ можно представить как начинающего разработчика, которого нужно обучить. • Приложение долго не продвигалось вперёд, но теперь готово к работе. 01:04 Задачи для решения с помощью ИИ • Необходимо добавить множественный выбор и пользовательский интерфейс для запуска заданий. • Требуется создать модели представления и выполнить задания. • Роль архитектора: чётко понимать, что нужно сделать, и объяснять это ИИ. 02:09 Выбор инструмента для работы с ИИ • Автор выбрал Claude для работы с ИИ, так как считает его лучшим. • Claude можно скачать с сайта и использовать для создания макетов. 02:45 Создание макета пользовательского интерфейса • Создание скриншота страниц действий для общего представления приложения. • Запрос у Claude возможностей для создания макета UI. • Claude может создавать макеты с использованием HTML и React. 04:16 Подробное объяснение требований ИИ • Объяснение требований к странице с вакансиями подробно, как для начинающего разработчика. • Упоминание о заголовке, активных и завершённых заданиях. • Возможность приостановления заданий. 07:06 Детали макета UI • Таблица как основной интерфейс с сводной информацией над ней. • Карточки для отображения деталей заданий. • Поля для таблицы: идентификаторы, имя, описание, прогресс. 08:27 Дополнительные элементы макета • Прогресс задачи, дата выполнения, значок статуса. • Возможность поиска по таблице и добавления новой вакансии. 09:47 Преимущества использования ИИ • ИИ позволяет сосредоточиться на структурировании проекта, а не на написании шаблонного кода. • Проверка и исправление кода, написанного ИИ, без потери уровня квалификации. • Значительное увеличение скорости выполнения работы. 10:49 Начало работы над третьей версией • Автор планирует завершить пакетный процесс для третьей версии, так как вторая версия не обновлялась около 15 лет. • Используется навык фронтенд-дизайна. • Оцениваются элементы интерфейса: маленькие карточки, заголовки, фон. 11:46 Анализ макета и интерфейса • Предпочтение отдаётся макету, выровненному по левому краю. • Боковое меню не совсем соответствует ожиданиям, но в целом нравится. • Упоминается использование React для интерактивности интерфейса. 12:45 Планирование изменений • Решение обновить заголовок и начать делать заметки для программирования. • Необходимость новой страницы вакансий с определёнными элементами. 13:09 Подготовка к работе с агентом • Отсутствие документации, кроме простого файла агента. • Планирование задач для младшего разработчика. 14:11 Добавление нового меню • Задание на добавление нового меню «Задание» с иконкой в виде линии. • Проверка чистоты гида перед запуском кода. 15:05 Работа с кодом • Добавление нового пункта меню под главной страницей. • Указания по стилю кодирования и моделям представления. 16:40 Настройка интерфейса • Изменение выравнивания заголовков и SVG-изображений. • Удаление частично обрезанных фигур в SVG. 19:00 Проблемы с кодом и уведомлениями • Отсутствие визуальных уведомлений о необходимости помощи. • Необходимость улучшения взаимодействия с кодом. 22:56 Завершение работы над интерфейсом • Передача HTML-файла для дальнейшего использования. • Использование файла как образца для кода. 23:24 Обучение ИИ для создания пользовательского интерфейса • ИИ будет обучаться создавать пользовательский интерфейс в Avalonia. • Цель — добиться идеального воспроизведения желаемого интерфейса. • Процесс будет включать создание навыков и агентов для выполнения задач. 24:23 Создание агентов для конкретных задач • Агенты будут выполнять задачи, например, создание карточек или анимации. • Разработчики будут инструктировать агентов через документацию и примеры кода. • После обучения агенты смогут самостоятельно выполнять задачи. 25:16 Проверка кода, созданного ИИ • Важно тщательно проверять код, созданный ИИ, чтобы избежать проблем. • Необходимо компилировать и запускать код для визуальной проверки. • Пример ошибки: неправильный значок задания. 26:30 Коррекция иконки задания • ИИ получает указание изменить иконку задания. • После корректировки иконка становится правильной. 27:10 Итоги первой части работы • Страница с вакансиями выглядит отлично после корректировки. • Код написан параллельно с работой над пользовательским интерфейсом. • Добавление кнопки заняло много времени. 29:46 Планирование следующих этапов разработки • Необходимо тщательно планировать следующие этапы разработки. • Важно понимать, как будет кодироваться интерфейс. • Регулярные коммиты помогают избежать ошибок. 30:44 Обучение ИИ созданию макетов 31:43 Проблемы с редактированием фона 33:37 Оценка результатов работы ИИ
00:00 Введение в использование ИИ в разработке • ИИ требует практики и обучения для эффективного использования. • ИИ не заменит работу разработчиков, но значительно облегчит её. • Автор успешно использует ИИ уже много недель. 00:32 Начало работы с ИИ • Настройка и адаптация ИИ к проекту требуют времени. • ИИ можно представить как начинающего разработчика, которого нужно обучить. • Приложение долго не продвигалось вперёд, но теперь готово к работе. 01:04 Задачи для решения с помощью ИИ • Необходимо добавить множественный выбор и пользовательский интерфейс для запуска заданий. • Требуется создать модели представления и выполнить задания. • Роль архитектора: чётко понимать, что нужно сделать, и объяснять это ИИ. 02:09 Выбор инструмента для работы с ИИ • Автор выбрал Claude для работы с ИИ, так как считает его лучшим. • Claude можно скачать с сайта и использовать для создания макетов. 02:45 Создание макета пользовательского интерфейса • Создание скриншота страниц действий для общего представления приложения. • Запрос у Claude возможностей для создания макета UI. • Claude может создавать макеты с использованием HTML и React. 04:16 Подробное объяснение требований ИИ • Объяснение требований к странице с вакансиями подробно, как для начинающего разработчика. • Упоминание о заголовке, активных и завершённых заданиях. • Возможность приостановления заданий. 07:06 Детали макета UI • Таблица как основной интерфейс с сводной информацией над ней. • Карточки для отображения деталей заданий. • Поля для таблицы: идентификаторы, имя, описание, прогресс. 08:27 Дополнительные элементы макета • Прогресс задачи, дата выполнения, значок статуса. • Возможность поиска по таблице и добавления новой вакансии. 09:47 Преимущества использования ИИ • ИИ позволяет сосредоточиться на структурировании проекта, а не на написании шаблонного кода. • Проверка и исправление кода, написанного ИИ, без потери уровня квалификации. • Значительное увеличение скорости выполнения работы. 10:49 Начало работы над третьей версией • Автор планирует завершить пакетный процесс для третьей версии, так как вторая версия не обновлялась около 15 лет. • Используется навык фронтенд-дизайна. • Оцениваются элементы интерфейса: маленькие карточки, заголовки, фон. 11:46 Анализ макета и интерфейса • Предпочтение отдаётся макету, выровненному по левому краю. • Боковое меню не совсем соответствует ожиданиям, но в целом нравится. • Упоминается использование React для интерактивности интерфейса. 12:45 Планирование изменений • Решение обновить заголовок и начать делать заметки для программирования. • Необходимость новой страницы вакансий с определёнными элементами. 13:09 Подготовка к работе с агентом • Отсутствие документации, кроме простого файла агента. • Планирование задач для младшего разработчика. 14:11 Добавление нового меню • Задание на добавление нового меню «Задание» с иконкой в виде линии. • Проверка чистоты гида перед запуском кода. 15:05 Работа с кодом • Добавление нового пункта меню под главной страницей. • Указания по стилю кодирования и моделям представления. 16:40 Настройка интерфейса • Изменение выравнивания заголовков и SVG-изображений. • Удаление частично обрезанных фигур в SVG. 19:00 Проблемы с кодом и уведомлениями • Отсутствие визуальных уведомлений о необходимости помощи. • Необходимость улучшения взаимодействия с кодом. 22:56 Завершение работы над интерфейсом • Передача HTML-файла для дальнейшего использования. • Использование файла как образца для кода. 23:24 Обучение ИИ для создания пользовательского интерфейса • ИИ будет обучаться создавать пользовательский интерфейс в Avalonia. • Цель — добиться идеального воспроизведения желаемого интерфейса. • Процесс будет включать создание навыков и агентов для выполнения задач. 24:23 Создание агентов для конкретных задач • Агенты будут выполнять задачи, например, создание карточек или анимации. • Разработчики будут инструктировать агентов через документацию и примеры кода. • После обучения агенты смогут самостоятельно выполнять задачи. 25:16 Проверка кода, созданного ИИ • Важно тщательно проверять код, созданный ИИ, чтобы избежать проблем. • Необходимо компилировать и запускать код для визуальной проверки. • Пример ошибки: неправильный значок задания. 26:30 Коррекция иконки задания • ИИ получает указание изменить иконку задания. • После корректировки иконка становится правильной. 27:10 Итоги первой части работы • Страница с вакансиями выглядит отлично после корректировки. • Код написан параллельно с работой над пользовательским интерфейсом. • Добавление кнопки заняло много времени. 29:46 Планирование следующих этапов разработки • Необходимо тщательно планировать следующие этапы разработки. • Важно понимать, как будет кодироваться интерфейс. • Регулярные коммиты помогают избежать ошибок. 30:44 Обучение ИИ созданию макетов 31:43 Проблемы с редактированием фона 33:37 Оценка результатов работы ИИ