DeepSeek или Claude: какая нейросеть напишет код, за который не стыдно?

Уже прочитали наш первый материал? Если нет, то самое время узнать, кто победил в первом раунде: YandexGPT или Perplexity. Спойлеров не будет.

В этой части мы продолжим искать лучшего AI-напарника для фронтендера. Для этого сравним работу популярной DeepSeek и загадочной Claude, которая славится своим качественным кодом. Поехали.

Немного об участниках

Как и в прошлой части, сначала узнаем наших героев получше. Попросим каждую сетку рассказать о себе.

DeepSeek

Почему тёмный конь?.. Оставим этот символ неразгаданным. В остальном, по описанию понятно, что нас ждёт.

Claude

Хороший содержательный ответ в режиме concise. Сама нейросеть обещает, что в этом формате ответы более короткие.

А вам стало интересно, какие ограничения имеет в виду Claude? Нам тоже. В целом, что мешает спросить?

Нравится, какой чёткий и структурированный ответ дала нейросеть. Это особенно удобно, когда используешь ИИ для обучения, быстрого реагирования на рабочую задачу или тестировки кода. Но до этого мы ещё дойдём.

Раунд 1: Викторина

В этом раунде, как и в прошлой части, мы задаём вопросы участникам. Для чистоты эксперимента возьмём тот же вопрос, на который отвечали YandexGPT и Perplexity.

А именно:

Сначала спросим DeepSeek в режиме размышления:

Китайская нейросеть подумала 13 секунд и дала ответ:

Результат неплохой, ответ полный, но такой громоздкий, что его сложно читать.

Скорее всего, у Claude получится лучше в режиме concise, но это будет нечестно. Поэтому зададим вопрос в дефолтном формате:

И получаем ответ:

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

В этом раунде обе нейросети справились хорошо. Но всё-таки Claude была чуть лучше. Дадим ей балл, а DeepSeek — полбалла.

Счёт: DeepSeek — 0.5. Claude — 1.

Раунд 2: Код

Во втором раунде мы попросим ИИ-шки написать нам готовый код. Как и в прошлом материале, дадим задание — создать форму авторизации для Vue-компонента.

DeepSeek подумала 34 секунды:

И отдала вот такую форму:

			


export default {
  data() {
    return {
      form: {
        name: '',
        email: ''
      },
      errors: {
        name: '',
        email: ''
      },
      submitted: false
    }
  },
  methods: {
    validateName() {
      if (!this.form.name.trim()) {
        this.errors.name = 'Имя обязательно для заполнения'
        return false
      }
      if (this.form.name.trim().length < 2) {
        this.errors.name = 'Имя должно содержать минимум 2 символа'
        return false
      }
      this.errors.name = ''
      return true
    },

    validateEmail() {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      if (!this.form.email) {
        this.errors.email = 'Email обязателен для заполнения'
        return false
      }
      if (!emailRegex.test(this.form.email)) {
        this.errors.email = 'Введите корректный email'
        return false
      }
      this.errors.email = ''
      return true
    },

    handleSubmit() {
      const isNameValid = this.validateName()
      const isEmailValid = this.validateEmail()

      if (isNameValid && isEmailValid) {
        // Здесь обычно выполняется отправка данных на сервер
        console.log('Form data:', this.form)
        this.submitted = true
        this.form.name = ''
        this.form.email = ''
        setTimeout(() => {
          this.submitted = false
        }, 3000)
      }
    }
  }
}



.form-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

.form-group {
  margin-bottom: 1rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
}

input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.invalid-input {
  border-color: #ff4444;
}

.error-message {
  color: #ff4444;
  font-size: 0.875rem;
  display: block;
  margin-top: 0.25rem;
}

.submit-btn {
  background-color: #4CAF50;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.submit-btn:hover {
  background-color: #45a049;
}

.success-message {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #dff0d8;
  color: #3c763d;
  border-radius: 4px;
}

		

Код получился объемный, потому что тут и стилизация, и валидация без дополнительных библиотек. DeepSeek единственная построила валидацию кастомно.

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

Единственное, не используется Composition API, а ведь именно этот вариант актуальнее.

Ещё нейросеть сделала описание компонента:

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

Тестируем в браузере. Выглядит хорошо:

Проверяем валидацию. Проверка пустыми полями пройдена:

Теперь через некорректные значения. Тоже всё ок, даже добавлена валидация поля через html:

С корректными значениями форма отправляет данные, очищает поля и показывает оповещение. DeepSeek для этого добавил в код моковую отправку:

А в консоли можно посмотреть логи данных:

Ещё DeepSeek единственная смогла пройти проверку и не отправить на сервер пробелы вместо имени:

Теперь очередь Claude. Попросим сделать форму в режиме объяснения:

Форма:

			


// We're using the composition API for better organization and reusability
import { ref, reactive } from 'vue'

