50 популярных приложений, реконструированных в спецификации дизайна, читаемые Claude: ключевые паттерны для клонирования UI

u/meliwat потратил недели на обратное проектирование 50 популярных приложений, создавая структурированные спецификации дизайна в Markdown, и передал их Claude для воссоздания UI. Разница между почти идеальными копиями и неточными результатами свелась к нескольким конкретным практикам, выявленным при массовом анализе.

Что помогло Claude добиться идеальных копий UI

• Точные значения, а не диапазоны. #1A1A1A работает, а «тёмно-серый» даёт пять разных оттенков серого на пяти экранах.
• Заранее прописанные состояния. Перечисление всех состояний (пустое, загрузка, ошибка, заполнено) не позволило Claude придумывать свои собственные.
• Отступы как шкала, а не попиксельные значения. Система отступов 4/8/16/24 дала более согласованные макеты, чем указание каждого промежутка отдельно.
• Навигация в виде графа. Явные переходы между экранами исключили догадки «куда ведёт эта кнопка».

Что не помогло

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

Доступные ресурсы

Вся коллекция с открытым исходным кодом доступна на GitHub по адресу github.com/Meliwat/awesome-ios-design-md. Каждое приложение поставляется с 3 уровнями детализации: краткий справочник, стандартная сборка или полная попиксельная копия. Всё в Markdown, лицензия MIT, без зависимостей.

Вопрос к сообществу

Автор спрашивает: если вы занимались клонированием UI с помощью Claude, какие паттерны вы обнаружили, которых нет в этом списке? Какие приложения стоит добавить в следующий раз?