Вектор, иконки и иллюстрации: от растра к кривым

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

Трассировка превращает области одного цвета в фигуры. Чем меньше в картинке плавных переходов, текстур и теней, тем чище получится вектор. Поэтому изображение, которое пойдёт в обводку, сразу генерируй трассируемым: плоские заливки, ограниченная палитра, чёткие края, однородный фон. Пример ниже — для Midjourney. В Recraft и GPT Image флаги --raw и --ar не работают и уйдут в текст картинки, там их не пиши.

potted monstera plant as a mid-century screen print, bold cut-paper leaf shapes with expressive splits, asymmetric composition, leaves spilling out of frame, limited palette of 4 flat colors: deep bottle green, mustard, terracotta, warm off-white, crisp edges, no gradients, no texture, no shadows --raw --ar 1:1 --stylize 250

Для GPT Image и Nano Banana то же самое пишется обычной фразой. Им полезно добавить: «как будто это экспорт из векторного редактора, а не рисунок». После генерации апскейль картинку (тема «Генерация изображений», раздел «Ключевые техники»). Трассировка по крупному изображению даёт заметно более ровные кривые.

До

«illustration of a potted monstera plant»: штриховка, полутона и тень на полу.

После

Промпт выше: четыре плоских цвета, чёткие края, без теней.

До — обычный промпт

illustration of a potted monstera plant --ar 1:1

После — промпт под трассировку

Плоские цвета, чёткие края, без теней

potted monstera plant as a mid-century screen print, bold cut-paper leaf shapes with expressive splits, asymmetric composition, leaves spilling out of frame, limited palette of 4 flat colors: deep bottle green, mustard, terracotta, warm off-white, crisp edges, no gradients, no texture, no shadows --raw --ar 1:1 --stylize 250

Автоматическая обводка почти никогда не бывает финалом. Что проверить, прежде чем считать файл готовым:

• Количество узлов. Круг из сорока точек — признак сырой трассировки. Упрости контуры (Simplify) и посмотри, не поплыла ли форма.
• Фон и мусор. Трассировка часто оставляет белый прямоугольник под изображением и десятки мелких фигур-артефактов. Удали их.
• Цвета. Вместо четырёх цветов в файле окажется двенадцать почти одинаковых оттенков. Сведи их к палитре бренда.
• Стыки. Между соседними фигурами остаются тонкие зазоры или нахлёсты. Они вылезут при печати и на тёмном фоне.
• Симметрия и геометрия. То, что должно быть ровным кругом или симметричной формой, проще перестроить заново примитивом, чем править по точкам.
• Структура. Сгруппируй и назови слои. Иначе файл невозможно передать дальше (тема «ИИ внутри Figma», автоматические имена слоёв).

Честное правило: если чистка занимает больше времени, чем отрисовка поверх, положи генерацию на нижний слой как кальку и обведи её руками. Для логотипов и ключевых иконок это почти всегда так.

Трассировка по краям

По яркости

Для интерфейса первым выбором остаётся готовая библиотека: Phosphor, Lucide, Material Symbols (тема «Библиотеки и ресурсы для вайбкодинга»). Единая сетка, толщина линии и понятная лицензия важнее оригинальности. Генерация оправдана в трёх случаях. Нужной метафоры в библиотеке нет. Бренду нужен собственный сет. Или в существующем наборе не хватает нескольких иконок.

Последний случай — лучшее применение пути «SVG как код». Покажи модели код трёх-четырёх иконок из набора как образец (тот же few-shot из темы «Фундамент») и попроси новую в той же системе:

Вот SVG-код четырёх иконок из нашего набора (вставить). Общие правила: холст 24×24, линия 1.5, скруглённые концы и стыки, без заливок, отступ от края 2.
Нарисуй в той же системе иконку «возврат товара». Верни только SVG-код. Если метафора неочевидна — предложи два варианта и объясни разницу.

Результат вставляется в Figma как есть: скопированный SVG-код превращается в векторный слой. Если нужен целый сет в авторском стиле из растровой модели, главная проблема — согласованность. Девять иконок, сгенерированных по отдельности, будут выглядеть как девять разных наборов. Надёжнее генерировать их одним изображением-листом («сетка 3×3 иконок в едином стиле»), закрепив стиль референсом (тема «Персонажи и стиль»), а затем резать и трассировать.

До

Девять отдельных генераций: девять разных наборов.

После

Одна генерация листом 3 × 3: одна система.

Промпты

До — каждая иконка отдельным промптом, меняется только предмет

3D app icon of a [house / magnifying glass / notification bell / …], white background --ar 1:1

После — все девять одним промптом, стиль задан один раз

a 3x3 grid of nine 3D app icons in one consistent style: house, magnifying glass, notification bell, user profile, shopping cart, heart, settings gear, calendar, chat bubble; soft matte clay material, the same pastel blue and cream palette, the same soft light from the top left and the same three-quarter camera angle, equal padding, white background --ar 1:1

