Скилл /mobile-design: дизайн приложений в Claude без нейросетевого вида

Попроси Claude красивый дизайн приложения. Получишь розовый градиент, стеклянные карточки, кнопки-таблетки и корону на экране оплаты.

Так выглядел мой Tona. Это iOS-приложение для цвета в видео, которое я доделываю у всех на глазах в канале. Я его переделал, а правила, по которым переделывал, собрал в скилл. На картинке выше Tona до и после.

Почему Claude рисует одинаково

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

Чтобы это убрать, мало сказать «сделай минималистично». Нужна система и список запретов.

Что делает скилл

Сначала смысл экрана. Какой контент главный, какое одно действие, для какой платформы.
Маленькая строгая система. Цвета, шрифты, отступы и три радиуса скругления. Экраны берут значения только оттуда, никаких «чуть другой серый».
Запреты. Градиенты, стекло, кнопки-таблетки, иконки в кружках, короны, эмодзи и всё по центру.
Рецепты экранов. Онбординг, оплата, пустой экран, галерея, настройки, редактор, шторка.
Чек-лист. Каждый экран проходит проверку перед тем, как ты его увидишь.

Работает для SwiftUI, React Native, Flutter и Compose. Если кода ещё нет, рисует HTML-макеты размером 402×874.

Как поставить

Вставь в Claude Code:

Установи скилл https://github.com/vaykondev/mobile-design-skill в ~/.claude/skills

Или руками:

git clone https://github.com/vaykondev/mobile-design-skill /tmp/mobile-design-skill
cp -R /tmp/mobile-design-skill/skills/mobile-design ~/.claude/skills/

Перезапусти Claude Code, и появится команда /mobile-design.

Как пользоваться

Новые экраны:

/mobile-design сделай экраны онбординга и оплаты для моего приложения

Готовое приложение:

/mobile-design переделай дизайн, функции не трогай

Без бренда скилл берёт характер Mono: чёрный, белый акцент, широкие заголовки. Если бренд есть, его цвет становится единственным акцентом, а дисциплина остаётся та же.

Что внутри

skills/mobile-design/
  SKILL.md                    порядок работы
  references/tokens.md        токены для SwiftUI, React Native, Flutter, Compose, HTML
  references/anti-patterns.md что Claude делает по умолчанию и чем заменить
  references/screens.md       рецепты экранов с размерами
  references/checklist.md     проверка перед показом

Самый полезный файл тут anti-patterns.md. Это список того, что модель делает сама, и чем это заменить. Его можно читать и без скилла, если дизайнишь руками.

Что поменялось в Tona

Из приложения ушли розовая палитра, стеклянные карточки, старые картинки онбординга и макеты телефонов. Появились чёрный фон, один белый акцент и новая иконка. Интерфейс перестал спорить с видео, а для приложения про цвет это главное.

Скилл бесплатный, лицензия MIT. Как я доделываю само приложение, пишу в канале @vaykord_dev, а сам Tona описан на его странице.