Урок 1: Возможности LLM-моделей заканчиваются там, где заканчиваются твои!

Цель урока:

Познакомить пользователей с основами эффективного взаимодействия с LLM-моделями (ChatGPT, DeepSeek и др.), научить формулировать четкие технические задания (ТЗ) вместо абстрактных запросов и показать разницу между плохими и хорошими промтами.

Ключевые темы:

  • Почему "промт" — это ТЗ
    Сравнение работы с ИИ и сотрудником
  • Примеры промтов
    5 кейсов: от названия продукта до кода
  • Важность ТЗ
    Как ИИ "угадывает" без инструкций
  • Если не знаешь, чего хочешь
    Как получить уточняющие вопросы от ИИ

Практическая польза:

  • Превращение абстракций в рабочие инструкции
  • Сокращение времени на правки на 60-80%
  • Готовые решения вместо сырых вариантов
  • Навык, который станет базовым как Excel

Итог: Вы научитесь получать от ИИ именно то, что нужно, а не случайные варианты

Навигация по уроку

  • 1.1 Не промт — А грамотно поставленное ТЗ!
  • 1.2 Примеры: Плохие vs хорошие промты!
  • 1.3 Почему важно уметь делать правильное ТЗ
  • 1.4 Перестань думать!
  • Тестовое задание!

1.1 Не промт — А грамотно поставленное ТЗ!

Для начала хотелось развеять слово "промт-инженер"! На самом деле никакого секретного создания промта нету, ведь само составление так называемого «промта» — это грамотно поставленное ТЗ.

Если мы возьмем неизвестного нам специалиста, например, на Kwork, и сотрудника, с которым мы работаем на протяжении нескольких лет, то:

Специалист с Кворк:

Будет для нас совершенно непонятен в плане понимания его мышления. Как и мы для него в описании наших задач по типу — "хочу эту штуку, чтобы было топ прям". Нам нужно будет описать ему все до деталей, расписывая все по пунктам, делать правки и отвечать на его вопросы для получения нужного нам результата.

Сотрудник в команде:

Если мы работаем с сотрудником достаточно долго и регулярно, то для понимания контекста работы нам все равно нужно будет созвониться, обсудить задачу, расписать таск и поставить метки (чтобы не забыть при выполнении) для получения нужного результата.

Это говорит о том, что сотрудники в команде не = cделает все сам. Ему так же придется расписывать ТЗ, для получения нужного результата.

И в качестве такого сотрудника нам выступает ChatGPT/DeepSeek!

Но просто делегировать и уйти пить кофе не получится! Кликать мышкой и думать придется!

1.2 Примеры: Плохие vs хорошие промты!

Нельзя сказать, что LLM модель не может сделать что либо. Скорее это не ее ограниченность, а ограниченность твоего ТЗ. Приведу несколько максимально простых и банальных примеров:

Пример 1: Название продукта

Допустим, тебе нужно придумать название для нового IT-продукта.

❌ Плохой запрос:

"Придумай мне название для приложения."

Что получится? Нечто общее, без учета специфики - "TechApp".

✅ Хороший запрос:

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

Результат: "CodeNomad", "DevLink", "RemoteHunt" – уже звучит куда интереснее!

Пример 2: Улучшение сайта

❌ Плохой запрос:

"Как улучшить мой сайт?"

Ответ:

"Чтобы улучшить ваш сайт, сделайте удобный интерфейс, ускорьте загрузку страниц, добавьте качественный контент, проработайте SEO и убедитесь, что сайт адаптирован под мобильные устройства."

Проблема: Слишком общее, ничего конкретного. Такие советы можно применить к любому сайту.

✅ Хороший запрос:

"У меня интернет-магазин электроники. Основная проблема – низкая конверсия в корзину. Дай рекомендации по улучшению UX и оптимизации карточек товаров, чтобы повысить процент покупок."

Ответ:

