Нейросети для дизайна интерфейсов: как ии помогает создавать UI/UX макеты и прототипы

Задача звучит так: есть идея приложения, нет дизайнера, нет бюджета, дедлайн завтра. Figma открыта, курсор мигает над пустым холстом. Именно здесь 80% продакт-менеджеров закрывают вкладку и идут на фриланс-биржу. Не делай этого.

1. Шаг 1. Сформулируй промпт для генерации макета — 2 минуты
2. Шаг 2. Запусти генерацию через специализированный инструмент — 3 минуты
3. Шаг 3. Экспортируй структуру в Figma или прямо в код — 2 минуты
4. Шаг 4. Добавь интерактивность через AI-прототипирование — 3 минуты

Шаг 1: Промпт — это техзадание, а не пожелание

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

Работающий промпт для UI-генерации содержит четыре обязательных блока: тип экрана (onboarding / dashboard / checkout), целевая платформа (iOS 17, Android Material 3, Web), цветовая система (hex или название палитры), и перечень UI-компонентов, которые должны присутствовать на экране — кнопки, карточки, навбар, инпуты, тоггл-свитчи.

Вот рабочий шаблон:

Design a mobile app onboarding screen for iOS 17.
Color palette: #1A1A2E (background), #E94560 (accent), #FFFFFF (text).
Components required: progress bar (3 steps), hero illustration area (top 40% of screen),
headline H1, subtitle H2, primary CTA button (rounded, full-width),
skip link (top right corner).
Style: dark mode, minimalist, rounded corners 16px.
Output: high-fidelity UI mockup, no placeholder text.

Этот промпт дает предсказуемый результат. Без него — лотерея.

Шаг 2: Выбери инструмент под задачу, а не под моду

Три инструмента закрывают 95% кейсов. Критерий выбора — скорость и формат вывода.

• Uizard — генерирует кликабельный прототип из текстового описания напрямую. Тариф Starter: $12/мес (2026). Подходит для быстрых MVP-скетчей за 5 минут.
• Galileo AI — создает высокодетализированные UI-компоненты с автоматической расстановкой сеток и стилей. Тариф Pro: $19/мес. Экспорт напрямую в Figma через плагин.
• Midjourney v7 (2026) — генерирует визуальный референс макета с фотореалистичной детализацией, но без интерактивности. Тариф Basic: $10/мес, Standard: $30/мес. Параметр для UI:

mobile app dashboard UI design, dark mode, fintech, flat style --ar 9:19 --style raw --v 7

Midjourney — не для прототипа. Для визуальной концепции перед питчем инвестору. Точка.

Шаг 3: Экспорт — там, где теряется половина времени

Galileo AI и Uizard экспортируют в Figma одним кликом. Но если нужен сразу код — используй Anima (плагин Figma, $39/мес в 2026) или Builder.io с AI-конвертацией дизайна в React/Vue/HTML. Builder.io тариф Starter: $19/мес, включает 10 000 AI-токенов генерации компонентов в месяц.

Важный технический момент: при экспорте из Galileo в Figma все компоненты приходят как автолейаут-фреймы с заданными constraints. Не разгруппировывай их вручную — сломаешь адаптивность. Работай внутри структуры.

Структура файла после импорта выглядит так:

📁 Page 1 — Generated UI
  └── 📱 Frame: Onboarding Screen (390×844)
        ├── 🔲 Progress Bar / Step 1 of 3
        ├── 🖼 Hero Illustration Area
        ├── 📝 Text Group (H1 + H2)
        └── 🔘 CTA Button (Primary)

Шаг 4: Интерактивность без программирования

Кликабельный прототип за три минуты — не маркетинговый слоган. Это конкретная последовательность действий в Figma или Uizard.

• В Uizard: выдели CTA-кнопку → вкладка «Interactions» → «On Click» → «Go to next screen». Готово.
• В Figma: выдели компонент → Prototype-панель → перетяни стрелку на следующий фрейм → анимация «Smart Animate», duration 300ms.
• Если нужны условные переходы (например, авторизован/не авторизован) — используй ProtoPie ($25/мес) с поддержкой переменных и условий без кода.

ProtoPie в 2026 году интегрирован с ChatGPT API напрямую: можно задать компоненту поведение голосовой команды через блок Receive → "voice_input" без написания скриптов вручную.

Цифры, которые стоит знать перед стартом

