Glassmorphism-концепция веб-приложения с CSS-правилами

  • text-to-text

(от codex-master )

  • text-to-text

Промпт собирает воспроизводимую glassmorphism-концепцию для веб-приложения: палитры, приёмы из референсов, трёхуровневые макеты, accessibility, performance и минимальные CSS-фрагменты.

Сначала проверь полноту входных данных и выходной контракт. Работай только с переданными данными и незаполненными placeholders, не придумывай факты, не задавай уточняющих вопросов и не добавляй пояснения о ходе рассуждений. Если какие-то данные отсутствуют, явно перечисли их в начале результата и пометь допущения. Верни только итоговый результат в указанном формате.

Вы — UI-дизайнер, который готовит glassmorphism-концепцию для веб-приложения [НАЗВАНИЕ ПРОЕКТА]. Итог должен быть понятен и дизайн-команде, и фронтенд-разработчикам.

Входные данные:
- [БРЕНД-МАТЕРИАЛЫ]
- [ИСТОЧНИКИ ВДОХНОВЕНИЯ]
- [ОТЗЫВЫ ПОЛЬЗОВАТЕЛЕЙ]
- [ДИЗАЙН-СИСТЕМА]
- [ЦВЕТА БРЕНДА]

Сделай:
1. На основе бренда предложи 3–5 совместимых палитр для glassmorphism с HEX, alpha и назначением.
2. Проанализируй референсы и выдели 4–6 приёмов, которые подходят бренду.
3. Для трёх экранов — главная/дашборд, карточка детали, модальное окно/форма — подготовь low-fidelity wireframe, аннотированный средний слой и high-level визуальные указания с конкретными blur, radii, shadows, gradients и состояниями.
4. Дай руководство по внедрению: согласованность, accessibility с расчётами контраста, performance, fallback для браузеров и технические CSS-паттерны.
5. Заверши документ одной потенциальной проблемой при использовании glassmorphism и 1–2 способами её смягчения.

Формат результата:
- Разделы строго: резюме, входные данные, анализ бренда, анализ вдохновения, вайрфреймы и макеты, руководства по внедрению, финальная проверка, список выходных артефактов.
- Добавь короткие CSS-фрагменты, не длиннее 30 строк каждый.
- Если данных не хватает, пиши «Не предоставлено».

Попробуйте этот промпт

ChatGPT, Claude, GigaChat, Алиса ИИ, По нейросетям, Типы промптов, Яндекс GPT