ABRAMOVA | MOBILE APPS | UX/UI DESIGN

Что такое skills. ⠀ Если вы уже работаете с Claude, то, скорее всего, знаете, о чём речь. Если пока нет, объясню супер просто. ⠀ Skill можно представить как сохранённую инструкцию для Claude. Она объясняет ему, как выполнять конкретную задачу: как провести UX-анализ, проверить интерфейс или улучшить UI. ⠀ Почему это удобно: вам не нужно каждый раз заново писать промпт и объяснять, что делать вот так, потом вот так, а в конце обязательно проверить ещё вот это. ⠀ Один раз сохраняете нужный сценарий, а Claude подключает его, когда он подходит к задаче. ⠀ Причём skills можно не только скачивать, но и создавать самостоятельно. ⠀ Для создания скила есть отдельный скил 🤦🏻‍♀️ ⠀ Находятся они в разделе Customize → Skills. Там есть готовая библиотека, плюс skills можно искать в сети и загружать отдельно. ⠀ Но тут есть пара важных моментов. ⠀ Во-первых, skills не панацея. Claude и без них довольно неплохо справляется с большинством задач. ⠀ Во-вторых, не нужно устанавливать вообще всё, что вы нашли. Иначе в какой-то момент Claude уже может быть сложнее понять, какой именно skill использовать. И ресурса он будет больше тратить. ⠀ Лучше подключать их точечно. Например, отдельный skill для UX-анализа, проверки интерфейса или улучшения UI. ⠀ То есть под конкретную повторяющуюся задачу, а не просто потому, что skill выглядит прикольно. ⠀ И ещё важно проверять то, что вы скачиваете из сторонних источников. ⠀ Перед установкой можно отдать файлы Claude и попросить разобрать, что находится внутри, какие инструкции и скрипты запускаются и нет ли там чего-то подозрительного. ⠀ Короче, такие штуки, как skills, projects и MD-файлы, действительно сильно обогащают работу с Claude. Но начинать знакомство с ним сразу со всего этого вообще не обязательно. ⠀ Сначала можно просто ставить задачи и смотреть, как он работает. А уже потом сохранять в skills те сценарии, которые вы постоянно повторяете.

А мы завершили второй поток интенсива по Claude. И я бесконечно радуюсь как он прошел, какую программу получилось сделать, радуюсь успеху методологии и результатам. У нас крутые метрики и крутые кейсы участников. Две недели, вроде немного, а удалось показать самые важные и ценные для дизайнера кейсы взаимодействия с Claude. Как написала одна из участниц, грущу, что нет третьей недели :) Создание лендингов, своих сервисов, телеграм боты, работа над продуктовыми задачами, добавление анимации, работа с текстами, создание user flow, деплой на тильду, крутые скиллы и промпты и многое другое. Короткие уроки, в каждом понятная практика. Удобная платформа, которую я создала сама, с тем же Claude. Ну и осознание, что плюс 20 человек теперь могут активно использовать Claude, применять в работе, закрывать личные задачи, реализовывать свои идеи, такое осознание очень мотивирует продолжать его делать.

TENTEN Промокод на скидку в 20%, действует 10 и 11 числа. Применить можно к программам: Интенсив по Claude, набор на 25 октября. Курс Дизайнер мобильных приложений, старт после оплаты.

Ну что, интенсив по Claude подходит к концу. Что мы делали: Подключали Claude к Figma, работали с разными skills, использовали design.md, разбирались с промптами. Очень многие участники за это время сделали свои сайты-портфолио. Отдельно разбирали, как применять Claude в продуктовых задачах и какие skills здесь могут пригодиться. Например, как провести UX-анализ, собрать отчёт, сделать первые прототипы и использовать Claude в существующей дизайн-системе. Дополнительно изучали, как создать собственного TG-бота, небольшой сервис, собрать дизайн презентации, сделать микроанимации и много других классных штук. При этом большинство уроков короткие, примерно по 10 минут. Изначально следующий интенсив мы планировали только на конец ноября. Но многие стали спрашивать, когда можно будет присоединиться, поэтому решили не ждать так долго. Следующий поток стартует уже 25 октября. Так что зову вас всех. А завтра, кстати, 10.10, выложу промокод на хорошую скидку, сможете применить к интенсиву.