Полный стек «от нуля до кликабельного прототипа» на AI-инструментах стоит от $31/мес (Uizard Starter + Figma Free). Профессиональный уровень с экспортом в код — от $77/мес (Galileo Pro + Anima + Builder.io Starter). Альтернатива — нанять UI-дизайнера на Upwork: от $800 за один экран в 2026 году. Считай сам.

ChatGPT-4o через API генерирует JSON-структуру UI-дерева компонентов за один запрос, если передать ему правильную системную инструкцию. Стоимость одного запроса с промптом на 2000 токенов и ответом на 3000 токенов — около $0.024 при тарифе $8 за 1 млн output-токенов (OpenAI API, январь 2026). Вот структура запроса:

{
  "model": "gpt-4o",
  "temperature": 0.4,
  "messages": [
    {
      "role": "system",
      "content": "You are a UI architect. Output only valid JSON component tree. No explanations."
    },
    {
      "role": "user",
      "content": "Generate a component tree for a fintech mobile dashboard screen. Dark mode. Include: balance card, 3 quick action buttons, transaction list (5 items), bottom nav bar."
    }
  ]
}

Temperature 0.4 — не случайное число. При значении выше 0.7 модель начинает «фантазировать» компоненты, которых нет в стандартных UI-системах. При 0.2 — теряет вариативность и копирует шаблон Material Design без адаптации. Диапазон 0.3–0.5 дает баланс между структурой и контекстной адаптацией под конкретный продукт.

Промпт без архитектуры — это шум

Midjourney версии 7 (актуально на 2026 год) принимает параметры в строго определённом порядке — сначала описание сцены, потом технические флаги. Нарушишь порядок — получишь артефакты на краях и сломанную сетку компонентов. Точка.

Промпт для UI-макета в Midjourney выглядит не как «нарисуй приложение», а как машиночитаемая инструкция с восемью обязательными блоками: объект интерфейса, платформа, цветовая система (HEX или название токена), типографика, состояние компонента (hover / active / disabled), соотношение сторон, версия модели и weight стилизации. Пропусти хотя бы один — итерации уйдут в мусор.

/imagine prompt: mobile banking dashboard UI, iOS 17 style, 
dark mode, color palette #0A0A0F #1C1C2E #7B61FF, 
SF Pro Display font, card components with glassmorphism, 
status bar visible, bottom navigation 5 items, 
transaction list with avatars, no lorem ipsum, 
clean grid 8px baseline --ar 9:19.5 --style raw 
--stylize 200 --v 7 --quality 2

Параметр --stylize 200 держит баланс между фотореализмом и абстракцией. Поднимешь до 750 — интерфейс превратится в арт-концепт без пригодных к трассировке элементов. Опустишь до 50 — получишь плоскую схему без глубины. Диапазон 150–300 — рабочая зона для UI-мокапов, которые потом трассируются в Figma.

Figma AI: параметры, которые реально работают

Figma AI (First Draft + Auto Layout, 2025–2026) работает через промпт-панель в режиме «Design with AI». Команда генерации принимает контекст из активного фрейма — если фрейм пустой, AI строит с нуля; если в нём есть компоненты, система достраивает паттерн. Это критично.

Практический кейс: требовалось сгенерировать экран онбординга для финтех-приложения с кастомной сеткой 4-колонки / 16px gap / 24px margin. Figma AI без явного указания сетки генерирует произвольные отступы, несовместимые с Design System. Решение — перед запуском промпта активировать Layout Grid (4 columns, 16px gutter, 24px margin) в целевом фрейме, затем передавать промпт с явной ссылкой на сетку:

Generate: onboarding screen, step 2 of 4, 
fintech app, light theme, 
primary color #2563EB, 
heading "Verify your identity", 
subtext 2 lines max, 
biometric icon centered, 
CTA button full-width rounded-16, 
respect active 4-column grid, 
use local component library tokens, 
spacing: 8px system, 
export-ready for Figma variables

После генерации — обязательный шаг: Plugins → Design Lint → проверка auto layout на всех вложенных фреймах. Figma AI периодически ломает вложенность при сложных группах. Это не баг конкретной версии — это системное поведение генеративных слоёв.

Uizard: скорость против точности

Uizard Autodesigner 2.0 (тарифы 2026: Free — 3 проекта, Pro — $19/мес, Business — $49/мес) генерирует кликабельный прототип из текстового промпта за 40–90 секунд. Скорость — главное преимущество. Точность компонентной сетки — слабое место.

