Продолжение предыдущего поста про Figma и реальный UI
Сейчас делаю инструмент, который позволяет увидеть всё флоу приложения.
В идеале это должно работать так:
— подключаешь плагин
— сразу видишь весь граф приложения
Но прийти к такому непросто. Пока приходится вручную размечать переходы между экранами. Даже это уже позволяет довольно полно увидеть картину.
Интересно, у вас такая проблема тоже есть?
Или это я просто слишком часто попадаю в проекты, где Figma и приложение живут разной жизнью?
Сейчас делаю инструмент, который позволяет увидеть всё флоу приложения.
В идеале это должно работать так:
— подключаешь плагин
— сразу видишь весь граф приложения
Но прийти к такому непросто. Пока приходится вручную размечать переходы между экранами. Даже это уже позволяет довольно полно увидеть картину.
Интересно, у вас такая проблема тоже есть?
Или это я просто слишком часто попадаю в проекты, где Figma и приложение живут разной жизнью?
👍6
This media is not supported in your browser
VIEW IN TELEGRAM
🖍 App Graph — быстрая навигация
Тот самый инструмент для просмотра графа приложения сделал в виде плагина для Android Studio.
Одна из удобных возможностей: видишь экран → нажимаешь
Получается своего рода preview на максималках.
Была идея переиспользовать возможности Compose Preview. Но, немного покопавшись в коде Android Studio, стало понятно, что Preview очень сильно завязан на внутренности IDE и использовать его извне почти нереально. По крайней мере пока не нашел способа.
Поэтому текущее решение основано на screenshot-тестах, приправлено KSP и небольшой порцией магии.
❓Как думаете, может быть полезно в работе?
Тот самый инструмент для просмотра графа приложения сделал в виде плагина для Android Studio.
Одна из удобных возможностей: видишь экран → нажимаешь
View source → (почти) сразу открывается код.Получается своего рода preview на максималках.
Была идея переиспользовать возможности Compose Preview. Но, немного покопавшись в коде Android Studio, стало понятно, что Preview очень сильно завязан на внутренности IDE и использовать его извне почти нереально. По крайней мере пока не нашел способа.
Поэтому текущее решение основано на screenshot-тестах, приправлено KSP и небольшой порцией магии.
❓Как думаете, может быть полезно в работе?
🔥4👍2👏1
🌠 Создание иконки для мобильного приложения. Все способы.
Пришло время делать иконку. Как лучше это сделать? Есть несколько способов разной степени безумия:
1. Android Studio (Android) и Icon Composer (iOS)
✅ нативно
✅ легко
✅ гибко
✅ поддерживаются последние фичи Android и iOS: monochrome, liquid glass
✅ бесплатно
❌ два совершенно непохожих инструмента
❌ нужно делать одно и то же дважды — просто потому что так исторически сложилось
======
2. IconKitchen
https://icon.kitchen/
Один инструмент для Android, iOS и Web сразу. Удобно, если не хочется переключаться между экосистемами.
✅ гибко
✅ легко
✅ есть дополнительные возможности по сравнению с нативными инструментами
✅ поддерживается Android, iOS, Web
✅ бесплатно
❌ не поддержаны некоторые свежие фичи (те же monochrome и liquid glass)
======
3. AI Image generation
✅ весело
✅ результат всегда неожиданный (это плюс, я так решил)
❌ бесполезно
❌ вы потратите лимиты раньше, чем получите хороший набор иконок
======
4. Нанять креативное агентство
✅ работают профессионалы
✅ у них есть Figma и уверенный взгляд
✅ всё сделают за вас
❌ ещё одна встреча в календаре
❌ дорого. очень. дорого.
======
5. Использовать фотографию кота
✅ оригинально
✅ кот не против
✅ плюс к CTR в сторах
❌ фотосессия кота займёт 80% времени проекта
---
Итого: я использую IconKitchen, когда хочу сделать быстро и сам. Android Studio — если нужно сделать правильно
Пришло время делать иконку. Как лучше это сделать? Есть несколько способов разной степени безумия:
1. Android Studio (Android) и Icon Composer (iOS)
✅ нативно
✅ легко
✅ гибко
✅ поддерживаются последние фичи Android и iOS: monochrome, liquid glass
✅ бесплатно
❌ два совершенно непохожих инструмента
❌ нужно делать одно и то же дважды — просто потому что так исторически сложилось
======
2. IconKitchen
https://icon.kitchen/
Один инструмент для Android, iOS и Web сразу. Удобно, если не хочется переключаться между экосистемами.
✅ гибко
✅ легко
✅ есть дополнительные возможности по сравнению с нативными инструментами
✅ поддерживается Android, iOS, Web
✅ бесплатно
❌ не поддержаны некоторые свежие фичи (те же monochrome и liquid glass)
======
3. AI Image generation
✅ весело
✅ результат всегда неожиданный (это плюс, я так решил)
❌ бесполезно
❌ вы потратите лимиты раньше, чем получите хороший набор иконок
======
4. Нанять креативное агентство
✅ работают профессионалы
✅ у них есть Figma и уверенный взгляд
✅ всё сделают за вас
❌ ещё одна встреча в календаре
❌ дорого. очень. дорого.
======
5. Использовать фотографию кота
✅ оригинально
✅ кот не против
✅ плюс к CTR в сторах
❌ фотосессия кота займёт 80% времени проекта
---
Итого: я использую IconKitchen, когда хочу сделать быстро и сам. Android Studio — если нужно сделать правильно
icon.kitchen
IconKitchen
Cook up app icons for any platform
👍3✍1
🧙🏼♂️ Ревью Google — черная магия
Все ведь сталкивались: срочный релиз или хотфикс, а ревьюер Гугла пропал на неделю?
Так вот, у нас сломался аккаунт ревьюера. Я заметил не сразу и отправил сборку на ревью.
Новую версию аппрувнули за час. С неработающим аккаунтом.
Ахахахахха, чтоооооо?
Я, конечно, не против, но как это вообще работает?
Все ведь сталкивались: срочный релиз или хотфикс, а ревьюер Гугла пропал на неделю?
Так вот, у нас сломался аккаунт ревьюера. Я заметил не сразу и отправил сборку на ревью.
Новую версию аппрувнули за час. С неработающим аккаунтом.
Ахахахахха, чтоооооо?
Я, конечно, не против, но как это вообще работает?
😎3🤣1
🇨🇳 Приложения в Китае
Недавно был в Китае. Это, пожалуй, самое сложное путешествие из всех, но одновременно и одно из самых интересных.
До этого я бывал во Вьетнаме и Таиланде — Юго-Восточная Азия, и я ожидал чего-то похожего. Но Китай с ними даже близко не сравнить.
Чтобы просто жить и передвигаться, нужна целая пачка приложений:
— Trip.com — для бронирований (если ты иностранец)
— DeepL — переводчик, который реально справляется с китайским
— DeepSeek — потому что другие AI-чаты часто не работают (даже с VPN)
— несколько карт — часть на английском, часть на китайском
— MetroMan — удобная навигация по метро
— Alipay, WeChat — оплата и общение
— Taobao — локальный маркетплейс
— отдельные приложения для некоторых кафе
— Universal Beijing Resort — для парка аттракционов
Пользовался приложениями каждый день, и накопилась пачка наблюдений, которыми хочу поделиться 👉
Недавно был в Китае. Это, пожалуй, самое сложное путешествие из всех, но одновременно и одно из самых интересных.
До этого я бывал во Вьетнаме и Таиланде — Юго-Восточная Азия, и я ожидал чего-то похожего. Но Китай с ними даже близко не сравнить.
Чтобы просто жить и передвигаться, нужна целая пачка приложений:
— Trip.com — для бронирований (если ты иностранец)
— DeepL — переводчик, который реально справляется с китайским
— DeepSeek — потому что другие AI-чаты часто не работают (даже с VPN)
— несколько карт — часть на английском, часть на китайском
— MetroMan — удобная навигация по метро
— Alipay, WeChat — оплата и общение
— Taobao — локальный маркетплейс
— отдельные приложения для некоторых кафе
— Universal Beijing Resort — для парка аттракционов
Пользовался приложениями каждый день, и накопилась пачка наблюдений, которыми хочу поделиться 👉
🔥1
🇨🇳 Приложения в Китае. Продолжение
🖼 Look
Для меня приложения выглядят непривычно и, честно говоря, некрасиво.
Интерфейсы кажутся неровными, перегруженными, с разным стилем внутри одного приложения. Особенно это заметно в Alipay: переходишь в миниапп — и оказываешься как будто в другом продукте.
🧰 Feel
Если вы видели AliExpress или Trip.com, то, скорее всего, ловили необычный вайб.
После Alipay и Taobao это ощущение усиливается раз в десять.
Очень много информации на экране. Она упакована в маленькие блоки, каждый из которых сам по себе насыщен. Для меня это выглядит как шум. Для китайского пользователя — скорее всего, как удобная плотность информации.
Я думаю, это связано с языком. Иероглифы позволяют уместить гораздо больше смысла в маленьком пространстве.
А AliExpress и Trip.com — это уже адаптированные версии под другие рынки.
Хороший пример того, как язык влияет на продукт.
P.S. Скриншоты — из трёх разных миниаппов. Один клик — и всё поменялось
🖼 Look
Для меня приложения выглядят непривычно и, честно говоря, некрасиво.
Интерфейсы кажутся неровными, перегруженными, с разным стилем внутри одного приложения. Особенно это заметно в Alipay: переходишь в миниапп — и оказываешься как будто в другом продукте.
🧰 Feel
Если вы видели AliExpress или Trip.com, то, скорее всего, ловили необычный вайб.
После Alipay и Taobao это ощущение усиливается раз в десять.
Очень много информации на экране. Она упакована в маленькие блоки, каждый из которых сам по себе насыщен. Для меня это выглядит как шум. Для китайского пользователя — скорее всего, как удобная плотность информации.
Я думаю, это связано с языком. Иероглифы позволяют уместить гораздо больше смысла в маленьком пространстве.
А AliExpress и Trip.com — это уже адаптированные версии под другие рынки.
Хороший пример того, как язык влияет на продукт.
P.S. Скриншоты — из трёх разных миниаппов. Один клик — и всё поменялось
🔥1
🇨🇳 Приложения в Китае. Еще один пост
🔨Performance
Приложения часто работают медленно.
И речь не про заблокированные YouTube или Instagram, а про локальные сервисы.
Причём неважно, используешь eSIM или Wi-Fi. Особенно это заметно в Alipay и его миниаппах.
Возможные причины:
— огромный объём трафика в китайском интернете
— большое количество запросов между супераппом и миниаппами
Через пару дней просто адаптируешься: не жмёшь кнопку второй раз, а ждёшь 2–5 секунд.
При этом почти все приложения на удивление экономно расходуют батарею.
Исключения — Trip.com и Universal Beijing Resort. Эти жрут батарею за десятерых.
🧠 Интересное
В Alipay есть классная фича перевода: нажимаешь кнопку — и весь текст в приложении переводится на нужный язык (кроме картинок).
Работает даже внутри миниаппов.
Звучит просто, но с технической точки зрения — очень нетривиально.
Ну и бонус — забавные переводы вроде “паровой утиный платок”.
🔨Performance
Приложения часто работают медленно.
И речь не про заблокированные YouTube или Instagram, а про локальные сервисы.
Причём неважно, используешь eSIM или Wi-Fi. Особенно это заметно в Alipay и его миниаппах.
Возможные причины:
— огромный объём трафика в китайском интернете
— большое количество запросов между супераппом и миниаппами
Через пару дней просто адаптируешься: не жмёшь кнопку второй раз, а ждёшь 2–5 секунд.
При этом почти все приложения на удивление экономно расходуют батарею.
Исключения — Trip.com и Universal Beijing Resort. Эти жрут батарею за десятерых.
🧠 Интересное
В Alipay есть классная фича перевода: нажимаешь кнопку — и весь текст в приложении переводится на нужный язык (кроме картинок).
Работает даже внутри миниаппов.
Звучит просто, но с технической точки зрения — очень нетривиально.
Ну и бонус — забавные переводы вроде “паровой утиный платок”.
🇨🇳 Приложения в Китае. Вывод
Вроде очевидная мысль, но я сам про неё регулярно забываю:
UI и UX — не универсальны.
Они сильно зависят от аудитории, языка и рынка. Где-то пользователи ждут мгновенного отклика приложения. Где-то важна эксклюзивность контента. А где-то важнее акции, или плотность информации.
Например, в китайских приложениях тебя закидают офферами ещё до того, как ты успеешь заказать такси.
И если делать продукт для другой страны, это нужно учитывать не на уровне “перевели текст”, а на уровне всей структуры приложения.
Вроде очевидная мысль, но я сам про неё регулярно забываю:
UI и UX — не универсальны.
Они сильно зависят от аудитории, языка и рынка. Где-то пользователи ждут мгновенного отклика приложения. Где-то важна эксклюзивность контента. А где-то важнее акции, или плотность информации.
Например, в китайских приложениях тебя закидают офферами ещё до того, как ты успеешь заказать такси.
И если делать продукт для другой страны, это нужно учитывать не на уровне “перевели текст”, а на уровне всей структуры приложения.
❤2💯1
⚔️ Spec Kit vs Superpowers
Сравниваем два плагина, улучшающих Coding Assistants. Я пробовал с Claude и Copilot, в обоих использовал модель Claude Sonnet.
SpecKit реализует Spec-driven development. Этот инструмент от Github на основе AI агентов имеет набор скиллов, утилит, определённую философию разработки. Требует от разработчика соблюдения четкого процесса для достижения результата.
Superpowers — набор инструментов и скиллов. Фактически, это готовый флоу разработки, но, в отличие от SpecKit, не требует знания флоу, а сам ведёт тебя по нему.
Для обоих инструментов намеренно использовал промпт среднего качества — без сильных деталей, но больше нескольких слов. Давал ссылки на макеты, был подключен Figma MCP, верхнеуровнево описывал флоу или фичу.
Что получилось — читай дальше 👇
Сравниваем два плагина, улучшающих Coding Assistants. Я пробовал с Claude и Copilot, в обоих использовал модель Claude Sonnet.
SpecKit реализует Spec-driven development. Этот инструмент от Github на основе AI агентов имеет набор скиллов, утилит, определённую философию разработки. Требует от разработчика соблюдения четкого процесса для достижения результата.
Superpowers — набор инструментов и скиллов. Фактически, это готовый флоу разработки, но, в отличие от SpecKit, не требует знания флоу, а сам ведёт тебя по нему.
Для обоих инструментов намеренно использовал промпт среднего качества — без сильных деталей, но больше нескольких слов. Давал ссылки на макеты, был подключен Figma MCP, верхнеуровнево описывал флоу или фичу.
Что получилось — читай дальше 👇
Superpowers
С Superpowers сделал несколько фич подряд. В том числе с нуля с использованием CameraX для сканирования QR кода. Всего было 3 фичи, по 3-5 экранов каждая.
Superpowers завёлся быстро, ничего дополнительно настраивать не пришлось.
Плагин сильно улучшил планирование — режим планирования в Copilot или Claude теперь нужен очень редко. Задаёт хорошие вопросы, оставляет хороший файл с планом, сам параллелит выполнение, сам ревьюит свои изменения.
Дизайн из Figma тоже перенёс хорошо. Использовал UI Kit, вся вёрстка — близко к макетам.
Лимиты чуть выросли, но в разумных пределах.
Очень доволен.
С Superpowers сделал несколько фич подряд. В том числе с нуля с использованием CameraX для сканирования QR кода. Всего было 3 фичи, по 3-5 экранов каждая.
Superpowers завёлся быстро, ничего дополнительно настраивать не пришлось.
Плагин сильно улучшил планирование — режим планирования в Copilot или Claude теперь нужен очень редко. Задаёт хорошие вопросы, оставляет хороший файл с планом, сам параллелит выполнение, сам ревьюит свои изменения.
Дизайн из Figma тоже перенёс хорошо. Использовал UI Kit, вся вёрстка — близко к макетам.
Лимиты чуть выросли, но в разумных пределах.
Очень доволен.
🔥1
Spec Kit
Со Spec Kit попробовал сделать одну фичу — экран с множеством состояний.
Настройка занимает время. Первый шаг — "конституция", уже вызывает вопросы. Уже есть CLAUDE.md. Чем будет отличаться конституция? Ответ найти оказалось непросто. Настроил по чуйке и обсуждениям
Spec Kit сгенерировал мусорную спеку, не задав ни одного вопроса. А я надеялся, что он сам выяснит нужное в диалоге.
Окей, пробуем еще раз. Дал более подробный промпт, приложил ссылки — снова ничего не спросил, спека стала чуть лучше.
Уточнил моменты вручную, попросил спланировать и разбить на задачи. Он всё сделал, хоть и медленно.
По итогу задачу выполнил плохо: поменял не все нужные файлы, дизайн очень кривой. Настолько кривой, что были проигнорированы все рекомендации CLAUDE.md по использованию Material темы и нашего UI Kit
А еще он съел все лимиты личного Claude 💀
Уже после пошел искать информацию, и наткнулся на обсуждение SpecKit creates the illusion of work, generating a bunch of text. Очень попало в мои впечатления.
Со Spec Kit попробовал сделать одну фичу — экран с множеством состояний.
Настройка занимает время. Первый шаг — "конституция", уже вызывает вопросы. Уже есть CLAUDE.md. Чем будет отличаться конституция? Ответ найти оказалось непросто. Настроил по чуйке и обсуждениям
Spec Kit сгенерировал мусорную спеку, не задав ни одного вопроса. А я надеялся, что он сам выяснит нужное в диалоге.
Окей, пробуем еще раз. Дал более подробный промпт, приложил ссылки — снова ничего не спросил, спека стала чуть лучше.
Уточнил моменты вручную, попросил спланировать и разбить на задачи. Он всё сделал, хоть и медленно.
По итогу задачу выполнил плохо: поменял не все нужные файлы, дизайн очень кривой. Настолько кривой, что были проигнорированы все рекомендации CLAUDE.md по использованию Material темы и нашего UI Kit
А еще он съел все лимиты личного Claude 💀
Уже после пошел искать информацию, и наткнулся на обсуждение SpecKit creates the illusion of work, generating a bunch of text. Очень попало в мои впечатления.
😁1
Preview Wrappers
В Compose 1.11 добавили Preview Wrappers
Раньше, если хотел показать компонент с темой в превью — писал обёртку руками каждый раз. Мелочь, но это быстро превращается в шаблонный мусор.
Теперь можно сделать один раз:
И применять через аннотацию:
Работает с @Preview и Multi Preview
Кстати, в официальном блоге Google интерфейс и аннотация перепутаны местами — там
Но есть нюанс, о нём — дальше 👇
В Compose 1.11 добавили Preview Wrappers
Раньше, если хотел показать компонент с темой в превью — писал обёртку руками каждый раз. Мелочь, но это быстро превращается в шаблонный мусор.
Теперь можно сделать один раз:
class ThemeWrapper : PreviewWrapperProvider {
@Composable
override fun Wrap(content: @Composable (() -> Unit)) {
YourAppTheme { content() }
}
}
И применять через аннотацию:
@PreviewWrapper(ThemeWrapper::class)
@Preview
@Composable
private fun ButtonPreview() {
Button(onClick = {}) { Text("Demo") }
}
Работает с @Preview и Multi Preview
Кстати, в официальном блоге Google интерфейс и аннотация перепутаны местами — там
PreviewWrapper как интерфейс и @PreviewWrapperProvider как аннотация. Судя по реальному API — всё наоборот.Но есть нюанс, о нём — дальше 👇
❤🔥2
Продолжение про Preview Wrappers в Compose 1.11
Фича удобная, но сразу возник вопрос: а что если тем несколько? У нас в проекте именно так
Допустим, есть две темы или больше. Хочется одной аннотацией получить превью сразу во всех. Но
Решил завести issue с предложением это исправить. Чтобы можно было бы написать вот так:
Одна аннотация — превью сразу во всех темах.
Если тема актуальна — ставьте плюсики на issue: https://issuetracker.google.com/issues/505643423
Делитесь, у кого есть интересные кейсы использования Preview?
Фича удобная, но сразу возник вопрос: а что если тем несколько? У нас в проекте именно так
Допустим, есть две темы или больше. Хочется одной аннотацией получить превью сразу во всех. Но
@PreviewWrapper сейчас не повторяемый — повесить его дважды не выйдет. И на аннотационные классы тоже не повесишь, то есть нормальный MultiPreview с враппером не сделаешь.Решил завести issue с предложением это исправить. Чтобы можно было бы написать вот так:
@Preview
@PreviewWrapper(ThemeOneWrapper::class)
@PreviewWrapper(ThemeTwoWrapper::class)
annotation class MultiThemePreview
@MultiThemePreview
@Composable
private fun MyContent() {
Text("Content")
}
Одна аннотация — превью сразу во всех темах.
Если тема актуальна — ставьте плюсики на issue: https://issuetracker.google.com/issues/505643423
Делитесь, у кого есть интересные кейсы использования Preview?
This media is not supported in your browser
VIEW IN TELEGRAM
Jazari One
Запустились в UK в июле 2025. Прошло меньше года — и мы уже делаем второе приложение. Глобальное. На стейблкоинах. 🚀
Казалось бы, повод гордиться.
Но первое, что сделал новый продукт — это вежливо предъявил нам всё, на что мы закрывали глаза в первом.
Модуляризация, которая "не нужна в стартапе". Дизайн-система, которая "не нужна на старте". Инверсия зависимостей, которую "и так понятно где". Архитектурные решения с пометкой "пока сойдёт" — они никуда не делись, просто ждали момента.
Запустились в UK в июле 2025. Прошло меньше года — и мы уже делаем второе приложение. Глобальное. На стейблкоинах. 🚀
Казалось бы, повод гордиться.
Но первое, что сделал новый продукт — это вежливо предъявил нам всё, на что мы закрывали глаза в первом.
Модуляризация, которая "не нужна в стартапе". Дизайн-система, которая "не нужна на старте". Инверсия зависимостей, которую "и так понятно где". Архитектурные решения с пометкой "пока сойдёт" — они никуда не делись, просто ждали момента.
👍2💯2