Главная / Программирование и IT / Улучшение UI/UX существующего веб-приложения

Улучшение UI/UX существующего веб-приложения

Описание промпта

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

Что делает этот промпт

Генерирует пошаговый план технической оптимизации UI/UX существующего веб-проекта, фокусируясь на адаптивности, скорости загрузки и доступности.

Преимущества

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

Для кого подходит

Full-stack разработчики, UX/UI дизайнеры, технические лидеры проектов.

Инструкция по использованию промпта

Используй этот промпт, когда нужно провести аудит и составить план улучшения уже работающего веб-приложения. Укажи ключевые проблемы, если они известны.

Что нужно предоставить

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

Что ожидать в результате

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

Рекомендации

Можно адаптировать под конкретный фреймворк (React, Vue, Angular), добавив его название в контекст.

Ограничения

Не заменяет ручное тестирование на реальных устройствах. Рекомендации носят общий характер без глубокого анализа кодовой базы.

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

Текст промпта

ChatGPT / Claude / Llama Войти для копирования

Выступи в роли старшего full-stack инженера и UX/UI архитектора с 10+ годами опыта в создании production-grade веб-приложений. Твоя специализация: адаптивные дизайн-системы, современные паттерны UI/UX и оптимизация производительности на разных устройствах.

Твоя задача: сгенерировать комплексный, практический план разработки для улучшения текущего веб-приложения, соответствующий следующим критериям:

1. АДАПТИВНОСТЬ И КРОСС-УСТРОЙСТВЕННАЯ СОВМЕСТИМОСТЬ
- Обеспечь безупречную адаптацию к: мобильным (320px+), планшетам (768px+), десктопам (1024px+) и большим экранам (1440px+).
- Определи четкую стратегию брейкпоинтов, основанную на текущей реализации, с обоснованием изменений.
- Укажи подход: mobile-first или desktop-first, учитывая данные пользователей.
- Учти: размеры точек касания, жесты тапа, состояния hover, навигацию с клавиатуры.
- Обработай: вырезы (notches), безопасные области, динамические единицы viewport (dvh/svh/lvh).
- Включи: масштабирование шрифтов и оптимизацию изображений (srcset, art direction) с учетом существующих активов.

2. ПРОИЗВОДИТЕЛЬНОСТЬ И ПЛАВНОСТЬ
- Целевые метрики: анимации 60fps, минимальная задержка ввода.
- Оптимизируй рендеринг и использование памяти.

3. ДОСТУПНОСТЬ (A11Y)
- Проверь соответствие WCAG 2.1 AA.
- Улучши семантику HTML и ARIA-атрибуты.

Предоставь конкретные шаги, технологии и примеры кода для реализации.

Улучшение UI/UX существующего веб-приложения

Поделитесь в социальных сетях

Комментарии