Uizard не поддерживает кастомные переменные токенов напрямую. Экспорт в Figma идёт через плагин «Uizard to Figma», который конвертирует слои в группы, а не в компоненты. Это значит: после импорта нужно вручную пересобирать Auto Layout на всех контейнерах. Средние трудозатраты на пересборку типового экрана из 12–15 элементов — 25–40 минут.

«The interface is the product. If the AI can’t respect the grid, the AI is not designing — it’s hallucinating layout.» — представитель команды Figma на Config 2025 (без указания конкретного имени спикера в официальной стенограмме)

Экспорт в Sketch из Uizard — через промежуточный SVG или Zeplin-интеграцию. Прямого Sketch-экспорта нет. Midjourney вообще не экспортирует в Sketch нативно — только PNG 4× (параметр --quality 2 даёт максимальное разрешение до 2048px по длинной стороне), после чего трассировка через Vectorize в Figma или Adobe Illustrator.

Параметры разрешения: что выбрать под задачу

Midjourney 7: максимум --quality 2, выдаёт 2048×2048 при --ar 1:1, масштабируется пропорционально при других соотношениях. Для мобильного UI --ar 9:19.5 даёт ~1053×2282px — достаточно для презентации клиенту, недостаточно для pixel-perfect разработки. Upscale через встроенную кнопку «U» поднимает до 4×, то есть до ~4212×9128px.

Figma AI работает в векторе — разрешение нерелевантно. Uizard экспортирует растровые превью 1× и 2×, векторный экспорт — только через SVG отдельных элементов.

Для Sketch-совместимости критична одна деталь: при трассировке PNG-мокапа из Midjourney в Figma через Plugins → Vectorize/Image Trace получаешь embedded bitmap, а не векторные пути. Настоящий векторный UI из Midjourney — это миф. Midjourney — источник референса и концепта, не финального кода компонентов.

Компонентная сетка: как зафиксировать до генерации

Правило работает для любого AI-инструмента: сетку определяй до промпта, не после. В Figma — создай пустой фрейм нужного размера (например, 390×844 для iPhone 15), установи Layout Grid, зафиксируй в промпте словами «respect established 8px grid system» или «align to 4-column layout». В Uizard — задай тип устройства в настройках проекта перед генерацией: Mobile / Tablet / Web, иначе AI выберет произвольное соотношение.

Стоимость API OpenAI (GPT-4o, 2026): $2.50 за 1M input-токенов, $10.00 за 1M output-токенов — если строишь кастомный промпт-пайплайн для массовой генерации UI-описаний через API, а не через интерфейс Figma AI. Claude 3.5 Sonnet: $3.00 / $15.00 за 1M токенов соответственно. Для задачи «сгенерировать 50 вариантов описания экрана под A/B тест» GPT-4o дешевле на ~17%.

mobile banking app dashboard, glassmorphism UI, dark mode,
high fidelity wireframe style, clean typography, 
blue-violet gradient, --ar 9:19 --style raw --v 7 --q 2

{
  "model": "claude-3-5-sonnet-20241022",
  "max_tokens": 1024,
  "messages": [
    {
      "role": "user",
      "content": [
        {
          "type": "image",
          "source": {
            "type": "base64",
            "media_type": "image/png",
            "data": "{{BASE64_SCREENSHOT}}"
          }
        },
        {
          "type": "text",
          "text": "Analyze this UI screen. Return: layout grid type, color contrast ratio (WCAG), CTA placement score 1-10, missing accessibility elements. JSON format."
        }
      ]
    }
  ]
}

Figma REST API: что реально доступно через curl

Figma REST API — не волшебная кнопка. Он читает и пишет узлы, но не рисует за вас. Три ключевых эндпоинта, с которых начинается любая автоматизация: GET /v1/files/:key — выгрузка всего дерева документа в JSON, POST /v1/files/:key/comments — добавление аннотаций к узлам, PUT /v1/files/:key/variables — запись design tokens прямо в библиотеку переменных Figma (доступно с апреля 2024, работает на тарифе Organization от $75/ред./мес.).

Токен — через Personal Access Token в настройках аккаунта. Никакого OAuth для серверных скриптов не нужно. Один заголовок:

X-Figma-Token: figd_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Именно через этот механизм скрипт может вытащить все Frame-узлы экрана, получить их абсолютные координаты, список компонентов и привязанные переменные — всё в одном GET-запросе весом до 40 МБ JSON для крупного файла.

GPT-4o Vision в роли аудитора и генератора разметки