Если не ошибаюсь, я ещё не рассказывала о том, что интенсив по Claude уже проходит на обучающей платформе, которую я сделала сама. Ну, конечно, с помощью нейросетей. Мы в школе долгое время пользовались и до сих пор пользуемся одной довольно известной обучающей платформой. У неё огромное количество функций, очень непонятный интерфейс и куча UX-ошибок. Такая тяжёлая большая штука, чем-то напоминающая мне некоторые продукты Adobe. Но, с другой стороны, альтернативы ей я особо не видела. Поэтому сделать свою, очень лёгкую и максимально простую версию было супер круто. Что именно получилось? Студенты видят открытые для них курсы, могут переходить на страницы уроков, смотреть видео, читать тексты и задания, скачивать материалы и оставлять комментарии. У меня со своей стороны есть админка. Там я настраиваю программу, добавляю уроки, тексты и ссылки на видео, прикрепляю материалы и выбираю даты, когда всё это должно открыться. Короче, для первого старта этого функционала вполне достаточно. Больше всего мне нравится, что теперь я могу быстро реализовывать идеи, которых у меня, как обычно, довольно много. Помимо платформы, например, я сделала себе мобильное приложение для отслеживания расходов и периодически собираю небольшие HTML-ки под разные задачи. На самом деле барьер сейчас очень сильно снизился. И нам, дизайнерам, в каком-то смысле даже проще, потому что у нас уже есть понимание, как сделать продукт удобным и визуально красивым. А техническую начинку и код может собрать нейросеть. По крайней мере, в той минимальной версии, которой часто вполне хватает для старта.

Claude умеет делать микроанимации. Причём очень прикольно. Раньше, если нам нужно было анимировать кнопку, какую-нибудь звёздочку или реакцию, мы использовали Principle. Для чего-то посложнее открывали Adobe After Effects. Сейчас всё это можно попробовать сильно быстрее. Показываете Claude экран, даёте ссылку на Figma и объясняете, какой элемент хотите анимировать и что примерно с ним должно происходить. Если есть референс, вообще отлично, можно сразу приложить и его. Причём для первой попытки точно не нужно усложнять себе жизнь и искать какой-то суперправильный промпт. Достаточно обычными словами объяснить, что вы хотите получить. Буквально вчера участник интенсива задал вопрос про микроанимашки. Начали обсуждать, насколько быстро сейчас можно всё это собрать, и я снова подумала, что это довольно сильно меняет сам процесс работы дизайнера. Короче, ещё один вполне рабочий микрокейс для клода: показали экран, попросили варианты, выбрали нужный, передали в разработку.

Мой сын в этом году временно перешёл на онлайн-обучение. Учится он сейчас в одной очень известной школе, и сегодня мне надо было оплатить там допуслугу. ⠀ Вроде простая задача. Услуга стоит 6 тысяч, но в интерфейсе почему-то 60. Потом стало ещё больше. Потом меньше. Потом у нас вообще поменялась программа, а я всё пыталась понять: где выбрать нужную услугу, что сейчас выбрано и сколько в итоге я должна заплатить? ⠀ Причём тут ещё вопрос про деньги. Хочется всё проверить, прежде чем нажать кнопку, потому что разница между 6 и 60 тысячами всё-таки довольно заметная. ⠀ Короче, в какой-то момент я уже начала думать, что сама что-то делаю не так. ⠀ Многие из вас читали книгу Нормана «Дизайн привычных вещей». Там как раз есть мысль: когда продукт сделан плохо, человек не просто раздражается. Он довольно быстро начинает искать ошибку и проблему в себе, хотя на самом деле проблема не в нём, а в системе. ⠀ Я работаю с интерфейсами больше десяти лет и эту мысль знаю практически наизусть. Но в моменте знание не спасло и я точно так же сидела и пыталась понять, в каком месте ошиблась. Хотя ошиблась не я. ⠀ Ошибка в интерфейсе не остаётся где-то внутри цифрового продукта. Растерянность, раздражение и ощущение, что ты не можешь справиться с простой задачей, человек забирает с собой в реальную жизнь. ⠀ Поэтому, когда мы проектируем интерфейсы, мы влияем не только на то, решит ли пользователь свою задачу. Мы ещё и довольно сильно влияем на то, каким он выйдет из этого взаимодействия. Спокойно закроет сайт, сервис или приложение или будет сидеть и думать, что с ним что-то не так. ⠀ З. Забота о пользователе. Не только помочь ему решить задачу, но и не заставить в процессе думать, что проблема в нём.