"Для повышения конверсии в корзину:
1. Сделайте кнопку "Купить" контрастной и заметной.
2. Добавьте блок "Отзывы покупателей" рядом с ценой – доверие увеличивает вероятность покупки.
3. Уменьшите количество полей при оформлении заказа – длинные формы отпугивают пользователей.
4. Сделайте кнопку "Добавить в корзину" не просто текстовой, а с анимацией или всплывающим уведомлением, чтобы пользователь видел результат своих действий.
5. Покажите срок доставки прямо в карточке товара, это помогает принять решение быстрее."

Разница: Чёткие, применимые рекомендации, описание основной проблемы, а не общие фразы.

Пример 3: Написание сценария для рекламы

❌ Плохой запрос:

"Напиши сценарий рекламы для кофе."

Ответ:

"Кадр 1: Человек пьёт кофе.
Кадр 2: Крупный план чашки.
Кадр 3: Логотип компании.
Голос за кадром: "Лучший кофе – для лучшего утра!""

Проблема:

Банально, без уникальности. Такой сценарий можно использовать для чего угодно.

✅ Хороший запрос:

"Мне нужен сценарий 30-секундного видеоролика для Instagram. Мы продаем премиальный кофе, целевая аудитория – молодые профессионалы 25-35 лет, ценящие вкус и качество. Хочется сделать стильную, динамичную рекламу с акцентом на аромат и утренний ритуал."

Ответ:

Сценарий:
Кадр 1:
Раннее утро, вид на панораму города. Медленный зум на окно квартиры.
Кадр 2:
Мужчина и женщина готовятся к работе, но что-то не так – они выглядят уставшими.
Кадр 3:
Женская рука нажимает на кнопку кофемашины, слышится звук свежемолотых зёрен.
Кадр 4:
Крупный план: ароматный пар поднимается над чашкой.
Кадр 5:
Персонажи делают первый глоток. Камера показывает их расслабленные лица – кайф от настоящего кофе.
Кадр 6:
Логотип и слоган: *"Утро начинается с аромата. Премиальный кофе для лучших дней.""

Разница: Вместо шаблонного текста – живая картинка, которая реально продаёт продукт.

Пример 4: Создание продающего текста

Допустим, ты решил заказать текст для лендинга, который будет продавать твою услугу.

❌ Плохой запрос:

"Напиши текст для сайта, который продаёт маркетинговые услуги."

Ответ:

"Мы предлагаем маркетинговые услуги для вашего бизнеса. Помогаем привлекать клиентов, увеличивать прибыль и продвигать ваш бренд."

Проблема:

Размыто, обобщённо, не учитывает специфику бизнеса. Это можно поставить на любой сайт – и не факт, что это вообще сработает.

✅ Хороший запрос:

"Мне нужен текст для лендинга, который продаёт таргетированную рекламу для интернет-магазинов одежды. Целевая аудитория – владельцы магазинов, которые пробовали рекламу, но не получили результата. В тексте должны быть три ключевые выгоды: 1) Точные настройки под нужную аудиторию; 2) Минимальный бюджет для старта; 3) Прозрачная аналитика. Стиль – живой, без канцеляризмов."

Ответ:

- "Вы уже пробовали запускать рекламу, но она не принесла продаж? Всё потому, что 80% рекламных бюджетов тратятся неэффективно.
Мы настраиваем таргет так, чтобы каждое объявление попадало прямо в вашу аудиторию.
✔ Небольшой бюджет – тестируем и сразу видим, что работает.
✔ Только заинтересованные клиенты – без слива бюджета на случайных людей.
✔ Полная аналитика – вы видите, откуда пришёл каждый клиент.
Запустим тестовую кампанию за 48 часов. Оставьте заявку, и мы бесплатно проанализируем ваш предыдущий опыт в рекламе!"*

Разница: Вместо сухого "мы продаём маркетинговые услуги" – живой текст, который бьёт в боль клиента и сразу предлагает решение.

Пример 5: Написание кода

