SwiftUI Design Skill

"Одна подсказка. Готовый к релизу интерфейс SwiftUI."

Напишите одну строку в своём агенте. Получите интерфейс SwiftUI, который не выглядит сгенерированным ИИ.

За 3–30 минут вы можете создать фирменный интерфейс iOS — не «сгенерированный ИИ и выглядящий нормально», а нечто, что кажется созданным дизайнером со вкусом.

Шесть железных правил против «ИИ-шлака», советник по дизайн-направлениям, протокол брендовых ассетов, пятимерная проверка — всё встроено. Передайте навыку палитру бренда, и он уловит ваш стиль; не передавайте ничего — и пять встроенных дизайн-языков всё равно сохранят свою целостность.

Работает с любыми агентами — Claude Code, Cursor, Codex, OpenCode, Hermes, все поддерживаются.

Установка и запуск

npx skills add wholiver/swiftui-design-skill -g -y

Что умеет

Возможность	Результат	Обычное время
Дизайн интерфейсов SwiftUI	Компилируемый код SwiftUI · Токены дизайн-системы · Шаблоны макетов	10–15 мин
Советник по дизайн-направлениям	5 школ × N дизайн-философий · 3 рекомендуемых направления · Описания визуальных якорей	5 мин
Интеграция брендовых ассетов	brand-spec.md · Цветовая палитра · Типографика · Система отступов	5–10 мин
Проверка на «ИИ-шлак»	Поэлементная проверка · Конкретный код исправлений · Альтернативные подходы	3–5 мин
Пятимерная проверка	Оценка в виде радара · Сохранить/Исправить/Быстрые победы · Чек-лист исправлений	3 мин
Библиотека шаблонов макетов	9 распространённых макетов · Код SwiftUI для копирования	Мгновенно
Дизайн анимаций	Пружинные/параллакс/обновление при потягивании · Компилируемый код	5–10 мин

Основные механизмы

Шесть железных правил против «ИИ-шлака»

Это самый строгий набор правил в навыке. Все дизайны должны проходить эти 6 проверок:

#	Железное правило	❌ Запрещено	✅ Альтернатива
1	Начинать с контекста	Придумывать с чистого листа	Сначала спрашивать о дизайн-системе/UI-кит/брендовых ассетах
2	Режим младшего дизайнера	Ждать идеального решения	Серый плейсхолдер > плохой SVG
3	Предлагать варианты, а не финалы	Один «окончательный ответ»	2–3 различающихся направления
4	Плейсхолдер > плохая реализация	ИИ-сгенерированный клипарт	Чистый серый плейсхолдер + текстовая метка
5	Системный подход, не заполнять	Забивать каждый пиксель	Каждый элемент должен оправдывать своё существование
6	Запрет на шаблоны «ИИ-шлака»	Фиолетово-синие градиенты, эмодзи-иконки, скруглённые карточки с левой границей	Один тёплый акцентный цвет, SF Symbols, шрифты с засечками

Подробности см. в references/anti-ai-slop.md.

Советник по дизайн-направлениям

Когда требования расплывчаты, навык рекомендует 3 различающихся направления из 5 основных дизайн-школ:

Школа	Характеристики	Фирменный стиль
Информационная	Данные на первом месте, насыщенность графиками	Bloomberg Terminal
Редакционная	Макет журнала, шрифты с засечками, щедрые отступы	NYT, Medium
Экспрессивная	Яркие цвета, асимметричный макет, акцент на анимации	Stripe, Linear
Функциональная	Плотный инструментальный стиль, акценты моноширинным шрифтом	Things, OmniFocus
Тёплый минимализм	Мягкие нейтральные тона, скруглённые углы, лёгкая текстура	Notion, Craft

Протокол брендовых ассетов

Обязательный пятишаговый процесс при работе с конкретным брендом:

Шаг	Действие	Цель
1 · Запрос	Есть ли у пользователя гайдлайны бренда?	Уважение к существующим ассетам
2 · Поиск	Поиск по официальным страницам бренда	Получение реальных материалов
3 · Загрузка	Загрузка реальных файлов ассетов	Логотипы PNG/SVG, шрифты
4 · Проверка	Проверка соответствия цветов официальным источникам	Перекрёстная проверка HEX-значений
5 · Запись	Генерация brand-spec.md	Фиксация полной дизайн-системы

Порог качества: 5 реальных цветов бренда, 10 токенов дизайна, 2 семейства шрифтов, сетка отступов 8pt.

Пятимерная проверка

Каждый дизайн должен пройти пятимерную проверку перед сдачей:

Измерение	Критерии оценки	Минимальный балл
🎯 Философия согласованности	Воплощает ли дизайн выбранную философию?	≥ 7/10
📐 Визуальная иерархия	Чётко ли расставлены приоритеты информации?	≥ 7/10
🔧 Проработка деталей	Точны ли отступы, типографика и цвета?	≥ 7/10
⚡ Функциональность	Соответствует ли макет целям пользователя?	≥ 7/10
✨ Оригинальность	Есть ли хотя бы одна фирменная деталь?	≥ 7/10

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

swiftui-design-skill/
├── SKILL.md                           ← Core definition (278 lines)
├── references/
│   ├── anti-ai-slop.md                ← Anti-AI Slop detailed rules (268 lines)
│   ├── layout-patterns.md             ← 9 layout patterns + copy-paste code (265 lines)
│   ├── typography-color.md            ← Typography hierarchy + color system (172 lines)
│   ├── design-review.md               ← 5-Dimension Review process (151 lines)
│   └── swift-extensions.md            ← Color/Font/Animation extensions (373 lines, essential)
└── templates/
    └── brand-spec.md                  ← Brand spec template (77 lines)

Отличия от swiftui-expert-skill

	SwiftUI Design Skill	swiftui-expert-skill
Фокус	Визуальный дизайн, эстетика, фирменный стиль	Качество кода, производительность, корректность
Вопрос	«Как это выглядит?»	«Корректен ли код?»
Результат	Направление дизайна, палитра цветов, макет, ревью	Ревью кода, анализ в Instruments, модернизация API
Дополняют друг друга	Сначала используйте Design для определения направления	Затем используйте Expert для обеспечения качества кода

Оба навыка работают вместе: Design решает, что создавать, а Expert гарантирует, как создать это правильно.

Лицензия

MIT — используйте свободно, но сохраняйте указание на оригинального автора.