AndrewTaras/profpak-landing

Генерация HTML-модуля

Когда применять

Пользователь просит создать новый модуль лендинга: Header, Hero, Problems, Products, Offer, Stats, Process, About, FAQ, ContactForm, Footer или ChatWidget.

Процесс

1. Получи от пользователя контракт модуля (блок «Data In → HTML Out»).
2. Проверь, что все Tailwind-классы из контракта существуют в дизайн-системе (см. AGENTS.md).
3. Если контракт ссылается на цвета — используй только классы из дизайн-системы:
   • bg-industrial-blue, bg-industrial-orange, bg-stretch-cyan, bg-polymer-silver
   • Никаких bg-blue-500, bg-orange-500 и прочих стандартных палитр Tailwind.
4. Сгенерируй HTML-код, строго следуя контракту.
5. Верни только HTML — без markdown-обёрток, без объяснений.

Правила генерации

Изображения-плейсхолдеры

Если в контракте указано «Фоновое изображение — заглушка», используй:

• Для hero-фона: https://placehold.co/1920x1080/0B3C5D/FFFFFF?text=Hero+Image
• Для карточек товаров: https://placehold.co/800x600/328CC1/FFFFFF?text=Product
• Для галереи «О производителе»: https://placehold.co/800x800/0B3C5D/FFFFFF?text=Factory

Иконки

Все иконки — через Lucide:

<i data-lucide="shield" class="h-5 w-5 text-stretch-cyan"></i>

Популярные иконки для проекта: shield, truck, package, droplet, zap, check-circle-2, phone, message-circle, map-pin, factory, microscope, globe-2, leaf, apple, pill, settings-2, hand.

CTA-кнопки (основные)

<a href="#" class="inline-flex items-center gap-2 rounded-lg bg-industrial-orange px-7 py-3.5 text-sm font-bold text-white shadow-cta transition hover:bg-orange-600 hover:-translate-y-0.5">
  Текст <i data-lucide="arrow-right" class="h-4 w-4"></i>
</a>

Второстепенные кнопки

<a href="#" class="inline-flex items-center gap-2 rounded-lg border border-white/30 bg-white/5 px-7 py-3.5 text-sm font-bold text-white backdrop-blur-sm transition hover:bg-white/10">
  Текст
</a>

Карточки товаров

<article class="group overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-100 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl">
  <div class="h-48 overflow-hidden">
    <img src="..." alt="..." class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105" loading="lazy" />
  </div>
  <div class="p-7">
    <p class="text-xs font-bold text-stretch-cyan mb-1">01 / CATEGORY</p>
    <h3 class="text-xl font-extrabold text-slate-900">Название</h3>
    <p class="mt-2 text-sm leading-6 text-slate-500">Описание</p>
  </div>
</article>

Секции (обёртки)

<section id="имя" class="px-6 py-20 lg:px-8 lg:py-24 bg-polymer-silver">
  <div class="mx-auto max-w-7xl">
    <!-- контент -->
  </div>
</section>

Сетки

• Продукты: grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8
• Статы: grid grid-cols-2 md:grid-cols-4 gap-6
• Процесс: grid grid-cols-1 md:grid-cols-5 gap-6
• FAQ: grid grid-cols-1 md:grid-cols-2 gap-4
• Проблемы: grid grid-cols-1 md:grid-cols-3 gap-8

Чек-лист перед выводом

• Все классы из контракта использованы
• Использованы только классы дизайн-системы (никаких bg-blue-500)
• Есть адаптивные префиксы (sm:, md:, lg:)
• Изображения с alt и loading="lazy"
• Интерактивные элементы с aria-label или осмысленным текстом
• Нет inline-стилей
• Нет markdown-обёрток вокруг HTML
• Нет объяснений до или после кода

Пример вызова

Пользователь:

Сгенерируй компонент Hero по контракту: bgImage — заглушка, headline — «Стретч-пленка — надежная защита вашего груза», bullets — [shield: Надежная фиксация, droplet: Защита от влаги, zap: Высокая прочность, package: Экономичный расход], ctaPrimary — «Рассчитать партию» → https://wa.me/79064680377

Ты:

<section id="home" class="relative min-h-screen flex items-center overflow-hidden bg-slate-950">
  ...
</section>

(только HTML, без пояснений)