Перетяжка, Дом карьеры
Перетяжка, Дом карьеры
Перетяжка, Дом карьеры
Написать пост

Grokаем виджеты: пишем код с Grok 3 от Маска

Аватар Виктория Эберт
Виктория Эберт
для
Логотип компании Tproger
Tproger

Илону Маску не хватает X и SpaceX — теперь он зашел на территорию вайб-кодинга. Мы проверили Grok 3 в деле, заставив его писать веб-виджеты: как он справился с Pomodoro-таймером и трекером кофе? А главное — может ли он на равных конкурировать с ChatGPT и DeepSeek?

839 открытий3К показов
Grokаем виджеты: пишем код с Grok 3 от Маска

Grok 3 — новый ИИ от компании xAI, основанной Илоном Маском. Его запустили в тестовом режиме 19 февраля, и он уже наделал шуму в соцсетях. Маск заявил, что эта модель ищет правду, даже если та противоречит общепринятым нормам и политкорректности.

Зачем айтишникам нужны инвестиции: куда вкладывать деньги, пока они есть
tproger.ru

По отзывам, Grok хорошо генерирует текст и даже может создавать изображения, используя образы известных личностей. Но есть нюанс: с цензурой у него как-то не задалось. Спустя пару дней после релиза пользователь X* @LinusEkenstam рассказал, что нейросеть выдала ему инструкцию по созданию химического оружия. Такую подробную, что даже в Breaking Bad бы позавидовали. Grok 3 не только составил пошаговый гайд и список для шопинга, но и с трогательной заботой напомнил про респиратор — дескать, безопасность превыше всего. Это в очередной раз вызвало шквал вопросов по поводу мер безопасности в компаниях техномагната.

Но какие возможности предоставляет Grok и так ли он хорош? Разберемся далее.

*Запрещен на территории РФ

Возможности Grok 3: код

В официальном блогпосте xAI говорится, что Grok 3 хорошо проявил себя в генерации кода. На тесте LiveCodeBench Grok 3 (Think) достиг 79,4% успеха, а Grok 3 mini показал ещё более лучший результат, набрав 80,4%. Grok 3 оснащен режимами размышлений и глубокого исследования, а также встроенным интерпретатором для исполнения кода.

70-летняя бабуля изучила программирование и написала игру
tproger.ru

На Reddit обсуждают его слабые и сильные стороны в кодинге: некоторые хвалят работу с нишевыми библиотеками на Rust, но многие критикуют модель за не самые выдающиеся результаты. Один пользователь отметил, что хоть Grok 3 и не дотягивает до Claude Sonnet 3.5, для некоторых задач он всё-таки лучше.

«Пока, судя по всему, не очень хорошо» 
«Ерунда»
«Пользуюсь им уже 7 дней, и он УЖАСЕН!» 

Возможности Grok 3: доступ

20 февраля доступ к Grok 3 стал бесплатным на неопределенное время («пока наши серверы не расплавятся»). Нейросеть доступна на grok.com.

После бесплатного тестирования придётся выложить $30/месяц или $300/год за SuperGrok. Для платных юзеров — плюшки в виде голосового режима и дополнительных запросов к «думающей» модели.

Grokаем виджеты: пишем код с Grok 3 от Маска 1
Описание платной подписки SuperGrok

С доступом и базовыми возможностями разобрались. Перейдем к самому сладкому. Попробуем сгенерировать простые виджеты с помощью модели и сравнить их с результатами ChatGPT и DeepSeek.

Генерируем простые виджеты

Pomodoro-таймер

Cоздадим простой Pomodoro-таймер с классическим циклом: 25 минут работы и 5 минут отдыха. Логику и дизайн зададим в промпте:

Создай минималистичный виджет Pomodoro-таймера, который можно было бы вставить в Notion через embed (iframe). Таймер должен иметь классический режим (25 минут работы и 5 минут отдыха). 

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

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

Интерфейсу необходимо иметь кнопки управления (старт и сброс).
Добавь также 10 мотивирующих надписей на русском языке, которые будут меняться каждые 5 минут после нажатия кнопки старт.

