1. Референс
Собрал визуальный референс: атмосфера вселенной, палитра, кадры. Это опора, по которой ИИ понимает, какой сайт нужен.
Все материалы к видео в одном месте: как собран сайт по шагам, промпты для сборки, картинок и видео, гайд по видео-моделям и моделям для кода, сервис SyntX и инструменты, которыми я собирал проект.
Весь путь от пустой папки до готового сайта — по шагам. Тот же порядок можно повторить под любую вселенную или тему.
Принцип: ИИ собирает каркас и оживляет кадры, а вы держите вкус и порядок шагов. Сначала референс и структура, потом картинки и видео.
Собрал визуальный референс: атмосфера вселенной, палитра, кадры. Это опора, по которой ИИ понимает, какой сайт нужен.
Claude Code собирает структуру и секции сайта по промпту: hero, персонажи, локации, таймлайн, финальный CTA.
Сгенерировал ключевые арты и портреты в стиле вселенной. Тёмный кинематографичный тон, без текста на изображениях.
Готовые анимированные блоки беру с 21st.dev: кнопка «Copy prompt» отдаёт готовый промпт, ИИ вставляет блок в сайт.
Ключевые кадры оживляю через image-to-video в SyntX: статичный арт на вход, модель добавляет движение.
Видео и картинки подключаю в секции сайта, проверяю на разных экранах и публикую готовый результат.
Три набора: сборка самого сайта, генерация картинок и оживление кадров видео. Копируйте, подставляйте свои детали и повторяйте проект у себя.
Промпты для картинок и видео — на английском: модели понимают точнее. Тексты реальные, из выпуска.
Главное про промпты
Простым языком опишите ИИ, что хотите, и перепроверьте результат. Сложные промпты не нужны — модель понимает с полуслова.
Каркас и стиль фан-лендинга в Claude Code: секции, тёмная тема, премиальный вид.
Где запускать
Claude Code, в рабочей папке проекта (рядом — best_reference.png).
Что проверить
Готовый каркас: hero с видео, что нового, континент, герои, бестиарий, издания, FAQ.
/taste-skill — ты отвечаешь за все дизайн-решения, делай award-winning качество. Собери фан-лендинг The Witcher 4 на русском по референсу best_reference.png (в папке проекта). Стек: Next.js 15 + TypeScript + Tailwind + shadcn/ui + Framer Motion + lucide-react (чтобы дропать блоки с 21st.dev без переделок). Бренд: фон #0d0b08, акцент #c9a227 (золото), текст #e8e0d0, серифные заголовки. Секции: hero с видео, что нового, континент, герои, бестиарий, издания, FAQ. Запусти dev-сервер и сделай скриншот.
Стиль Midjourney / Stable Diffusion. По одному блоку на героя и монстра — копируйте дословно.
Не с нуля — улучшал готовый кадр по шагам. Финальный enhance-промпт — в карточке Ciri ниже.
Игровой кадр
Взял базовую картинку — кадр из игры / готовый арт как основу.
Улучшил
Поднял качество и детализацию исходника.
Добавил медальон
Дорисовал медальон школы — детали, которой не хватало.
Сделал реалистичной
Прогнал через enhance-промпт ниже → кинематографичный key art.
Ciri
enhance из игрового кадра
Не генерация с нуля, а улучшение готового скриншота. Жёстко фиксируем лицо, цвет волос и один шрам, чтобы модель не «дорисовала» лишнего, и добавляем кинематографичный свет и фон.
Enhance this portrait into official dark fantasy game key art. KEEP EXACTLY: the character's face shape, expression, composition. HAIR: platinum silver-white, almost white — NOT blonde, NOT golden, NOT brown. AGE: young woman, mid-twenties, smooth skin — no wrinkles, no aging. WOUNDS: one thin diagonal scar on left cheek only — no blood, no extra cuts, no bruises. Enhance: dramatic cinematic golden amber light from the left. Background: dark ancient pine forest, deep bokeh, faint ember particles. Color grade: deep shadows, rich amber-gold highlights, cinematic contrast. Armor: photorealistic worn dark leather, rivets catching light. Atmosphere: subtle lens flare left edge, film grain, epic scale. Square 1:1 format. No text, no logos, no watermarks.
Geralt
портрет key art
Портрет с нуля. Блоками описываем лицо, волосы, броню и свет — чем конкретнее детали (шрамы, медальон волка, рукояти мечей), тем точнее узнаётся персонаж.
Official dark fantasy game key art portrait of a weathered male witcher mentor. FACE: rugged middle-aged man, intense amber-grey eyes, two vertical scars over left eye and across cheek, short greying stubble, hard determined expression. HAIR: long platinum silver-white, swept back, slightly tangled — NOT blonde, NOT golden. ARMOR: photorealistic worn dark leather with steel studs and buckles, layered straps across chest, silver wolf-head medallion on chain at the neck, two sword hilts visible over the shoulders. LIGHTING: dramatic cinematic golden amber light from the left, Rembrandt-style shadows. BACKGROUND: dark weathered stone castle wall, deep bokeh, faint torch glow. COLOR GRADE: deep shadows, rich amber-gold highlights, cinematic contrast, subtle film grain. Vertical 3:4 portrait. No text, no logos, no watermarks.
Wild Hunt King
портрет key art
Делаем упор на атмосферу: ледяная броня, красное свечение в прорезях шлема, синий туман и призрачный конь на фоне. Холодная палитра задаёт жуткий, потусторонний вид.
Official dark fantasy game key art of the spectral Wild Hunt King. SUBJECT: ethereal armored specter, ornate cracked ice-blue plate armor with frost-rimed edges, skeletal helm with cracked visor, no visible flesh. EYES: two ominous glowing red points burning inside the dark eye slits. ATMOSPHERE: frost crystals, blue smoke and cold mist emanating from the armor, faint snow drifting. BACKGROUND: dark stormy night sky, spectral riders and a pale ghostly horse silhouette behind, deep bokeh. LIGHTING: cold blue rim light with red accent glow, dramatic cinematic contrast. COLOR GRADE: icy blue shadows, desaturated, eerie, subtle film grain, epic scale. Vertical 3:4 portrait. No text, no logos, no watermarks.
Yennifer
портрет key art
Ключевая деталь — фиолетовая магия на поднятой руке: руны и искры вокруг ладони. Магию держим только у руки (не у глаз), иначе лицо «поплывёт». Фиолетово-чёрная гамма.
Official dark fantasy game key art portrait of a dark-haired sorceress. FACE: pale beautiful woman, mid-thirties, sharp features, striking violet eyes, dark red lips, confident composed expression. HAIR: long jet-black wavy hair with subtle violet sheen. WARDROBE: black gown with raven-feather collar and arcane silver embroidery, choker with a dark obsidian gem. MAGIC: one raised hand wreathed in glowing violet arcane energy, swirling runes and purple sparks rising around the fingers. BACKGROUND: dark gothic castle interior at night, moonlit window, deep bokeh. LIGHTING: dramatic violet rim light, cool magical glow lighting the face from below. COLOR GRADE: deep purple-black shadows, rich violet highlights, cinematic contrast, subtle film grain. Vertical 3:4 portrait. No text, no logos, no watermarks.
Griffin
портрет key art
Ракурс снизу вверх делает зверя огромным и угрожающим. Гибрид орла и льва, шторм и молния на фоне задают эпичный масштаб.
Official dark fantasy game key art of an enormous griffin. CREATURE: massive winged beast, fierce eagle head with hooked beak, muscular lion body, powerful taloned forelegs, battle-scarred brown-and-gold feathers, wings spread wide. POSE: rearing up, low camera angle looking up to make it tower over the viewer. BACKGROUND: stormy mountain peaks, dark churning clouds, a fork of lightning behind the wings. LIGHTING: dramatic stormy backlight, rim light on the feather edges. COLOR GRADE: desaturated cold storm tones with warm feather accents, cinematic contrast, subtle film grain, epic scale. Vertical 3:4 portrait. No text, no logos, no watermarks.
Leshen
портрет key art
Лесной дух-ужас: череп оленя вместо головы, ветви-рога, вороны и корни. Холодный туманный свет и силуэт в мёртвом лесу создают зловещее настроение.
Official dark fantasy game key art of an ancient forest spirit (leshen). CREATURE: towering humanoid made of blackened wood and bark, bleached deer skull for a head, huge gnarled branch antlers, long clawed twig-like fingers, moss and lichen on the limbs. DETAILS: several black ravens perched on the antlers and shoulders, thick roots erupting from the ground around its feet. BACKGROUND: dead misty forest, bare twisted trees, low ground fog, faint god rays. LIGHTING: cold desaturated green-grey light, eerie backlight through the fog. COLOR GRADE: muted green and grey, deep shadows, cinematic contrast, subtle film grain, menacing silhouette. Vertical 3:4 portrait. No text, no logos, no watermarks.
Drowner
портрет key art
Хоррор-крупный план: утопленник выныривает из чёрной воды. Светящиеся глаза, склизкая кожа и лунные блики на болоте дают нужную жуть.
Official dark fantasy game key art of a drowner (undead swamp creature). CREATURE: pale bloated humanoid corpse, grey waterlogged skin covered in algae and slime, elongated clawed hands with webbed fingers, sunken face, glowing sickly green eyes, gaping maw. POSE: lurching upward out of black swamp water, clawed hands gripping the muddy bank, water streaming off its body. BACKGROUND: dark moonlit swamp, dead reeds, low mist over still water, moon reflection on the surface. LIGHTING: cold moonlight with an eerie green glow on the face, deep shadows. COLOR GRADE: desaturated teal-and-grey, horror atmosphere, cinematic contrast, subtle film grain. Vertical 3:4 portrait. No text, no logos, no watermarks.
Wyvern
портрет key art
Крылатый дракон на фоне грозы. Раскрытые кожистые крылья и ядовитый хвост в кадре, закатно-штормовой свет подчёркивает масштаб и опасность.
Official dark fantasy game key art of a wyvern. CREATURE: serpentine two-legged dragon, long sinuous neck, horned reptilian head, sharp teeth, leathery wings spread wide, barbed venomous tail, dark scales with a faint iridescent sheen. POSE: perched on a rocky cliff, head reared back, wings flared, dynamic threatening stance. BACKGROUND: stormy mountain pass at dusk, heavy clouds, distant lightning, crashing sea below. LIGHTING: dramatic storm light, sunset rim light catching the wing membranes and scales. COLOR GRADE: desaturated blue-grey storm tones with warm dusk accents, cinematic contrast, subtle film grain, massive wingspan shadow. Vertical 3:4 portrait. No text, no logos, no watermarks.
16:9, режим image-to-video. На вход — готовый кадр, в промпте уже есть Negative.
Грифон
beast-griffin.jpg
The griffin beats its spread wings powerfully and screeches, turning its head, then settles. Feathers ruffle in the wind, storm clouds churn behind it, dust drifts past. Dramatic dark fantasy, moody stormy backlight. Negative: morphing, deformed, extra limbs, distortion.
Леший
beast-leshen.jpg
The towering forest spirit slowly tilts its antlered skull and its branch-like arms creak and shift, then holds still. Crows flap and circle around it, thin fog drifts across the ground, god rays flicker through the trees. Eerie dark fantasy horror, cold desaturated green-grey light. Negative: morphing, deformed, extra limbs, distortion, human face.
Утопец
beast-drowner.jpg
The drowned corpse lurches upward out of the black water and opens its glowing green maw wider, clawed hands gripping the muddy bank, then holds. Water drips and ripples spread, low fog drifts over the swamp. Grim dark fantasy horror, cold moonlight with eerie green glow. Negative: morphing, deformed, extra fingers, distortion, smiling.
Виверна
beast-wyvern.jpg
The black wyvern rears its head back and roars while flexing its spread wings, tail swaying, then settles on the cliff. Heavy rain pours, lightning flashes in the storm clouds, waves crash against the rocks below. Epic dark fantasy, stormy desaturated blue-grey. Negative: morphing, deformed, extra limbs, distortion, fire breath.
Каэр Морхен
loc-caer-morhen.jpg
Cinematic living landscape of a ruined mountain witcher fortress at golden hour. Static locked-off tripod camera, no camera movement, perfectly stable steady shot. Motion only in the environment: low clouds and mist drift slowly through the valleys, soft sunlight rays shift gradually across the ancient stone, a few birds glide far in the distance. Epic dark fantasy, warm amber light on cold snowy mountains, photorealistic, 4k. Negative: camera shake, shaky camera, handheld, jitter, vibration, wobble, trembling, unstable camera, camera movement, zoom, pan, people, fast motion, morphing geometry, flickering, text, watermark.
Туманный лес
loc-forest.jpg
Cinematic living landscape of a dark misty ancient forest path. Static locked-off tripod camera, no camera movement, perfectly stable steady shot. Motion only in the environment: thin fog drifts slowly between the giant mossy trees, soft god rays shimmer through the canopy, clusters of glowing blue mushrooms pulse gently, luminous spores and dust motes float, hanging vines sway faintly. Eerie dark fantasy, cold blue glow against warm light shafts, photorealistic, 4k. Negative: camera shake, shaky camera, handheld, jitter, vibration, wobble, trembling, unstable camera, camera movement, zoom, pan, dolly, people, creatures, fast motion, morphing trees, flickering, text, watermark.
Топи Велена
loc-swamp.jpg
Cinematic living landscape of a rotting moonlit swamp with ruined wooden huts. Static locked-off tripod camera, no camera movement, perfectly stable steady shot. Motion only in the environment: pale clouds drift slowly across the moon, low fog rolls over the still black water, green will-o-the-wisp lights bob and drift gently, dead trees and hanging moss sway faintly, the water surface ripples and the moon reflection shimmers. Grim dark fantasy, desaturated moonlit teal-and-grey, photorealistic, 4k. Negative: camera shake, shaky camera, handheld, jitter, vibration, wobble, trembling, unstable camera, camera movement, zoom, pan, dolly, people, fast motion, morphing structures, flickering, bright colors, text, watermark.
Йеннифер v2
hero-sorceress.jpg
Cinematic living portrait of a black-haired sorceress with violet eyes in a dark velvet gold-embroidered robe, one hand raised. Subtle motion: swirling purple magical energy pulses and flows ONLY around her raised hand, glowing violet sparks rise and drift from her palm. Her dark hair floats slowly as if charged with magic, she lifts her chin slightly. Her eyes stay natural and calm, normal eyes, a single slow blink. Candle flames flicker in the gothic candlelit hall, stained-glass window glows softly behind. Slow subtle camera drift, shallow depth of field. Dark fantasy, magical purple-and-gold lighting, photorealistic, 4k. Negative: glowing eyes, eye beams, laser eyes, light rays from eyes, energy from face, morphing face, distorted hand, extra fingers, fast motion, jitter, warping, text, watermark.
Цири
hero-ciri.jpg
Cinematic living portrait of a white-haired young witcher woman with a faint scar on her cheek, green eyes. Subtle motion: she slowly turns her head a few degrees and shifts her gaze toward the camera, a single slow blink, strands of her white hair drift gently in a soft breeze. Warm golden sunlight rays flicker through the autumn forest behind her, glowing embers and dust motes float and drift past. Her wolf medallion sways almost imperceptibly. Shallow depth of field, slow subtle push-in. Dark gothic fantasy, moody golden-amber lighting, photorealistic, 4k. Negative: morphing face, distorted features, extra fingers, fast motion, jitter, warping, text, watermark.
Геральт
hero-mentor.jpg
Cinematic living portrait of a grey-haired older witcher with a beard, scarred face and glowing amber cat-like eyes, two swords strapped to his back. Subtle motion: a slow steady breath, his amber eyes glint and the pupils contract, he gives an almost imperceptible nod, a few strands of hair move. Warm firelight from a hearth behind him flickers and dances across his weathered leather armor and the silver wolf medallion. Faint smoke drifts in the air. Very slow push-in, shallow depth of field. Dark gothic fantasy, low-key firelit lighting, photorealistic, 4k. Negative: morphing face, distorted eyes, extra limbs, fast motion, jitter, warping, text, watermark.
Дикий Охотник
hero-antagonist.jpg
Cinematic living portrait of a spectral elven king in black rune-etched armor, pale gaunt face, glowing pale-white eyes. Subtle motion: cold blue ghostly flames flicker and rise around his armor and crown, the runes carved into the metal pulse with faint blue light. His glowing eyes intensify, a wisp of icy breath escapes, the spectral fire flares slowly. Floating frozen particles drift in the black void. Very slow ominous push-in, shallow depth of field. Dark fantasy horror, eerie blue glow on black background, photorealistic, 4k. Negative: morphing face, distorted features, warm colors, fast motion, jitter, warping, text, watermark.
Реальные ассеты проекта: сгенерированные картинки и оживлённые из них видео. Те же герои, монстры и локации, что в промптах выше.
Сначала картинка по промпту, потом тот же кадр оживляю через image-to-video в SyntX. Видео ниже играют сами, когда попадают в кадр.
Ключевые арты в стиле вселенной: тёмный кинематографичный тон, без текста на кадре.
Те же кадры, оживлённые через image-to-video. Без звука, зацикленные — играют при наведении в зону видимости.
Все модели — в одном сервисе SyntX. Режим image-to-video: на вход статичный кадр, модель добавляет движение.
Логика простая: Kling — на основную массу кадров, Seedance — на самые важные, Veo — где нужна чистая физика, Hailuo и Luma — на черновики.
Основная модель
Лучше всех держит лицо и сцену, меньше лагает, недорогая. Режимы: Image to Video (1 фото) и Keyframes (2 кадра — стартовый и финальный → плавный кинопереход).
Для важных кадров
Самое высокое качество и самая дорогая модель — примерно в 4 раза дороже Kling. Беру её только на самые важные кадры.
Чистая физика
Чисто и аккуратно, хорошо понимает сцену, естественная физика движения. Режим References to Video (1–7 изображений). Дороже Kling.
Черновики
Бюджетный вариант для черновиков. Кинематографично, но больше артефактов на лице — для финальных кадров лучше брать Kling или Seedance.
Хотите глубже в модели? Ребята из SyntX запилили подробный обзор.
Сравнение видео-моделей по качеству, цене и кейсам.
Вставляйте этот список в поле negative — он убирает большинство артефактов на лице и в движении.
morphing face, distorted features, extra fingers, glowing eyes, fast motion, jitter, warping, text, watermark
Сайт собирал на Claude Opus. 4.8 — свежий флагман: лучше 4.7 во всём при той же цене. 4.7 оставил для сравнения.
Не валите всё разом — контекст забивается. Идите пошагово через select element: выделили блок на странице → «вот шаблон, замени этот блок» → тест → дальше.
Anthropic только что выпустила — лучше 4.7 во всём при той же цене. Главное, что выделяют сами: честность. В 4 раза реже молча пропускает баги в коде, чаще признаёт неопределённость и сама флагует проблемы. Контекст ≈ 1 млн токенов.
Прошлая топ-версия для кода. Миллион токенов контекста на подписке — даже на Pro, реальный миллион: 400–500к держит спокойно. 4.8 теперь лучше во всём, но 4.7 всё ещё мощный.
Специально под совместимость с 21st.dev — готовые блоки встают без переделок.
Посмотрите итоговый фан-сайт из ролика. Ссылка будет обновлена на финальный адрес публикации.
Все видео-модели из гайда — здесь, в одном сервисе. По ссылке доступна регистрация, а промокод даёт скидку 15%.
Промокод
IVANAI
Сборка сайта в терминале: код, правки и публикация по промптам. Основной инструмент сборки каркаса.
Скилл против AI-слоп-дизайна. Бесплатный, ставится одной командой — задаёт дизайн-рамку, чтобы не получить шаблонный AI-сайт.
Банк готовых блоков с анимациями. Кнопка «Copy prompt» отдаёт готовый промпт для ИИ — вставляешь блок в сайт.
В Telegram-канале разбираю сборку сайтов, агентов и автоматизаций на Claude и других инструментах.