Допустим, тебе нужно, чтобы ChatGPT написал тебе небольшой скрипт.

❌ Плохой запрос:

"Напиши код для парсинга сайта."

Ответ:

import requests
from bs4 import BeautifulSoup

url = "https://example.com"
response = requests.get(url)
soup = BeautifulSoup(response.text, "html.parser")
print(soup.title.text)

Проблема:

Скрипт ничего не делает, кроме как берёт заголовок страницы. Но если ты хотел спарсить каталог товаров или собирать цены – ничего не выйдет.

✅ Хороший запрос:

"Мне нужен Python-скрипт, который парсит сайт интернет-магазина. Нужно собрать названия товаров, их цену и ссылку на картинку. Данные сохранить в CSV-файл. Использовать библиотеку BeautifulSoup."

Ответ:

import requests
from bs4 import BeautifulSoup
import csv

url = "https://example.com/catalog"
response = requests.get(url)
soup = BeautifulSoup(response.text, "html.parser")

products = []

for item in soup.find_all("div", class_="product"):
    title = item.find("h2").text
    price = item.find("span", class_="price").text
    image = item.find("img")["src"]

    products.append([title, price, image])

with open("products.csv", "w", newline="") as file:
    writer = csv.writer(file)
    writer.writerow(["Название", "Цена", "Ссылка на изображение"])
    writer.writerows(products)

Разница:

Теперь скрипт реально делает работу, потому что запрос описал что нужно, в каком формате и с каким результатом.

Примеры максимально простые и банальные, но они хорошо показывают отличие от классических пользовательских запросов в понимании “ЭТА КНОПКА ВСЕ СДЕЛАЕТ САМА”, и запроса с вводными данными, которые передают наше понимание того, что мы хотим получить.

Когда ты описываешь свой запрос так, будто объясняешь задачу живому специалисту, ChatGPT начинает работать как твой полноценный ассистент. Чем больше деталей ты добавишь, тем лучше он поймёт контекст, а значит, тем точнее будет результат. Проще говоря – LLM-модель не угадывает, а опирается на твои вводные данные.

1.3 Почему важно уметь делать правильное ТЗ

Специфика LLM моделей построена так, что она угадывает, а не пытается думать и размышлять логически.

Пример с логикой:

Мы:

На столе лежал банан, а под столом был пролит кофе. Стол был перевернут и вынесен в прихожую. Какие вещи сейчас находятся в прихожей? Ответьте только по списку.

Ответ ChatGPT:

  • Стол
  • Банан
  • Кофе (возможно, следы или остатки)

Мы:

А если подумать логически?

Ответ ChatGPT 2:

Если подумать логически:

  • Стол
  • Банан (если он не упал со стола при переворачивании)
  • Кофе (если он был на столе или пролит на поверхность, которая была перевернута)

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

Таким образом при постановке логических задач, модель будет ошибаться и нам нужно будет ее заставлять думать или указывать на возможные проблемы. А что если у нас не логичная задача, а просто классическое задание для верстальщика?

Просто сказать чату «сделай мне блок с формой заявки в HTML, чтобы она была красивой и удобной» можно! И в целом вы получите нормальный результат для модели, которая пытается угадать. (С формой заявки мы еще ни раз встретимся...) 

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Форма заявки</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            padding: 15px;
            box-sizing: border-box;
        }

        .form-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
        }

        .form-container h2 {
            margin-bottom: 20px;
            font-size: 24px;
            color: #333;
            text-align: center;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #555;
        }

        .form-group input,
        .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            box-sizing: border-box;
        }

        .form-group button {
            width: 100%;
            padding: 10px;
            background-color: #28a745;
            border: none;
            border-radius: 4px;
            color: #fff;
            font-size: 16px;
            cursor: default;
        }

        .form-group button:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <h2>Форма заявки</h2>
        <form action="#" method="post">
            <div class="form-group">
                <label for="name">Имя:</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="phone">Телефон:</label>
                <input type="tel" id="phone" name="phone" required>
            </div>
            <div class="form-group">
                <label for="service">Услуга:</label>
                <select id="service" name="service" required>
                    <option value="">Выберите услугу</option>
                    <option value="consultation">Консультация</option>
                    <option value="repair">Ремонт</option>
                    <option value="delivery">Доставка</option>
                </select>
            </div>
            <div class="form-group">
                <button type="button" style="cursor: default;">Отправить заявку</button>
            </div>
        </form>
    </div>