Что такое design.md и почему он так важен при работе с Claude и Codex ⠀ Если объяснять совсем простыми словами, design.md это файл, в котором описан визуальный стиль проекта. ⠀ Представьте обычный Style Guide в Figma: цвета, шрифты, отступы, скругления, принципы работы с компонентами и другие правила. ⠀ Только в design.md всё это описано текстом, понятным для AI. Когда такого файла нет, Claude или Codex опираются на собственное представление о том, каким должен быть хороший дизайн. Иногда получается относительно не плохо. Но чаще результат выглядит довольно типовым, а стиль может меняться от экрана к экрану. ⠀ Когда мы добавляем design.md и просим AI использовать его как основу, всё становится намного предсказуемее. Неважно, что нужно собрать: экран приложения, лендинг, карточки или целый многостраничный сайт. AI будет опираться на конкретные визуальные правила, а не каждый раз придумывать их заново. И это, конечно, очень удобно. ⠀ design.md можно скачать готовым или создать самостоятельно. Причём создавать его можно в разных ситуациях. Например, вы начали делать дизайн вместе с Claude. Через какое-то время вам нравится то, что получается. Тогда можно попросить его собрать все сложившиеся правила в design.md, чтобы не потерять этот стиль и потом использовать его в других задачах. ⠀ Второй вариант: дать Claude или Codex готовые ориентиры. Это могут быть референсы, ссылка на сайт или уже существующий продукт. Например, у вас есть многостраничный сайт, а нужно собрать лендинг в том же стиле. Или есть презентация, на основе которой нужно сделать сайт. ⠀ AI анализирует эти материалы и описывает визуальную систему в design.md. После этого файл можно использовать как основу для новых экранов и форматов. ⠀ При этом сам по себе design.md не снимает с нас задачу проверять результат. Важно посмотреть, насколько точно AI понял исходный стиль и какие правила записал. Но один раз нормально собранный файл сильно упрощает дальнейшую работу. ⠀ Получается, design.md помогает не объяснять визуальный стиль заново в каждом промпте, не надеяться на вкус нейросети и сохранять единый дизайн во всём проекте. ⠀ Кароче оч клевая штука.

Завтра стартует интенсив по Claude, и у нас осталось всего два места. За две недели вы разберётесь, как встроить Claude в реальную работу дизайнера. Уже на первых уроках создадите работающий лендинг в Claude Code. Дальше научитесь передавать ему визуальные правила проекта через design.md, подключите Figma и будете работать с компонентами, токенами и стилями. Затем добавите изображения и анимацию, а готовый лендинг разместите на хостинге, чтобы он реально работал. На второй неделе мы перейдём к продуктовым задачам. Вы попробуете собирать мобильные экраны, проектировать пользовательские сценарии, анализировать интервью и создавать отчёты, готовить спецификации для разработчиков. Плюс обязательно посмотрите, как с помощью Claude собирать собственные небольшие сервисы, которые ускоряют работу или закрывают какие-то личные задачи. Самое главное, что в результате вы будете понимать, какие задачи можно отдавать Claude, как передавать ему контекст, контролировать результат и использовать всё это в своей ежедневной работе. И точно увидите, насколько меняется дизайн-процесс, насколько быстрее можно работать и сколько времени высвобождается для самого проектирования. Можно будет делать работающие прототипы и собственные проекты, быстрее проверять идеи и передавать AI часть работы, которую уже необязательно делать руками. Стартуем завтра. Осталось два места. Подробнее тут p.s. интенсив будет проходить на lms, которую я создала с помощью claude code и codex.

