Обучение AI-дизайну

Выбор агента: Claude Code, Codex, OpenCode

• Даём агентам одну задачу, сравниваем результат и объём ручных правок. Выбираем инструмент под свою работу.

Модели и провайдеры: чем отличаются, какие задачи им поручать и как подключать к агенту.

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

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

Скилы: готовые инструкции и свои

• Разбираем чужой скилл, адаптируем под задачу и проверяем на проекте.
• Пишем свой скилл для повторяющейся задачи и собираем библиотеку инструкций.

Материалы заказчика: выясняем, для кого сайт, что он предлагает и какое действие ждём от посетителя. Собираем факты, примеры и подтверждения.

Структура страницы и оффер

• Формулируем предложение на первом экране и выбираем, чем его подтвердить.
• Выстраиваем порядок блоков: что посетителю нужно узнать до заявки или покупки.

Редактура текста после нейросети

• Убираем штампы и повторы, заменяем общие обещания конкретными фактами. Сохраняем голос автора.
• Проверяем цифры и утверждения по исходным материалам; недостающие сведения запрашиваем у заказчика.

Подготовка к поиску и публикации ссылок: заголовки, метаданные, адреса страниц и превью для соцсетей.

Референсы: где искать, как собирать свой банк и выбирать примеры под задачу.

Разбор и оценка дизайна

• Смотрим, как работают композиция, сетка, типографика, ритм и визуальная иерархия.
• Находим слабые места макета и объясняем, что стоит исправить и почему.

От первых генераций к своему решению

• Получаем несколько черновиков, выбираем удачные находки и проверяем, сочетаются ли они.
• Дорабатываем шаблонные решения нейросети: композицию, детали и соответствие задаче.

Figma MCP и дизайн-система

• Работаем с макетом через агента. Фиксируем стили и компоненты, чтобы страницы оставались согласованными.

Графика для сайтов, YouTube, соцсетей и маркетплейсов: выбираем референсы и учитываем формат площадки.

Промпт как арт-бриф

• Задаём композицию, свет, материалы и настроение; разбираем приёмы работы в Midjourney.
• Добиваемся согласованного стиля в серии изображений.

Доработка генераций

• Перегенерируем отдельный участок изображения, сохраняя остальной кадр.
• Убираем артефакты, повышаем разрешение изображений и видео. Разбираем апскейл в Replicate.

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

Выбор сложности: когда достаточно сайта за вечер, а когда задача и бюджет позволяют сложную анимацию. Разбираем примеры из подборки ниже.

Адаптивная вёрстка

• Задаём поведение сетки, текста и изображений при изменении ширины экрана.
• Проверяем промежуточные размеры, длинный контент и управление с телефона.

Анимация и интерактив

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

Проверка качества сайта

• Ищем причины медленной загрузки и проверяем результат после оптимизации.
• Проверяем доступность: клавиатуру, видимый фокус, контраст и понятные ошибки в формах.
• Проходим основные сценарии: навигацию, переходы и отправку форм.

Архитектура проекта на Astro

• Разбираемся, где находятся страницы, компоненты, стили и данные. Определяем, что стоит переиспользовать.

Git и публикация

• Смотрим изменения агента, сохраняем рабочие версии и учимся откатывать неудачные правки.
• Настраиваем сборку и публикацию на Cloudflare через GitHub Actions. Проверяем сайт после обновления.

CMS: Instatic и Directus

• Проектируем поля и связи под контент сайта, подключаем вывод данных на страницы.
• Настраиваем права редактора и проверяем, что он может менять без помощи разработчика.

Интернет-магазин

• Разбираем каталог, карточку товара и корзину на Medusa; письма о заказах через Resend.
• Проверяем путь покупки целиком: от выбора товара до оплаты и подтверждения заказа.

Поиск и выбор проекта

• Ищем открытые альтернативы платным сервисам на GitHub и в каталогах. Сравниваем возможности с задачами проекта.
• Проверяем лицензию, документацию, активность разработки и открытые проблемы. Выясняем, какие функции доступны без платной версии.

Запуск и проверка

• Разворачиваем проект локально или на тестовом сервере, настраиваем зависимости и проверяем нужные сценарии на своих данных.

Доработка под себя

• Разбираемся в коде вместе с агентом, меняем интерфейс и добавляем недостающие функции и интеграции.
• Ведём свою версию в Git, тестируем изменения и учимся переносить обновления исходного проекта, сохраняя свои доработки.

Экономия на подписках: считаем стоимость сервера, настройки и поддержки. Решаем, когда собственная установка выгоднее подписки и от каких сервисов можно отказаться.

Выбор сервера и хостинга

• Сравниваем управляемую платформу и VPS. Подбираем процессор, память, диск и регион под приложение, ожидаемую нагрузку и бюджет.

Настройка и управление сервером

• Настраиваем доступ по SSH, права пользователей, сетевые ограничения, домен и HTTPS. Разворачиваем приложение и базу данных.
• Обновляем систему и сервисы, читаем логи, настраиваем перезапуск и уведомления о сбоях. Публикуем изменения через GitHub Actions с возможностью отката.

Бэкапы и восстановление

• Автоматизируем резервное копирование базы данных, загрузок и настроек. Задаём расписание и срок хранения, храним копии отдельно от рабочего сервера и ограничиваем доступ к ним.
• Восстанавливаем проект из бэкапа на тестовом окружении. Проверяем целостность данных, время восстановления и сколько последних изменений можно потерять.

Нагрузка и запас ресурсов

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

Данные и доступы

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

Права агента: ограничиваем доступ к рабочим данным и CMS, отдельно согласуем удаление и публикацию.

Расходы на ИИ

• Сравниваем бесплатный доступ, подписки и оплату кредитами; проверяем лимиты и срок действия кредитов.
• Следим за расходом токенов и генераций, выбираем модель по сложности задачи.

Себестоимость проекта: считаем своё время, инфраструктуру, генерации и переделки.

Продажа и оценка проекта

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

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

Сдача и сопровождение сайта

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

Доработка чужого сайта: изучаем устройство проекта и существующие стили, проверяем изменения на копии.