Как делать идеальные iOS-макеты через Claude

Сначала выберите пайплайн

Это решение определяет всё остальное. «Макет» через Claude бывает четырёх разных сортов, и они не взаимозаменяемы.

Комбинация, которая работает лучше всего: B → A. Сначала HTML-прототип (дёшево, быстро, видно все состояния), потом перенос в Figma компонентами дизайн-системы. Официальный скилл figma-generate-design прямо описывает параллельный режим: use_figma строит правильную структуру из инстансов, а generate_figma_design захватывает пиксель-перфектный скриншот в тот же файл как эталон — после сверки капчур удаляется.

Фундамент: три вещи, без которых будет слоп

Причина генеричных макетов не в модели, а в брифе. Открытый промпт заставляет угадывать вкус, вёрстку и код одновременно — и модель разрешает эту неопределённость самым вероятным ответом.

1. Файл-ограничитель IOS26-DESIGN.md

Без постоянного файла агент заново угадывает токены на каждом промпте, и макеты дрейфуют. Правильный порядок разделов — от общего к запретам:

Рабочий объём — 200–600 строк. Больше — выносите в отдельный DESIGN.md и ссылайтесь из CLAUDE.md. Диагностический цикл: сгенерировать три экрана → найти отклонения → дописать недостающее ограничение → повторить.

2. Референсы картинками, а не прилагательными

«Clean and modern» сообщает модели «у меня нет предпочтений» — и она отвечает самым безопасным выводом: синий primary, дефолтный гротеск, нулевая индивидуальность. Картинка бьёт прозу: скриншоты реальных iOS-приложений (Things, Flighty, Bear, Apple Sports) кладутся в контекст и превращаются в правила и токены.

3. Официальные ресурсы Apple, а не пересказ

• iOS and iPadOS 26 UI Kit для Figma — обновлён 24 июля 2026, переработан под Liquid Glass: компоненты, обновлённые размеры контролов, новые радиусы и системные цвета. Есть в Figma Community и на developer.apple.com/design/resources.
• SF Symbols — 7000+ символов, 9 весов, 3 шкалы, выравниваются по тексту. Ставьте свежую версию до работы с библиотекой.
• Icon Composer — иконка приложения теперь в трёх версиях (light / dark / mono), 1024×1024, непрозрачная, без своих скруглений: систему радиуса применяет iOS.

Спека iOS 26 в числах

Это тот блок, который надо целиком положить в контекст Claude. Числа в points (pt); экспорт для всех современных iPhone — @3x.

Размеры фреймов

Рисуйте на 393×852 (самая массовая ширина) и проверяйте на 375 и 440. Safe area на устройствах с Dynamic Island: сверху 59, снизу 34; в ландшафте — сверху 0, снизу 21, по бокам 59. Статус-бар — 54.

Сетка, поля, размеры

Типографика — SF Pro, стили Dynamic Type

Значения для дефолтного размера (Large). Никогда не задавайте «просто 17px» — задавайте стиль: он масштабируется настройками пользователя от xSmall до AX5.

Цвет: роли, а не хексы

Apple отдаёт адаптивные системные цвета, а не фиксированные значения. Если в макете стоит хекс — макет сломается в тёмной теме и при Increase Contrast. Пишите роли и заводите их как переменные с двумя режимами:

Ориентиры системных значений (community-measured, не официальные): systemBlue #007AFF, systemGreen #34C759, systemRed #FF3B30, secondaryLabel #3C3C43 @ 60%, в тёмной — #EBEBF5 @ 70%. Использовать как отправную точку, а не как истину.

Что изменилось в iOS 26 (кроме стекла)

Половина «неправильных» AI-макетов — это корректный iOS 17, нарисованный в 2026 году. Список изменений, которые надо явно вписать в промпт.

