Мне нужны были визуалы для YouTube-видео про прокси. Пять вариантов конфигурации, которые надо объяснить зрителю - желательно наглядно, желательно красиво. Figma у меня есть, но я не дизайнер. Нанимать кого-то для трёх картинок - странно.
Решение нашлось случайно: Claude Code и кастомный системный промпт с инструкциями по дизайну. Промпт - HTML-файл - открываешь в браузере. Я не ожидал нормального результата. Ожидал дефолтные шрифты, скучный layout, перекошенные блоки. Вышло иначе.
Что получилось: четыре дизайна одной темы
Тема одна - пять вариантов прокси-конфигурации. Дизайны - разные.
proxy-v1-cards.html - вертикальные карточки с нумерацией. Каждая конфигурация - отдельный блок, между ними SVG-стрелки, показывающие поток данных. Выглядит как схема из технической документации, только красивее.
proxy-v2-flowline.html - горизонтальные flow-линии с pill-контейнерами. Более динамичный вариант, ближе к диаграммам из product-презентаций. Один взгляд - и понятно, что данные идут слева направо через цепочку компонентов.
proxy-v3-blocks.html - сетка с градиентными блоками и шкалой сложности внизу, чтобы зритель сразу понимал, какой вариант сложнее в настройке. Визуально самый насыщенный из четырёх.
proxy-v3-pros-cons.html - двухколоночный разбор первого варианта. Плюсы слева, минусы справа. Классика, но исполнение нормальное - не скучная таблица.
Весь стек: чистый HTML+CSS, никаких фреймворков, никаких npm-зависимостей. Google Fonts (Space Grotesk и DM Sans), flexbox, SVG-иконки, hover-эффекты. Открыл файл - видишь результат. Всё inline, портировать никуда не надо.
Несколько десятков промптов от первого запроса до финала. Часть ушла на выбор концепции, большинство - на уточнения.
Техника: почему это работает
Чтобы результат был предсказуемым, в системном промпте заранее прописаны стилевые ориентиры: цветовые палитры, шрифтовые пары, принципы отступов. Без этого Claude понимает HTML и CSS, но интерпретирует задачу по-своему. С ориентирами - говоришь “minimal dark с amber-акцентом” и получаешь именно это, а не что-то близкое.
Техника, которая реально помогла - микро-уточнения, по одному элементу за промпт.
Плохо работает так: “переделай дизайн, сделай его современнее и привлекательнее”. Это не задание, это пожелание. Claude перепишет всё, и ты потеряешь то, что уже нравилось.
Хорошо работает так: “увеличь отступы между карточками до 24px, остальное не трогай”. Или: “замени шрифт заголовков на Space Grotesk Bold, оставь всё остальное как есть”. Один элемент - один промпт. Конкретные примеры из этого проекта:
- “Добавь SVG-стрелки между карточками, показывающие направление потока данных”
- “Сделай pill-контейнеры в flow-линии с горизонтальным градиентом”
- “Добавь шкалу сложности внизу блочной сетки, от 1 до 5”
Почему HTML, а не Figma или Canva. Браузер есть у всех - открыл файл, увидел результат без регистрации и подписки. HTML - это текст, Claude его читает, правит, генерирует, а Figma-файл AI не может редактировать напрямую. Итерационный цикл быстрее: сохранил файл - обновил браузер - смотришь результат, без экспорта и “обрабатывается…”.
Что удивило и где границы
Больше всего удивила типографика. Ожидал “большой-средний-маленький”. Вышло аккуратнее: правильные отношения размеров, нормальные line-height, межбуквенные интервалы где надо. Space Grotesk для заголовков, DM Sans для основного текста - стандартная пара для tech-дизайна, и Claude её использовал уместно, а не наугад.
Цветовые решения тоже не подвели. Градиенты не кричащие, акценты не случайные. В proxy-v3-blocks.html каждая конфигурация получила свой цвет из одной палитры, и они не конфликтуют между собой - базовый дизайн-принцип, который без гайда трудно соблюсти вручную.
SVG-иконки и стрелки были неожиданно чистыми. Не clip-art, не emoji как запасной вариант - нормальные векторные элементы, которые масштабируются без пикселизации.
Где это не работает: для продуктового интерфейса - мобильного приложения с компонентной системой, веб-сервиса с кастомной навигацией - этого недостаточно. Там нужна дизайн-система, прототип, user testing. HTML из нескольких десятков промптов не заменит эту работу.
Для брендированного контента с существующим гайдлайном тоже придётся потрудиться - нужно передать Claude конкретные цвета, шрифты, правила отступов. Решаемо, но требует времени на настройку.
Честно: это не замена дизайнеру. Но это решение задачи, когда дизайнер не нужен - когда надо объяснить техническую схему на YouTube и хочется, чтобы это выглядело нормально, а не как скриншот из терминала.
Итог без пафоса
Обычный HTML оказался хорошим форматом для визуального контента, который не надо деплоить - только показать на экране. Скриншот из браузера, конвертация в PNG для превью, готово.
Системный промпт с дизайн-ориентирами решает конкретную проблему: Claude сам по себе понимает HTML и CSS, но без общего языка результат непредсказуем. Правила дают этот язык - стили, палитры, шрифтовые пары с именами, на которые можно ссылаться.
Техника микро-уточнений работает и без кастомного промпта, с любым AI-инструментом. Меняй по одному элементу - не теряй то, что уже работает.
Четыре файла, нормальная визуализация для видео про прокси. Я не дизайнер - и выглядит как дизайн.