Awesome iOS DESIGN.md — 200 дизайн-систем мобильных приложений для AI-агентов

· 2 мин чтения
design-md ios design-system swiftui ai-agents
📂 Исходный код на GitHub

Коллекция из 200 production-grade дизайн-систем DESIGN.md для лучших мобильных приложений: точные hex-значения, полные типографические шкалы, состояния компонентов, кривые анимации и haptics. Четыре flavor'а на каждое приложение — framework-neutral, SwiftUI, Expo и Jetpack Compose. Живая галерея на spectr.to. Лицензия MIT.

Awesome iOS DESIGN.md — 200 дизайн-систем мобильных приложений для AI-агентов

Коллекция из 200 production-grade дизайн-систем для лучших мобильных приложений мира — Instagram, Spotify, Netflix, Telegram, Cash App, Robinhood и других — упакованных в формат DESIGN.md, который AI-агенты читают нативно. Проект от Meliwat вдохновлён веб-версией awesome-design-md от VoltAgent и переосмыслен для нативной мобильной разработки: вместо общих описаний — точные hex-значения, полные типографические шкалы, состояния компонентов, кривые анимации и haptics. Никакого Figma, JSON-схем и инструментария — только чистый Markdown, который понимают Claude, Cursor, Codex и Stitch.

Идея простая: вручите AI-агенту DESIGN.md — и он перестаёт угадывать, как должен выглядеть интерфейс.

Что такое DESIGN.md

DESIGN.md — концепция от Google Stitch: обычный текстовый файл с описанием дизайн-системы, который кладут в корень проекта. AI-агент читает его и генерирует консистентный UI без экспортов из Figma и настройки инструментов.

Файл Кто читает Что определяет
AGENTS.md Coding-агенты Как собирать проект
DESIGN.md Дизайн-агенты Как приложение должно выглядеть и ощущаться

Четыре варианта для каждого приложения

Каждое из 200 приложений поставляется в четырёх flavor'ах — можно выбрать подходящий под ваш стек:

Файл Для чего
DESIGN.md Framework-neutral — любой агент и фреймворк: Flutter, SwiftUI, UIKit, React Native, Kotlin Compose
DESIGN-swiftui.md SwiftUI: расширения Color / Font, ViewModifier'ы, примеры view, SF Symbols, haptics через .sensoryFeedback
DESIGN-expo.md Expo / React Native: модуль design-токенов, StyleSheet, Reanimated + expo-haptics, expo-router, @expo/vector-icons
DESIGN-android.md Jetpack Compose: token-объект Color, Material 3 Typography, @Composable-функции, NavigationBar, LocalHapticFeedback

В каждой папке приложения — все четыре файла плюс README.md с обзором пака, фирменными приёмами и ссылками.

Что внутри каждого DESIGN.md

Формат следует спецификации Stitch DESIGN.md, адаптированной под iOS:

# Секция Что фиксирует
1 Visual Theme & Atmosphere Настроение, плотность, характер платформы
2 Color Palette & Roles Семантические имена + hex + маппинг на системные цвета (light + dark)
3 Typography Rules SF Pro и кастомные шрифты, полная иерархия Dynamic Type
4 Component Stylings Кнопки, карточки, поля ввода, tab bar'ы, nav bar'ы, sheets — со всеми состояниями
5 Layout Principles Сетка 4/8pt, safe areas, insets, философия whitespace
6 Depth & Elevation Тени, материалы (.regularMaterial, .thin), blur, иерархия поверхностей
7 Do's and Don'ts Дизайн-ограничения в соответствии с Apple HIG
8 Responsive Behavior Размеры устройств, Dynamic Type, landscape, адаптация под iPad, touch targets
9 Agent Prompt Guide Быстрый цветовой справочник + готовые промпты для SwiftUI / Expo / Compose

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

  1. Откройте живую галерею spectr.to/gallery — все 200 приложений со всеми экранами, рендер бесплатно в браузере.
  2. Найдите нужное приложение — например, spectr.to/gallery/spotify.
  3. Откройте папку в репозитории — например, design-md/music/spotify/ — возьмите подходящий flavor и положите рядом с CLAUDE.md / AGENTS.md.
  4. Промптните агента:

«Сделай экран Now Playing, используя DESIGN-swiftui.md для всех стилей — палитра, типографическая шкала, отступы и motion должны совпадать точно».

В результате агент знает канву #121212, зелёную кнопку воспроизведения Spotify, сетку 4/8pt, spring-кривые и haptics — не «вайб», а фактическую спецификацию.

Коллекция: 200 паков в 11 категориях

Категория Паков Категория Паков
Social 23 Finance 22
Messaging 16 Fitness 19
Travel 20 Productivity 22
Music 14 Dating 12
Video 16 Misc 20
Food 16 Всего 200

Несколько примеров, показывающих уровень детализации:

  • Spotify — тёмная канва #121212, Spotify Green #1DB954 как единственный акцент, градиент Now Playing с динамическим извлечением цвета из обложки альбома
  • Instagram — монохромный chrome, 10-стопный брендовый градиент зарезервирован для Stories и Create, true-black OLED dark mode
  • Telegram — Telegram Blue #0088CC, бабблы 17pt с хвостиками 6pt, Lottie-эмодзи, плавающий мини-плеер голосовых
  • Cash App — чисто-чёрная канва + единственный акцент Cash Green #00D632, клавиатура суммы на 96pt, иконочный tab bar
  • Netflix — Netflix Red #E50914 на канве #141414, автоплей трейлеров в hero, ряды Top 10 с гигантскими цифрами
  • Robinhood — белая канва и чёрный текст, график портфеля #00C805 вверх / #FF5000 вниз с перетаскиваемым скраббером

Всё организовано так же, как живая галерея: каждая запись ссылается на свою папку, а тап по телефону в галерее показывает отрендеренные токены.

Связь с веб-версией и правовая оговорка

Проект вдохновлён awesome-design-md, но сфокусирован на нативной мобильной разработке: там, где веб-версия описывает сайты, эта коллекция покрывает iOS-приложения с учётом HIG, Dynamic Type, SF Symbols и haptics. Все товарные знаки, логотипы и визуальные идентичности остаются собственностью их владельцев — документы существуют, чтобы агенты генерировали UI, который ощущается нативным для каждой платформы.

Если приложения нет в коллекции

Можно запросить приложение в один клик — или сгенерировать собственный DESIGN.md из записи экрана на www.spectr.to. Проект молодой и принимает контрибьюции: улучшения существующих DESIGN.md, новых паков и сообщения о проблемах.

Лицензия — MIT.

Источник: https://github.com/Meliwat/awesome-ios-design-md

Похожие материалы