Batch-генерация экранов через GPT-4o Vision — это конвейер, а не одиночный запрос. Схема: экспортируй Frame → PNG через GET /v1/images/:key → отдай изображение в gpt-4o с vision-промптом → получи структурированный JSON с описанием компонентов → прогони JSON через скрипт записи переменных обратно в Figma.

Цена вопроса в 2026 году: GPT-4o через OpenAI API стоит $2.50 за 1 млн input-токенов и $10.00 за 1 млн output-токенов. Одно изображение 1024×1024 px «съедает» примерно 765 токенов только на картинку. Батч из 50 экранов с текстовыми ответами выходит в $0.80–1.20. Это дешевле одного часа ручного QA.

Vision — не для генерации визуала. Он анализирует существующие макеты, находит отклонения от дизайн-системы и возвращает машиночитаемый отчёт. Точка.

Практический кейс: автоматическая синхронизация дизайн-токенов между Figma и кодовой базой

Задача: продуктовая команда из 4 дизайнеров и 6 фронтендеров работает в монорепе. Дизайнеры меняют цвета и отступы в Figma. Разработчики используют CSS-переменные. Рассинхронизация накапливалась — один цвет существовал в трёх вариантах одновременно в коде.

Решение: скрипт на Node.js, запускающийся в GitHub Actions при каждом push в ветку design/tokens. Скрипт делает три действия — тянет переменные из Figma Variables API, конвертирует их в формат Style Dictionary, коммитит изменённые токены обратно в репо.

// sync-tokens.mjs
import fetch from 'node-fetch';
import fs from 'fs';

const FILE_KEY = process.env.FIGMA_FILE_KEY;
const TOKEN    = process.env.FIGMA_TOKEN;

async function fetchVariables() {
  const res = await fetch(
    `https://api.figma.com/v1/files/${FILE_KEY}/variables/local`,
    { headers: { 'X-Figma-Token': TOKEN } }
  );
  const data = await res.json();
  return data.meta.variables;
}

function toStyleDictionary(variables) {
  const tokens = { color: {}, spacing: {}, typography: {} };

  for (const [id, v] of Object.entries(variables)) {
    const val = v.valuesByMode[Object.keys(v.valuesByMode)[0]];
    const category = v.name.split('/')[0].toLowerCase();

    if (category === 'color') {
      const hex = rgbaToHex(val.r, val.g, val.b);
      tokens.color[v.name.split('/')[1]] = { value: hex };
    }
    if (category === 'spacing') {
      tokens.spacing[v.name.split('/')[1]] = { value: `${val}px` };
    }
  }
  return tokens;
}

function rgbaToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(x => Math.round(x * 255).toString(16).padStart(2, '0'))
    .join('');
}

const vars   = await fetchVariables();
const tokens = toStyleDictionary(vars);
fs.writeFileSync('./tokens/tokens.json', JSON.stringify(tokens, null, 2));
console.log(`Synced ${Object.keys(vars).length} variables.`);

GitHub Actions workflow запускает этот скрипт, затем Style Dictionary компилирует tokens.json в variables.css, tokens.ts и tokens.android.xml за один прогон. Три платформы синхронизированы. Ни одного ручного копипаста.

CI/CD пайплайн: где дизайн становится кодом без дизайнера

Полный пайплайн выглядит как четыре стадии в YAML:

# .github/workflows/design-sync.yml
name: Design Token Sync

on:
  push:
    branches: ['design/tokens']

jobs:
  sync:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install deps
        run: npm ci

      - name: Fetch Figma tokens
        env:
          FIGMA_TOKEN:    ${{ secrets.FIGMA_TOKEN }}
          FIGMA_FILE_KEY: ${{ secrets.FIGMA_FILE_KEY }}
        run: node sync-tokens.mjs

      - name: Build tokens (Style Dictionary)
        run: npx style-dictionary build --config sd.config.json

      - name: Commit updated tokens
        uses: stefanzweifel/git-auto-commit-action@v5
        with:
          commit_message: 'chore: sync design tokens from Figma'
          file_pattern: 'tokens/**'

Весь цикл — от сохранения переменной в Figma до мерж-реквеста с обновлёнными CSS-переменными — занимает 47–90 секунд. Это быстрее, чем открыть Slack и написать «обнови токены».

Batch-скрининг макетов через Vision: конфигурация промпта

Промпт для аудита отклонений от дизайн-системы — не описание задачи, а машинная инструкция с жёстким output-контрактом:

{
  "model": "gpt-4o",
  "messages": [
    {
      "role": "system",
      "content": "You are a UI audit engine. Analyze the provided screen image against the design system rules. Return ONLY valid JSON. No explanations."
    },
    {
      "role": "user",
      "content": [
        {
          "type": "image_url",
          "image_url": { "url": "data:image/png;base64,{{BASE64_IMAGE}}" }
        },
        {
          "type": "text",
          "text": "Design system rules: primary color #1A73E8, base spacing 8px grid, font Inter only, border-radius 4px or 8px. Find all violations. Return: { violations: [ { element: string, rule: string, found_value: string, expected_value: string } ] }"
        }
      ]
    }
  ],
  "temperature": 0.1,
  "response_format": { "type": "json_object" }
}

temperature: 0.1 — не случайное число. При значениях выше 0.3 модель начинает «галлюцинировать» нарушения там, где их нет. Проверено на батчах из 200+ экранов.

«The models are getting better at understanding structure, not just pixels. That’s the shift.» — Sam Altman, OpenAI DevDay 2024

Стоимость полного стека автоматизации в 2026

Figma Organization — $75/ред./мес. (Variables API только здесь). GitHub Actions — бесплатно до 2000 минут/мес., затем $0.008/мин. OpenAI API (GPT-4o) — $2.50/$10.00 за млн токенов input/output. Style Dictionary — MIT, бесплатно. Итог для команды из 5 дизайнеров при ежедневных синхронизациях и еженедельном batch-аудите 100 экранов: $378–382/мес. Из них $375 — это Figma.

Альтернатива — Claude 3.5 Sonnet через Anthropic API за $3.00/$15.00 за млн токенов. На vision-задачах аудита UI даёт сопоставимую точность, но возвращает менее стабильный JSON без явного response_format в контракте — нужен дополнительный парсинг-слой.

Где рассыпается большинство AI-макетов: разбор по косточкам

Промпт без технических ограничений — это как руль без рулевой рейки: крутится легко, но машина едет куда попало. Большинство дизайнеров, впервые генерирующих UI через Midjourney или Stable Diffusion Flux, совершают одну и ту же ошибку: они описывают эстетику, полностью игнорируя инженерные ограничения — сетку, отступы, иерархию компонентов и состояния элементов.

Результат предсказуем. Клиент видит красивую картинку. Разработчик открывает Figma-файл — и находит там декоративные объекты вместо компонентов, текст, который нельзя масштабировать, и кнопки без hover/active/disabled состояний. Сдача срывается.

Вот шесть критических паттернов провала, которые повторяются из проекта в проект независимо от инструмента — будь то генерация через ChatGPT-4o, Claude Sonnet 3.7 или прямая работа с Uizard и Galileo AI.

Ошибка 1: Отсутствие токен-бюджета на компонентную структуру

AI-модели при генерации макета «видят» интерфейс как изображение, а не как дерево компонентов. Midjourney 6.1 рисует тени — но не знает, что эта тень прикреплена к Card-компоненту с padding 16px. Разработчику придётся это восстанавливать вручную. Это стоит времени. Конкретно — от 4 до 12 часов на экран средней сложности.

Решение: параллельно с визуальной генерацией запускать структурный промпт в ChatGPT API (gpt-4o, $5 за 1M input-токенов на 2026 год), который возвращает JSON-дерево компонентов.

{
  "screen": "Dashboard",
  "components": [
    {
      "id": "navbar",
      "type": "NavigationBar",
      "height": 64,
      "padding": {"top": 0, "right": 24, "bottom": 0, "left": 24},
      "children": ["Logo", "NavLinks", "UserAvatar"]
    },
    {
      "id": "card_grid",
      "type": "Grid",
      "columns": 3,
      "gap": 16,
      "children": ["MetricCard", "MetricCard", "MetricCard"]
    }
  ],
  "breakpoints": ["375px", "768px", "1440px"]
}

Этот JSON передаётся разработчику вместе с PNG. Не вместо него — вместе.

Ошибка 2: Игнорирование состояний интерактивных элементов

Галилео AI и Uizard генерируют «happy path» — только то, как экран выглядит в идеальных условиях. Ни одна из этих платформ по умолчанию не генерирует: пустые состояния (empty state), состояния загрузки (skeleton), ошибки валидации форм, disabled-кнопки. Разработчик столкнётся с этим на третий день спринта.