Grok сгенерировал код для виджета, используя HTML, CSS и JavaScript:

			<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pomodoro Timer</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #ffffff;
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .timer-container {
            background: linear-gradient(135deg, rgba(147, 112, 219, 0.2), rgba(255, 182, 193, 0.2), rgba(135, 206, 235, 0.2));
            border-radius: 20px;
            padding: 20px;
            width: 300px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        .timer-display {
            font-size: 2.5em;
            color: #4B0082;
            margin: 20px 0;
        }
        .buttons {
            margin: 20px 0;
        }
        button {
            background: linear-gradient(135deg, #9370DB, #FFB6C1, #87CEEB);
            border: none;
            padding: 10px 20px;
            margin: 0 10px;
            border-radius: 15px;
            color: white;
            cursor: pointer;
            opacity: 0.9;
            transition: opacity 0.3s;
        }
        button:hover {
            opacity: 1;
        }
        .motivation {
            font-size: 1em;
            color: #483D8B;
            margin-top: 20px;
            min-height: 40px;
        }
        .total-time {
            font-size: 0.9em;
            color: #6A5ACD;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="timer-container">
        <div class="timer-display">25:00</div>
        <div class="buttons">
            <button onclick="startTimer()">Старт</button>
            <button onclick="resetTimer()">Сброс</button>
        </div>
        <div class="motivation"></div>
        <div class="total-time"></div>
    </div>

    <script>
        const motivations = [
            "Ты делаешь потрясающую работу!",
            "Каждый шаг приближает тебя к цели.",
            "Сосредоточься, у тебя все получится!",
            "Ты сильнее, чем думаешь.",
            "Маленькие усилия приводят к большим результатам.",
            "Верь в себя, ты на верном пути!",
            "Твой труд вдохновляет!",
            "Не останавливайся, ты почти у цели!",
            "Каждая минута — это шаг вперед.",
            "Ты создаешь свое будущее прямо сейчас."
        ];
        let time = 25 * 60;
        let isWorking = true;
        let timer = null;
        let totalTime = 0;
        let lastResetDate = new Date().toDateString();
        let motivationIndex = 0;

        const timerDisplay = document.querySelector('.timer-display');
        const motivationText = document.querySelector('.motivation');
        const totalTimeText = document.querySelector('.total-time');

        function updateDisplay() {
            const minutes = Math.floor(time / 60);
            const seconds = time % 60;
            timerDisplay.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
        }
        function startTimer() {
            if (timer) return;

            const currentDate = new Date().toDateString();
            if (currentDate !== lastResetDate) {
                totalTime = 0;
                lastResetDate = currentDate;
                updateTotalTime();
            }
            timer = setInterval(() => {
                if (time > 0) {
                    time--;
                    updateDisplay();

                    if (time % (5 * 60) === 0 && time !== 0) {
                        motivationIndex = (motivationIndex + 1) % motivations.length;
                        motivationText.textContent = motivations[motivationIndex];
                    }
                } else {
                    if (isWorking) {
                        totalTime += 25 * 60;
                        time = 5 * 60;
                        isWorking = false;
                    } else {
                        time = 25 * 60;
                        isWorking = true;
                    }
                    updateTotalTime();
                    updateDisplay();
                    motivationIndex = (motivationIndex + 1) % motivations.length;
                    motivationText.textContent = motivations[motivationIndex];
                }
            }, 1000);

            if (!motivationText.textContent) {
                motivationText.textContent = motivations[0];
            }
        }
        function resetTimer() {
            clearInterval(timer);
            timer = null;
            time = 25 * 60;
            isWorking = true;
            updateDisplay();
            motivationText.textContent = '';
        }
        function updateTotalTime() {
            if (totalTime > 0) {
                const hours = Math.floor(totalTime / 3600);
                const minutes = Math.floor((totalTime % 3600) / 60);
                totalTimeText.textContent = `Вы сегодня фокусировались ${hours ? hours + ' ч ' : ''}${minutes} мин`;
            } else {
                totalTimeText.textContent = '';
            }
        }
        updateDisplay();
    </script>
</body>
</html>

Также можно протестировать таймер прямо внутри интерфейса языковой модели:

Grokаем виджеты: пишем код с Grok 3 от Маска 2
Смотрим виджет на встроенном интерпретаторе

Код был сопровожден инструкцией, как задеплоить виджет:

Grokаем виджеты: пишем код с Grok 3 от Маска 3
Инструкция к коду от Grok 3

В одной из тестовых генераций Grok заботливо предупредил, что при перезагрузке страницы данные о предыдущих таймерах будут утеряны, и предложил решение:

Grokаем виджеты: пишем код с Grok 3 от Маска 4
Grok 3 подумал о логике работы виджета (но не о всей)

Однако код не был сопровождён комментариями. Но можно попросить добавить следующей итерацией:

Grokаем виджеты: пишем код с Grok 3 от Маска 5
Grok 3 дописал комментарии к коду

Сравниваем виджеты с ChatGPT и DeepSeek

Сравним Grok со стабильным ветераном ChatGPT и дерзким новичком DeepSeek. Сначала протестируем ChatGPT-4o mini, используя тот же запрос:

			<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pomodoro Timer</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: white;
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .timer-container {
            background: linear-gradient(135deg, rgba(255, 182, 193, 0.3), rgba(135, 206, 250, 0.3), rgba(138, 43, 226, 0.3));
            border-radius: 20px;
            padding: 30px;
            width: 320px;
            text-align: center;
        }
        .timer {
            font-size: 40px;
            font-weight: bold;
            color: #333;
        }
        .control-buttons {
            margin-top: 20px;
        }
        .button {
            padding: 10px 20px;
            margin: 10px;
            background: linear-gradient(135deg, #8a2be2, #ff1493);
            color: white;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-size: 16px;
            transition: background 0.3s;
        }
        .button:hover {
            background: linear-gradient(135deg, #ff1493, #8a2be2);
        }
        .motivation {
            margin-top: 20px;
            font-size: 18px;
            font-style: italic;
            color: #555;
        }
        .time-tracked {
            margin-top: 20px;
            font-size: 14px;
            color: #777;
        }
    </style>
</head>
<body>

<div class="timer-container">
    <div class="timer" id="timer">25:00</div>
    <div class="control-buttons">
        <button class="button" id="startButton">Старт</button>
        <button class="button" id="resetButton">Сброс</button>
    </div>
    <div class="motivation" id="motivation">Давайте начнем!</div>
    <div class="time-tracked" id="timeTracked"></div>
</div>

<script>
    let workDuration = 25 * 60;  // 25 minutes
    let breakDuration = 5 * 60;  // 5 minutes
    let currentTime = workDuration;
    let isWorking = true;
    let timerInterval;
    let timeTracked = 0;
    let sessionCount = 0;

    const motivationMessages = [
        "Ты можешь это сделать!",
        "Продолжай в том же духе!",
        "Каждая минута — это шаг к успеху!",
        "Ты на правильном пути!",
        "Не останавливайся, ты близок к цели!",
        "Твои усилия — это ключ к успеху!",
        "Трудности преодолимы, если продолжать двигаться вперёд!",
        "Ты уже на полпути!",
        "Не сдавайся, ты сильнее, чем думаешь!",
        "Сделай ещё одну задачу, ты близок к финишу!"
    ];

    const timerDisplay = document.getElementById("timer");
    const startButton = document.getElementById("startButton");
    const resetButton = document.getElementById("resetButton");
    const motivationDisplay = document.getElementById("motivation");
    const timeTrackedDisplay = document.getElementById("timeTracked");

    function formatTime(seconds) {
        const minutes = Math.floor(seconds / 60);
        const remainingSeconds = seconds % 60;
        return `${minutes < 10 ? '0' : ''}${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
    }

    function updateMotivation() {
        if (sessionCount % 5 === 0 && sessionCount !== 0) {
            const randomMessage = motivationMessages[Math.floor(Math.random() * motivationMessages.length)];
            motivationDisplay.textContent = randomMessage;
        }
    }

    function updateTimeTracked() {
        if (timeTracked > 0) {
            const hours = Math.floor(timeTracked / 3600);
            const minutes = Math.floor((timeTracked % 3600) / 60);
            timeTrackedDisplay.textContent = `Вы сегодня фокусировались: ${hours} часов ${minutes} минут`;
        }
    }

    function startTimer() {
        timerInterval = setInterval(() => {
            currentTime--;
            timerDisplay.textContent = formatTime(currentTime);
            timeTracked++;
            updateTimeTracked();

            if (currentTime <= 0) {
                if (isWorking) {
                    isWorking = false;
                    currentTime = breakDuration;
                    sessionCount++;
                } else {
                    isWorking = true;
                    currentTime = workDuration;
                }
                updateMotivation();
            }
        }, 1000);
    }

    function resetTimer() {
        clearInterval(timerInterval);
        currentTime = workDuration;
        timerDisplay.textContent = formatTime(currentTime);
        motivationDisplay.textContent = "Давайте начнем!";
        isWorking = true;
        sessionCount = 0;
        timeTracked = 0;
        updateTimeTracked();
    }

    startButton.addEventListener("click", () => {
        startButton.disabled = true;
        startTimer();
    });

    resetButton.addEventListener("click", resetTimer);

    // Ensure the timer is reset when first loaded
    resetTimer();
</script>

</body>
</html>
Grokаем виджеты: пишем код с Grok 3 от Маска 6
Виджет таймера от ChatGPT

Затем попросим DeepSeek сгенерировать свою версию:

Grokаем виджеты: пишем код с Grok 3 от Маска 7
Виджет таймера от DeepSeek

Как справились с кодом

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

Grok 3:

  • Самый сбалансированный вариант. Минимум избыточного кода, но не переключается на режим отдыха автоматически. Придется запускать вручную.
  • Умная смена мотивации. Фразы переключаются последовательным перебором и не повторяются в рамках сессии, в отличие от случайного подбора, как в DeepSeek. 
  • Дополнительный плюс в карму за подробную инструкцию по вставке и внимание к тому, что при перезагрузке страницы таймер обнуляется. Так мы сразу сможем предусмотреть необходимые изменения, даже если не разбираемся в коде.

ChatGPT:

  • Использует одну переменную для перехода между режимами и переключает их автоматически.
  • Не сопроводил инструкцией и комментариями.
  • Видимо, решил, что пользователи слишком избалованы мотивацией и пора приучать их к суровой реальности: мотивашки есть в коде, но с запуском таймера они не появляются. Оказалось, они срабатывают раз в 5 сессий, а не минут: if (sessionCount % 5 === 0 && sessionCount !== 0) {
  • Ошибка сброса: нет логики проверки смены дня, а счётчик накапливается бесконечно.
  • После остановки через сброс таймер не запускается заново, потому что startButton остаётся disabled. ИИ, который действительно заботится о нашем отдыхе!

DeepSeek:

  • Немного перегружен логикой — два отдельных таймера для работы/отдыха, сложная система ежедневного сброса.
  • Есть мотивашки, но они могут повторяться внутри сессии.
  • Есть инструкция, но менее подробная, чем у Grok.
  • Современный дизайн с полупрозрачными элементами, но белый текст на кнопках может быть плохо виден.
  • При завершении сессии появляется всплывающее окно, что может раздражать.

Визуальный стиль

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

В идеале нейросеть могла бы сама предусмотреть что-то из этого, чтобы нам не пришлось думать:

  • Прогресс при обновлении страницы — чтобы при перезагрузке или закрытии данные не терялись.
  • Длина сессий — возможность менять длительность работы и отдыха.
  • Паузы и возобновления — чтобы не приходилось сбрасывать таймер, если нужно прерваться.
  • Таймаут обновлений общего времени — в некоторых случаях обновляется каждую секунду, но логичнее делать это после завершения сессии, чтобы минимизировать нагрузку.
  • Всплывающие уведомления — напоминания о начале/конце сессии, если мы переключились на другую вкладку.
  • Возможность звуковых уведомлений — сигналов о начале и конце сессии, с возможностью отключения, чтобы не мешали.
  • Отслеживание продуктивности и графики прогресса — подсчёт и визуализация завершённых сессий за день, неделю, месяц.

Трекер кофе

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

Создай код для минималистичного, стильного и современного виджета на русском языке для отслеживания выпитого кофе, который можно будет встроить в Notion через embed (iframe).
Добавь графический индикатор с числом чашек кофе, который меняет цвет в зависимости от количества потребленного кофе:
- Светло-коричневый — для оптимального потребления (до 3 чашек).
- Темно-коричневый (ближе к красному) — для злоупотребления (больше 3 чашек).
- Красный — для значительного превышения нормы (больше 5 чашек).
Кнопки: кнопка «+» добавляет одну чашку кофе, кнопка «-» удаляет одну чашку кофе. Также добавь кнопку для сброса данных в конце дня.

Отображение текущего потребления кофе в количестве чашек должно обновляться в реальном времени и отображаться рядом с графическим индикатором.

Если потребление превышает 2 чашки, появляется мягкое предупреждение: «Похоже, ты уже выпил достаточно кофе на сегодня. Постарайся немного снизить потребление!», «Ты превысил норму кофе, давай попробуем уменьшить количество, чтобы избежать перегрузки!», «Осторожно! Ты уже немного переборщил с кофе. Лучше сделать перерыв!»

Если потребление превышает 3 чашки, предупреждения становятся более жесткими, а надпись и кнопки становятся красными: «Ты уже на грани, не переборщи с кофе, чтобы не повредить здоровью», «Кажется, ты выпил немного больше кофе, чем нужно. Пора остановиться!», «Ты уже достиг максимума кофе на сегодня. Помни, всё хорошо в меру!», «Прекрасно, что ты так любишь кофе, но сегодня лучше сделать паузу!», «Ты уже близок к пределу. Лучше ограничить кофе и попробовать что-то лёгкое!». 

Дизайн: для фона виджета используй полупрозрачный градиент с светло-коричневыми оттенками, с закругленными углами. Кнопки одного цвета и одного оптимального размера в один ряд без градиентов с читаемыми надписями и скругленными краями.

Grok 3

			<!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;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f5f5f5;
        }
        .widget {
            background-color: white;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            width: 300px;
        }
        .coffee-indicator {
            width: 100%;
            height: 20px;
            background-color: #d3c2a8;
            border-radius: 10px;
            margin-bottom: 20px;
            transition: background-color 0.3s ease;
        }
        .coffee-count {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        .buttons {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
        }
        button {
            background-color: transparent;
            border: 2px solid #8d5524;
            color: #8d5524;
            padding: 10px 20px;
            border-radius: 10px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s ease;
        }
        button:hover {
            background-color: #8d5524;
            color: white;
        }
        .warning {
            font-size: 14px;
            color: #8d5524;
            margin-top: 20px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="widget">
        <div class="coffee-indicator" id="indicator"></div>
        <div class="coffee-count" id="coffeeCount">0 чашек</div>
        <div class="buttons">
            <button onclick="addCoffee()">+</button>
            <button onclick="removeCoffee()">-</button>
            <button onclick="resetCoffee()">Сброс</button>
        </div>
        <div class="warning" id="warning"></div>
    </div>

    <script>
        let coffeeCount = 0;
        const indicator = document.getElementById('indicator');
        const countDisplay = document.getElementById('coffeeCount');
        const warningDisplay = document.getElementById('warning');

        const warnings2 = [
            "Похоже, ты уже выпил достаточно кофе на сегодня. Постарайся немного снизить потребление!",
            "Ты превысил норму кофе, давай попробуем уменьшить количество, чтобы избежать перегрузки!",
            "Осторожно! Ты уже немного переборщил с кофе. Лучше сделать перерыв!"
        ];

        const warnings3 = [
            "Ты уже на грани, не переборщи с кофе, чтобы не повредить здоровью.",
            "Кажется, ты выпил немного больше кофе, чем нужно. Пора остановиться!",
            "Ты уже достиг максимума кофе на сегодня. Помни, всё хорошо в меру!",
            "Прекрасно, что ты так любишь кофе, но сегодня лучше сделать паузу!",
            "Ты уже близок к пределу. Лучше ограничить кофе и попробовать что-то лёгкое!"
        ];

        function updateWidget() {
            countDisplay.textContent = `${coffeeCount} чашек`;
            if (coffeeCount <= 3) {
                indicator.style.backgroundColor = '#d3c2a8'; // Светло-коричневый
                warningDisplay.style.display = 'none';
            } else if (coffeeCount > 3 && coffeeCount <= 5) {
                indicator.style.backgroundColor = '#8d5524'; // Темно-коричневый
                warningDisplay.style.display = 'block';
                warningDisplay.textContent = warnings3[Math.floor(Math.random() * warnings3.length)];
            } else {
                indicator.style.backgroundColor = '#ff4040'; // Красный
                warningDisplay.style.display = 'block';
                warningDisplay.textContent = warnings3[Math.floor(Math.random() * warnings3.length)];
            }

            if (coffeeCount > 2 && coffeeCount <= 3) {
                warningDisplay.style.display = 'block';
                warningDisplay.textContent = warnings2[Math.floor(Math.random() * warnings2.length)];
            }
        }

        function addCoffee() {
            coffeeCount++;
            updateWidget();
        }

        function removeCoffee() {
            if (coffeeCount > 0) coffeeCount--;
            updateWidget();
        }

        function resetCoffee() {
            coffeeCount = 0;
            updateWidget();
        }

        updateWidget(); // Инициализация
    </script>
</body>
</html>
Grokаем виджеты: пишем код с Grok 3 от Маска 8
Виджет от Grok 3
Grokаем виджеты: пишем код с Grok 3 от Маска 9
Виджет от Grok 3 с предупреждением
  • Средняя оптимальность — много кода, но структурирован;
  • Есть приятная анимация при нажатии кнопки;
  • Хорошо следует инструкциям в запросе.

ChatGPT

Grokаем виджеты: пишем код с Grok 3 от Маска 10
Виджет от ChatGPT
  • Другое расположение кнопок — прибавление справа выглядит логичнее;
  • Самый компактный код, но предупреждения менее вариативны;
  • Черный текст на индикаторе плохо читается, когда фон становится красным.

DeepSeek

Grokаем виджеты: пишем код с Grok 3 от Маска 11
Виджет от DeepSeek
  • Нет цветового индикатора;
  • Кнопка сброса оранжевая вопреки инструкции;
  • Потерялась часть предупреждений при добавлении чашек выше нормы.

Вайб-кодинг откладывается?

Grok — свежий игрок, но со своими тараканами:

  • UI-элементы выглядят лучше, чем у коллег — стилёвый дизайн, плюс автоматически добавляются анимации.
  • Иногда бывают проблемы с отображением результата: нужно перезагрузить страницу, чтобы увидеть результат генерации.
  • Хотели вайб-кодить? Придется потерпеть. В бесплатной версии есть лимит запросов и всего несколько попыток для «рассуждающего» режима. Если хотите большего — нужно оформить подписку, иначе вам предложат подождать.
Grokаем виджеты: пишем код с Grok 3 от Маска 12
Таймауты при работе с бесплатной версией Grok 3 в режиме размышлений

ChatGPT — стабильный инструмент, но без магии: инструкции выполняет, но теряет нюансы и не блещет креативом.

DeepSeek ведет себя странно: то срабатывает идеально, то игнорирует детали задачи.

Все ИИ-помощники очень придирчивы к промптам:

  • Не уточнили всё до мельчайших подробностей? Ждите сюрприз: кнопки разного размера и цвета, потерянные элементы. Попросили «закругленные кнопки»? Получайте круглые на 100%.
  • Нужно нянчить и доучивать — лучше расписать ТЗ по пунктам или заранее выяснить у LLM, какая информация нужна.
  • Сложный проект не создастся за 5 минут. В кейсах с виджетами ИИ зачастую не учитывал важные детали, например, сохранение данных при перезагрузке страницы. Нужно тщательно продумывать все пользовательские сценарии, учитывать возможные ошибки и вручную прописывать логику хранения данных и возможных взаимодействий в промпте.
  • На десятой итерации всё может пойти не так — исправляешь одно (дорабатывая промпт), а ломается другое (модель путается в старых инструкциях). И это еще на фоне других ИИ-нюансов, типа нестабильной работы или галлюцинаций.
  • Хорошо, что у всех трёх моделей есть интерпретатор, и можно сразу протестировать результат. Для новичков и тех, кто не слишком хорошо разбирается в коде, это вполне сойдёт. 
А если вы опытный разработчик, стоит присмотреться к Cursor и Claude Sonnet 3.7 с его Claude Code — они больше заточены под копайлотинг и предлагают более продвинутые возможности.
Следите за новыми постами
Следите за новыми постами по любимым темам
839 открытий3К показов
Также рекомендуем
30 самых полезных библиотек Python для веб-разработки в 2024 году
30 самых полезных библиотек Python для веб-разработки в 2024 году
Узнайте о лучших библиотеках Python, которые помогут вам в 2024 году. От анализа данных до веб-разработки — все, что нужно для эффективного программирования на Python.
Как избежать выгорания от бесконечного обучения
Как избежать выгорания от бесконечного обучения
Как избежать выгорания при обучении. Показываем основные способы не выгорать при изучении чего-то нового. Рассматриваем инструменты и техники ✔ Tproger
Хочу стать наставником для разработчиков: как правильно передавать знания
Хочу стать наставником для разработчиков: как правильно передавать знания
В статье узнаете, как стать хорошим наставником, почему это важно, и какие бонусы наставничество приносит не только подопечным, но и самим наставникам.
🔥 Индийского IT-гиганта обвинили в бесплатной эксплуатации стажеров без перевода в штат
🔥 Индийского IT-гиганта обвинили в бесплатной эксплуатации стажеров без перевода в штат
Infosys, один из крупнейших IT-гигантов Индии, обвиняется в эксплуатации выпускников технических вузов, которым пообещали трудоустройство, но не перевели в штат. Профсоюз NITES подал жалобу, утверждая, что более 2 тыс новобранцев прошли обучение и аттестацию без оплаты и официального трудоустройства