Apple-Hig-Designer

Apple-Hig-Designer используется для создания интерфейсов, соответствующих принципам Apple HIG, с возможностью сочетания различных стилей.

English | 简体中文

📸 Демонстрация базовых возможностей:

Дизайн одной страницы

«Создание анимации переходов между страницами iOS»

Page Transitions

«Разработай чат-страницу в стиле Mac для веб-использования.»

macOS Chat

«Используй навык apple-hig-designer, выбери подходящий фреймворк и разработай полноценный адаптивный фронтенд-проект с эстетикой люксового бренда.»

Vercel: https://fashion-editorial.vercel.app/

🎯 Обзор

Скилл apple-hig-designer позволяет проектировать профессиональные веб- и мобильные интерфейсы в соответствии с Apple Human Interface Guidelines. Он включает исчерпывающие знания о:

Системе типографики SF Pro
Системных цветах Apple с поддержкой светлой/тёмной темы
Системе отступов на основе сетки 8pt
Паттернах компонентов (кнопки, карточки, поля ввода и др.)
Рекомендациях по анимации со стандартными кривыми easing от Apple

📦 Установка

Способ 1: Установка на уровне пользователя (рекомендуется)

Скопируйте скилл в директорию скиллов Claude Code:

bash

# Windows
xcopy /E /I "apple-hig-designer" "%USERPROFILE%\.claude\skills\apple-hig-designer"

# macOS / Linux
cp -r apple-hig-designer ~/.claude/skills/

Способ 2: Установка на уровне проекта

Скопируйте в директорию .claude/skills вашего проекта:

bash

mkdir -p .claude/skills
cp -r apple-hig-designer .claude/skills/

🚀 Использование

После установки Claude Code автоматически активирует этот скилл при выполнении следующих действий:

Базовое использование: сообщите Claude Code, что хотите использовать apple-hig-designer.

Примеры:

«Разработай интерфейс в стиле Apple...»
«Создай компонент, соответствующий HIG...»
«Компоненты в стиле iOS»

Расширенное использование: интегрируйте apple-hig-designer с другими стилями, используя его как базовый дизайн-фреймворк.

Примеры:

«Используя навык apple-hig-designer и эстетику киберпанка, помоги мне разработать страницу-витрину роботов.»

«Используя apple-hig-designer для смешения стилей, какой стиль ты бы порекомендовал для разработки сайта-блога?»

📁 Структура файлов

apple-hig-designer/
├── SKILL.md              # Основное определение скилла
├── REFERENCE.md          # Подробная справочная документация по HIG
├── README.md             # Документация на английском
├── README_CN.md          # Документация на китайском
├── LICENSE               # Лицензия MIT
└── resources/
    ├── components.jsx    # Примеры React-компонентов
    ├── design-tokens.css # CSS custom properties
    └── ui-patterns.md    # Документация по UI-паттернам

🎨 Возможности

Возможность	Описание
Типографика	Система шрифтов SF Pro с корректными пороговыми размерами
Цвета	Полная палитра системных цветов Apple
Отступы	Реализация системы сетки 8pt
Компоненты	Кнопки, карточки, поля ввода, стеклянные панели
Анимации	Стандартные кривые cubic-bezier от Apple
Доступность	Соответствие WCAG AA, поддержка reduced motion
Тёмная тема	Полная поддержка светлой/тёмной темы

📚 Ресурсы

🤝 Участие в разработке

Вклад приветствуется! Не стесняйтесь создавать Issues и Pull Requests.

📄 Лицензия

Проект распространяется под лицензией MIT — подробности в файле LICENSE.

Установка

README