Считаем затраты. Если один экран требует 6 состояний, а их не задокументировано — это минимум 2 дополнительных ревизии с клиентом и пересдача. Часовая ставка senior-разработчика в 2026 году — $65-120. Два ревизионных цикла по 3 часа = потеря $390-720 на один экран.

Ошибка 3: Несоответствие типографической шкале

AI генерирует текст произвольного размера. Реальный дизайн работает на типографической шкале — обычно 8px-базированной или Major Third (1.25). Если в макете заголовок 22px, подзаголовок 17px, а тело 13px — это не шкала, это хаос. Разработчик либо округляет самостоятельно, либо пишет тебе в 23:00.

Практический кейс: миграция B2B-дашборда с Sketch на AI-генерацию

Техническая задача: редизайн аналитического дашборда для SaaS-платформы управления складом. 14 экранов, 3 роли пользователей (оператор, менеджер, администратор), мобильная и десктопная версия. Дедлайн — 3 недели. Бюджет на дизайн — $4,200.

Стек: Galileo AI для первичной генерации layout-скелетов, Claude Sonnet 3.7 ($3 за 1M input-токенов) для генерации компонентной документации, Figma для финальной сборки. Midjourney 6.1 не использовался — слишком высокий процент декоративного шума для B2B-интерфейсов.

Проблема вскрылась на экране «Отчёты»: Galileo сгенерировал таблицу данных с нечитаемой иерархией строк и отсутствующим состоянием фильтрации. Решение заняло 40 минут: переформулирован промпт с явным указанием density режима и zebra-striping.

Design a data table UI for warehouse analytics dashboard.
Constraints:
- Row height: 48px (comfortable density)
- Alternating row colors: #FFFFFF / #F7F8FA
- Sticky header with sort indicators (asc/desc/none)
- Inline filter row below header
- Pagination: 25/50/100 rows per page selector
- Empty state: illustration + CTA button
- Loading state: skeleton rows (3 visible)
- Column types: text, number (right-aligned), status badge, action menu
- Grid: 12-column, 1440px container, 24px gutters
--style raw --ar 16:9

Итог: 14 экранов за 11 рабочих дней. Экономия по сравнению с классическим ручным дизайном — 34 часа работы.

«The bottleneck is no longer generating ideas — it’s the quality of constraints you give the system.» — Sam Altman, интервью Stanford, февраль 2025

Чек-лист из 12 пунктов для сдачи прототипа

Каждый пункт — это конкретная проверка, а не абстрактное пожелание. Прогоняй перед каждой сдачей.

1. Компонентная библиотека задокументирована. Все повторяющиеся элементы (кнопки, карточки, инпуты) существуют как отдельные компоненты в Figma — не как дублированные группы.
2. Состояния элементов покрыты полностью. Для каждого интерактивного компонента: default / hover / active / focus / disabled / error — минимум 5 состояний.
3. Адаптивность подтверждена на трёх breakpoints. 375px (mobile), 768px (tablet), 1440px (desktop). Не «примерно масштабируется» — явно нарисовано.
4. Типографическая шкала соблюдена. Все размеры текста — кратные выбранной шкале. Зафиксировано в Figma Styles или отдельном документе.
5. Отступы и padding унифицированы. Только значения из 8px-сетки: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64px. Никаких «17px по ощущению».
6. Цветовые токены именованы. Не #2563EB, а color/primary/600. Разработчик подключит к CSS-переменным без вопросов.
7. Empty state предусмотрен для каждого списка/таблицы. Если данных нет — пользователь видит инструкцию, а не пустой экран.
8. Skeleton/loading состояния нарисованы. Для каждого блока, который грузит данные асинхронно.
9. Иконки — из единого набора, в SVG. Не PNG, не растровые. Размер — 16px или 24px, не смешивать.
10. Flow-диаграмма пользовательского пути приложена. Даже простая схема в FigJam — разработчику понятнее, чем 40 экранов без навигации.
11. Аннотации к нестандартным взаимодействиям написаны. Drag-and-drop, свайп, модальные триггеры — всё описано текстом прямо в файле.
12. Accessibility-проверка пройдена. Контрастность текста — минимум 4.5:1 (WCAG AA). Проверяется за 3 минуты через Figma-плагин Contrast или встроенный чекер в 2026-версии Figma Dev Mode.

Чек-лист — не формальность. Это страховой полис от ревизий. Каждый незакрытый пункт конвертируется в правки после сдачи — а правки после сдачи стоят дороже, чем правки до неё.