Что будет на этом потоке интенсива по Claude? В этот раз максимум дизайна и практики. Уже с первых уроков внедряем Claude Code и связку с Figma. Разберем, как получать от нейросети не шаблонный AI-стиль, а именно то, что нужно вам. На практике первой недели создаем свой лендинг. Нейросеть сама соберет токены, стили, компоненты в Figma и сделает дизайн всего лендинга по стайл-гайду. Вторая неделя продуктовая. Практикуемся на мобилках и разбираем рабочие кейсы: как Claude помогает с анализом данных, созданием схем, поиском джобов и многим другим. В бонусах: сборка Telegram-бота, создание своих сервисов и другие крутые фишки. Короче, будет очень мощно. Нет повода не идти :) Стартуем уже в это воскресенье, 27-го! Записаться через сайт P.S. Дата следующего потока под вопросом, а с октября повышаем цены в школе, в том числе и на интенсив.

Я тут читаю свежий AI in Design Report 2026. В нём опросили 906 дизайнеров из 60+ стран, и там много конкретных цифр о том, как AI уже используется в работе. ⠀ Собрала в карточках основные данные и несколько примеров: прототипы, исследования, документация, дизайн-системы, код и работа с командами. ⠀ Источники: https://stateofaidesign.com/chapters/tools https://stateofaidesign.com/chapters/teams

Сегодня проводила очередной эксперимент с Claude Code. Изначально задача была такая: взять готовые экраны в Figma и собрать из них интерактивный прототип. Это может пригодиться, когда мы разрабатываем концепцию приложения или сайта и хотим показать её клиенту или команде. Не просто открыть несколько экранов в Figma, а дать работающую версию, в которой можно нажимать кнопки, переходить между экранами и проверять весь сценарий. Но потом я решила немного расширить задачу. У меня был только один готовый экран. Я дала Claude Code ссылку на Figma и попросила сначала дорисовать остальные экраны для прототипа. При этом я вообще не конкретизировала, какие именно экраны нужны. Я объяснила задачу целиком: в результате мне нужен интерактивный прототип, поэтому сначала надо продумать и нарисовать недостающие экраны. В целом Claude довольно прикольно продолжил существующий стиль. Но сегодня у меня было ощущение, что он работает слегка более тупо, простите, чем обычно. Были проблемы с отступами. Я не прописывала их отдельно в запросе, но мне бы хотелось, чтобы такие вещи он всё-таки понимал сам. Ещё была большая проблема с таббаром. Причём с ним не справлялся ни Claude Code, ни Figma Agent. В какой-то момент мне уже стало смешно. Про это, наверное, сделаю отдельный рилс. Но в итоге Claude справился и когда все экраны были готовы и согласованы, я попросила его собрать интерактивный прототип. Сейчас он открывается у меня локально как обычная HTML-страница. Внутри полностью работает основной сценарий бронирования отеля и переходы по главным экранам таббара. Получается ещё один нормальный рабочий кейс для дизайнера. Можно собрать концепцию, превратить её в работающий прототип, показать клиенту или команде и использовать для тестирования. И не связывать все переходы вручную. Но здесь всё равно очень важно правильно поставить задачу и видеть, где AI ошибается. Ошибки он совершает, поэтому всё, что он делает, мы держим под контролем и слепо ему не доверяем. На мой взгляд, это кейс, который уже точно можно и нужно использовать. И его мы тоже будем разбирать на интенсиве по Claude для дизайнеров в ШДМА. Стартуем уже в это воскресенье, 27 сентября. Программа и запись