• Таб-бар плавает. Больше не полоса во всю ширину, а капсула по центру с инсетом 21 pt. Глобальный поиск — отдельный «островок» справа от неё; в приложениях без таб-бара поиск уезжает вниз экрана. Поиск внутри страницы (не глобальный) остаётся сверху.
• Нав-бары называются тулбарами и не занимают место: контент скроллится под ними. Заголовки можно выравнивать по левому краю, появились подзаголовки (.navigationSubtitle).
• Текстовые кнопки заменены иконочными. Back, close/cancel, save/done стандартизированы под иконки в контейнере с собственным полем вокруг.
• Концентричность радиусов. Радиус вложенного элемента вычисляется из радиуса родителя минус паддинг — так же, как радиус Dynamic Island повторяет радиус корпуса. В коде это ConcentricRectangle и .containerShape; в макете — не ставьте вложенной карточке тот же радиус, что и контейнеру.
• Всё круглее и просторнее: шиты, строки списков, кнопки, сегментные контролы; отступы выросли под увеличенные скругления.
• Scroll edge effect — постепенное размытие у верхней и нижней кромки, чтобы плавающие элементы читались поверх контента. Это системная вещь, рисовать градиент руками не надо.
• Заголовки списков — из ВЕРХНЕГО РЕГИСТРА в обычное предложение, крупнее. Текст алертов и онбординговых шитов — по левому краю.
• Модалки: полноэкранные больше не образуют визуальный «стек», если слоёв не несколько. Action sheet появляется в точке касания, а не всегда снизу.

Liquid Glass: правила, а не эффект

Apple формулирует три принципа — Hierarchy, Harmony, Consistency. Стекло — это слой над контентом, а не текстура для украшения.

Практический критерий для ревью макета: если убрать всё стекло, иерархия должна остаться читаемой. Стекло усиливает разделение слоёв — оно его не создаёт.

Пайплайн A · Макет в Figma руками Claude

Порядок ниже — из официальных скиллов Figma MCP figma-swiftui, figma-generate-design и figma-use. Нарушение порядка — главная причина кривых результатов.

Шаг 0 · Определить масштаб

Шаг 1 · Discovery до единой созданной ноды

• get_libraries → проверить libraries_added_to_file, затем libraries_available_to_add. Apple публикует свои библиотеки как Community — iOS and iPadOS 26, iOS 18, watchOS 26, visionOS 26.
• Получив libraryKey, всегда сужать поиск: search_design_system({ query, fileKey, includeLibraryKeys: [appleKey] }) — иначе в выдачу лезут компоненты всех когда-либо подключённых библиотек.
• Имена в библиотеках Apple стабильные, можно искать точно: Navigation Bar - iPhone (Compact Size Class), Status Bar - iPhone, Tab Bar - iPhone, Row, Button, Segmented Control, Stepper, Product Bezels.
• Переменные ищутся только через search_design_system с includeVariables: true. Пустой ответ getLocalVariableCollectionsAsync() не означает, что переменных нет — библиотечные ему не видны.

Шаг 2 · Токены → компоненты → экраны

1. Переменные (если создаёте) — до всего, что к ним привязывается. Скоупы задавать явно: FRAME_FILL, SHAPE_FILL для фонов, TEXT_FILL для текста, STROKE_COLOR для разделителей. Не оставлять ALL_SCOPES.
2. Оба режима (light/dark) в одной коллекции сразу.
3. Компоненты — до сборки экрана. Не инлайнить повторяющиеся элементы: один исходный компонент = один мастер в Figma.
4. Экран собирается по одной секции за вызов, каждая — сразу внутрь враппера. Переносить ноды между вызовами через appendChild() молча не срабатывает и оставляет сирот.

Шаг 3 · iOS-специфика

• SF Symbols только по имени. figma.util.getSfSymbolCharacter("square.and.arrow.up"). Никаких ручных кодпоинтов и \u{...}. Если хелпер бросил RangeError — сказать об этом, а не подставлять похожую иконку.
• Шрифт проверять фактом, а не успешной загрузкой. listAvailableFontsAsync() до записи текста; нужен SF Pro (и SF Pro Rounded). Загрузился Inter вместо SF Pro — это провал валидации, даже если скрипт отработал без ошибок.
• Текст-стили именованные (Large Title, Body, Footnote…), а не сырые свойства на каждой ноде.
• Иконки — импортом SVG: figma.createNodeFromSvg(), обязательно с viewBox + явными width/height. Собирать иконку из повёрнутых линий и прямоугольников нельзя — вращение в этом контексте ненадёжно, шеврон схлопывается в кляксу.
• Состояния — варианты, а не отдельные фреймы. Disabled, pressed, hidden → State=Disabled в наборе вариантов.
• Разделитель у последней строки секции не рисуется — так делает нативный List.
• Не переносить: #Preview, @State/@Binding, GeometryReader, .onTapGesture, .task. Accessibility-модификаторы (.accessibilityLabel и т.п.) — в аннотации ноды, категория Accessibility.

Шаг 4 · Валидация

