ИИ в действии: опыт наших проектов с Cursor, Stitch и Claude

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

Вместо того чтобы использовать AI по одному универсальному шаблону для всех проектов, мы подходили к каждому проекту по-разному — подбирая подходящую комбинацию инструментов в зависимости от сложности, целей и технических требований. От простой landing page до полноценной e-commerce платформы — эти примеры показывают, как AI может поддерживать разные этапы разработки в рамках наших услуг веб-разработки.

AI-инструменты для веб-разработки: Cursor, Stitch, Claude

Cursor — это AI-ассистент для программирования, созданный для того, чтобы помогать разработчикам эффективно писать, отлаживать и обновлять код. Он работает непосредственно внутри редактора и может генерировать frontend- и backend-код на разных языках программирования. Благодаря режиму Auto Mode Cursor способен создавать целые страницы и функции на основе высокоуровневых инструкций, значительно сокращая объём повторяющейся реализации и ускоряя цикл разработки.

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

Claude привносит в этот процесс новый уровень возможностей, особенно когда речь идёт об архитектуре, проектировании систем и сложном рефакторинге. Он особенно полезен при анализе более масштабных задач, перестройке структуры приложений и определении того, как различные части системы должны взаимодействовать между собой ещё до начала реализации.

При совместном использовании эти инструменты формируют гибкий рабочий процесс, охватывающий дизайн, разработку и системное проектирование. Вместо того чтобы двигаться шаг за шагом в рамках традиционного линейного процесса, мы можем быстрее развивать и дорабатывать идеи по ходу работы — гораздо плавнее переходя от концепции к реализации и используя AI там, где он приносит наибольшую пользу, будь то генерация UI, backend-логика или API-функциональность.

Помимо таких инструментов разработки, как Cursor, Stitch и Claude, мы также интегрируем AI непосредственно в создаваемые нами сайты и платформы, используя API вроде OpenAI в зависимости от требований проекта.

Примеры проектов: от простого сайта до крупных веб-платформ

Чтобы лучше понять, как AI вписывается в реальные процессы разработки, мы рассмотрели четыре проекта разного уровня сложности. В каждом из них использовалась своя комбинация инструментов — Cursor, Stitch, Claude и AI-интеграций — в зависимости от целей и технических требований.

ComaCloud: простой, быстрый и полностью AI-driven проект

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

Технологический стек был максимально простым: HTML, CSS и JavaScript. Дизайн создавался в Stitch, а кодирование выполнялось с помощью Auto Mode в Cursor.

Результат: https://comacloud.lv/

Сроки: 2–3 дня от дизайна до запуска сайта

В результате получился лёгкий и адаптивный сайт с тёмным и светлым режимами, плавными анимациями и полностью автоматизированным процессом деплоя. После отправки изменений через Git обновления публикуются в течение нескольких секунд благодаря Cloudflare.

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

ProMusic: полноценная e-commerce платформа для аудиооборудования

Следующим стал более сложный проект для клиента, специализирующегося на продаже и аренде аудиооборудования. Изначальное решение представляло собой сайт на WordPress, однако оно не обеспечивало современный UX/UI и необходимую гибкость. Мы решили полностью перестроить платформу с нуля с помощью AI, придав ей современный внешний вид и полноценную функциональность.

Результат: https://promusic.lv/

Платформа была построена на backend с использованием Node.js и frontend на Next.js + TypeScript, образуя полноценную e-commerce систему.

Функции:

• Платформа включает полнофункциональную административную панель, где товары, аренда и складские остатки могут удобно и интуитивно управляться.
• Поддерживаются гибкие акции и скидки, позволяющие создавать промокоды и специальные предложения в любой момент.
• Клиенты и сотрудники получают автоматические уведомления по email и Telegram о новых заказах и обновлениях.
• Данные о товарах автоматически обновляются через ежедневный XML-импорт и синхронизацию с фидами поставщиков.
• Сайт поддерживает несколько языков — латышский уже доступен, а в ближайшем будущем планируется добавление других языков.
• Каждая страница товара обогащается с помощью OpenAI, автоматически генерируя подробные описания, характеристики и спецификации.
• Для каждого товара автоматически подбираются релевантные YouTube-видео, помогая клиентам лучше понять, как продукты выглядят и работают в реальном использовании.
• Во время оформления заказа система автоматически проверяет информацию о VAT и соответствующим образом изменяет обязательные поля.
• Общий пользовательский опыт упрощён благодаря авторизации через Google, удобному оформлению заказа и понятному отслеживанию заказов.
• Telegram-бот позволяет команде мгновенно получать новые заказы и обновлять их статус прямо из чата.
• Ошибки отслеживаются через Sentry, а при их возникновении их можно быстро проанализировать и исправить с помощью Cursor с автоматическим деплоем через GitHub Actions.

Сроки: около двух недель интенсивной работы.

AI-интеграция позволила нам динамически обогащать страницы товаров, хотя некоторые детали пришлось дополнительно настраивать — AI иногда генерирует больше информации, чем необходимо, поэтому мы вручную адаптировали контент для улучшения пользовательского опыта.

Mājaslapu Serviss: переработка сервисного сайта с Claude

Мы также протестировали немного другой AI-подход при переработке сервисного сайта, который сами используем как часть экосистемы нашего агентства. Он ориентирован на техническое обслуживание WordPress-сайтов для компаний и агентств в Латвии, включая обновления, безопасность, резервное копирование и мониторинг по фиксированной ежемесячной стоимости.