Капибары выходного дня :) Съездили в милое кафе, нагладили капибар, посмеялись над сурикатами и познакомились с бамбуковой крысой. Интересный факт: Их массивные передние зубы (резцы) растут на протяжении всей жизни. Чтобы они не вырастали до опасных размеров, животным приходится постоянно их стачивать. Именно зубами, а не лапами, они прогрызают твердую почву и роют свои длинные подземные туннели в поисках корней бамбука.

Записала бесплатный урок про связку Claude Code и Figma. Внутри показываю весь процесс на одной конкретной задаче: даю Claude готовый экран, прошу проанализировать недостающие состояния, а потом он идёт в Figma и рисует их прямо в файле. Видео короткое, 10 минут. Смотреть бесплатно на Kinescope ___ 27 сентября стартует интенсив по работе с Claude. Там будем подробнее разбираться со связкой Claude Code и Figma, делать собственные сайты и сервисы с помощью AI. Программа и подробности здесь

С чего начать, если вы боитесь AI? Я собрала большущий гайд для дизайнеров. Внутри есть личное интро, мои мысли о том, как меняется профессия, простое объяснение разных инструментов и конкретные примеры того, что с их помощью можно делать. Собственно, открывайте, изучайте и задавайте вопросы, если они появятся: https://telegra.ph/S-chego-nachat-esli-vy-boites-AI-09-12

Хорошо, когда нет внутреннего запрета на делиться личным. Могу отправить вам шум тропического дождя :)

Очень хочется поделиться тем, что сейчас происходит, потому что я снова немного в шоке от искусственного интеллекта. ⠀ Прямо сейчас я делаю собственную платформу с квизами и видеоуроками для дизайнеров. Там уже есть часть материалов и админка, а дальше я хочу всё это развивать. Но интересно даже не это. ⠀ Саму платформу я создаю вместе с Claude Code. Я объясняю, что нужно сделать, проверяю результат, даю обратную связь, и мы переходим к следующей задаче. ⠀ Но сегодня меня особенно впечатлило то, что я работала не только с Claude Code: разные нейросети одновременно выполняли для меня совершенно разные задачи. ⠀ Пока Claude Code занимался платформой, Codex по моему запросу открыл браузер и начал наполнять каталог видео. Он сам находил нужную запись, копировал ссылку, переходил в админку, вводил название, добавлял ссылку, сохранял и брался за следующее видео. И это magic. ⠀ До этого ChatGPT создавал мне презентацию, пока я занималась платформой. ⠀ А сейчас Claude Code собирает отдельный файл со спецификацией визуального стиля, который я использовала в проекте. ⠀ Потом я передам этот файл в другой чат, откуда Claude Code пойдёт в Figma и начнёт собирать первый UI-kit с компонентами, токенами и другими важными штуками. ⠀ То есть искусственный интеллект одновременно пишет для меня код, наполняет админку, работает с браузером, создаёт презентации, помогает переносить дизайн и работает в Figma. ⠀ А моя задача всё больше про то, как развивать этот продукт, давать обратную связь и придумывать, как ещё сильнее ускорить весь процесс. ⠀ Какой-то дивный новый мир. —- И, кажется, здесь будет уместно сказать, что уже через пару недель у нас стартует интенсив по Claude Code. (скорее всего добавлю инфу и про Codex). И мне есть чем поделиться :)

Утро сегодня было таким. 25 минут от дома, пустые пляжи и сильный отлив. Встретили ящерицу и многоножку, выпили вкусный зеленый чай, попытались поесть в модной кафешке, куда больше на поедем. Прикол жизни в часовом поясе +4Мск в том, что утром все еще спят в Москве и можно провести его как угодно, не думая о работе.

