Описание системы иконок

Лена — UI/UX-дизайнер в небольшой продуктовой студии. Вчера она закончила макеты мобильного приложения для доставки еды, и сегодня надо передать проект разработчику Максиму. Макеты готовы, но проблема — в них 47 иконок, и Максим уже писал в чат: «Лен, а можно спецификацию? Какие иконки где, в каком стиле, какие размеры?»

Лена открыла Figma, посмотрела на все экраны и поняла, что выписывать вручную каждую иконку с описанием — это минимум два часа нудной работы. А ещё надо придумать правила для размеров, отступов, понятно объяснить визуальную метафору.

Проблема

Передать разработчику набор иконок — не просто скинуть файлы. Нужно:

• Перечислить все иконки и для чего они
• Описать визуальную метафору каждой (чтобы разработчик или другой дизайнер понимал логику)
• Сгруппировать по разделам (навигация, действия, статусы)
• Задать правила: размеры, отступы, консистентность

Вручную — это долго и легко что-то забыть.

Как Claude помогает

Лена открыла Claude и начала пошагово.

Шаг 1. Перечислила экраны и действия:

У меня приложение доставки еды. Экраны:
- Главная (каталог, поиск, корзина)
- Карточка ресторана (меню, избранное, рейтинг)
- Корзина (удалить, изменить количество)
- Профиль (заказы, адреса, настройки, выход)
- Оформление заказа (адрес, оплата, промокод)

Напиши список всех иконок, которые нужны для этих экранов, с кратким описанием метафоры и стиля каждой.

Claude вернул таблицу с 40+ иконками — от «Поиск (лупа, outline)» до «Промокод (билет с перфорацией, filled)».

Шаг 2. Лена уточнила:

Теперь сгруппируй эти иконки по разделам: навигация, действия, статусы, оплата.
Добавь правила:
- Размеры (какие для чего)
- Отступы от текста или границ
- Стиль (outline/filled, толщина линий)

Шаг 3. Claude выдал структурированную спецификацию:

Навигация (24×24 px, outline, 2px stroke)

- Главная — домик

- Поиск — лупа

- Корзина — корзина с счётчиком

- Профиль — силуэт человека

>

Действия (20×20 px, outline)

- Добавить в избранное — сердце

- Удалить — крестик в круге

- Плюс/минус — для количества товара

>

Правила:

- Отступ от текста — 8px

- Отступ от края кнопки — 12px

- Все иконки центрированы по вертикали с текстом

Что получилось

Лена скопировала спецификацию в Notion, добавила ссылку на файлы и отправила Максиму. Он ответил через 10 минут: «Супер, всё понятно, начинаю интегрировать».

✅ Результат: вместо 2 часов ручной работы — 15 минут с Claude. Спецификация структурированная, ничего не забыто, разработчик доволен.

Что забрать с собой

💡 Начни с контекста — перечисли экраны и действия, чтобы Claude понимал полную картину

📝 Проси конкретику — не просто список, а описание метафоры, стиль, размеры

✅ Группируй и структурируй — попроси разбить на разделы и добавить правила, чтобы спецификация была ready-to-use

⚠️ Проверь полноту — Claude может упустить редкие кейсы (например, иконку "пусто в корзине"), допиши вручную