Любую иконку, откуда бы она ни взялась, проверяй в реальном размере: 16, 20, 24 пикселя. То, что отлично смотрится на холсте в 512 пикселей, в интерфейсе превращается в кляксу.

512 px

24 px

20 px

16 px

Пустые состояния, онбординг, обложки статей, иллюстрации для лендинга. Здесь ИИ экономит больше всего времени, а главная задача — серия, которая выглядит как одна система. Приёмы те же, что в теме «Персонажи и стиль»: стайл-гайд как фиксированная часть промпта, референс по стилю, у Recraft — сохранённый стиль, который применяется ко всем новым генерациям. По формату: простые плоские иллюстрации доводи до SVG, они легче и перекрашиваются под тёмную тему. Сложные и текстурные честнее оставить в PNG или WebP, чем мучить трассировкой. Векторную иллюстрацию легко оживить: агенту можно поручить анимацию SVG через CSS или экспорт в Lottie (тема «Вайбкодинг: арт и инструменты»).

Генерация хороша на этапе поиска направлений: двадцать концептов за вечер вместо трёх. Финальный знак всё равно строится руками, и на то есть конкретные причины. Геометрия и оптические компенсации. Работа в размере 16 пикселей и в один цвет. Варианты начертания, которые должны быть одним знаком, а не четырьмя похожими.

Промпт

abstract logo mark concepts for a calm meditation app, simple geometric symbol, flat, single color, no letters, no text, white background --chaos 40

Есть и юридическая сторона. Сгенерированный знак может оказаться похож на уже зарегистрированный, а модели этого не проверяют (тема «Генерация изображений», раздел «Логотипы, фон и брендинг»). Кроме того, в ряде юрисдикций, включая США, изображение, созданное моделью без существенного творческого вклада человека, не охраняется авторским правом. Для мудборда это неважно. Для логотипа это деловой риск клиента: знак, который нельзя защитить, может использовать кто угодно. Ещё один довод за то, чтобы финальную форму строил человек (тема «Этика, приватность и ограничения»).

Нарисуй SVG-иконку „фильтр“ для интерфейса: холст 24×24, линия 1.5, скруглённые концы, без заливок. Верни код, а после него одним абзацем предложи, как эта же иконка должна выглядеть в активном состоянии

Вот SVG после автоматической трассировки (вставить код). Упрости его: убери фоновый прямоугольник и дубли фигур, сведи цвета к четырём, перечисли, что ты изменил

Сгенерируй бесшовный SVG-паттерн из простых геометрических форм в палитре #2D3047, #93B7BE, #FFCF56. Собери его через <pattern patternUnits="userSpaceOnUse" width="200" height="200">. Правило стыка: каждая фигура, которая пересекает край плитки, дублируется со сдвигом на ±200 по этой оси, чтобы на соседней плитке она продолжилась. Верни код целиком

Бесшовность модель сама не гарантирует: без правила стыка фигуры у края обрываются.

Напиши промпты для Midjourney для серии из шести плоских иллюстраций к пустым состояниям приложения-трекера привычек: стиль, который хорошо трассируется в вектор, единая палитра из пяти цветов, общий персонаж. Сделай одну фиксированную часть со стилем и персонажем и шесть переменных частей под каждую сцену. Подскажи, как держать персонажа одинаковым: --sref для стиля и Edit Model с референсом персонажа

Один промпт персонажа на шесть сцен не удержит, поэтому серия собирается из общей части и переменных.

Первый вход: привычек ещё нет

Сегодня ничего не запланировано

Всё выполнено

Промпты

Каждый промпт = сцена + общая часть стиля. Сцены разные, стиль одинаковый.

Сцена 1, первый вход

hand-drawn black ink line illustration for an empty state of a habit tracker app, a person sitting on the floor tying sneaker laces, ready to start, a small open blank notebook lying flat beside them, playful minimal doodle style, lots of white space, single soft green accent, no text --ar 4:3 --sref [ссылка на первый удачный кадр]

Сцена 2, сегодня пусто

hand-drawn black ink line illustration for an empty state of a habit tracker app, a person holding a mug of tea by a window, a tiny sprout in a pot on the sill, calm quiet day, playful minimal doodle style, lots of white space, single soft green accent, no text --ar 4:3 --sref [ссылка на первый удачный кадр]

Сцена 3, всё выполнено

hand-drawn black ink line illustration for an empty state of a habit tracker app, a happy person stretching both arms up, a paper airplane flying away above them, all done for today, playful minimal doodle style, lots of white space, single soft green accent, no text --ar 4:3 --sref [ссылка на первый удачный кадр]

Плоская векторная иллюстрация: человек поливает растение в горшке, дружелюбный минималистичный стиль, 5 цветов, без градиентов и контуров, много воздуха вокруг