</body>
</html>

Форма заявки

На примере мы получили блок с полями под (Имя, Email, Телефон, Тип услуги). И в целом исходя из нашего запроса чат достаточно хорошо угадал создав то, что мы и просили. "сделай мне блок с формой заявки в HTML, чтобы она была красивой и удобной" - форма заявки? - Да. HTML? - Да. Красиво? - на вкус и цвет как говорится... Удобно? Вполне!

Но соответствует ли это нашим ожиданиям? А сделал ли чат этот блок оптимизированным под мобильные устройства? А соответствует ли это стилю нашего сайта? А пункты на заполнение данных? Форма и расположение? Сама форма работает вообще? А зачем нам основные теги <html>, <head>, <body> если у нас и так уже страница содержит основные теги и нам нужен тупо один новый блок?

А что если попробовать дать такое же ТЗ вашему сотруднику или фрилансеру на kwork? Ему ведь тоже придется угадывать. (Конечно грамотный сотрудник задаст все нужные вопросы, чтобы не гадать.)

  1. Какие оттенки.
  2. Какие должны быть поля для заполнения данных.
  3. Расположение формы (Вертикальное, Горизонтальное)
  4. Какой язык программирования.
  5. Куда должно идти сообщение.
  6. и тд. и тп.

Тоже самое должны и вы составить для себе перед отправкой запроса в chatGPT. И вот вам пример.

Мы:

Мне нужна форма заявки в html для моего сайта на php с курсом. Форма заявки должна содержать:
1. Имя (Псевдоним).
2. Телефон.
3. Telegram.
4. Whats Up.
5. Email.
6. Способ оплаты (Крипта, Карта).
7. Сообщение.
8. Цвета и дизайн должны быть в мягких темных тонах, но не сильно черных, так, чтобы было удобно смотреть глазу и не резало кислотными оттенками.
9. Расположение горизонтальное.
10. Оптимизировать под мобильные устройства.
11. Все стили сделать inline для удобства редактирования.
12. Сообщение должно отправляться сразу же в ТГ бота, токен тг бота - "TOKEN".
13. Мне нужны только блоки с формой и файлом для отправки без основных тегов html.

ChatGPT:

Вот пример формы заявки, которая соответствует вашим требованиям. Форма будет отправлять данные в Telegram-бота с использованием AJAX. Все стили сделаны inline для удобства редактирования.

Пояснения:

  1. Стили: Все стили сделаны inline для удобства редактирования. Цвета подобраны в мягких темных тонах.
  2. Расположение: Форма имеет горизонтальное расположение с использованием flexbox.
  3. Оптимизация под мобильные устройства: Форма адаптируется под мобильные устройства благодаря использованию flex-wrap и flex свойств.
  4. Отправка в Telegram: Используется API Telegram для отправки сообщений. Вам нужно заменить TOKEN на токен вашего бота и YOUR_CHAT_ID на ваш chat_id.

Как получить chat_id:

  1. Создайте бота в Telegram.
  2. Напишите боту любое сообщение.
  3. Перейдите по ссылке: https://api.telegram.org/bot(TOKEN)/getUpdates, заменив (TOKEN) на токен вашего бота.
  4. В ответе вы увидите chat_id в поле message.chat.id.

Дополнительно:

- Если вы хотите, чтобы форма отправляла данные на сервер PHP, а уже сервер отправлял сообщение в Telegram, вам нужно будет немного изменить скрипт и добавить обработчик на стороне сервера. 

