AI-first Web Generation

Website Engine

HTML уровня Awwwards

Project Init sys_vars.json

Контекст

SYS>Индустрия генерации сайтов через LLM (например, v0 или Claude Artifacts) страдает от 'проблемы второго промпта' — код деградирует, а дизайн сваливается в усредненный bootstrap. Не было системы, которая могла бы стабильно выдавать креативный, нестандартный результат на Tailwind.

Роль

USR>AI Workflow Architect / Fullstack Engineer

Проблема

ERR>Требовалось создать детерминированный пайплайн (Website Engine), который превращает абстрактный бизнес-бриф в готовый HTML/Tailwind код высшего качества, без потери креативности.

Constraints

■ Полный отказ от 'слепой' генерации в один промпт.
■ Сложные, длинные страницы (до 15-20 секций).
■ Никаких generic компонентов — только custom design-system.
■ Ограничения контекста модели при работе с длинным HTML.

База Данных Фрагментов

Variability Engine (XML Repository)

SYS_OK

niches/*.xml

34 Ниши

>Задает архетип бренда, тональность (Tone of Voice), структуру целевой аудитории и специфичные для бизнеса триггеры доверия.

SYS_OK

styles/*.xml

12 Стилей & DNA

>Определяет визуальный язык: цветовые палитры, типографику, скругления (Border Radius) и отступы, формируя консистентный UI-кит.

SYS_OK

presets/*.xml

8 Пресетов

>Контролирует плотность интерфейса, тип анимаций и общий 'вес' страницы в зависимости от B2B или B2C направленности.

SYS_OK

sections/*.xml

45 Секций

>Хранит атомарный состав каждого блока, требования к интерактивности (Swiper, Lightbox) и правила вложенности элементов.

SYS_OK

molecules/*.xml

120 Молекул

>Описывает состояния компонентов (hover, active), их свойства и поведение в контексте различных дизайн-систем.

SYS_OK

ux-psychology

15 UX Правил

>Содержит когнитивные паттерны (Закон Хика, Эффект фон Ресторффа) для правильной расстановки акцентов и снижения когнитивной нагрузки.

Dynamic Injection

20+ Контент-паков

{niche}_team, faq

PAYLOAD_DESC: JSON-массивы с контентом (FAQ, отзывы, услуги), которые инжектируются на этапе сборки для создания уникальных SEO-страниц без дублирования текста.

Prompt Assembler assemble_prompt.py

PID: 2347 | Lines: 2,347 | ACTIVE

Детерминированный Сборщик

Ядро Website Engine. Python-скрипт компилирует финальный промпт, собирая десятки разрозненных XML-файлов, жестко разрешая зависимости (например, {niche_name}) и инжектируя контент-паки перед отправкой в LLM.

PARSE

READING

📂 Parsing niche ✓

🎨 Parsing style ✓

🎨 Parsing preset ✓

🔤 Resolving fonts ✓

✨ Enrichments +CSS

🖱️ Micro-interactions +JS

🧠 UX rules ✓

🌙 Dark Mode ✓

🖼️ Assets library shuffled

Загружено: 14 модулей

SELECT

MATCHING

34 × 12 × 8 = 3,264

уникальных комбинаций

Подбор секций по матрице:

✅ hero: hero_3d_v2 s=92

✅ services: bento_grid s=87

✅ pricing: tier_cards ✓matrix

✅ testimonials: carousel_v3 ✓matrix

⏭️ blog: skipped

Отобрано: 12 секций из 45

COMPILE

BUILDING

Сборка Markdown-промпта:

01 Header + Prompt ID ✓

02 Niche identity block ✓

03 Visual DNA + colors ✓

04 Sections with HTML refs ✓

05 Molecules + enrichments ✓

06 Content pack injection merge

07 Traceability meta ✓

PROMPT COMPILED

14.2 KB • Markdown • Ready for LLM

$ python assemble_prompt.py dental corporate cream-gold --seed 42 → output/prompts/dental_corporate_cream-gold_20260516.md

Track 1: Single-Page

generate-v7.md

Agent Active

Шаг 0

Build Context

Учет правил ux-psychology-rules.xml (Gestalt, Hick's Law), marketing-widgets и Style DNA. Чтение reference-implementations.

Шаг 1

Create HTML Shell

Генерация базового каркаса. Применение 3-Tier Design Tokens, инициализация Swiper и Lucide Icons.

Шаг 2

Section Assembly

Итеративная генерация UI. Учет Von Restorff Effect. Валидация логики FAQ, Mobile Menu и Lightbox.

Шаг 3

Quality Gates

Запуск code_analyzer.py и auto_fix.py для ремонта. Финальный прогон через score_bundle.py.

Шаг 4

Visual QA

Проверка: Responsive Grade B+ (≥75) и Structural Score ≥70. Проверка маппинга из Style DNA.

Шаг 5 EXIT

Final Report

Сводка примененных UX-правил, результатов Auto-fix и финального скоринга. Запись в generation_log.md.

6 steps • ~45 sec

Track 2: Multi-Page

generate-multipage-v2.md

Agent Active

Шаг 0

Assemble Context

Запуск assemble_multipage_prompt.py. Подготовка динамических Content Packs и _shared_context.md.

Шаг 1

Generate Landing

Рендер index.html. Экстракция блоков ,

для сквозного переиспользования.

Шаг 2

Inner Pages

Цикл роутинга (--pages). Инжект Content Packs (team, faq) и генерация уникальных SEO мета-тегов.

Шаг 3

Bundle QA

Запуск auto_fix.py в режиме Bundle. Валидация ссылок (validate_bundle.py) и Unified Bundle Scoring.

Шаг 4 EXIT

Final Report

Отчет по сгенерированным страницам, статусу интеграции Content Packs и финальный Unified Score.

5 steps • ~90 sec

Галерея Генераций

100+ premium landings

Editorial

Beauty Salon

style: editorial_magazine

Elegant Pass ≥ 88

Cyber HUD

Fitness Club

style: cyber_hud

Neon Dark Pass ≥ 92

Industrial

Handyman

style: industrial_tech

Bold Pass ≥ 90

Organic

Interior Design

style: organic_natural

Natural Pass ≥ 95

Luxury Dark

Law Firm

style: luxury_dark

Premium Pass ≥ 93

Glassmorphism

Medical Clinic

style: soft_glassmorphism

Mint Pass ≥ 89

Corporate

Real Estate

style: high_end_corporate

Monochrome Pass ≥ 94

Organic

Restaurant Cafe

style: organic_natural

Terracotta Pass ≥ 91

W3C Valid HTML5 Tailwind CSS v4 Lighthouse B+ (75+) Swiper & Lightbox Responsive Ready

Архитектурный подход

Синтез Технологии и Смысла

Website Engine объединяет 4 ключевых аспекта продукта, генерируя не просто верстку, а полноценный коммерческий актив, готовый к запуску.

Tailwind v4 Base

Zero Runtime Errors

Код

Надежная База

Предсказуемая HTML-структура без ИИ-ошибок. Идеальный адаптив и чистый код из коробки.

Дизайн

Visual DNA

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

Контент

Осмысленность

Никакого Lorem Ipsum. Умный копирайтинг и точный подбор релевантных фотографий под вашу нишу.

Маркетинг

Конверсия

Анализ аудитории и правильное позиционирование. Готовый коммерческий актив, а не просто сайт.

Foundation

Эволюция движка через 7 итераций

От детального ресёрча топовых дизайн-систем до полностью автономных пайплайнов для генерации production-ready интерфейсов.

33 / 20

Niches & Styles

94.5

A-Grade Avg Score

7 Gates

Quality Assurance

Multi

Page Bundles

Envato Templates & Builders

Top #1 Top #2 Top #3

Analyzed

Container

Column

Element

Глубокие Исследования & R&D

Анализ архитектуры топ-5 шаблонов на Envato, дизайн-систем и популярных сервисов-конструкторов. Выделение лучших паттернов (Container → Column → Element) и выявление ограничений LLM при генерации сложной верстки (проблема 'второго промпта').

Собственные Наработки & UX

Создание детерминированного Variability Engine: 33 ниши, 20 стилей, 15 пресетов и 33 типа секций. Внедрение строгих UX-стандартов (Законы Хика, Фиттса, Миллера) и 3-уровневой системы дизайн-токенов (Primitive → Semantic → Component).

Пайплайны и Итерации

Разработка скрипта `generate_bundle.py` — многоэтапного процесса сборки с разделением ролей: Layout Planning, Design Tokens Generation, HTML Generation и 5 уровней Quality Gates (UX, Typo, Perf, a11y, SEO).

Architecture

Масштабирование и Модульность

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

Автоматическое расширение

Все библиотеки автоматически расширяются при добавлении новых XML-файлов в соответствующие папки. Движок сам подхватывает новые ниши, стили и пресеты без вмешательства в код сборщика.

📁 output/sites/my_bundle/site/

├─ 📄 index.html ✓ 42KB

├─ 📄 about.html ✓ 28KB

├─ 📄 services.html ✓ 35KB

└─ 📄 styles.css shared variables

Масштабирование (Multi-Page)

Переход к консистентным многостраничным бандлам. Реализация скриптов `extract_shared.py` и `inject_shared.py` для автоматического извлечения и внедрения общих глобальных элементов (header, footer, styles.css) во все HTML-страницы проекта.

GEMINI 3.1 PRO KIMI 2.5

GLM 5

94.5 A Grade / Score

Метрики и Эксперименты с LLM

Испытания генератора с использованием Gemini 3.1 Pro, Kimi 2.5 и GLM 5. Внедрение скрипта `score_bundle.py` для автоматического скоринга по 7 метрикам с достижением стабильных высших оценок (A Grade / 94.5 баллов).

# Claude Code Workspace

$ agent start --env opencode

> Initializing Antigravity core...

> Loaded 100KB design knowledge [OK]

Адаптация Harness & Агентов

Интеграция пайплайнов, промпт-матриц и 100KB+ базы дизайн-знаний в среды автономных агентов: Antigravity, Opencode и Claude Code. Обеспечение бесшовного запуска генерации из терминала.

Reference Artifacts

docs/system-analysis-all-models html-gen-agents/workflows scripts/score_bundle.py

Project Conclusion

Что это доказывает

The Truth

AI-кодинг — это не магия промптинга, а строгая инженерная задача по выстраиванию детерминированных пайплайнов и многоуровневых Quality Gates.

Methodology

Сложные визуальные задачи (верстка, анимации, дизайн-системы) решаются не огромными промптами, а узкоспециализированными матрицами фрагментов контекста.

Изучите, как эта архитектура применяется в других модулях:

Связанные материалы

GovardOS Architecture

Brief to Plan (Lab)

Workflow Scorer

Хотите внедрить похожий пайплайн в вашей компании?

Без маркетинговой воды, только строгая инженерия промптов и процессов.

Обсудить проект Все услуги