Stitch: от вайб-кодинга к вайб-дизайну и обратно

Продолжаю разбирать инструменты, которые представили на Google I/O. Как я и говорил, было достаточно вещей, которые компания публично не показала, а просто закинула в labs. И одним из таких сервисов является Stitch!

Stitch - это AI для разработки дизайнов интерфейсов: веб и мобильных. И это один из лучших и самых полезных AI, что я использовал за последнее время! Если вы дизайнер - он сделает вам макеты, которые смело можно брать за основу для своего дизайна, если вы продакт - вам больше не нужен дизайнер для создания прототипов (если нет цели протестить UX), если вы вайбкодите - этот тул избавит вас от головной боли с версткой и ЧАСОВ, потраченных на всякие фиксы интерфейса.

У меня очень часто спрашивают, как я в своих прототипах умудряюсь сделать красивый UI. Обычно я использую референсы и готовые макеты. Stitch может использоваться в качестве обоих! Вы генерируете дизайн и далее - можете экспортировать его либо в виде готового кода либо в Figma, подключив MCP.

Есть два режима: стандартный (экспортируется в фигму, делается с помощью Gemini Flash) и экспериментальный (только экспорт кода, использует Gemini Pro). В обоих режимах есть незначительные недостатки в плане того, что могут отсутствовать в дизайне какие-то элементы, но это достаточно легко фиксится.

Для себя я нашел, что стандартный режим более оптимален для того, чтобы сделать “рыбу”, а экспериментальный можно использовать в качестве референсов. В результате получается очень приятный дизайн. Есть свои особенности того, как лучше это все дело промптить, потому что одной из проблем, с которой я столкнулся было то, что в один момент ты ловишь модель на том, что продолжая дизайнить в одном стиле, она начинает от дизайна отклоняться. Это очень похоже на тот кейс, когда ChatGPT просят перерисовать картинку без изменений, но в какой-то момент мы видим, что картинка вообще другая :D

Поэтому, я бы рекомендовал сразу рисовать 6 экранов (это ограничение сервиса) и редактировать их одновременно, для консистентности. Есть еще куча разных хаков, но это, я бы сказал, что основа.

Гайд по промптингу здесь. Не сказал бы, что особо полезный. В целом промптинг этой штуковины похож на промптинг Bolt.new со своими особенностями. Но как стартовая точка - неплохо. Мы все ближе становится к тому моменту, когда компанию можно будет делать в соло, о чем говорил Дарио Амодеи во время презентации Anthropic.

А на скринах вы можете увидеть мою новую LMS, дизайн которой я запилил в Stitch и уже реализовал в коде. Нужно доделать еще несколько экранов и следующие потоки тренингов по AI уже будут проходить в ней. Внутри будут всякие AI-фичи, возможность сдавать практические задания и много чего еще. Stich уже точно войдет в набор инструментов, которые будут в обоих тренингах, даже в текущих потоках.

#инструменты