<div style="background-color: #2d2d2d; padding: 20px; border-radius: 10px; font-family: Arial, sans-serif; color: #e0e0e0; max-width: 100%; margin: 0 auto; box-sizing: border-box;">
    <form id="applicationForm" style="display: flex; flex-wrap: wrap; gap: 10px;">
        <input type="text" name="name" placeholder="Имя (Псевдоним)" required style="flex: 1 1 100%; min-width: 200px; padding: 10px; border-radius: 5px; border: 1px solid #444; background-color: #3d3d3d; color: #e0e0e0; box-sizing: border-box;">
        <input type="tel" name="phone" placeholder="Телефон" required style="flex: 1 1 100%; min-width: 200px; padding: 10px; border-radius: 5px; border: 1px solid #444; background-color: #3d3d3d; color: #e0e0e0; box-sizing: border-box;">
        <input type="text" name="telegram" placeholder="Telegram" required style="flex: 1 1 100%; min-width: 200px; padding: 10px; border-radius: 5px; border: 1px solid #444; background-color: #3d3d3d; color: #e0e0e0; box-sizing: border-box;">
        <input type="text" name="whatsapp" placeholder="WhatsApp" required style="flex: 1 1 100%; min-width: 200px; padding: 10px; border-radius: 5px; border: 1px solid #444; background-color: #3d3d3d; color: #e0e0e0; box-sizing: border-box;">
        <input type="email" name="email" placeholder="Email" required style="flex: 1 1 100%; min-width: 200px; padding: 10px; border-radius: 5px; border: 1px solid #444; background-color: #3d3d3d; color: #e0e0e0; box-sizing: border-box;">
        <select name="payment_method" required style="flex: 1 1 100%; min-width: 200px; padding: 10px; border-radius: 5px; border: 1px solid #444; background-color: #3d3d3d; color: #e0e0e0; box-sizing: border-box;">
            <option value="crypto">Крипта</option>
            <option value="card">Карта</option>
        </select>
        <textarea name="message" placeholder="Сообщение" required style="flex: 1 1 100%; padding: 10px; border-radius: 5px; border: 1px solid #444; background-color: #3d3d3d; color: #e0e0e0; min-height: 100px; box-sizing: border-box;"></textarea>
        <button type="button" style="flex: 1 1 100%; padding: 10px; border-radius: 5px; border: none; background-color: #4CAF50; color: white; cursor: default;">Отправить заявку</button>
    </form>
</div>

<script>
document.getElementById('applicationForm').addEventListener('submit', function(event) {
    event.preventDefault();

    const formData = new FormData(this);
    const data = {};
    formData.forEach((value, key) => {
        data[key] = value;
    });

    const botToken = 'TOKEN';
    const chatId = 'YOUR_CHAT_ID'; // Замените на ваш chat_id
    const message = `Новая заявка:\nИмя: ${data.name}\nТелефон: ${data.phone}\nTelegram: ${data.telegram}\nWhatsApp: ${data.whatsapp}\nEmail: ${data.email}\nСпособ оплаты: ${data.payment_method}\nСообщение: ${data.message}`;

    fetch(`https://api.telegram.org/bot${botToken}/sendMessage`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            chat_id: chatId,
            text: message
        })
    })
    .then(response => response.json())
    .then(result => {
        alert('Заявка успешно отправлена!');
        document.getElementById('applicationForm').reset();
    })
    .catch(error => {
        console.error('Ошибка:', error);
        alert('Произошла ошибка при отправке заявки.');
    });
});
</script>

Выглядит довольно прилично и близко к тому, что мы хотели исходя из нашего запроса!

И главная особенность в том, что ему не пришлось гадать и добавлять не нужных нам тегов, выдумывать тему обращения, он идет четко по составленным параметрам нашего ТЗ. С этим уже можно работать.

1.4 Перестань думать!

Теперь рассмотрим с вами вариант, где мы в целом не знаем, что хотим получить в финальном результате и имеем в арсенале только классические пользовательские вопросы.

