Разбирает скриншоты дизайна, строит структуру экранов и навигации и пишет приложение на Expo экран за экраном.
Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.
Значения сразу появятся в превью, коде и при копировании.
Выступи в роли мобильного разработчика, который превращает визуальный дизайн в работающее приложение. К сообщению приложены скриншоты экранов: [СКОЛЬКО И КАКИЕ ЭКРАНЫ]. Стек: [Expo + React Native + TypeScript + Expo Router ИЛИ нативный Android]. Дополнительные материалы: [ШАБЛОНЫ, ДОКУМЕНТЫ, API ИЛИ «нет»]. Шаг 1. Анализ. По скриншотам опиши: - список экранов и переходы между ними — карта навигации; - повторяющиеся компоненты (кнопки, карточки, списки, поля) и их варианты; - токены: цвета, шрифты, размеры, радиусы, отступы; - данные на каждом экране и откуда они берутся. Задай вопросы, если логика экрана по картинке неочевидна. Шаг 2. Каркас: структура папок, навигация, тема с токенами, общие компоненты. Шаг 3. Экраны по одному, от главного к второстепенным. Каждый экран — полностью рабочий: состояния загрузки, пусто, ошибка, прокрутка, клавиатура, безопасные зоны. Правила: - лучшие практики платформы, цели касания от 44 pt; - производительность: FlatList для длинных списков, мемоизация, анимации на UI-потоке; - чистый и организованный код, без заглушек; - пиксель в пиксель там, где это не мешает удобству, — и отметь, где ты отступил от макета и почему.
```text Выступи в роли мобильного разработчика, который превращает визуальный дизайн в работающее приложение. К сообщению приложены скриншоты экранов: [СКОЛЬКО И КАКИЕ ЭКРАНЫ]. Стек: [Expo + React Native + TypeScript + Expo Router ИЛИ нативный Android]. Дополнительные материалы: [ШАБЛОНЫ, ДОКУМЕНТЫ, API ИЛИ «нет»]. Шаг 1. Анализ. По скриншотам опиши: - список экранов и переходы между ними — карта навигации; - повторяющиеся компоненты (кнопки, карточки, списки, поля) и их варианты; - токены: цвета, шрифты, размеры, радиусы, отступы; - данные на каждом экране и откуда они берутся. Задай вопросы, если логика экрана по картинке неочевидна. Шаг 2. Каркас: структура папок, навигация, тема с токенами, общие компоненты. Шаг 3. Экраны по одному, от главного к второстепенным. Каждый экран — полностью рабочий: состояния загрузки, пусто, ошибка, прокрутка, клавиатура, безопасные зоны. Правила: - лучшие практики платформы, цели касания от 44 pt; - производительность: FlatList для длинных списков, мемоизация, анимации на UI-потоке; - чистый и организованный код, без заглушек; - пиксель в пиксель там, где это не мешает удобству, — и отметь, где ты отступил от макета и почему. ```
{
"messages": [
{
"role": "user",
"content": "Выступи в роли мобильного разработчика, который превращает визуальный дизайн в работающее приложение.\n\nК сообщению приложены скриншоты экранов: [СКОЛЬКО И КАКИЕ ЭКРАНЫ].\nСтек: [Expo + React Native + TypeScript + Expo Router ИЛИ нативный Android].\nДополнительные материалы: [ШАБЛОНЫ, ДОКУМЕНТЫ, API ИЛИ «нет»].\n\nШаг 1. Анализ. По скриншотам опиши:\n- список экранов и переходы между ними — карта навигации;\n- повторяющиеся компоненты (кнопки, карточки, списки, поля) и их варианты;\n- токены: цвета, шрифты, размеры, радиусы, отступы;\n- данные на каждом экране и откуда они берутся.\nЗадай вопросы, если логика экрана по картинке неочевидна.\n\nШаг 2. Каркас: структура папок, навигация, тема с токенами, общие компоненты.\n\nШаг 3. Экраны по одному, от главного к второстепенным. Каждый экран — полностью рабочий: состояния загрузки, пусто, ошибка, прокрутка, клавиатура, безопасные зоны.\n\nПравила:\n- лучшие практики платформы, цели касания от 44 pt;\n- производительность: FlatList для длинных списков, мемоизация, анимации на UI-потоке;\n- чистый и организованный код, без заглушек;\n- пиксель в пиксель там, где это не мешает удобству, — и отметь, где ты отступил от макета и почему."
}
]
}