Promt-Hub
Главная / Программирование и IT / План разработки UI/UX: От концепции до продакшена

План разработки UI/UX: От концепции до продакшена

Описание промпта
Создай детальный план разработки отзывчивого веб-приложения с фокусом на производительность, кросс-браузерность и современные паттерны UX.
Что делает этот промпт
  • Генерирует структурированный технический план для создания высококачественного веб-интерфейса, охватывающий дизайн, производительность и доступность.
Преимущества
  • Помогает избежать типичных ошибок при адаптивной верстке, обеспечивает стандартизацию процесса разработки и улучшает пользовательский опыт на всех устройствах.
Для кого подходит
  • Full-stack разработчики, UI/UX дизайнеры, технические лидеры, стартапы, разрабатывающие веб-продукты.
Инструкция по использованию промпта
Скопируйте prompt в чат. При необходимости уточните целевую платформу или стек технологий перед генерацией плана.
Что нужно предоставить
Необходимо понимание основ веб-разработки. Для лучшего результата укажите конкретные требования к функционалу или целевой аудитории в дополнительных полях (если поддерживается).
Что ожидать в результате
Детальный пошаговый план с рекомендациями по архитектуре, стилям, производительности и доступности, готовый к внедрению в рабочий процесс.
Рекомендации
Prompt оптимизирован для моделей, хорошо работающих с техническими спецификациями (Claude, ChatGPT). Можно использовать как чек-лист для ревью кода.
Ограничения
Не заменяет глубокий аудит производительности. Не учитывает специфические бизнес-логики без дополнительных уточнений.
Промпт открыт для всех. Зарегистрируйтесь, чтобы копировать одним кликом, сохранять промпты, оценивать их и подписываться на авторов.
Текст промпта
ChatGPT / Claude / Llama Войти для копирования 
Выступи в роли старшего full-stack инженера и UX/UI архитектора с 10+ годами опыта в создании production-grade веб-приложений. Твоя задача — сгенерировать комплексный, пошаговый план разработки отзывчивого веб-приложения, соответствующего следующим критериям:

1. ОТЗЫВЧИВОСТЬ И СОВМЕСТИМОСТЬ
- Обеспечь корректную работу на мобильных (320px+), планшетах (768px+), десктопах (1024px+) и больших экранах (1440px+).
- Определи четкую стратегию breakpoint'ов с обоснованием.
- Обоснуй выбор подхода: mobile-first или desktop-first.
- Учти: размеры touch-таргетов, жесты, hover-состояния, навигацию с клавиатуры.
- Реши вопросы: notch-зоны, safe areas, динамические единицы (dvh/svh/lvh).
- Опиши масштабирование шрифтов, оптимизацию изображений (srcset, art direction) и fluid typography.

2. ПРОИЗВОДИТЕЛЬНОСТЬ И ПЛАВНОСТЬ
- Целевая частота кадров: 60fps для анимаций.
- Оптимизируй Core Web Vitals (LCP, FID, CLS).
- Предложи стратегию ленивой загрузки (lazy loading) и код-сплиттинга.

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

4. ТЕХНИЧЕСКИЙ СТЕК И АРХИТЕКТУРА
- Предложи современный стек (React/Vue/Svelte, CSS-in-JS или CSS Modules).
- Опиши структуру папок и управление состоянием.

5. ЭТАПЫ РАЗРАБОТКИ
- Разбей процесс на фазы: прототипирование, верстка, логика, тестирование, деплой.
- Укажи ключевые метрики успеха для каждого этапа.

Используй профессиональный, четкий язык. Избегай воды. Фокусируйся на actionable advice.

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

Комментарии

Войдите, чтобы комментировать.

Комментариев пока нет.