Скилл Apple-дизайна для Claude Code: установка, пять промптов и чек-лист сверки

Что это такое и почему интерфейс сразу выглядит дороже

Скилл это папка с инструкциями, которую Клод Код читает перед работой над интерфейсом.

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

Apple десятилетиями описывала эти мелочи в своих гайдлайнах, документ огромный и читать его целиком никто не станет. Автор скилла свёл главное в набор файлов, которые модель прочитывает перед тем, как написать первую строчку кода. В результате Клод Код перестаёт придумывать отступы на глаз и начинает брать их из системы.

Установка: одна минута, два способа

Выбирай первый способ, если хочешь, чтобы скилл был доступен во всех проектах сразу.

Способ первый, на весь компьютер

Скилл ляжет в общую папку навыков, и Клод Код увидит его в любом проекте, который ты откроешь. Открой терминал и выполни три строки подряд.

Способ второй, только для одного проекта

Годится, когда правила Apple нужны в одном конкретном сайте и мешать остальным работам они не должны. Выполняй из корня своего проекта.

Проверка, что скилл встал

Запусти Клод Код в любой папке и попроси его перечислить доступные навыки. В списке должен появиться apple-hig-designer. Если его там нет, значит папку скопировали не туда: внутри skills обязана лежать сама папка apple-hig-designer, и файл SKILL.md должен быть внутри неё. Содержимое, высыпанное в skills россыпью, скилл не поднимет.

Пять промптов, которые работают

Скилл включается сам, когда в задаче звучит Apple, HIG или iOS-стиль. Ниже формулировки, которые включают его наверняка.

1. Собрать страницу с нуля

2. Свести стиль Apple с другим

Это сильная сторона скилла и она прямо заявлена автором: чистый Apple-вид годится для техники и приложений, а под моду, еду или детскую тему его надо смешивать. Тогда от Apple берётся строгость сетки и типографики, а настроение приходит из второго стиля.

3. Проверить свой готовый сайт

Скилл создавался под сборку. Про проверку готового проекта автор не пишет вовсе. Работает она потому, что рядом со скиллом лежит справочник, и модель сверяет твой код с ним. Формулируй задачу явно, иначе Клод начнёт переписывать проект сразу.

4. Починить одну типографику

5. Вытащить токены под свой проект

Чек-лист Apple-вида: четырнадцать пунктов

По нему проверяют и то, что собрал Клод, и то, что делал человек. Работает без скилла.

• Все отступы кратны восьми. Четыре допустимо внутри мелких элементов, случайные семнадцать и двадцать три недопустимы нигде.
• Размеров шрифта на странице не больше шести. Каждый размер занят своей ролью, и роль не меняется от блока к блоку.
• Длина строки основного текста не превышает семидесяти пяти знаков, иначе глаз теряет начало следующей строки.
• Радиусы скругления живут по одной шкале. Мелкий элемент получает меньший радиус, крупная карточка больший, вперемешку они выдают самоделку.
• Тени мягкие и почти невидимые. Резкая чёрная тень под карточкой это самый частый признак дешёвой вёрстки.
• Анимации идут от ста пятидесяти до четырёхсот миллисекунд. Всё, что дольше полусекунды, ощущается тормозящим.
• Кривая анимации не линейная. Движение начинается быстро и мягко останавливается, именно это читается как дорогое.
• Зона нажатия любого элемента не меньше сорока четырёх пунктов по обеим сторонам, даже когда сама иконка мелкая.
• Контраст текста к фону проходит уровень AA. Светло-серый текст на белом это не изящно, это нечитаемо.
• Тёмная тема сделана отдельным набором цветов. Простая инверсия светлой темы всегда выглядит грязно.
• Состояния кнопок описаны все: обычное, наведение, нажатие, недоступное, загрузка. Пропущенное состояние заметно сразу.
• Иконки в одном наборе и одной толщине линии. Смешанные наборы разваливают страницу быстрее любой ошибки в цвете.
• Пустые состояния нарисованы. Экран без данных, поиск без результатов, ошибка сети, всё это часть интерфейса.
• Уважается системная настройка уменьшенного движения. Анимации при ней выключаются полностью. Замедление вместо выключения эту настройку не исполняет.

Три ограничения, о которых стоит знать заранее

Чтобы ты не решил, что установил скилл неправильно.

• SF Pro это фирменный шрифт Apple, и с кириллицей у него всё сложно: лицензия разрешает использование в основном внутри их экосистемы, а веб-версии в свободном доступе нет. На русском сайте бери системную связку либо близкую по рисунку бесплатную гарнитуру, скилл про это не предупредит и подставит SF Pro молча.
• Скилл отвечает за интерфейс и ни за что больше. Базу данных, оплату, почту и логику он не спроектирует, и просить его об этом смысла нет.
• Он тянет проект к спокойной строгости Apple, поэтому яркий характерный бренд об него сглаживается. Лечится вторым промптом из списка выше, где стиль задаётся явно.

И общее наблюдение, которое сэкономит тебе время. Скилл поднимает планку исполнения, а решение о том, что вообще должно быть на странице и в каком порядке, остаётся за тобой. Красиво собранная страница с непонятным предложением работает хуже неказистой страницы с ясным.