Главная / Программирование и IT / Дизайн боковой панели дашборда

Дизайн боковой панели дашборда

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

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

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

Генерирует полный код фронтенда для боковой панели навигации дашборда, включая структуру, стили и скрипты.

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

Экономит время на верстку, обеспечивает соблюдение стандартов доступности и адаптивности, предлагает готовое решение с чистым кодом.

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

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

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

Используй промпт для генерации кода. При необходимости уточни цветовую схему или конкретные фреймворки (например, Bootstrap, Tailwind) в дополнительном контексте.

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

Необходимо указать контекст использования (например, тип приложения) для более точной адаптации стилей, если это требуется.

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

HTML/CSS/JS код, готовый к интеграции, с комментариями и соблюдением принципов responsive design.

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

Можно адаптировать под конкретные требования по доступности (WCAG) или производительности.

Ограничения

Не включает бэкенд-логику или сложную бизнес-логику, фокус только на интерфейсе.

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

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

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

Выступи в роли опытного Frontend-разработчика. Твоя задача — создать современный и удобный интерфейс боковой панели (sidebar) для дашборда.

Ты должен выполнить следующие требования:
1. Сверстать адаптивный макет, используя HTML5 и CSS3.
2. Реализовать интерактивные элементы с помощью JavaScript для динамического обновления контента.
3. Обеспечить удобную навигацию и доступность (accessibility), включая сворачиваемые секции для разных функций.
4. Применить лучшие практики UX/UI дизайна для улучшения пользовательского опыта.

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

Выведи готовый код с комментариями, объясняющими ключевые решения.

Дизайн боковой панели дашборда

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

Комментарии