Рассмотрим на примере с формой заявки. Наш первый запрос был "сделай мне блок с формой заявки в HTML, чтобы она была красивой и удобной". Где чат пытается угадать. А во втором варианте нашего запроса для формы мы расписали все по пунктам зная, что нам нужно. Но мы так же можем попробовать попросить чат задать нам вопросы, которые ему нужны для получения качественного результата.

М

Мне надо сделать форму заявки для моего сайта. Но я пока не знаю, что именно хочу. Задай мне вопросы, которые помогут тебе разобраться в том, чтобы у тебя получился хороший блок с формой.

Ч

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

  1. Цели формы
    • Какую основную цель преследует форма? (например, сбор контактных данных, регистрация на мероприятие, запрос обратного звонка, подписка на рассылку и т.д.)
    • Что вы хотите получить от пользователя после заполнения формы?
  2. Аудитория
    • Кто ваша целевая аудитория? (например, возраст, профессия, интересы)
    • Насколько технически подкованы ваши пользователи? Это поможет определить, насколько простая или сложная форма будет удобна.
  3. Тип данных
    • Какие данные вы хотите собирать? (например, имя, email, телефон, компания, должность, комментарии и т.д.)
    • Есть ли обязательные и необязательные поля?
    • Нужно ли собирать дополнительные данные, такие как файлы (резюме, документы) или выбор из списка (например, услуги, продукты)?
  4. Дизайн и UX
    • Какой стиль оформления вы предпочитаете? (минимализм, яркие цвета, корпоративный стиль и т.д.)
    • Должна ли форма быть компактной или развернутой?
    • Чекбоксы для согласия на обработку данных?
    • Кнопки социальных сетей для быстрой авторизации?
    • Интерактивные элементы (выпадающие списки, календари для выбора даты и т.д.)?
  5. Интеграция
    • Куда должны отправляться данные из формы? (например, на email, в CRM, в базу данных)
    • Нужны ли уведомления для пользователя после отправки формы? (например, сообщение об успешной отправке или письмо на email)
    • Нужно ли интегрировать форму с другими сервисами (например, Google Analytics, Mailchimp, Telegram)?
  6. Валидация и безопасность
    • Нужна ли проверка данных (валидация)? Например, проверка email, телефона или обязательных полей.
    • Нужно ли добавить защиту от спама (например, CAPTCHA или скрытые поля)?
  7. Мобильная версия
    • Должна ли форма быть адаптивной и корректно отображаться на мобильных устройствах?
    • Есть ли особые требования к удобству использования на смартфонах?
  8. Примеры и вдохновение
    • Есть ли у вас примеры форм, которые вам нравятся? (ссылки или скриншоты)
    • Какие элементы из этих форм вы хотели бы использовать?

Таким образом мы убираем вариант с некачественным ответом, убираем вариант с самостоятельным продумыванием того, что нам надо и просто отвечаем на его вопросы в нужном нам формате.

М

Слишком много вопросов и я не понимаю некоторые пункты. У нас просто сайт и мы занимаемся продажей маркетинговых услуг. Мне просто на сайт нужна форма. Задай мне меньше основных вопросов, чтобы ты понял суть дела.

Ч

Понял! Давайте упростим. Вот несколько ключевых вопросов, которые помогут нам быстро разобраться и создать подходящую форму для вашего сайта:

  1. Основная цель формы
    • Что вы хотите получить от пользователей? (например, заявка на консультацию, запрос коммерческого предложения, обратный звонок, подписка на новости).
  2. Какие данные нужны
    • Какие поля должны быть в форме? (например, имя, телефон, email, комментарий).
    • Есть ли обязательные поля? (например, телефон или email).
  3. Внешний вид
    • Форма должна быть простой (минимум полей) или более детальной (например, с выбором услуги или дополнительными вопросами)?
    • Должна ли форма выделяться на странице (например, яркая кнопка или фон)?
  4. Куда отправлять данные
    • Куда должны приходить заявки? (например, на email, в CRM или мессенджер).
    • Нужно ли уведомлять пользователя об успешной отправке?
  5. Дополнительные функции
    • Нужна ли защита от спама (например, CAPTCHA)?
    • Нужно ли добавить согласие на обработку персональных данных (чекбокс)?

