Большинство веб-сайтов, созданных с помощью искусственного интеллекта, страдают от характерных признаков визуальной вторичности (AI slop): стандартная сетка Bootstrap или Tailwind, предсказуемые сине-фиолетовые неоновые градиенты, плоская типографика и стоковые иллюстрации роботов. Такие интерфейсы мгновенно считываются посетителями как дешевые шаблоны и не вызывают доверия у премиальной аудитории.
Лиам Оттли продемонстрировал практический инженерный процесс создания кастомного веб-сайта для агентства AI Makeover, который стирает грань между ручной работой дорогой дизайн-студии и скоростью агентной генерации.
Триада инструментов: агент, 3D-графика и медиагенерация
В основу пайплайна положена бесшовная связка трех независимых технологий:
- Claude Code выступает в роли генерального архитектора проекта: агент исследует структуру репозитория, пишет фронтенд-разметку, настраивает стили и связывает компоненты.
- Three.js отвечает за интерактивный трехмерный слой: в первом экране (hero section) размещается процедурная светящаяся сфера, реагирующая на курсор мыши и скролл страницы.
- Higgsfield AI, подключенный через открытый протокол Model Context Protocol (MCP): агент получает возможность прямо из консоли генерировать бесшовные видеофоны высокого разрешения, выполнять расширение полей изображений (outpainting) под формат 16:9 и анимировать статические визуальные концепции.
Подключение MCP-сервера Higgsfield к рабочему окружению настраивается через конфигурационный файл:
{
"mcpServers": {
"higgsfield": {
"command": "npx",
"args": [
"-y",
"@higgsfield/mcp-server"
],
"env": {
"HIGGSFIELD_API_KEY": "hf_live_secret_key_here"
}
}
}
}
Интеграция 3D-сцены и видеофона
После генерации видеофона разработчик поручает Claude Code скомпоновать интерактивный первый экран, где фоновое видео сочетается с легковесной WebGL-сценой:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<style>
body { margin: 0; overflow: hidden; background: #050508; }
#bg-video { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; z-index: 1; }
#canvas-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: auto; }
</style>
</head>
<body>
<video id="bg-video" autoplay loop muted playsinline src="assets/cinematic_bg.mp4"></video>
<div id="canvas-container"></div>
<script type="module">
import * as THREE from 'https://cdn.skypack.dev/three@0.136.0';
const container = document.getElementById('canvas-container');
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
const geometry = new THREE.IcosahedronGeometry(2.5, 4);
const material = new THREE.MeshBasicMaterial({ color: 0x00f0ff, wireframe: true, transparent: true, opacity: 0.6 });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
camera.position.z = 6;
window.addEventListener('mousemove', (e) => {
sphere.rotation.y = (e.clientX / window.innerWidth - 0.5) * 2;
sphere.rotation.x = (e.clientY / window.innerHeight - 0.5) * 2;
});
function animate() {
requestAnimationFrame(animate);
sphere.rotation.z += 0.002;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
Сквозная лидогенерация и оптимизация
Помимо визуального оформления, в проект интегрируются готовые UI-паттерны из галерей Mobbin и 21st.dev, а также инструмент деанонимизации трафика Osprey. При посещении сайта корпоративными пользователями система фиксирует компанию посетителя и передает контактные данные в автоматизированные цепочки коммуникаций Instantly и Expandi.
Важный технический аспект: тяжелые сгенерированные MP4-видеоролики перед выкаткой в прод обязательно сжимаются утилитой ffmpeg в формат WebM с ограничением битрейта до 1.5 Мбит/с, чтобы сохранить высокую скорость отрисовки первого экрана (LCP) на мобильных устройствах.
Связка кодинг-агента с генеративными медиасетями через MCP превращает терминал в полноценную дизайн-студию: разработчик получает уникальный интерактивный фронтенд без необходимости вручную верстать каждый 3D-шейдер.