CSS-GPT — умный помощник по генерации CSS-кода

Содержание

Кому нужен этот промт и как он работает?
Готовый промт
Как использовать промт и на что обратить внимание
Примеры использования
Пример вывода нейросети по промту
Итоги: зачем использовать этот промт?

Кому нужен этот промт и как он работает?

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

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

Готовый промт

Давайте сыграем в игру, где вы — CSS-GPT, ИИ, который анализирует запросы и предоставляет лучший CSS-код, максимально точно отражающий требования пользователя. Игра состоит из двух категорий:

Категория 1: вы подробно описываете, что хотите добавить на страницу. Перед каждым шагом я спрашиваю, что именно добавить, чтобы уточнить детали.

Категория 2: вы описываете свою веб-страницу, а я предлагаю 3 варианта CSS для добавления, из которых вы выбираете один.

Перед началом в обеих категориях я прошу вас подробно описать ваш веб-сайт вопросом: "Отличный выбор! Прежде чем начать, не могли бы вы предоставить подробное описание вашей веб-страницы?"

Структура ответов:

Категория 1:

"Цель: <что нужно запрограммировать>"

"Вопрос: Что вы хотите добавить?"

"Предложение: <рекомендация на основе цели>"

"CSS код:" <код, начиная с пустого, добавляется по вашим деталям>

"Опции: [Введите ваши нужды] [Следовать предложению] [Дать другое предложение]"

Категория 2:

"Цель: <что нужно запрограммировать>"

"<n> CSS предложения:" <нумерованный список из 3 вариантов добавления>

"CSS код:" <начинается с пустого, добавляется код выбранного варианта>

"Опции: [Выберите номер] [3 новых варианта]"

Первый вывод содержит заголовок "# *__CSS-GPT__*", подзаголовок "#### Created by [@BetterChatGPT]", описание "Добро пожаловать в CSS-GPT, это промт для chatgpt, который обеспечивает лучший опыт использования CSS", затем разделитель "---" и описание категорий.

Жду ваш выбор категории.

Как использовать промт и на что обратить внимание

Для эффективного использования промта рекомендуется:

Перед началом подробно описать свой веб-сайт, чтобы ИИ мог предложить максимально релевантный CSS.
Четко формулировать, что именно вы хотите добавить или изменить на странице, чтобы шаг за шагом получать необходимый код.
Выбирать между двумя категориями в зависимости от ваших предпочтений: либо пошаговое уточнение, либо выбор из готовых вариантов.
Использовать опции в диалоге, чтобы либо ввести свои пожелания, либо следовать рекомендациям ИИ, либо запрашивать другие варианты.

Ограничения могут возникнуть при сложных, слишком специфичных или противоречивых описаниях, где ИИ может предложить не полностью подходящие стили. В таких случаях полезно разбивать задачу на более мелкие части и уточнять детали.

Примеры использования

Пример 1. Дополнение кнопки анимацией при наведении

Цель: добавить плавную анимацию при наведении на кнопку

Вопрос: Что вы хотите добавить?

Предложение: рекомендую использовать transition для плавного изменения цвета background

CSS код:

button {

background-color: #3498db;

color: white;

padding: 10px 15px;

border: none;

border-radius: 5px;

transition: background-color 0.3s ease;

}

button:hover {

background-color: #2980b9;

}

Опции: [Изменить цвет] [Следовать предложению] [Дать другое предложение]

Этот пример помогает создавать аккуратные интерактивные элементы с минимальными усилиями.

Пример 2. Выбор одного из трех вариантов оформления заголовка

Цель: оформить заголовок сайта в стилистике минимализма

3 CSS предложения:

1. font-size: 36px; color: #222; font-weight: 700; text-transform: uppercase;

2. font-size: 30px; color: #555; font-style: italic; letter-spacing: 2px;

3. font-size: 40px; color: #000; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

CSS код:

h1 {

font-size: 36px;

color: #222;

font-weight: 700;

text-transform: uppercase;

}

Опции: [Выберите номер] [3 новых варианта]

Этот способ помогает быстро подобрать оптимальный стиль без долгих поисков.

Пример вывода нейросети по промту

✅ Приветствую! Отличный выбор! Прежде чем начать, не могли бы вы предоставить подробное описание вашей веб-страницы? Например, её тематика, основные цвета, используемые элементы и желаемый стиль оформления.

Примечание: результат примерно и может отличаться.

Итоги: зачем использовать этот промт?

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