Маркетинг-стратег, IT-предприниматель, ментор по вайбкодингу
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
Пошаговая методология создания нестандартных веб-интерфейсов в Claude Code с использованием дизайн-систем вместо одиночных промптов. Разбирается интеграция генератора графики и видео Higgsfield через CLI, внедрение кастомной типографики, многоуровневый процесс валидации качества (Design Loop) и очистка текстов лендинга от типичных AI-штампов.
👤 Кому будет полезно
Вайбкодерам и инди-хакерам, чьи интерфейсы выглядят однотипно из-за дефолтных стилей нейросетей.
Фулстек-разработчикам, создающим MVP и SaaS-продукты без штатного UI/UX-дизайнера.
AI-энтузиастам, работающим в терминале через Claude Code и желающим автоматизировать создание медиа-ассетов прямо в кодовой базе.
✨ Что получите
Готовую рабочую связку: от анализа референсных сервисов до генерации уникальных анимированных персонажей через Higgsfield CLI и внедрения продающего копирайтинга по принципу «один экран — одна мысль».
1. Ликвидация AI-слопа: Переход от текстовых промптов к дизайн-системам
Контекст: Большинство сайтов, созданных нейросетями, страдают эффектом «дня сурка»: одинаковый фиолетово-индиговый градиент, предсказуемая сетка из трёх карточек преимуществ, скруглённые углы с эффектом размытого матового стекла (glassmorphism) и шаблонные заголовки. Модели вроде Claude сами по себе не обладают встроенным эстетическим вкусом и без жёстких ограничений выдают усреднённую середину. Решение проблемы — подавать на вход модели не абстрактный текстовый запрос, а полноценную дизайн-систему реального эталонного продукта. Анализ сайтов лидеров рынка (Linear, Mercury, Slush, Duolingo) позволяет извлечь токены интерфейса, сетку и механику взаимодействия ещё до написания первой строки кода.
Тайминг:[00:23], [01:05], [02:44]
Выгода: Полный отказ от шаблонного «AI-вида» лендингов; сокращение времени на подбор UI-элементов на 70% за счёт готовой кодифицированной архитектуры.
Как применить:
Шаг 1: Выбор эталона в нише — Откройте подборку сайтов с премиальным фронтир-дизайном (например, галереи референсов вроде Godly, Curated или каталоги в стиле Linear/Mercury) и выберите 1–2 проекта со сложной, выразительной механикой.
Шаг 2: Поиск лучших соответствий через Claude — Вставьте список эталонных сайтов в Claude и запросите подбор наиболее релевантных под вашу нишу.
I would like to build a beautiful website. I have given you a list of gorgeous frontier websites. What I would like you to do is to go through those and find for me three examples that are most closely related to my desired business. My desired business is an AI education app kind of like Duolingo. Give me the three links.
Шаг 3: Генерация кодифицированной дизайн-системы — Передайте выбранный референс в Claude с моделью Sonnet (thinking mode: extra/high) для извлечения дизайн-токенов: отступов, радиусов, состояний интерактивных кнопок, цветовых палитр и геймификации.
Hey, I would like you to look at this design reference for Duolingo. I'm going to build an app that teaches people AI. I would like to keep everything else essentially inspired by this design system. Here's another design system you may want to look at as well as a secondary reference. Use this entire design system to build me one for something where basically I am teaching AI to individuals. I am the Duolingo of AI. App name: Neuro. Primary colors: Keep the playful playful gamified aesthetic, but shift the palette towards a refined tech-blue instead of pure green.
Результат: Готовый черновой каркас сайта и отдельная страница дизайн-системы, фиксирующая типографику, механику кнопок, экраны входа и интерактивные блоки в коде.
2. Автогенерация уникальных видео- и медиа-ассетов через Higgsfield CLI
Контекст: Главный маркер любительского AI-интерфейса — пустые плейсхолдеры вместо иллюстраций или стоковые векторные иконки роботов. Для создания премиального продукта интерфейсу нужны уникальные персонажи, зацикленные видеоролики и анимированные микро-взаимодействия. Ручной экспорт ассетов из веб-интерфейсов сторонних генераторов разрывает вайбкодинг. Подключение генеративной платформы Higgsfield напрямую в терминал Claude Code позволяет вызывать создание изображений и видео по API, не выходя из контекста разработки.
Тайминг:[04:06], [04:40], [05:56]
Выгода: Автоматическое наполнение кодовой базы живыми MP4/WebP-ассетами без ручного скачивания и конвертации; консистентный визуальный стиль персонажей во всех секциях.
Как применить:
Шаг 1: Подключение CLI в Claude Code — Авторизуйте Higgsfield CLI внутри вашего терминального окружения, чтобы агент Claude Code мог напрямую исполнять команды генерации.
Hey there, I want you to connect to Higgsfield via the CLI.
Шаг 2: Выбор видео-модели — Для анимации интерфейсных элементов и циклических персонажей настройте использование модели Seedance 2.5 (упоминается как Seed to Dance 2.5), гарантирующей стабильные зацикленные движения без графических артефактов.
Шаг 3: Определение маскотов и концепта — Сформулируйте визуальный стиль: вместо банального робота разработайте уникального механического или бионического персонажа (например, кибер-акула «Robo Shark»), который задаёт айдентику продукта.
Результат: Набор уникальных графических и зацикленных видео-ассетов, автоматически сохранённых в директорию проекта и интегрированных в HTML/CSS разметку.
Контекст: Обычный запрос к AI с формулировкой «сделай интерфейс красивее» приводит к случайным правкам: если попросить модель пять раз улучшить код, она каждый раз перепишет разные несвязанные части. Чтобы интерфейс достиг уровня топовых бенчмарков, процесс рендеринга должен быть зациклен через механизм критических судей (evals / gauntlet). Система сопоставляет полученный компонент с «золотым стандартом», выставляет оценку соответствия и возвращает код на доработку до тех пор, пока критерии не будут выполнены.
Тайминг:[04:53], [05:28], [06:18]
Выгода: Устранение субъективных ошибок верстки, достижение pixel-perfect интерактивности без необходимости вручную проверять и править каждый CSS-класс.
Как применить:
Шаг 1: Создание скилла Design Loop — Добавьте файл навыка (skill) в конфигурацию агента Claude Code, чтобы вызывать команду через слеш (/loop).
Шаг 2: Пилотный запуск на одной секции — Никогда не прогоняйте весь лендинг целиком за один проход; протестируйте механику на ключевом блоке (например, первом интерактивном уроке или hero-секции).
Шаг 3: Запуск сравнительной петли (Prompt) — Передайте агенту команду на сопоставление с эталоном:
/loop Hey there, I want you to go ahead for me and ruthlessly compare this website with Duolingo. Specifically, I want to bring this to life. Duolingo has loads of beautiful animated graphics and a distinctive graphic style. I want you to go ahead and create a unique graphic style with unique characters in the Duolingo style, but make it unique so it's specific to us.Use Duolingo as a gold standard reference. Look at the graphics, look at the animations all the way through it, and basically create our version of what that is based on our unique style that you create and unique motions, such that it looks like the AI version of this.For example, look at the section where we have "Learn anytime, anywhere". Every section I want to look gorgeous and absolutely flawless. Use the Higgsfield CLI to generate unique graphics and unique videos, making sure you use Seedance 2.5 for the best video generations. Bring out real personality, looped states, and interactivity.
Результат: Интерактивный рабочий прототип сайта с микро-викторинами, динамическими анимациями при ответах и плавными переходами между экранами.
4. Кастомная типографика: Замена системных шрифтов на характерные гарнитуры
Контекст: Стандартные шрифты (Inter, Roboto, Arial, дефолтный системный Sans) мгновенно выдают шаблонный сайт. Шрифт формирует до 80% восприятия бренда, однако вайбкодеры часто игнорируют настройку кернинга, оптического веса и характера гарнитуры. Правильный выбор пары шрифтов (для броских заголовков и чистого UI) способен радикально улучшить визуал даже при минималистичной графике. Для подбора гарнитур важно использовать реальные примеры из практики, анализируя их поведение в боевой верстке.
Тайминг:[07:85], [08:21], [08:55]
Выгода: Премиальный визуальный стиль без найма UI-дизайнера; мгновенная дифференциация от тысяч типичных AI-лендингов.
Как применить:
Шаг 1: Поиск референсов в контексте — Используйте ресурсы fonts.com, fontest.com (показывает бесплатные шрифты в реальных дизайн-макетах) и fontsinuse.com для анализа того, какие шрифтовые пары используют технологические SaaS-стартапы.
Шаг 2: Интеграция автоподборщика шрифтов в дизайн-систему — Настройте Claude Code на генерацию интерактивного переключателя шрифтов внутри вашей служебной страницы дизайн-системы.
Шаг 3: Проверка лицензирования — Убедитесь, что выбранные файлы шрифтов (WOFF2/TTF) имеют открытую коммерческую лицензию (SIL Open Font License или свободное коммерческое использование), чтобы избежать юридических претензий.
Результат: Внедрённые кастомные шрифты для дисплейных заголовков и интерфейсного текста с выверенными пропорциями (line-height, letter-spacing) и интерактивный селектор для тестов прямо в браузере.
5. Де-слопинг копирайтинга: 5 принципов убеждающего текста на лендинге
Контекст: Даже идеальный дизайн обесценивается, если текст написан языком стандартного ChatGPT: «Раскройте потенциал ИИ», «Инновационное решение для трансформации вашего опыта». Пользователи моментально считывают водянистый AI-копирайтинг и теряют доверие к продукту. Текст должен быть приземлённым, конкретным и подчиняться законам когнитивной психологии и продуктового маркетинга. Чтобы вычистить шаблонные фразы, черновой текст прогоняется через специализированный фильтр анти-слопа и переписывается с позиции прямой пользы.
Тайминг:[09:33], [10:25], [10:57], [11:34]
Выгода: Рост конверсии лендинга за счёт устранения когнитивной нагрузки и замены абстракций на осязаемые пользовательские сценарии.
Как применить:
Шаг 1: Внедрение принципа «Don't Make Me Think» («Не заставляйте меня думать») — Текст должен обрабатываться мышлением Системы 1 (быстрое, интуитивное восприятие). Если пользователю нужно вчитываться в процентные расчёты или сложные термины — конверсия падает.
Шаг 2: Реализация структуры «One Screen, One Thought» («Один экран — одна мысль») — Высота каждой секции на десктопе должна стремиться к 100vh. На одном экране располагается строго один фокус внимания и один понятный призыв к действию (CTA).
Шаг 3: Называйте боль первой (Name the pain first) — Применяйте маркетинговый фреймворк Дэниела Пристли (Daniel Priestley): вместо самовосхваления продукта покажите реальную проблему клиента.
Шаг 4: Запуск скрипта де-слопинга — Пропустите тексты через промпт глубокой редакторской правки с чёрным списком стоп-слов:
Audit all copy across this landing page and remove every trace of AI slop. Apply these strict rules:1. Don't make me think: Simple, punchy, conversational phrasing.2. Name the pain first: Acknowledge the user's struggle before presenting the feature.3. One ask per screen: Each viewport must contain only one clear objective.4. Specificity over abstractions: - Instead of "Get started" -> Use "Start free" or "Start your first lesson". - Instead of "Learn AI fast" -> Use "Get genuinely good at AI 5 minutes at a time. Everyone uses AI. Almost nobody is good at it." - Instead of "Learn anywhere, anytime" -> Use "5 minutes on the train counts."Highlight all changed lines and output the updated copy.
Результат: Редакция из 20+ точечных правок лендинга, где абстрактный текст заменён на живой, кинематографичный копирайтинг с понятной ценностью.
FAQ
В: Почему обычный промпт в Claude Code выдает одинаковый фиолетовый дизайн с карточками? О: Языковые модели обучаются на миллионах существующих веб-страниц. При отсутствии жестких стилевых рамок модель статистически выбирает самый частотный паттерн современного фронтенда (Tailwind-градиенты от indigo к violet, закругления rounded-xl, три колонки flex/grid). Чтобы сломать этот паттерн, необходимо передавать конкретную дизайн-систему стороннего эталонного сайта.
В: Что такое Higgsfield CLI и зачем использовать его внутри Claude Code? О: Higgsfield — это платформа для генерации AI-изображений и видео. Наличие консольного интерфейса (CLI) позволяет агенту Claude Code напрямую вызывать команды генерации файлов прямо из терминала IDE, автоматически размещать сгенерированные MP4/PNG в папке public/assets и тут же прописывать к ним пути в верстке без ручной рутины.
В: Какую модель генерации видео лучше использовать для веб-интерфейсов? О: Автор рекомендует модель Seedance 2.5 (Seed to Dance 2.5) внутри Higgsfield. Она оптимизирована для плавных, зацикленных микро-анимаций персонажей, что критично для интерактивных образовательных и SaaS-лендингов.
В: В чём суть паттерна «Design Loop» (Gauntlet Loop)? О: Это автоматизированный цикл: агент генерирует код -> отправляет результат на валидацию внутреннему набору проверок (судьям), сравнивающим результат с «золотым стандартом» референса -> выявляет расхождения -> исправляет код. Цикл повторяется до достижения нужной планки качества, исключая хаотичные ручные правки.
В: Что делать, если у меня нет бюджета на покупку платных шрифтов? О: Используйте специализированные каталоги вроде fontest.com. Там собраны сотни качественных бесплатных шрифтов с открытой лицензией (OFL), которые выглядят как кастомные студийные гарнитуры и полностью закрывают потребности стартапа на этапе MVP.
В: Как концепция «Один экран — одна мысль» реализуется на практике? О: Каждая логическая секция страницы верстается так, чтобы при прокрутке занимать видимую область экрана пользователя. Секция содержит ровно один тезис (например: интерактивный демо-тест, социальное доказательство или скачивание приложения) и одну целевую кнопку, не перегружая внимание посетителя сторонними ссылками.
Ресурсы и ссылки
Higgsfield — платформа генерации графики и анимации с поддержкой CLI — упомянут в видео (higgsfield.ai)
Fontest — курируемая коллекция бесплатных качественных шрифтов с примерами верстки в реальных интерфейсах — упомянут в видео (fontest.com)
Fonts In Use — независимый архив использования типографики в реальных коммерческих проектах — упомянут в видео (fontsinuse.com)
«Don't Make Me Think» («Не заставляйте меня думать») — классическая книга Стива Круга по веб-юзабилити и UX — упомянута в видео
Маркетинговая система Дэниела Пристли (Daniel Priestley) — концепция «Name the pain first» для структуры офферов — упомянута в видео
Duolingo / Linear / Mercury / Slush — эталонные сайты с передовой фронтир-эстетикой для извлечения дизайн-систем — упомянуты в видео
Конспект создан на основе видео «How to Build Beautiful Websites with Claude Code (New System)» канала Jack Roberts. Все права на оригинальный материал принадлежат авторам.Источник: https://www.youtube.com/watch?v=VwGrXe2ricE
