Недавно многие мои друзья с гуманитарным образованием начали пробовать использовать Codex для разработки собственных продуктов.
В предыдущих двух статьях рассказывалось, как пользоваться Codex; эта статья посвящена практическому применению: как с его помощью создать мини-программу WeChat.
Для начала давайте посмотрим на результат. На этот раз мы создали мини-программу для отслеживания чтения под названием «Одна страница». Ниже представлен её интерфейс работы в инструментах разработчика WeChat.
Весь процесс от идеи до работающей мини-программы можно разделить на следующие этапы:
Прототипирование в Figma → Генерация кода с помощью Codex → Симуляция в инструментах разработчика → Предпросмотр на мобильном устройстве → Отправка на проверку и публикация.
Figma отвечает за определение внешнего вида страниц и того, куда ведут кнопки; Codex превращает дизайн в код; инструменты разработчика WeChat используются для запуска, проверки и отправки мини-программы на телефон для предпросмотра. После подготовки собственного аккаунта мини-программы вы отправляете её на проверку и публикуете через бэкенд WeChat.
1. Что такое Figma и зачем использовать её в первую очередь?
Figma — это инструмент для дизайна интерфейсов и совместной работы, который обычно используется для проектирования страниц приложений, веб-сайтов и мини-программ. Дизайнеры используют его для создания макетов, цветов и кнопок; продакт-менеджеры — для обсуждения пользовательских сценариев; разработчики — для просмотра размеров, отступов и элементов дизайна, чтобы реализовать страницы.
С его помощью также можно создавать интерактивные прототипы продуктов. Например, связать кнопку на главной странице с другой страницей, чтобы при нажатии происходил переход, что позволяет заранее проверить, насколько удобен пользовательский сценарий.
Именно для этого мы и используем его в этот раз. Прежде чем писать какой-либо код, вы можете увидеть несколько страниц вместе и обсудить, хорошо ли расположена кнопка или не перегружен ли экран.
Раньше этот дизайн-макет обычно передавался разработчику. Теперь вы можете передать утверждённый макет Codex для написания кода. Дизайнеры могут начать с привычной им Figma; те, кто уже использует Codex, могут позволить ему сначала сгенерировать черновик, а затем доработать его в Figma.
Именно так и была создана «Одна страница». Сначала мы определили три основные страницы — Книжная полка, Запись и Статистика, — а затем унифицировали цветовую схему и расположение элементов.
Это демонстрация дизайна. Для фона используется кремово-белый цвет, для текста и основных кнопок — тёмно-синий, а для выделения текущего действия — светло-зелёный. На главной странице книга, которую вы сейчас читаете, размещается на самом видном месте, а статистическая информация вынесена на отдельную страницу, чтобы не перегружать пользователя цифрами при открытии.
Этот шаг касается общего эффекта. Когда вас устраивают цвета, размеры шрифтов и расположение страниц, можно двигаться дальше.
2. Пусть Codex сгенерирует черновик и завершит прототип в Figma
Даже если вы не умеете рисовать интерфейсы, вы можете начать с чёткого требования. Например, в этот раз я хотел создать читательский дневник с большим количеством свободного пространства, где можно было бы видеть читаемую книгу, легко отмечать прогресс и просматривать историю чтения.
Расскажите Codex о своих требованиях и визуальном направлении вместе:
1Я хочу создать мини-программу WeChat под названием «Одна страница» для отслеживания чтения.2Пожалуйста, сначала спроектируйте три страницы: Главная страница книжной полки, Запись о чтении и Статистика чтения. Пока не пишите функциональный код.34Визуальный стиль должен напоминать тихий читательский дневник:5Кремово-белый фон, тёмно-синий текст, светло-зелёные ключевые области, много свободного пространства.6На главной странице должна быть выделена читаемая книга и точка входа для записи. Другие страницы должны сохранять тот же визуальный стиль.7Используйте оригинальные геометрические фигуры для обложек книг; для образцов книг используйте вымышленный контент.89Сначала дайте мне изображение предпросмотра трёх страниц рядом.10Также выведите три независимых файла SVG размером 390×844, сохранив группировку текста, графики и кнопок для дальнейшей настройки в Figma. Пожалуйста, назовите основные кнопки индивидуально.
Запрос вывода в формате SVG позволяет перенести дизайн в Figma. SVG — это формат векторной графики; в данном случае при импорте вы получаете текст, графику и группы, которые можно выбирать и настраивать по отдельности.
После получения черновика вносите изменения, пока результат вас не устроит. Будьте максимально конкретны в своих замечаниях, например: «уменьши заголовок на главной странице», «сделай все основные кнопки тёмно-синими» или «увеличь обложку книги». Когда все три страницы будут удовлетворительными, займитесь прототипированием взаимодействия.
Перенос дизайна в Figma
Откройте файл дизайна Figma, нажмите «+» рядом с «Страницы» слева и создайте новую страницу.
В этом примере импорт выполняется путём копирования содержимого SVG и вставки его на холст Figma. Назовите три артборда «01-Главная книжной полки», «02-Запись о чтении» и «03-Статистика чтения» и расположите их горизонтально. Выбрав артборд, проверьте ширину и высоту на панели «Дизайн» справа.
Если вы открываете Figma впервые, обратите внимание на эти области: список слоёв слева, холст по центру, панель «Дизайн» справа для настройки внешнего вида и «Прототип» для настройки взаимодействий. Чтобы изменить какой-либо текст или кнопку, сначала выберите их в списке слоёв.
Не забудьте проверить шрифты после импорта. Шрифты могут быть заменены в зависимости от окружения, что может изменить перенос заголовков и ширину текста. В этот раз рендеринг шрифтов в дизайн-макете и мини-программе отличался, поэтому их нужно было проверять отдельно.
Добавление переходов по кнопкам
Возьмём, к примеру, карточку «Продолжить чтение» на главной странице. Выберите её, переключитесь на вкладку «Прототип» в правом верхнем углу и нажмите «+» рядом с «Взаимодействия».
В появившейся панели «Взаимодействие» установите три параметра:
- Триггер: Выберите «По нажатию».
- Действие: Выберите «Перейти к».
- Цель: Выберите «02-Запись о чтении» (целевой артборд).
Кнопка сохранения на странице записи ведёт обратно на главную страницу, а значок статистики на главной странице ведёт на страницу статистики. На изображении ниже показана настройка для входа в статистику.
Нажмите на значок треугольника «Презентация» в правом верхнем углу, чтобы открыть демонстрацию прототипа. Переходите с главной страницы и обратно, чтобы проверить маршруты между страницами.
Прототип Figma демонстрирует переходы; фактический ввод, сохранение и обновление данных будут реализованы в коде мини-программы на следующем этапе.
3. Дизайн готов; где использовать MCP?
MCP используется на этапе передачи дизайна Figma в Codex. После подключения Codex может читать структуру дизайна, стили и элементы выбранного артборда и продолжать реализацию на основе дизайн-макета.
Если вы уже умеете пользоваться Figma и у вас готов черновик, вы можете начать прямо отсюда. Выберите артборд, который хотите реализовать, скопируйте ссылку, содержащую информацию об узле этого артборда, и отправьте её в Codex с включённым подключением Figma.
1Пожалуйста, прочитайте контекст дизайна и скриншоты этого артборда через Figma MCP.2Сначала объясните структуру страницы, размеры шрифтов, цвета, отступы и элементы, которые вы прочитали.3Чётко сообщите, если есть части, которые вы не можете прочитать; не догадывайтесь.45Затем мы создадим нативную мини-программу WeChat, используя WXML, WXSS, JavaScript и JSON.6Пожалуйста, реализуйте её в соответствии с этим технологическим стеком, повторно используя существующие стили и элементы из проекта.7Сначала завершите главную страницу, а затем продолжайте с другими страницами после подтверждения.
Обязательно укажите «нативная мини-программа WeChat». Информация о дизайне, предоставленная Figma, должна быть реализована в соответствии с целевой платформой; вы не можете просто использовать веб-код для мини-программы.
В этом примере дизайн был импортирован в Figma через SVG, и код следует тому же файлу дизайна и элементам; MCP — это способ преодолеть разрыв, когда уже существует дизайн-макет Figma. Независимо от метода, в Codex должен быть передан утверждённый дизайн.
4. Превращение дизайна в мини-программу
Откройте папку проекта в Codex, поместите туда файлы дизайна и элементы обложек книг, и можно приступать к реализации.
На этом этапе, помимо указания технологии, вы должны чётко заявить, что хотите получить: проект, который можно напрямую импортировать в инструменты разработчика WeChat.
1Пожалуйста, завершите нативную мини-программу WeChat на основе утверждённого дизайна «Одна страница».23Используйте WXML, WXSS, JavaScript и JSON.4Поместите код в папку miniprogram и предоставьте app.json и project.config.json, чтобы гарантировать, что его можно напрямую импортировать в инструменты разработчика WeChat.56Реализуйте страницы Книжной полки, Записи о чтении, Статистики и Добавления книги.7Следуйте утверждённой цветовой схеме, расположению и оригинальным элементам обложек книг.8Пока что сохраняйте данные локально с помощью wx.setStorageSync и считывайте их при повторном открытии.9Добавьте проверку ввода, пустые состояния и сообщения об ошибках сохранения.1011После завершения проверьте код и скажите мне, в какую директорию импортировать и как компилировать.12Если есть элементы, которые мне нужно настроить, перечислите их отдельно.
В проекте, сгенерированном Codex, WXML обрабатывает структуру страницы, WXSS — стили, JavaScript — клики и сохранение, а JSON — пути к страницам. Как только вы поймёте, за что отвечает каждый файл, вы сможете разобраться в полученной директории.
Не пугайтесь здесь; просто позвольте Codex решить эту задачу за вас. Вам не нужно понимать код; просто скопируйте промпты, вставьте свой дизайн-макет и измените название на своё.
5. Загрузите в инструменты разработчика WeChat и проверьте, работает ли
После установки и входа в инструменты разработчика WeChat выберите «Импортировать проект» в меню «Проект» и найдите папку miniprogram, сгенерированную Codex.
Название проекта может быть любым. AppID — это идентификатор данной мини-программы: вы можете использовать тестовый аккаунт, предоставленный инструментом, для локального обучения, но при подготовке к публикации необходимо переключиться на собственный AppID мини-программы. В этом примере для бэкенда выберите «Не использовать облачные сервисы».
Нажмите «Создать», войдите в проект и дождитесь компиляции. Когда симулятор справа отобразит страницу, вы сможете управлять ею с помощью мыши. После того как Codex изменит код, перекомпилируйте, чтобы увидеть результаты.
Здесь в основном проверьте три вещи: не смещены ли страницы, ведут ли кнопки на правильные страницы и сохраняется ли введённый контент. Также переключите размер экрана симулятора, чтобы проверить, не тесно ли длинным заголовкам, полям ввода и нижней навигации.
Если возникают проблемы, отправьте текст ошибки или скриншот в Codex вместе с описанием того, что вы только что сделали и что ожидали увидеть. Например:
1Это скриншот ошибки в инструментах разработчика WeChat.2Когда я перехожу на страницу записи с главной страницы, обложка книги не отображается.3Пожалуйста, проверьте путь к изображению и время загрузки страницы. Исправьте это, сохранив существующий макет без изменений.
В этом случае мы действительно столкнулись с проблемой загрузки изображения: код начинал склеивать адрес изображения до того, как данные страницы были готовы, что приводило к отсутствию имени обложки книги в пути. Указание коду дождаться готовности данных перед отображением изображения решило проблему.
Подобные проблемы не требуют от вас изучения кода с нуля, но вы должны чётко указать, где они возникают. После исправления вернитесь в симулятор, повторите операцию и убедитесь, что всё снова работает нормально.
6. От компьютерного симулятора к мобильному предпросмотру и публикации
Когда всё заработает на компьютере, проверьте на телефоне.
Используя AppID с соответствующими разрешениями, нажмите «Предпросмотр» в верхней части инструментов разработчика, дождитесь генерации QR-кода, а затем отсканируйте его с помощью авторизованного аккаунта WeChat. Обратите внимание на размер шрифта на телефоне, не перекрывает ли клавиатура область ввода при её появлении и легко ли дотянуться до нижних кнопок.
В этом примере данные сохраняются локально, поэтому записи в симуляторе не будут автоматически синхронизироваться с телефоном. Вам нужно будет повторно ввести тестовый контент на телефоне; если в будущем вы захотите сохранять данные на разных устройствах, можно добавить функции облачной синхронизации или резервного копирования.
Когда вы будете готовы дать друзьям попробовать, нажмите «Загрузить» в верхней части инструментов разработчика, затем перейдите в бэкенд мини-программы на платформе WeChat Official Accounts Platform. Войдите в «Управление версиями», найдите соответствующую версию для разработки, установите её как «Пробную версию» и добавьте участников тестирования. Участники тестирования должны иметь соответствующие разрешения.
После подтверждения работоспособности отправьте на проверку в бэкенде и опубликуйте после одобрения. Заполните информацию об аккаунте и категории услуг в соответствии с требованиями бэкенда; вам не нужен Codex для выполнения этих операций с аккаунтом.
Этот пример дошёл до стадии, когда мини-программа может быть запущена в инструментах разработчика. Читатели могут продолжить с мобильным предпросмотром, загрузкой и отправкой на проверку, используя свои собственные аккаунты мини-программ.
Связывание всего процесса
Сначала используйте Figma, чтобы определить страницы и переходы по кнопкам, пока дизайн вас не устроит; затем передайте файл дизайна или ссылку на артборд в Codex, чтобы он превратил его в мини-программу WeChat; затем импортируйте её в инструменты разработчика для симуляции, запуска и проверки на ошибки; наконец, просмотрите на телефоне, загрузите, отправьте на проверку и опубликуйте после подтверждения.
В будущем, будете ли вы делать инструмент для отслеживания, приложение с рецептами или другие небольшие утилиты, вы всё равно сможете следовать этому рабочему процессу. Если дизайн вас не устраивает, вернитесь в Figma и настройте его; если есть функциональная проблема, передайте конкретное действие и ошибку в Codex, а затем подтвердите результаты изменений в инструментах разработчика.
Я Майлз, эксперт по алгоритмам ИИ, перешедший из крупной технологической компании в FDE. Я занимался исследованиями, оптимизацией и развёртыванием алгоритмов, а также корпоративным обучением. Подписывайтесь на меня @miles_mazy, чтобы расти вместе и зарабатывать вместе.