Этих вопросов достаточно, чтобы я понял, какую форму вам нужно сделать. Если что-то непонятно, дайте знать — объясню проще! 😊

И так далее, шаг за шагом мы можем или упрощать вопросы от чата или интересоваться у него непонятными для нас вопросами:

М

Что такое CAPTCHA?

Ч

CAPTCHA — это небольшой тест, который помогает отличить реальных пользователей от роботов (автоматических программ). Это нужно для защиты формы от спама и автоматических заполнений.

Как это выглядит:

  • Классическая CAPTCHA: Пользователю показывают искаженный текст или цифры, которые нужно ввести в поле.

Если хотите, я могу предложить, как лучше реализовать CAPTCHA или альтернативные методы защиты. 😊

К чему все эти примеры, возможно кому-то это покажется глупым и странным, но основной наклон идет на то, что мы общаемся с ним как с нашим ассистентом. Любые наши возможные не понимания при составлении ТЗ или каких-то моментов доработок. Мы всегда сможем обратиться к чату напрямую. Это говорит о том, что модель в целом сама знает какие должны и могут присутствовать детали в ответе. Нам остается только спросить, что ему нужно или выдать четкое ТЗ.

И так, 1 Урок подошел к концу!

В следующем уроке мы рассмотрим более сложные примеры взаимодействия с LLM:

  • Как модель теряет мысль и может ошибается.
  • Веб-разработка.
  • Работа с данными.
  • LLM как учитель.
Ниже попробуйте выполнить тестовое задание.

Тестовое задание!

(Не пугайтесь кода и того, что вы не знаете как это работает, все получится!)

Задача:

  1. Создать HTML-блок формы заявки
  2. Модифицировать его изменив (Дизайн, Пункты заполнения) с помощью LLM (ChatGPT/DeepSeek)

Для этого вам понадобится:

  • Любой онлайн редактор HTML, например: One Compiler HTML
  • Сама LLM модель (ChatGPT/DeepSeek)
  • Составленное ТЗ для LLM

Подсказки:

  • Если не понимаете как это работает - задавайте вопросы непосредственно LLM с пояснением, что вам не ясно
  • При редактировании блока заявки указывайте чату все что у вас есть в "СКОБКИ"
    У меня есть блок заявки в HTML:

    "ВСТАВЬТЕ ВЕСЬ КОД СУЩЕСТВУЮЩЕГО БЛОКА"

    ВАШЕ ТЗ + Дай мне полностью обновленный код ничего не обрезая и не сокращая

Дополнительное задание:

Если все получилось, попробуйте создать новый дополнительный блок после формы, например блок с адресом и контактной информацией.

Пример как можно обратиться к ChatGPT:

М

Напиши HTML-код для простой формы заявки с полями: Имя, Email и кнопкой "Отправить". Дай полный код без сокращений.

Ч

Вот простой HTML-код формы:

<form style="max-width: 400px; margin: 0 auto; padding: 20px; border: 1px solid #ddd; border-radius: 5px;">
    <div style="margin-bottom: 15px;">
        <label for="name" style="display: block; margin-bottom: 5px;">Имя:</label>
        <input type="text" id="name" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
    </div>
    <div style="margin-bottom: 15px;">
        <label for="email" style="display: block; margin-bottom: 5px;">Email:</label>
        <input type="email" id="email" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
    </div>
    <button type="submit" style="background-color: #4CAF50; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer;">Отправить</button>
</form>

Успешного выполнения задания!

Помните: если что-то не получается - просто спросите у ChatGPT/DeepSeek!