Я завидую своему неврологу. Лечение мигрени у меня ведет оч крутой доктор. Но как меня предупреждала коллега, он немного не типичный. Он ведет свой блог в тг и другой соц сети. При чем помимо проф. контента, активно постит фотки своих котов и собак, прогулки по городу, отчеты с отпуска и прочее прочее. И блин, у него очень фул запись. И кажется, что никого не смущает такой обьем личного контента. Возможно, даже наоборот. Так вот, я завидую ему. Потому что где-то в глубине души, да чего там, уже на поверхности, я тоже не хочу ограничиваться только полезняком на тему дизайна. Это как минимум тяжело, постоянно доставать из себя только мысли про работу. Но за годы ведения этого канала, он оброс в моем сознании рамками, внутрь которых ничего личного не помещается. К чему я это все. Как вы относитесь к более разнообразному контенту в подобных каналах? Я знаю, что кто-то оч любит личное, а кто-то сильно против. Как вы? Вдруг ваши ответы помогут мне чуть сдвинуть эти рамки.

Как я создавала MVP платформы квизов: история запуска без опыта в коде 1. Замысел и продуктовые границы Всё началось с идеи создать обучающий инструмент для студентов школы. Хотелось сделать короткие викторины для проверки знаний после пройденных модулей. Главный продуктовый принцип: в первой версии (MVP) никаких регистраций, аккаунтов и логинов. И вообще все супер просто. Надо было быстро это реализовать, чтобы студенты могли пройти тест за короткое время прямо в браузере. В следующих обновлениях, скорее всего, появится и регистрация, и сохранение индивидуальной статистики, и не только квизы, но это уже тема для другого поста. При этом мне и кураторам требовалась аналитика прохождений хотя бы для того, чтобы видеть статистику по каждому квизу. Решение нашли в архитектурном разделении: система сохраняет обезличенную статистику по анонимному ID устройства, не собирая при этом персональные данные. 2. Урок взаимодействия с ИИ: что происходит без чёткого ТЗ по стилю Первая версия интерфейса показала главный подвох работы с нейросетями: если не задать искусственному интеллекту точные рамки, он придумает всё сам. - Ошибка: Задача на вёрстку первого прототипа была отдана ИИ без конкретных визуальных ориентиров и правил бренда. - Что сделал ИИ: Claude сгенерировал интерфейс в метафоре проверенной тетради, добавив бумажный фон, чернильные элементы и пометки «учительской» красной ручкой. - Пивот: Вживую стало понятно, что тетрадный стиль выглядит чужеродно и диссонирует с брендом школы. Прототип пришлось полностью пересобирать под строгую монохромную эстетику. - Урок: Переделывать сгенерированный код всегда дольше, чем заранее задать нейросети визуальные ограничения. 3. Логические подводные камни и человеческий фактор Даже когда код пишет нейросеть, качество продукта остается на стороне человека. Здесь тоже не обошлось без курьёзов. - Паттерн «второй вариант всегда правильный»: При сборке материалов выяснилось, что в исходных списках правильный ответ почти всегда стоял на втором месте. ИИ перенес контент как есть, не догадавшись перемешать варианты. В итоге тесты можно было угадывать по шаблону. Пришлось переписать промпты и автоматически перемешать варианты во всех вопросах. - Эволюция UX: По мере тестирования интерфейс постепенно очищался. Например, экран результатов из длинного списка превратили в компактный аккордеон, где правильные ответы свёрнуты, а ошибки сразу видны взглядом. 4. Бэкенд, деплой и результат Когда клиентская часть была уже более-менее отточена для первичной версии, пришло время бэкенда. Я человек, у которого совершенно нет опыта программирования, тем более в части бэкенда и работы с базами данных. Но при этом всё оказалось достаточно легко. С помощью Claude Code завела простой бэкенд на обычном хостинге, он дал мне супер понятную инструкцию, настроила связку с базой данных и закрыла паролем компактную админку для себя и кураторов. За время разработки проект прошёл 26+ итераций и превратился в рабочий опубликованный сервис с 8 тематическими квизами по UX/UI. Главный итог: Чтобы делать работающие цифровые сервисы, сегодня не обязательно быть разработчиком. Главное: быть внимательным автором продукта, вовремя замечать логические баги, направлять ИИ и не бояться исправлять неудачные гипотезы.