iOS ↔ Android помощник

Когда дизайнер проектирует кросс-платформенный продукт, сложность не в том, чтобы «нарисовать одинаково», а в том, чтобы не сломать нативные ожидания на каждой платформе. Например, Segment Control на iOS и табы на Android могут решать похожую задачу, но воспринимаются по-разному: у них разная визуальная логика, разные сценарии использования и разные ожидания по поведению.

Решила собрать в Labs помощника, который помогает дизайнеру не переводить интерфейс «на глаз», а сверять паттерны между платформами.

Он умеет:

• подсказать, как один и тот же паттерн называется в разных системах: например, что ближе к iOS Picker в Material 3, а что на Android лучше решать через Dropdown menu или Dialog;
• объяснить, где паттерны только похожи визуально, но отличаются по поведению: например, как по-разному работают navigation bar, tabs, dialogs, sheets, pickers и back-навигация;
• помочь выбрать подходящий вариант под сценарий: когда нужен быстрый выбор, когда подтверждение действия, а когда полноценный слой с контентом;
• дать ссылки на первоисточники, чтобы не спорить на уровне «мне кажется», а сверяться с HIG и Material 3.

Как устроено

Одна база знаний — три способа ей пользоваться.

База знаний — это набор карточек, по одной на каждую пару компонентов. В карточке: как компонент называется на iOS и Android, в чём отличается поведение, ссылки на официальные гайдлайны, дата, когда последний раз сверяли.

Чтобы база не устаревала, раз в неделю автоматический процесс заходит на сайты Apple HIG и Material 3, проверяет, не изменилась ли там страница, и если что-то поменялось — помечает соответствующие карточки как требующие пересверки. Если дизайнер задаёт вопрос, которого пока нет в базе, помощник может сходить на официальные доки сам и ответить со ссылкой.

Два способа использовать одну базу:

• Skill для Claude Code — для тех, кто уже работает с Claude в редакторе. Ставится одной командой, активируется фразами вроде «переведи на Android» или «iOS-аналог»;
• Чат на странице Labs — для всех остальных. Открываешь, спрашиваешь, получаешь ответ со ссылками.

Что уже работает

• Стартовая база: Navigation Bar ↔ Top App Bar, Action Sheet ↔ Modal Bottom Sheet, Segmented Control ↔ Segmented Button
• Чат-эндпоинт со стримингом ответа через Vercel AI SDK на модели OpenAI
• Еженедельная проверка актуальности официальных доков