Результат: https://majaslapuserviss.lv/

В этом проекте вместо Cursor и Stitch мы использовали Claude Code вместе с Claude Design как для разработки, так и для принятия дизайнерских решений. Целью было полностью переосмыслить структуру, производительность и общий пользовательский опыт сайта.

В результате получилась современная и лёгкая платформа, созданная с упором на производительность и SEO:

• Frontend построен на React как одностраничное приложение, основанное на компонентной архитектуре, с полноценной двуязычной маршрутизацией для пользователей на латышском и английском языках.
• В проекте используется Vite в качестве инструмента сборки, компилирующего несколько страниц в оптимизированные production bundle с hashed assets для более эффективного кеширования и производительности.
• Хостинг осуществляется через Cloudflare Workers и Assets, обеспечивая глобальную доставку контента с очень быстрым временем отклика и без cold start.
• Дизайн-система полностью создана вручную на CSS с использованием переменных для единообразия, поддержкой тёмного и светлого режимов, а также различными настройками плотности интерфейса в зависимости от предпочтений пользователя.
• Тщательно подобранные Google Fonts помогают формировать чистую и современную визуальную идентичность сайта.
• Структурированные данные (JSON-LD) реализованы по всему сайту, улучшая отображение контента в поисковых системах с rich results.
• На сайте реализован полноценный SEO-слой, включая настройку sitemap с языковыми альтернативами, корректные meta tags для публикации в социальных сетях и строгую конфигурацию безопасности.

Этот проект показывает другой аспект применения AI в веб-разработке — не только ускорение написания кода, но и помощь в переосмыслении архитектуры, производительности и долгосрочной масштабируемости с самого основания проекта.

Lensfit: высокопроизводительная e-commerce платформа с AI и оптимизацией поиска

Ещё одним проектом, в котором мы ещё шире использовали возможности AI и инженерные решения, стала переработка e-commerce платформы для контактных линз.

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

Платформа была построена на стеке Next.js + TypeScript с сильным акцентом на производительность, поиск и надёжность.

• Frontend реализован на новейшей архитектуре Next.js (App Router) и React, обеспечивая быстрый и отзывчивый пользовательский опыт по всему сайту.
• Данные о товарах, заказы и аккаунты клиентов управляются через Prisma и базу данных PostgreSQL, обеспечивая стабильный и масштабируемый backend.
• Контент — включая страницы и медиафайлы — управляется через Strapi, что позволяет гибко обновлять содержимое без необходимости вмешательства в основное приложение.
• Поиск товаров работает на базе Meilisearch, обеспечивая быстрые результаты и устойчивость к опечаткам, а резервная система позволяет сохранять работоспособность поиска даже при недоступности сервиса.
• OpenAI интегрирован непосредственно в платформу для реализации потоковой функции сравнения, позволяющей пользователям удобно и структурированно сравнивать различные контактные линзы.
• Система оформления заказов включает автоматическую обработку email и генерацию корректных PDF-счётов с полной поддержкой латышского языка, включая диакритические символы.
• Платформа имеет надёжную техническую основу, включая security headers, мониторинг ошибок через Sentry и санитизацию динамического контента для обеспечения стабильности и безопасности.
• Структурированные данные и SEO-ориентированная архитектура реализованы по всему сайту, улучшая видимость в поисковых системах и поддерживая rich results.
• Сайт поддерживает как латышский, так и английский язык, делая платформу доступной для более широкой аудитории.The website supports both Latvian and English, making it accessible to a broader audience.

Помимо разработки, мы также провели SEO-аудит, сравнив предыдущую WordPress-версию с новым решением на Node.js. Результаты подтвердили значительное улучшение производительности, структуры и общей готовности сайта к поисковому продвижению.

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

Наш опыт: как AI изменил наш рабочий процесс

AI-инструменты способны кардинально изменить то, как мы подходим к веб-разработке. Они помогают:

• Ускорять рабочие процессы: небольшие сайты вроде ComaCloud теперь можно запускать за несколько дней вместо недель.
• Сокращать объём повторяющегося программирования: автоматизация позволяет разработчикам больше сосредоточиться на UX, дизайне и функциональности.
• Повышать масштабируемость: даже сложные проекты могут выигрывать от AI-поддерживаемого контента, обработки данных и автоматических обновлений.
• Открывать новые возможности: разработчики могут экспериментировать с AI для повышения качества и эффективности как в небольших, так и в крупных проектах.

Наш опыт показывает, что AI не заменяет разработчиков — это мощный инструмент-помощник, который способен ускорять разработку и повышать качество. Для небольших и средних проектов AI уже становится важной частью нашего рабочего процесса. Что касается более крупных проектов, мы уверены, что AI продолжит делать разработку быстрее, умнее и эффективнее.

Заключение

AI в веб-разработке — это уже не футуристическая концепция, а реальность, которая действительно работает. Такие инструменты, как Cursor, Stitch и Claude, помогают разработчикам работать быстрее, свободнее экспериментировать и сокращать время, затрачиваемое на повторяющиеся задачи, при этом сохраняя высокий уровень качества и производительности.

Наша работа над ComaCloud, ProMusic, Lensfit и Mājaslapu Serviss показывает, как AI может применяться в проектах самых разных типов — от простых сайтов до сложных платформ и высокопроизводительных решений. Хотя AI не заменяет экспертизу разработчиков, он открывает новые подходы к разработке и повышению эффективности. Если вы ищете команду, которая работает именно так, ознакомьтесь с нашими услугами по WordPress-разработке.

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520