get_screenshot после каждой секции, и по отдельным нодам, а не только целиком: на уменьшенном общем скриншоте не видно обрезанного текста, наложений и неперезаписанных плейсхолдеров («Title», «Heading», «Button»). Список того, что ищем: обрезка по line-height, перекрытия, чужой вариант компонента, чужой шрифт, пустые картинки.

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

Пайплайн B · HTML-макет как макет

Самый быстрый цикл итераций. Плюс: Claude видит собственный результат скриншотом и правит сам.

Каркас, который надо задать один раз

Фрейм 393×852, скругление 44px, overflow hidden.
Safe area: padding-top 59px, padding-bottom 34px.
Статус-бар 54px с Dynamic Island (pill 125×37 по центру, top 11).
Таб-бар: капсула, inset 21px по бокам, высота 49px, bottom 34px.
Шрифт: -apple-system, "SF Pro Text", system-ui.
Цвета — CSS-переменные с семантическими именами и блоком
@media (prefers-color-scheme: dark). Никаких хексов в компонентах.
Тач-таргеты ≥44×44. Шкала отступов: 4/8/12/16/24/32.

Правила, которые дают разницу

• Реальные данные, не lorem. Настоящие имена, суммы, даты, названия — это меняет и восприятие стейкхолдеров, и качество обратной связи на тестах.
• Все состояния на одном полотне: пустое, загрузка, ошибка, длинный текст, короткий текст. Это то, что AI-макеты пропускают по умолчанию.
• Обе темы сразу — рядом, а не «потом инвертируем».
• Жесты просить явно: свайп, pull-to-refresh, long press — иначе не появятся.
• Тестировать на живом телефоне. Мелкие таргеты, неожиданные переносы и тормоза анимаций видно только там.

Визуальный луп

Ключевой принцип: тот же агент, который написал код, не может судить собственный вывод. Рендерим в headless Chrome на размере iPhone, снимаем скриншот, кладём рядом с референсом, просим сравнить и назвать отличия по пунктам — и только потом править.

# снять скриншот прототипа в размере iPhone 16
chromium --headless --disable-gpu --hide-scrollbars \
  --window-size=393,852 --screenshot=shot.png \
  --force-device-scale-factor=3 http://localhost:8080/screen.html

