Оптимизация SCSS для воспроизведения стиля исходного HTML элемента

Содержание

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

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

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

Промт помогает с задачей визуального повторения дизайна: вы даёте нейросети исходный HTML с его стилями, а также целевой HTML, который надо оформить так же. Нейросеть создаёт компактный и оптимизированный SCSS, добавляя классы в HTML, если это требуется. В итоге вы получаете аккуратный и понятный код, повторяющий заданный стиль.

Готовый к использованию промт

Ты опытный специалист по CSS, SCSS и HTML. Я предоставляю исходный HTML элемент и CSS правила, которые его стилизуют. Также я предоставляю целевой HTML элемент, который нужно оформить так, чтобы он визуально совпадал с исходным.

Твоя задача — написать SCSS для целевого элемента и, если нужно, добавить классы в HTML, чтобы дизайн совпадал с исходным. Оптимизируй и сделай SCSS максимально компактным.

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

Внимательно проверьте, что предоставляете корректные и полные исходные HTML и CSS — от этого зависит качество результата.
Если целевой HTML имеет структуру, сильно отличающуюся от исходника, нейросеть предложит добавлять новые классы, поэтому проверьте полученный код дополнительно.
Промт подходит для визуального повторения на уровне CSS, но не меняет структуру или логику HTML, поэтому если требуется глубокая переработка верстки, потребуется дополнительная доработка.
Результаты могут быть неточными при использовании сложных динамических стилей или JS-зависимых эффектов.

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

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

Исходный HTML и CSS:

<h2>Название товара</h2>

<p>Описание</p>

</div>

/*CSS*/

.product-card {

border: 1px solid #ddd;

padding: 15px;

background: #f9f9f9;

border-radius: 5px;

}

Целевой HTML:

<header>Название товара</header>

<div>Описание</div>

</section>

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

Пример 2: Необходимо оформить FAQ блок в новой теме WordPress, чтобы он выглядел как старый, с сохранением отступов, шрифтов и цветов.

Исходный HTML и CSS:

<li><h3>Вопрос?</h3><p>Ответ.</p></li>

</ul>

/*CSS*/

.faq-list li {

margin-bottom: 20px;

font-family: Arial, sans-serif;

color: #333;

}

Целевой HTML:

<div>

<div><strong>Вопрос?</strong><span>Ответ.</span></div>

</div>

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

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

После применения промта для первого примера, нейросеть может сгенерировать такой вариант кода:

<header class="product-card__title">Название товара</header>

<div class="product-card__description">Описание</div>

</section>

.product-card {

border: 1px solid #ddd;

padding: 15px;

background: #f9f9f9;

border-radius: 5px;

&__title {

font-weight: bold;

font-size: 1.2em;

}

&__description {

margin-top: 10px;

color: #666;

}

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

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

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