export default {
 name: 'ContactForm',
 setup() {
   // Form data state
   const formData = reactive({
     name: '',
     email: '',
   })

   // Error state for validation messages
   const errors = reactive({
     name: '',
     email: '',
   })

   // Additional state for form handling
   const isSubmitting = ref(false)
   const submitSuccess = ref(false)

   // Email validation using a regular expression
   const isValidEmail = (email) => {
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
     return emailRegex.test(email)
   }

   // Validation function to check all form fields
   const validateForm = () => {
     let isValid = true

     // Reset error messages
     errors.name = ''
     errors.email = ''

     // Name validation
     if (!formData.name.trim()) {
       errors.name = 'Name is required'
       isValid = false
     } else if (formData.name.trim().length < 2) {
       errors.name = 'Name must be at least 2 characters long'
       isValid = false
     }

     // Email validation
     if (!formData.email.trim()) {
       errors.email = 'Email is required'
       isValid = false
     } else if (!isValidEmail(formData.email)) {
       errors.email = 'Please enter a valid email address'
       isValid = false
     }

     return isValid
   }

   // Form submission handler
   const handleSubmit = async () => {
     // First check if the form is valid
     if (!validateForm()) {
       return
     }

     // Set submitting state
     isSubmitting.value = true

     try {
       // Here you would typically make an API call to submit the form data
       // For demonstration, we'll use a timeout to simulate an API call
       await new Promise((resolve) => setTimeout(resolve, 1000))

       // Show success message
       submitSuccess.value = true

       // Reset form
       formData.name = ''
       formData.email = ''

       // Hide success message after 3 seconds
       setTimeout(() => {
         submitSuccess.value = false
       }, 3000)
     } catch (error) {
       console.error('Error submitting form:', error)
     } finally {
       isSubmitting.value = false
     }
   }

   return {
     formData,
     errors,
     isSubmitting,
     submitSuccess,
     handleSubmit,
   }
 },
}

		

Очень много кода получилось. Ну ладно, разбираемся.

Почему-то внезапно Claude решил забыть русский язык и выкатил описание компонента на английском. Странно, но терпимо. Зато добавил комменты в код:

Из плюсов — ИИ объяснил, что это за компонент, как он устроен и что с ним делать:

Из минусов — мы не просили Tailwind, а в описании к коду нет никакого гайда, как его подключить. А ведь форму мог попросить новичок или ментор для быстрого примера на консультации.

DeepSeek стилизовал форму сам и очень даже симпатично. Claude так решил не делать. И в итоге без установленного Tailwind форма выглядит так:

Опустим стилизацию и потестируем функционал. Валидация пустых данных есть:

Поля с пробелами не пропускает:

Есть встроенная в HTML валидация почты:

С корректными данными ответ уходит на «сервер»:

А затем поля очищаются и под формой появляется сообщение об успешной отправке:

Была бы эта форма ещё красивая без Tailwind, цены бы ей не было.

DeepSeek сделала круто, нареканий нет, заслуженный балл. А вот к Claude вопросики — к смене языка и внезапному появлению Tailwind. Так что только 0.5.

Счёт: DeepSeek — 1.5. Claude — 1.5.

Раунд 3: Анализ кода

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

Попросим DeepSeek проанализировать свой же код:

Китайская нейросеть предложила мгновенную валидацию. Ну, не знаем, вкусовщина.

Да, идея хорошая, это оптимизирует код. Но ухудшает читаемость, так что вопрос приоритетов:

Сетка почему-то не увидела очищения полей. Ваше мнение, почему так? Они точно очищаются.

А ещё посоветовала библиотеки, которыми можно заменить кастомную валидацию:

И тоже предложила улучшить адаптивность:

Теперь очередь Claude в режиме concise:

Посмотрим на результат:

Claude предложил добавить TS, что, на самом деле, валидное предложение, но это не улучшение компонента, а переход на новый уровень. А что, если проект на JS и не планирует переход на другой язык? Короче, спорно.

C composables согласны, и Claude даже предложил, как именно это сделать:

Ещё два плюса: заблокировал кнопку «Отправить», пока идёт отправка, и сделал более современный синтаксис скрипта — с помощью setup.

Но он опять впихнул Tailwind в компонент:

Кому, зачем? Риторические вопросы. Хотя нет. Давайте их зададим:

Claude не захотела отвечать, но свою неправоту признала. Ладно, прощаем.

Итоги. У обеих сеток были удачные и неудачные предложения. Но в целом — валидные. Разработчику бы они помогли. Поэтому поставим обеим по баллу.

Счёт: DeepSeek — 2.5. Claude — 2.5.

Итоги

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

DeepSeek

Сильные стороны:

Отлично справляется со STEM-задачами, генерирует качественный код и успешно исправляет ошибки. Порадовала кастомной валидацией и структурированными ответами.

Слабые стороны:

Однако не обошлось без нюансов: периодически игнорировала Composition API и некорректно очищала поля ввода.

Claude

Сильные стороны:

Пишет хороший код с комментариями, чётко и понятно отвечает на вопросы. А ещё у неё классный интерфейс: очень приятные цвета и анимации.

Слабые стороны:

Везде пихает Tailwind. И не отвечает, почему. Подозрительно.

***

Мы не поняли, что лучше — DeepSeek или Claude. Но поняли, что и то, и то — классные инструменты, которые легко спасут фронтендера от рутины. Выбирайте, что хочется, или вообще комбинируйте все четыре сетки, о которых мы писали. Кто вам запретит? 🙂