Дальше HTML-прототип конвертируется в SwiftUI (есть готовый плагин Claude Code: сервит дизайн локально, снимает в Chrome на размере iPhone, инвентаризует HTML/CSS/ассеты, пишет один .swift с #Preview, чинит ошибки сборки и делает до трёх кругов визуального диффа) — или переносится в Figma по пайплайну A.

Пайплайн C · SwiftUI + «глаза»

Самый честный рендер — системные контролы, реальный Liquid Glass, настоящий Dynamic Type. И самая честная оценка ограничений.

Как дать Claude увидеть экран

1. Отдельный тестовый таргет со snapshot-тестами (assertSnapshot() с фиксированными размерами), изолированный от основного набора тестов.
2. xcodebuild test -only-testing:"ViewSnapshotTests/ViewVerificationTests" -quiet — рендер без GUI Xcode, работает из терминала, каждый агент в своём worktree снимает независимо.
3. Анализ картинки через ImageMagick: magick identify для габаритов, magick image.png -crop 1x1+200+300 txt: для цвета в точке, magick compare -metric RMSE для расхождения с эталоном.

Промпты: формула и заготовки

Формула, к которой сходятся все источники: сильный дефолт → 3–6 жёстких ограничений → список запретов → состояния → способ проверки. Специфика бьёт прилагательные.

Экран в Figma

Собери экран «Карточка бронирования» в файле <figma-url>.

Дефолт: нативный iOS 26, тулбар с крупным заголовком слева,
плавающий таб-бар, инсет-группы вместо карточек.

Ограничения:
— фрейм 393×852, safe area 59/34, поля 16;
— chrome бери инстансами из библиотеки Apple «iOS and iPadOS 26»
  (Status Bar - iPhone, Navigation Bar - iPhone (Compact Size Class),
  Tab Bar - iPhone); ширину фрейма подгони под них;
— цвета только переменными label/*, background/*, separator/*,
  обе моды light и dark;
— текст только именованными стилями (Large Title / Body / Footnote);
— иконки — SF Symbols через figma.util.getSfSymbolCharacter;
— внутри всё на auto-layout, абсолютных координат нет.

Запрещено: Inter, хексы в нодах, гамбургер-меню, тени в стиле Material,
кнопки меньше 44×44, плейсхолдеры «Title»/«Button» в финале.

Состояния: обычное, пустое, загрузка, ошибка — четыре фрейма в ряд.

Порядок: сначала discovery (get_libraries → search_design_system),
потом враппер, потом по одной секции за вызов, после каждой —
get_screenshot этой секции и отчёт что видно.

HTML-прототип

Контекст: приложение аренды загородных домов, гость управляет своей бронью.
Объём: три экрана — список броней, карточка брони, оплата допуслуги.
Дизайн: нативный iOS 26; SF Pro; акцент — тёплый зелёный #2E6B4F только
на CTA и активных состояниях; светлая и тёмная темы; 8pt-сетка.
Данные — настоящие: «Дом 1, 14–16 августа, 24 000 ₽», не lorem.
Формат: один HTML-файл, вьюпорт 393×852, iPhone-фрейм с Dynamic Island,
safe area 59/34, плавающий таб-бар.
Не надо: градиентов, glassmorphism, декоративных иллюстраций,
трёх одинаковых карточек в ряд.
Для каждого экрана — состояние пустое / загрузка / ошибка.

Ревью чужого (или своего) макета

Проверь этот экран как iOS-ревьюер по HIG 26. По каждому пункту —
вердикт и конкретное место:
1) тач-таргеты ≥44×44; 2) safe area 59/34 соблюдена;
3) шкала отступов кратна 4/8; 4) типографика попадает в стили Dynamic Type;
5) цвета — роли, а не хексы; 6) контраст 4.5:1 текст / 3:1 иконки в обеих темах;
7) паттерны нативные (таб-бар, не гамбургер; свайп назад; шиты);
8) стекло одним слоем, текст не на стекле;
9) радиусы концентричны родителю; 10) есть пустое/загрузка/ошибка.
Отвечай списком проблем, отсортированным по серьёзности.
Не хвали. Если всё чисто по пункту — одна строка «ок».

Delta-промпт (правка, а не перегенерация)

Не перегенерируй экран. Измени ровно три вещи:
1) вертикальный ритм секций 24 → 32;
2) вторичный текст на label/secondary вместо label/tertiary;
3) кнопку «Оплатить» из inline в закреплённую снизу над таб-баром.
Остальное не трогай. Покажи скриншот до/после.

Копите библиотеку промптов. Сохраняйте выигравшие формулировки дословно — магия в конкретных ограничениях, а не в общей структуре. Организуйте по типу экрана, а не по эстетике, и ведите отдельный «банк запретов».

Анти-паттерны: по чему видно AI-макет

Модель по умолчанию выдаёт самый вероятный ответ: Inter, фиолетовый градиент, три одинаковые карточки, синяя кнопка. Ниже — то, что ловится на ревью чаще всего.

Чек-лист приёмки макета

Прогоняйте перед тем, как показывать кому-то. Половина пунктов проверяется самим Claude, если дать ему этот список.

• Фрейм из таблицы устройств, safe area 59 сверху / 34 снизу соблюдена
• Все интерактивные элементы ≥ 44×44 pt, включая иконки в тулбаре
• Каждое значение отступа кратно 4, основной ритм — 8/16/24
• Поля контента 16 pt, выровнены по всему экрану
• Типографика попадает в стили Dynamic Type, минимум 11 pt
• Шрифт — SF Pro (проверено фактически, а не «должен быть»)
• Цвета заданы ролями/переменными, ни одного сырого хекса в нодах
• Обе темы собраны и обе проверены на контраст 4.5:1 / 3:1
• Проверено при Reduce Transparency и Increase Contrast
• Текст ложится на плотную подложку, не на стекло
• Стекло одним слоем, интерфейс читается и без него
• Радиусы вложенных элементов концентричны родителю
• Навигация нативная: таб-бар-капсула, свайп назад, шиты вместо кастомных модалок
• Поиск на своём месте: глобальный — внизу справа, страничный — сверху
• Иконки — SF Symbols по именам, единый вес и шкала
• Есть пустое состояние, загрузка и ошибка с человеческим текстом
• Проверены длинный и короткий тексты, длинные имена не ломают строку
• Разделители: 1 pt, нет под последней строкой секции
• Данные реальные, плейсхолдеров «Title»/«Button» не осталось
• В Figma: всё на auto-layout, повторяющееся — инстансы, а не копии

Скелет IOS26-DESIGN.md

Кладётся в корень проекта и подключается из CLAUDE.md. Заполняется один раз, окупается на каждом экране.

# IOS26-DESIGN.md

## Бриф
<Что делает продукт. Кто пользователь. Какую работу выполняет экран.>
Платформа: iOS 26, iPhone. Рисуем на 393×852, проверяем на 375 и 440.

## Токены — значение, намерение, граница
accent/primary   — только CTA и активные состояния. Никогда как фон секции.
label/primary    — основной текст. Никогда на цветной заливке без проверки контраста.
label/secondary  — подписи, метаданные. Не для действий.
background/*     — primary для полотна, secondary для инсет-групп.
separator/*      — 1 pt, не под последней строкой секции.
Правило: сырых хексов в макете нет. Только роли, обе моды.

## Шкала отступов
4 / 8 / 12 / 16 / 24 / 32 / 48. Поля экрана 16. Между секциями 32.
Внутри карточки 16, между карточками 24. Иконка↔текст 4.

## Типографика
SF Pro. Стили Dynamic Type, не фиксированные размеры.
Large Title 34 — только заголовок экрана до скролла.
Headline 17 Semibold — компактный заголовок и акцент в строке.
Body 17 — основной текст и строки списка.
Subheadline 15 — вторичный. Footnote 13 — метаданные. Caption 2 11 — минимум.
Правило: не более трёх уровней на экран.

## Компоненты — логика выбора
Строка списка: однородные объекты, действие = переход. Высота 44 (60 с подзаголовком).
Карточка: разнородное содержимое, несколько действий, есть медиа.
Инсет-группа: настройки и формы. Кнопка-капсула: одно главное действие на экран.
Состояния — варианты компонента, не отдельные копии.

## Обязательные состояния каждого экрана
default / empty / loading / error / long-text

## Don'ts
1. Не Inter и не системный дефолт браузера — SF Pro.
2. Не гамбургер-меню. Навигация — таб-бар-капсула iOS 26.
3. Не Material: без FAB, ripple и elevation-теней.
4. Не стекло на стекле и не текст поверх стекла.
5. Не хексы в нодах и не отступы вне шкалы.
6. Не тач-таргеты меньше 44×44.
7. Не lorem — только реальные данные домена.
8. Не показывать один «счастливый» экран без остальных состояний.

Источники

Отсортированы по практической ценности: сначала первичные, потом разборы.

Первичные — Apple и Figma

• Apple Design Resources — официальные UI-киты, включая iOS 26 для Figma (обновление 24.07.2026)
• Human Interface Guidelines — Layout и анонс новых design resources
• Figma Community — iOS and iPadOS 26, как начать работу с китом Apple
• Guide to the Figma MCP server и Figma skills for MCP — скиллы figma-swiftui, figma-generate-design, figma-use
• Figma Blog — From Claude Code to Figma — code-to-canvas
• Anthropic — Claude Design (research preview, апрель 2026)

Спека и разборы iOS 26

• learnui.design — iOS 26 Design Guidelines — размеры фреймов, типографика, плавающий таб-бар
• UI Changes in iOS 26 That's Not About Liquid Glass — тулбары, иконочные кнопки, поиск, модалки
• Liquid Glass: Hierarchy, Harmony, Consistency
• LogRocket — Adopting Liquid Glass: best practices
• Exploring Concentricity in SwiftUI и Corner concentricity in SwiftUI on iOS 26
• useyourloaf — iPhone screen sizes (safe area 59/34) и таблица размеров текстовых стилей
• iOS 26 in detail: Liquid Glass между юзабилити и доступностью, Access Advisors — accessibility-риски

Практика работы с Claude

• Giving Claude Code Eyes to See Your SwiftUI Views — snapshot-тесты, ImageMagick, честные ограничения
• claudedesign-to-swiftui — плагин HTML-прототип → SwiftUI с визуальным диффом
• Writing a DESIGN.md file Claude can actually use — структура и раздел Don'ts
• The Design Agent for Claude Code: real UI, not generic slop — reference grounding и цикл верификации
• UI Design Prompts: копипаст-библиотека и Apple Design System с копируемым DESIGN.md
• AI for Mobile App Prototyping: от спеки до интерактивного мокапа
• Framework для промптов на красивый UI, 7 ошибок, от которых приложение кажется чужим на платформе
• NN/g — iOS Design Rules to Break