Как я приручил Claude: разработка AI-дизайн-системы, которая собирает медицинские лендинги в HTML и CSS по текстовому ТЗ без дизайнера и верстальщика

Представьте ситуацию: вам нужно регулярно тестировать гипотезы и запускать десятки посадочных страниц для разных медицинских услуг. При этом у вас жесткие требования к брендингу, скорости загрузки и доступности сайта, а бюджет на постоянную работу связки «дизайнер + верстальщик» под каждую гипотезу не бесконечен.

Я разработал решение этой задачи для крупного многопрофильного медицинского центра. Мы создали кастомную HTML-дизайн-систему, которая превратила AI-ассистента Claude в автономного архитектора и верстальщика. Теперь новые страницы услуг для тестов собираются из обычного текстового ТЗ в едином стиле, без участия человека и без визуальных расхождений с эталонной посадочной страницей. В этой статье я покажу, как прошел путь от красивой теории до работающего production-процесса, с какими багами столкнулись и как заставил нейросеть строго соблюдать наши правила.

Контекст и боль

Бизнес-задача была предельно утилитарной. Нашему клиенту, известному медицинскому центру (из ТОП20 Форбс 2024), требовалась дизайн-система для быстрой сборки посадочных страниц медицинских услуг. Основная идея состояла в том, что маркетолог пишет текстовое ТЗ, а искусственный интеллект генерирует готовый, чистый HTML-код, который можно сразу выкатывать на сервер.

Мы сразу установили жесткие технические рамки:

1. Никаких конструкторов вроде Tilda и никаких тяжелых фреймворков. Только чистый, легковесный и ультрабыстрый статический HTML5, ванильный CSS с переменными и чистый JS без внешних зависимостей.
2. Каждая страница должна жить в одном self-contained файле. Все стили внутри <style>, а скрипты — внутри <script>.
3. Фокус на мобильные устройства (mobile-first), соответствие стандартам доступности, отсутствие сторонних шрифтов и только русскоязычный контент.

В качестве основного инструмента автоматизации я выбрал Claude от Anthropic. Он должен был выполнять две роли:

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

Идея и инструменты

Моя ключевая задумка заключалась в создании «промпт-контракта». Это подробный текстовый манифест дизайн-системы, который скармливается нейросети перед началом работы. AI должен был не просто верстать «как видит», а использовать строго определенный набор токенов, сетку, JS-утилиты и логику компонентов.

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

Процесс и итерации

Шаг 1. v1 — Теоретический фундамент

На первом этапе я детально проанализировал основной сайт медицинского центра. Мы определили фирменные цвета, шрифтовые пары, отступы и сетки. В итоге родилась первая версия системы: текстовый манифест DESIGN-SYSTEM.md и четыре базовых шаблона страниц (для описания заболевания, конкретной услуги, промо-акции и статьи в блоге).

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

Шаг 2. v2 — Столкновение с реальностью и первые баги

Я решил собрать первый сложный лендинг для деликатной медицинской процедуры — колоноскопии во сне. И тут же посыпались баги вёрстки, которые AI допустил из-за двусмысленности правил:

1. Схлопывание отступов. Использование сокращенной записи padding: var(--space-12) 0 на элементах внутри контейнера приводило к тому, что на мобильных экранах текст утыкался прямо в края дисплея. Пришлось переписать логику на использование адаптивного горизонтального отступа --container-px.
2. Дёрганая анимация. AI реализовал раскрытие блоков FAQ через простое переключение display: none/block. Выглядело это ужасно и топорно.
3. Карусели «поплыли». Попытка сделать бесшовные галереи отзывов через отрицательные отступы (negative-margin) приводила к тому, что на некоторых смартфонах верстка просто «плыла».

Я понял, что систему нужно значимо дорабатывать. Во вторую версию я добавил полноценный интерактивный шаблон template-landing.html, содержащий 10 канонических блоков (от Hero-баннера до секции доверия и лицензий). Также я внедрил плавные анимации на базе Intersection Observer (.io-fade) и жестко зафиксировал шкалу z-index, чтобы всплывающие окна не перекрывались другими элементами.

Шаг 3. v3 — Канонизация и борьба с "Naming Drift"

Когда мы собрали еще один полноценный лендинг по лечению катаракты, то обнаружили самый интересный феномен работы с LLM — так называемый Naming Drift (дрейф имён). Выяснилось, что Claude в процессе автономной сборки реальных страниц упорно игнорирует некоторые придуманные мной «красивые» названия классов из версии v1 и заменяет их на более прагматичные и вроде бы логичные, но визуально не корректные.

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

Кроме того, пришлось переступить через некоторые догмы веб-разработки. Изначально я запретил использовать растровые PNG-спрайты, требуя только легковесный SVG. Но суровая реальность показала: клиенты часто присылают готовые наборы иконок именно в виде единого PNG-изображения. В итоге мы легализовали PNG-спрайты в манифесте, четко прописав правила вычисления background-position.

Результаты в цифрах

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

1. Скорость взаимодействия всех участников: Время от запроса заказчика до создания новой готовой посадочной страницы по сырому текстовому ТЗ сократилось в разы. Нам больше не нужно ждать макеты и верстку неделями — рабочий HTML-файл весом около 90 КБ генерируется за один проход нейросети.
2. Экономия времени разработки: Эффективность процесса = Время генерации AI (5-10 минут) / Время ручной сборки (12-16 часов)​. По итогу экономия времени ≈100 раз!
3. Консистентность близкая к идеальной: Базовое ядро CSS (шапка, подвал, модальные окна, формы, кнопки) во всех сгенерированных страницах совпадает символ в символ. Это дает 100% гарантию того, что дизайн страниц не «поплывёт».
4. Качество и доступность: Все интерактивные элементы снабжены логикой доступности (focus-trap для модалок, управление с клавиатуры, валидация форм с атрибутами aria-invalid и role="alert").

Главные выводы для бизнеса и разработчиков

1. AI-архитектура требует полевых испытаний. Любая дизайн-система, созданная нейросетью «в вакууме» — это лишь гипотеза. Настоящий канон рождается только после сборки 2–3 реальных проектов, когда вы увидите, где именно AI ошибается и какие решения принимает интуитивно.
2. Слушайте своего AI-исполнителя. Если нейросеть из раза в раз переименовывает ваши классы или меняет структуру разметки — возможно, её вариант более жизнеспособен и семантически точен. Проще адаптировать стандарт под удобство генерации, чем бесконечно переписывать промпты.
3. Манифест — это ваш "юридический" договор с AI. Раздел «Анти-паттерны», куда я заботливо заносил каждый обнаруженный баг (например, прямой запрет на анимацию через display: none или правила использования сокращенных padding), стал лучшим предохранителем от повторения ошибок.

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

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