Forwarded from kyrillic
Новые Requests for Startups от YC! Там много интересного, но я хочу остановиться на одном направлении:
AI-Native Agencies, это когда вместо того, чтобы пилить AI продукт, фаундер сам использует AI и продает результат эффетивности от AI. Короче обычное агентство, где в процессах упор на AI.
1️⃣ YC заявляет, что у таких агентств может быть маржинальность софта (80% вместо 20%). Соответственно такой бизнес может быть венчурным.
Наверняка можно найти такие услуги, которые получится максимально заавтоматизировать с AI. Но задача непростая конечно!
2️⃣ Предлагаю подумать над таким вопросом: если вокруг нас так много AI энтузиастов, рассказывающих о невероятной эффективности AI для бизнеса, то почему нет невероятно эффективных агентств от энтузиастов? Хотя бы небольших аутсорс-студий, где все процессы с AI, чтобы был 10x.
Считаю, что такое получится уже сейчас, но пока примеров не видел.
3️⃣ У традиционных небольших аутсорс-студий есть особенность: почти всегда ее успех определяет один человек (даже если основателей больше). У дизайн-агентств это зачастую арт/креативный директор, который курирует каждый проект. Если он талантлив, то даже плохие дизайнеры выдают сносный результат. А если нет, то уровень дизайнеров неважен - будет смазан.
4️⃣ Так вот, один такой человек может вооружиться AI продуктами и долететь до венчура. Пока риторику "за меня все делают AI агенты" мы слышим в основном от кринжовых линкедин- и твиттер-инфлюенсеров. Которых пересказывают мечтатели, блоггеры и журналисты.
А что нас отделяет от такой 10x реальности у AI-Native Agencies?
5️⃣ Кстати YC приводит пример, о котором я писал как об очень эффективном (сам так делал): показывать потенциальному клиенту часть работы для него ДО заключения контракта.
Это работает всегда и у всех, но довольно трудозатратно. С AI это можно делать значительно быстрее.
6️⃣ В общем ждем появления AI-Native Agencies от вас, AI энтузиасты!
@kyrillic
AI-Native Agencies, это когда вместо того, чтобы пилить AI продукт, фаундер сам использует AI и продает результат эффетивности от AI. Короче обычное агентство, где в процессах упор на AI.
1️⃣ YC заявляет, что у таких агентств может быть маржинальность софта (80% вместо 20%). Соответственно такой бизнес может быть венчурным.
Наверняка можно найти такие услуги, которые получится максимально заавтоматизировать с AI. Но задача непростая конечно!
2️⃣ Предлагаю подумать над таким вопросом: если вокруг нас так много AI энтузиастов, рассказывающих о невероятной эффективности AI для бизнеса, то почему нет невероятно эффективных агентств от энтузиастов? Хотя бы небольших аутсорс-студий, где все процессы с AI, чтобы был 10x.
Считаю, что такое получится уже сейчас, но пока примеров не видел.
3️⃣ У традиционных небольших аутсорс-студий есть особенность: почти всегда ее успех определяет один человек (даже если основателей больше). У дизайн-агентств это зачастую арт/креативный директор, который курирует каждый проект. Если он талантлив, то даже плохие дизайнеры выдают сносный результат. А если нет, то уровень дизайнеров неважен - будет смазан.
4️⃣ Так вот, один такой человек может вооружиться AI продуктами и долететь до венчура. Пока риторику "за меня все делают AI агенты" мы слышим в основном от кринжовых линкедин- и твиттер-инфлюенсеров. Которых пересказывают мечтатели, блоггеры и журналисты.
А что нас отделяет от такой 10x реальности у AI-Native Agencies?
5️⃣ Кстати YC приводит пример, о котором я писал как об очень эффективном (сам так делал): показывать потенциальному клиенту часть работы для него ДО заключения контракта.
Это работает всегда и у всех, но довольно трудозатратно. С AI это можно делать значительно быстрее.
6️⃣ В общем ждем появления AI-Native Agencies от вас, AI энтузиасты!
@kyrillic
Forwarded from Дайджест продуктового дизайна
Дайджест продуктового дизайна за январь 2026. CES 2026, федеративные дизайн-системы и слоты, интервью с пользователями через ИИ, управление ИИ-агентами, agent journey map, алгоритмический дизайн и десятки других свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
Напомню, что его можно получать разными способами:
— vc.ru
— Дизайнерс
— ВКонтакте
— RSS
Напомню, что его можно получать разными способами:
— vc.ru
— Дизайнерс
— ВКонтакте
— RSS
Forwarded from Журналус дейли
Виктор Йокко объяснил, как проектировать агентный ИИ так, чтобы он был не самовольной автоматикой, а управляемым партнёром. Он предлагает рассматривать проектирование таких систем как выстраивание отношений, где доверие формируется через прозрачность, контроль и возможность отката.
В статье Виктор разобрал шесть конкретных UX-паттернов — от предпросмотра намерений и регулировки автономности до логов действий и работы с неопределённостью. Для каждого паттерна указаны метрики успеха и советы по внедрению.
Первая часть о теоретических принципах проектирования агентов.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1
Forwarded from Дизайнер, привет
Сегодня игры конкурируют не только с играми. Они конкурируют с TikTok, Netflix, YouTube, соцсетями и любым другим способом забрать внимание на вечер. В такой среде удобство интерфейса не дает победу само по себе, но сильно влияет на то, останется человек в продукте или уйдет.
Александр Шпак, старший UX/UI-дизайнер в Ubisoft, разобрал эвристики удобства для игр и собрал практичный набор из 8 принципов на базе Нильсена и опыта индустрии. С примерами из God of War, Far Cry, Dead Space, Cuphead, Resident Evil и других.
Внутри:
– Почему конкуренция за внимание сейчас важнее жанровой конкуренции;
– Как видимость состояния системы влияет на контроль игрока;
– Почему знакомые паттерны ускоряют обучение и снижают трение;
– Как снижать нагрузку на память через узнавание, а не вспоминание;
– Как предотвращать ошибки и делать восстановление после них быстрее;
– Как настраивать доступность и гибкость без перегруза опциями;
– Почему минимализм в HUD помогает удерживать фокус;
– Как делать обучение и справку полезными в реальном игровом контексте.
———
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
Forwarded from Дайджест продуктового дизайна
Свежее об алгоритмическом дизайне. Фокус на фокусном, чтобы не размазывать на два выпуска:
Взаимодействие с такими инструментами
1. NN/g: Техническая грамотность пользователей при использовании ИИ-инструментов. Они выделяют 4 группы по опытности и осознанности.
2. NN/g: Исследование поискового поведения пользователей в ИИ-чат-ботах. Когда они доверяют их результатам, а когда идут в классические поисковики.
Инструменты дизайна
1. Google Stitch: Обновился. Теперь это привычный бесконечный артборд, а также дизайн-система через DESIGN.MD. Генерировать можно по текстовому запросу или картинке.
2. ai.to.design: Плагин для Figma позволяет генерировать дизайн по текстовому запросу. Можно выбрать одну из популярных моделей. Макеты можно докручивать самостоятельно там же в Figma.
3. Reve: Инструмент алгоритмического дизайна позволяет создавать свои эффекты для обработки графики. В статике и анимации, с управлением параметрами.
4. Krea Realtime Edit: Появилось редактирование и генерация изображений в реальном времени. Можно наброском показать, что нужно добавить — и оно моментально появляется.
5. Google Nano Banana 2: Вышла новая версия модели. Повысили точность всего — сохранения вида персонажей и объектов, текста и т.п.
6. Adobe Firefly: Можно тренировать на своём собственном стиле.
7. Raelume: Нодовый инструмент алгоритмического дизайна, который объединяет много ИИ-моделей и способов работы с ними.
8. YouArt: Ещё один нодовый инструмент алгоритмического дизайна.
9. Penpot: Запустили свой MCP-сервер. Обзор того, что он умеет.
10. Google Pomelli: Может собрать фотосессию на основе фото товара.
11. Figma: Интегрировалась с Claude Code. Можно превратить сгенерированный код в макеты сценария и наоборот.
12. Variant: Бесконечная лента примеров дизайна для вдохновения, которые генерируются ИИ по текстовому запросу.
13. Claude: Научился создавать диаграммы и графики прямо внутри чата.
14. Sketch: Примеры того, что можно делать благодаря MCP-серверу.
Дизайн таких инструментов
1. Victor Yocco: Паттерны взаимодействия с ИИ-агентами на основе своей серии предыдущих статей. Как они должны действовать перед, во время и после выполнения задачи пользователя.
2. Ishan Korde: Рассуждает о динамических интерфейсах и разных способах ИИ помочь строить их.
Роль дизайнера и специалиста вообще
1. Luke Wroblewski: Размышляет, какая роль в итоге будет у пользователя при работе с ИИ-продуктами. Он показывает, как она менялась на примере разработки.
Видео
1. Google Flow: Интерфейс генератора изображений и видео обновили, добавили больше возможностей редактирования.
Разработка
1. Addy Osmani: Разница между вайб-кодером и инженером агентов (это новый термин от Andrej Karpathy). Первое изначально описывало быстрые и узкоспециализированные наброски, второе — полноценный рабочий цикл.
2. Hardik Pandya: Оптимизировал код своего сайта с помощью Claude Code (производительность, accessibility, SEO, качество кода). Он показал пошаговый текстовый запрос для этого, который в том числе делает скриншоты до и после изменений — убедиться, что дизайн не развалился.
3. Cursor 2.5: Магазин плагинов и суб-агенты, которые могут делать мелкие задачи асинхронно.
4. Rork: ИИ-генератор мобильных приложений по текстовому запросу или скриншотам.
Управление продуктами
1. Boris Tane: Типичный цикл разработки программ. Как он радикально меняется в эпоху ИИ-агентов и какая роль в нём у человека.
ИИ-агенты
1. OpenClaw: Автономные ИИ-агенты на базе популярных ИИ-моделей. С ними можно просто общаться через мессенджеры. Вот, например, как он купил машину по выгодной цене. Как быстро развернуть его для себя.
Другие обновления на рынке
1. Выражение AI;DR наподобие TL;DR для обозначения ИИ-контента.
#ai #algorithms
Взаимодействие с такими инструментами
1. NN/g: Техническая грамотность пользователей при использовании ИИ-инструментов. Они выделяют 4 группы по опытности и осознанности.
2. NN/g: Исследование поискового поведения пользователей в ИИ-чат-ботах. Когда они доверяют их результатам, а когда идут в классические поисковики.
Инструменты дизайна
1. Google Stitch: Обновился. Теперь это привычный бесконечный артборд, а также дизайн-система через DESIGN.MD. Генерировать можно по текстовому запросу или картинке.
2. ai.to.design: Плагин для Figma позволяет генерировать дизайн по текстовому запросу. Можно выбрать одну из популярных моделей. Макеты можно докручивать самостоятельно там же в Figma.
3. Reve: Инструмент алгоритмического дизайна позволяет создавать свои эффекты для обработки графики. В статике и анимации, с управлением параметрами.
4. Krea Realtime Edit: Появилось редактирование и генерация изображений в реальном времени. Можно наброском показать, что нужно добавить — и оно моментально появляется.
5. Google Nano Banana 2: Вышла новая версия модели. Повысили точность всего — сохранения вида персонажей и объектов, текста и т.п.
6. Adobe Firefly: Можно тренировать на своём собственном стиле.
7. Raelume: Нодовый инструмент алгоритмического дизайна, который объединяет много ИИ-моделей и способов работы с ними.
8. YouArt: Ещё один нодовый инструмент алгоритмического дизайна.
9. Penpot: Запустили свой MCP-сервер. Обзор того, что он умеет.
10. Google Pomelli: Может собрать фотосессию на основе фото товара.
11. Figma: Интегрировалась с Claude Code. Можно превратить сгенерированный код в макеты сценария и наоборот.
12. Variant: Бесконечная лента примеров дизайна для вдохновения, которые генерируются ИИ по текстовому запросу.
13. Claude: Научился создавать диаграммы и графики прямо внутри чата.
14. Sketch: Примеры того, что можно делать благодаря MCP-серверу.
Дизайн таких инструментов
1. Victor Yocco: Паттерны взаимодействия с ИИ-агентами на основе своей серии предыдущих статей. Как они должны действовать перед, во время и после выполнения задачи пользователя.
2. Ishan Korde: Рассуждает о динамических интерфейсах и разных способах ИИ помочь строить их.
Роль дизайнера и специалиста вообще
1. Luke Wroblewski: Размышляет, какая роль в итоге будет у пользователя при работе с ИИ-продуктами. Он показывает, как она менялась на примере разработки.
Видео
1. Google Flow: Интерфейс генератора изображений и видео обновили, добавили больше возможностей редактирования.
Разработка
1. Addy Osmani: Разница между вайб-кодером и инженером агентов (это новый термин от Andrej Karpathy). Первое изначально описывало быстрые и узкоспециализированные наброски, второе — полноценный рабочий цикл.
2. Hardik Pandya: Оптимизировал код своего сайта с помощью Claude Code (производительность, accessibility, SEO, качество кода). Он показал пошаговый текстовый запрос для этого, который в том числе делает скриншоты до и после изменений — убедиться, что дизайн не развалился.
3. Cursor 2.5: Магазин плагинов и суб-агенты, которые могут делать мелкие задачи асинхронно.
4. Rork: ИИ-генератор мобильных приложений по текстовому запросу или скриншотам.
Управление продуктами
1. Boris Tane: Типичный цикл разработки программ. Как он радикально меняется в эпоху ИИ-агентов и какая роль в нём у человека.
ИИ-агенты
1. OpenClaw: Автономные ИИ-агенты на базе популярных ИИ-моделей. С ними можно просто общаться через мессенджеры. Вот, например, как он купил машину по выгодной цене. Как быстро развернуть его для себя.
Другие обновления на рынке
1. Выражение AI;DR наподобие TL;DR для обозначения ИИ-контента.
#ai #algorithms
Nielsen Norman Group
How AI Literacy Shapes GenAI Use
Using generative AI often doesn’t mean using it well. AI literacy requires both prompt fluency and the ability to assess outputs.
❤1
Forwarded from UX Notes
Булат Хазимуратов покритиковал эмоциональный дизайн.
— Его считают высшей ступенью в пирамиде дизайна, но до сих пор нет методики его создания. Дизайнеры просто добавляют анимации, эффекты, выразительную графику, маскотов, игры и приколы;
— Любой дизайн вызывает эмоции. Не все они яркие и позитивные. Бывают негативные, нейтральные, сложные;
— Не только дизайн продукта их вызывает, но и, например, поведение сотрудника компании;
— Чтобы порадовать пользователя, дополнительные выразительные приёмы не обязательны;
— Дон Норман ввёл термин в книге «Эмоциональный дизайн». Он писал, что дизайн — это и функциональность, и удобство объекта, и эмоции, которые он вызывает у человека;
— Он не предлагал проектировать эмоции, веселить пользователей специальными выразительными приёмами, делать интерфейс дружелюбнее;
— Он предлагал понимать и учитывать эмоции при проектировании, не ограничиваться рациональностью и эргономикой (обычное дело для 90-х, когда вышла его книга);
— Человек воспринимает взаимодействие на интуитивном уровне (нравится ли то, что видит), поведенческом (насколько удобен и приятен процесс), рефлексивном (правильный ли это выбор, насколько мне подходит) → столпы дизайна: эстетика, эргономика, психология;
— Эмоции — субъективное переживание отношения человека к окружающему миру и себе. Они основываются на опыте и помогают понимать, как действовать;
— Выделяют эмоциональные процессы (по мере увеличения их длительности): аффект, эмоция, чувство, настроение. Дизайнерские приёмы обычно вызывают аффекты, но не что-то более длительное;
— Базовые эмоции по Плутчику: восторг, восхищение, ужас, изумление, гнев, отвращение, горе, настороженность. Есть градации (гнев → злость → досада) и промежуточные эмоции (гнев и отвращение → презрение);
— Аарон Уолтер предложил пирамиду потребностей пользователя: функционально → надёжно → удобно → эмоционально. Но у нас нет потребности в эмоциях, мы испытываем их на каждой ступени пирамиды;
— Эмоции можно разделить по потребностям. Например, есть акизитивные эмоции, связанные с потребностью в накоплении и собирательстве. Чем пытаться вызывать эмоции, лучше делать продукты, удовлетворяющие порой неочевидные потребности, не перечисленные в пирамиде Маслоу;
— Планировать нам помогает информационно-речевая картина мира, формирующаяся с опытом. Цифровые продукты упрощают эту картину: с кредитным калькулятором можно не вникать в условия и формулы. Резкие редизайны разрушают часть картины, вызывают стресс. Небольшой объём новой информации вызывает интерес;
— Чтобы лучше разбираться в эмоциях, изучайте работу влияющих на их формирование нейромедиаторов;
— Идея делать продукты понятнее, отзывчивее, человечнее не нова. Потребности в стабильности, эстетике, новой информации, смысле свойственны людям;
— Есть компании, продукты которых часто приводят в качестве примера эмоционального дизайна. Это восприятие строится не на дизайне продуктов, а на культуре и бренде компаний. Дизайн им соответствует. Причём культура и бренд проникают не только в интерфейс, но и в остальные процессы на уровне корпоративной культуры;
— У Додо получается эмоциональный дизайн, так как в основе лежит бренд с прописанной бренд-платформой. Можно описать бренд как человека с ценностями, характером и убеждениями, прописать контекст пользователей, характеристики целевой аудитории и чем компания отличается от конкурентов;
— Эмоции — не цель, а следствие хорошего проектирования. Они возникают из согласованности бренда и поведения компании. Интерфейс не может этого создать — только поддержать. Ориентируйтесь не на эффекты, а на чувства.
— Его считают высшей ступенью в пирамиде дизайна, но до сих пор нет методики его создания. Дизайнеры просто добавляют анимации, эффекты, выразительную графику, маскотов, игры и приколы;
— Любой дизайн вызывает эмоции. Не все они яркие и позитивные. Бывают негативные, нейтральные, сложные;
— Не только дизайн продукта их вызывает, но и, например, поведение сотрудника компании;
— Чтобы порадовать пользователя, дополнительные выразительные приёмы не обязательны;
— Дон Норман ввёл термин в книге «Эмоциональный дизайн». Он писал, что дизайн — это и функциональность, и удобство объекта, и эмоции, которые он вызывает у человека;
— Он не предлагал проектировать эмоции, веселить пользователей специальными выразительными приёмами, делать интерфейс дружелюбнее;
— Он предлагал понимать и учитывать эмоции при проектировании, не ограничиваться рациональностью и эргономикой (обычное дело для 90-х, когда вышла его книга);
— Человек воспринимает взаимодействие на интуитивном уровне (нравится ли то, что видит), поведенческом (насколько удобен и приятен процесс), рефлексивном (правильный ли это выбор, насколько мне подходит) → столпы дизайна: эстетика, эргономика, психология;
— Эмоции — субъективное переживание отношения человека к окружающему миру и себе. Они основываются на опыте и помогают понимать, как действовать;
— Выделяют эмоциональные процессы (по мере увеличения их длительности): аффект, эмоция, чувство, настроение. Дизайнерские приёмы обычно вызывают аффекты, но не что-то более длительное;
— Базовые эмоции по Плутчику: восторг, восхищение, ужас, изумление, гнев, отвращение, горе, настороженность. Есть градации (гнев → злость → досада) и промежуточные эмоции (гнев и отвращение → презрение);
— Аарон Уолтер предложил пирамиду потребностей пользователя: функционально → надёжно → удобно → эмоционально. Но у нас нет потребности в эмоциях, мы испытываем их на каждой ступени пирамиды;
— Эмоции можно разделить по потребностям. Например, есть акизитивные эмоции, связанные с потребностью в накоплении и собирательстве. Чем пытаться вызывать эмоции, лучше делать продукты, удовлетворяющие порой неочевидные потребности, не перечисленные в пирамиде Маслоу;
— Планировать нам помогает информационно-речевая картина мира, формирующаяся с опытом. Цифровые продукты упрощают эту картину: с кредитным калькулятором можно не вникать в условия и формулы. Резкие редизайны разрушают часть картины, вызывают стресс. Небольшой объём новой информации вызывает интерес;
— Чтобы лучше разбираться в эмоциях, изучайте работу влияющих на их формирование нейромедиаторов;
— Идея делать продукты понятнее, отзывчивее, человечнее не нова. Потребности в стабильности, эстетике, новой информации, смысле свойственны людям;
— Есть компании, продукты которых часто приводят в качестве примера эмоционального дизайна. Это восприятие строится не на дизайне продуктов, а на культуре и бренде компаний. Дизайн им соответствует. Причём культура и бренд проникают не только в интерфейс, но и в остальные процессы на уровне корпоративной культуры;
— У Додо получается эмоциональный дизайн, так как в основе лежит бренд с прописанной бренд-платформой. Можно описать бренд как человека с ценностями, характером и убеждениями, прописать контекст пользователей, характеристики целевой аудитории и чем компания отличается от конкурентов;
— Эмоции — не цель, а следствие хорошего проектирования. Они возникают из согласованности бренда и поведения компании. Интерфейс не может этого создать — только поддержать. Ориентируйтесь не на эффекты, а на чувства.
YouTube
Почему вам не нужен эмоциональный дизайн / Булат Хазимуратов
Все говорят об эмоциональном дизайне, но каждый понимает под этим что-то своё: анимации, смешной текст, геймификацию, вау-эффекты. Дизайн рискует потерять смысл и превратиться в набор стимулирующих приёмов.
В этом докладе автор разбирает, что на самом деле…
В этом докладе автор разбирает, что на самом деле…
🔥2👍1👎1
Forwarded from Журналус дейли
NNGroup разобрали популярный тезис о том, что в эпоху ИИ классический дизайн-процесс можно отбросить в пользу интуиции и скорости. Например, одним из ярых поклонников такого подхода является Дженни Вэн — дизайн-лид в Anthropic.
NNGroup объяснили, почему эта идея ошибочна, и показали, что на практике опытные дизайнеры не отказываются от процесса, а просто сжимают его. В статье последовательно показано, где интуитивный подход работает, почему интуиция не универсальна и как ИИ влияет на весь цикл работы.
Главное:
• Опытные дизайнеры не пропускают этапы дизайн-процесса, а проходят их быстрее за счёт опыта и накопленных знаний о пользователях, конкурентах и паттернах
• Интуиция — это «сжатый» процесс, а не его альтернатива
• Формальные фреймворки вроде double diamond нужны не как чек-листы, а как способ снизить риски
• Подход solution-first работает только в зрелых и хорошо изученных областях с понятными паттернами. (Этот подход подразумевает разработку технологического решения, а затем уже поиск проблемы, которую оно может решить)
• В большинстве случаев начинать с разработки решения опасно. Так можно сделать продукт без реальной потребности
• Интуиция плохо масштабируется. Джунам не хватает контекста, а в корпорациях нужны доказательства решений
• ИИ ускоряет компрессию процесса и делает её доступной менее опытным дизайнерам, но не устраняет необходимость понимать задачу
• В регулируемых отраслях (медицина, финансы, госсектор) пропуск процесса — это не ускорение, а риск причинения вреда
• Ключевой навык сегодня — умение выбирать подход под задачу, а не слепо следовать процессу или игнорировать его
#статья
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from by makstorch
Думаете, я забыл, что кто-то из вас уже давно ждёт гайд по работе с Figma MCP для вёрстки сайта? Банда, дурные что ли, конечно нет 🥂
Пару ночей и вуаля, нахуярил для всех вас, первый гайд из этой серии. Будет что почитать вечером после работы, на выходных или залететь в материал в начале новой недели
«Гайд для малышей: как перегнать дизайн из Figma в код» — про то, как перестать заниматься хаотичным вайб-кодингом и собрать повторяемый workflow, который реально доводит до рабочего интерфейса на проде
Внутри описал процесс:
✓ как готовить макет в Figma
✓ как правильно размечать брейкпоинты и состояния
✓ как работать с AI поэтапно и собрать простого агента
✓ как довести всё до production-ready результата
Короче, это не теория ради теории с пустым трёпом, а мой реальный опыт. Переходите на любой удобный для вас ресурс и поддержите статью лайком. Для меня это лучший сигнал, что надо делать вторую часть уже с более мощными кейсами
🔗 Habr • VC • DSGNERS • Medium
👅 English version
#workflow #гайды #AI #frontend
Пару ночей и вуаля, нахуярил для всех вас, первый гайд из этой серии. Будет что почитать вечером после работы, на выходных или залететь в материал в начале новой недели
«Гайд для малышей: как перегнать дизайн из Figma в код» — про то, как перестать заниматься хаотичным вайб-кодингом и собрать повторяемый workflow, который реально доводит до рабочего интерфейса на проде
Внутри описал процесс:
✓ как готовить макет в Figma
✓ как правильно размечать брейкпоинты и состояния
✓ как работать с AI поэтапно и собрать простого агента
✓ как довести всё до production-ready результата
Короче, это не теория ради теории с пустым трёпом, а мой реальный опыт. Переходите на любой удобный для вас ресурс и поддержите статью лайком. Для меня это лучший сигнал, что надо делать вторую часть уже с более мощными кейсами
#workflow #гайды #AI #frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Журналус дейли
Люк Вроблевски разобрал, как за последние годы менялись ИИ-продукты и какие паттерны в их интерфейсах прошли проверку временем, а какие — остаются временными костылями. В своём анализе он опирался на личный четырёхлетний опыт в разработке подобных кейсов.
На примерах Люк объяснил, как помогать пользователю понять возможности системы, как показывать контекст и как бороться с перегрузкой текстом. Отдельно разобрал интерфейсы для агентных сценариев, где сложность резко растёт.
Главное:
• При каждом технологическом сдвиге старые интерфейсы сначала просто переносят в новую среду, но это временное решение, и оно быстро устаревает
• Первый этап внедрения ИИ — когда он работает «под капотом». Интерфейс не меняется, но логика полностью перестраивается
• Второй этап — появление чата как универсального интерфейса, который добавляют почти в любой продукт
• В ИИ-интерфейсах есть три ключевые проблемы: непонимание возможностей, непонимание контекста и перегрузка текстом
• Большие текстовые ответы перегружают пользователя, поэтому важно добавлять изображения, диаграммы и другие форматы
• В агентных системах возникает новая сложность — огромное количество действий, которые выполняет система
• Пользователи делятся на два типа: одни хотят видеть весь процесс, другие — только результат
• Лучший паттерн для агентных действий — сворачивать процессы в короткие строки с возможностью раскрытия
• Разделение процесса и результата (например, в разных панелях) помогает снизить когнитивную нагрузку
• Чтобы пользователь более точно формулировал запрос, можно использовать усиление промта системой (prompt enhancement)
• Для демонстрации возможностей системы и организации сложных действий можно использовать визуальные билдеры задач
• Онбординг можно заменить на демонстрацию работы. Система сама начинает что-то делать и обучает пользователя через действие
• Контекст можно задавать напрямую через интерфейс: выделения, файлы, области внимания
• Следующий этап — оркестрация агентов, когда один агент управляет другими, но пока непонятно, сколько такой сложности пользователь способен контролировать
#статья
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Журналус дейли
Кристин Валлор рассказала, как агентный ИИ собирает интерфейсы из дизайн-систем без участия человека и почему грамотная структура макета в Figma теперь не просто «хорошая практика», а критически важное условие.
В статье она разобрала, что меняется в роли дизайнера, как правильно готовить макеты и почему теперь дизайн-система — это не избыточная документация, необходимая только крупным компаниям, а важная инструкция для ИИ.
Главное:
• Дизайн-система становится главным источником данных для ИИ-агента, который читает её и собирает интерфейсы
• Агент не придумывает новые решения, а комбинирует уже существующие компоненты, поэтому качество системы напрямую влияет на результат
• Семантические токены важнее примитивов: следует описывать смысл (interactive/default), а не просто HEX-коды цветов (#FFFFFF)
• Названия компонентов и пропсов должны полностью совпадать с кодом, иначе агент не сможет корректно их связать и начнёт «угадывать»
• Описания компонентов в Figma становятся частью контекста для ИИ и помогают ему правильно использовать элементы
• Нужно проектировать все состояния компонентов: hover, disabled, loading и другие, иначе агент считает, что их не существует
• Компоненты должны строиться через варианты, булевы свойства и instance swap. Это напрямую ложится на логику в коде
• Дизайн страниц по-прежнему нужен. Именно в них рождаются решения, из которых потом извлекаются компоненты
• Если начинать сразу с библиотеки, интерфейсы получаются быстрыми, но безликими, как во многих навайбкоденных продуктах
• Качество структурирования дизайн-системы можно измерить, потому что оно влияет на скорость генерации, стоимость токенов и качество кода
• Главный риск не в замене дизайнеров, а в том, что фокус сместится на сборку, а не на осмысленное проектирование
#статья
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
Forwarded from UX Notes
Виктор Теплов рассказал, как дизайнеру работать с ИИ.
— Тест Патрика: чаще вы соглашаетесь с ИИ или он с вами? Если вы, то готовьтесь потерять работу;
— Опасные сценарии: профи-скептик не разбирается в ИИ, использует его на удачу и сразу видит некачественный результат; энтузиаст-профан лезет в незнакомую область и полностью доверяет ИИ; дофаминовый наркоман радуется быстрому результату и делает 5 проектов (и ещё 7 в уме);
— ИИ — не партнёр, а инструмент. Человек становится автором продукта и берёт ответственность, когда нажимает на «Принять изменения»;
— По умолчанию ИИ выдаёт массово-приятный результат, похожий на музыку в лифте, которая не бесит, но и не цепляет. Это хорошо для интерфейсов, так как привычные паттерны удобны. Но плохо для творчества, бренда и голоса продукта, где нужна узнаваемость;
— Дизайнеры, которые не хотели разбираться в функциях программ, но хотели «сделать красиво», раньше использовали плагины. Не понимаешь, как работает свет, — плагин Cinematic LUT;
— ИИ может сгенерировать артефакты по фреймворкам вроде JTBD, CJM, Personas, но не может взять на себя ответственность за принятое решение;
— Не получится найти ИИ-инструмент, который просто сделает то, что нужно. Придётся разбираться, как добиться в нём нужного результата;
— План: опишите образ результата, критерии качества и ограничения (что делаем, для кого, в каких условиях). Итерации: делите задачу на шаги, фиксируйте изменения и промежуточные артефакты. Проверка: просите ссылки на первоисточники, объяснить сделанный выбор, дать альтернативы и подсветить риски;
— Рутину надо делать быстро, одинаково и без ошибок. Дизайнер дизайн-системы либо автоматизирует, либо тонет. Раньше для автоматизации надо было стать немного разработчиком, сейчас порог входа снизился. Но ИИ не должен быть автором архитектуры;
— Например, плагин для сбора типографских variables в JSON-стили и построения витрины стилей, плагин для создания шрифта из иконок дизайн-системы;
— Работа с цветовыми токенами. Опишите контракт: структура токенов, устройство имён, запреты, эталонные примеры. Попросите выполнить операцию: добавь новый токен в core-палитру и создай семантический токен bg.main.primary на его основе, добавь во все тематические и брендовые палитры;
— Сначала в режиме Plan, когда ИИ ничего не делает с файлами. Затем просите не только изменить файлы, но и показать изменения, объяснить, почему они соответствуют правилам, подсветить риски, поискать дубли, проверить ссылки;
— В Figma Make можно быстро сделать прототип, проверить поведение компонента в корнер-кейсах и принять решения по вопросам, которые часто всплывают уже во время реализации в коде;
— Доступность инструмента лишь подчёркивает искусность мастера. Кто-то может порубить топором дрова, а кто-то построить дом. Важен опыт, вкус и логика. ИИ не заменяет мастерство, а позволяет делать быстро, много и предсказуемо.
Копия в ВК Видео. #ai #design_system
— Тест Патрика: чаще вы соглашаетесь с ИИ или он с вами? Если вы, то готовьтесь потерять работу;
— Опасные сценарии: профи-скептик не разбирается в ИИ, использует его на удачу и сразу видит некачественный результат; энтузиаст-профан лезет в незнакомую область и полностью доверяет ИИ; дофаминовый наркоман радуется быстрому результату и делает 5 проектов (и ещё 7 в уме);
— ИИ — не партнёр, а инструмент. Человек становится автором продукта и берёт ответственность, когда нажимает на «Принять изменения»;
— По умолчанию ИИ выдаёт массово-приятный результат, похожий на музыку в лифте, которая не бесит, но и не цепляет. Это хорошо для интерфейсов, так как привычные паттерны удобны. Но плохо для творчества, бренда и голоса продукта, где нужна узнаваемость;
— Дизайнеры, которые не хотели разбираться в функциях программ, но хотели «сделать красиво», раньше использовали плагины. Не понимаешь, как работает свет, — плагин Cinematic LUT;
— ИИ может сгенерировать артефакты по фреймворкам вроде JTBD, CJM, Personas, но не может взять на себя ответственность за принятое решение;
— Не получится найти ИИ-инструмент, который просто сделает то, что нужно. Придётся разбираться, как добиться в нём нужного результата;
— План: опишите образ результата, критерии качества и ограничения (что делаем, для кого, в каких условиях). Итерации: делите задачу на шаги, фиксируйте изменения и промежуточные артефакты. Проверка: просите ссылки на первоисточники, объяснить сделанный выбор, дать альтернативы и подсветить риски;
— Рутину надо делать быстро, одинаково и без ошибок. Дизайнер дизайн-системы либо автоматизирует, либо тонет. Раньше для автоматизации надо было стать немного разработчиком, сейчас порог входа снизился. Но ИИ не должен быть автором архитектуры;
— Например, плагин для сбора типографских variables в JSON-стили и построения витрины стилей, плагин для создания шрифта из иконок дизайн-системы;
— Работа с цветовыми токенами. Опишите контракт: структура токенов, устройство имён, запреты, эталонные примеры. Попросите выполнить операцию: добавь новый токен в core-палитру и создай семантический токен bg.main.primary на его основе, добавь во все тематические и брендовые палитры;
— Сначала в режиме Plan, когда ИИ ничего не делает с файлами. Затем просите не только изменить файлы, но и показать изменения, объяснить, почему они соответствуют правилам, подсветить риски, поискать дубли, проверить ссылки;
— В Figma Make можно быстро сделать прототип, проверить поведение компонента в корнер-кейсах и принять решения по вопросам, которые часто всплывают уже во время реализации в коде;
— Доступность инструмента лишь подчёркивает искусность мастера. Кто-то может порубить топором дрова, а кто-то построить дом. Важен опыт, вкус и логика. ИИ не заменяет мастерство, а позволяет делать быстро, много и предсказуемо.
Копия в ВК Видео. #ai #design_system
YouTube
Как работать с AI и не стать оператором кнопки «Принять»
Пока одни боятся, что ИИ отнимет у них работу, другие уже радостно отдают ему мышление, вкус и ответственность.
Я предлагаю посмотреть на нейросети спокойнее.
Не как на магию. Не как на апокалипсис.
А как на очень мощный инструмент, который одинаково быстро…
Я предлагаю посмотреть на нейросети спокойнее.
Не как на магию. Не как на апокалипсис.
А как на очень мощный инструмент, который одинаково быстро…
Forwarded from Миша Наер
This media is not supported in your browser
VIEW IN TELEGRAM
В комментах как-то спрашивали, как я использую Paper в работе, поэтому решил собрать наглядный пример.
Paper это офигенный инструмент для веб-задач, где нужно скопировать продакшен сайт и поверх него чето собрать.
У меня пайплайн такой:
1. Открываем любую веб страницу и с помощью плагина Paper Snapshot копируем верстку. Я для примера скопировал с прода страницу банковской карты.
2. Потом идем в paper и одним кликом вставляем верстку в редактор. Переносит Paper оч хорошо, руками почти не приходится допиливать.
3. Берем ссылку на макет и вставляем в Claude/Codex, просим сверстать макет. Так как канвас в Paper написан на HTML и CSS, нужно совсем немного токенов и времени чтобы перенести макет pixel perfect.
Ну а дальше уже все упирается в вашу фантазию и задачу. Я вот натянул на страницу банковской карты эффект по ховеру из spell.sh.
В итоге за 10 минут собралась такая демка с готовым кодом, которую можно показать менеджерам. А потом и спеку сгенерировать из того же кода
Paper это офигенный инструмент для веб-задач, где нужно скопировать продакшен сайт и поверх него чето собрать.
У меня пайплайн такой:
1. Открываем любую веб страницу и с помощью плагина Paper Snapshot копируем верстку. Я для примера скопировал с прода страницу банковской карты.
2. Потом идем в paper и одним кликом вставляем верстку в редактор. Переносит Paper оч хорошо, руками почти не приходится допиливать.
3. Берем ссылку на макет и вставляем в Claude/Codex, просим сверстать макет. Так как канвас в Paper написан на HTML и CSS, нужно совсем немного токенов и времени чтобы перенести макет pixel perfect.
Ну а дальше уже все упирается в вашу фантазию и задачу. Я вот натянул на страницу банковской карты эффект по ховеру из spell.sh.
В итоге за 10 минут собралась такая демка с готовым кодом, которую можно показать менеджерам. А потом и спеку сгенерировать из того же кода
Forwarded from UX Notes
Дмитрий Ваницкий написал об опыте тестирования вайбкод-прототипа с фронтендом и бекендом.
— Вероятность получить ТЗ не в виде длинной спецификации, а в виде вайбкод-прототипа с каждым днём становится всё больше;
— Надо учиться их запускать, а также тестировать с пользователями;
— Потребуется редактор кода. К VS Code можно подключить любой ИИ. Дмитрий остановился на Antigravity благодаря агентному подходу и продвинутому планированию при решении задач;
— Прототип без бекенда (React app, который сам считает и хранит данные в локальном хранилище) можно легко посмотреть на своём компьютере;
— Для пользовательского тестирования такие прототипы можно сделать доступными в интернете через Netlify или Vercel;
— Зачем нужен прототип с бекендом: использовать реальные данные (дамп базы), обрабатывать запросы не на фронте ради безопасности, тестировать более длинные сессии;
— Чаще всего придётся иметь дело с Vite-проектом. Достаточно попросить ИИ проанализировать проект и запустить его;
— Чтобы всё работало не только у вас на компьютере, регистрируйтесь в GitHub и публикуйте проект там;
— Коммитьте чаще, чтобы не сильно откатываться назад, когда всё сломается;
— Проекты, требующие только фронта, можно публиковать в GitHub Pages, а можно в Vercel или Netlify через интеграцию с Гитхабом (указать его как вендора);
— Если нужен бекенд, репозиторий в GitHub можно подключить к Railway. Надо прописать в конфиге Vite нужный URL, чтобы не ссылаться на локалхост;
— При тестировании на реалистичных данных может потребоваться подменить данные из дампа базы выдуманными, сохранив логику и связи. Дмитрий поделился ИИ-скилом для этого;
— Для немодерируемых тестов таких прототипов подойдут Maze, Useberry, бесплатная платформа Display;
— Чтобы система понимала, когда заканчивать тест, открытие целевого экрана должно сопровождаться изменением URL;
— Если у вас React-приложение, которое работает на стейтах, попросите ИИ добавить подмену URL на финальные экраны.
#prototype #user_testing #ai #tool
— Вероятность получить ТЗ не в виде длинной спецификации, а в виде вайбкод-прототипа с каждым днём становится всё больше;
— Надо учиться их запускать, а также тестировать с пользователями;
— Потребуется редактор кода. К VS Code можно подключить любой ИИ. Дмитрий остановился на Antigravity благодаря агентному подходу и продвинутому планированию при решении задач;
— Прототип без бекенда (React app, который сам считает и хранит данные в локальном хранилище) можно легко посмотреть на своём компьютере;
— Для пользовательского тестирования такие прототипы можно сделать доступными в интернете через Netlify или Vercel;
— Зачем нужен прототип с бекендом: использовать реальные данные (дамп базы), обрабатывать запросы не на фронте ради безопасности, тестировать более длинные сессии;
— Чаще всего придётся иметь дело с Vite-проектом. Достаточно попросить ИИ проанализировать проект и запустить его;
— Чтобы всё работало не только у вас на компьютере, регистрируйтесь в GitHub и публикуйте проект там;
— Коммитьте чаще, чтобы не сильно откатываться назад, когда всё сломается;
— Проекты, требующие только фронта, можно публиковать в GitHub Pages, а можно в Vercel или Netlify через интеграцию с Гитхабом (указать его как вендора);
— Если нужен бекенд, репозиторий в GitHub можно подключить к Railway. Надо прописать в конфиге Vite нужный URL, чтобы не ссылаться на локалхост;
— При тестировании на реалистичных данных может потребоваться подменить данные из дампа базы выдуманными, сохранив логику и связи. Дмитрий поделился ИИ-скилом для этого;
— Для немодерируемых тестов таких прототипов подойдут Maze, Useberry, бесплатная платформа Display;
— Чтобы система понимала, когда заканчивать тест, открытие целевого экрана должно сопровождаться изменением URL;
— Если у вас React-приложение, которое работает на стейтах, попросите ИИ добавить подмену URL на финальные экраны.
#prototype #user_testing #ai #tool
Medium
Concept.zip
Я думаю, сегодня даже у самого закоренелого скептика не осталось вопросов о том, что AI драматически изменил мир разработки. О том, что это…
Forwarded from UX Notes
Михаил Рубанов публикует в виде сайта свою книгу об адаптации iOS-приложений для людей с ограниченными возможностями.
— В книге он рассказывает, как незрячие пользуются скринридером VoiceOver, как управлять телефоном голосом, как полностью парализованный человек может отдавать команды;
— А также: как подготовить к такому использованию iOS-приложение, как адаптировать интерфейс для увеличенного размера текста и как это всё протестировать;
— Книга ориентирована на разработчиков, но полезна и дизайнерам, поскольку адаптировать интерфейсы можно на уровне контролов, экранов и сценариев;
— Часть глав ещё в процессе публикации. Например, глав об адаптации для увеличенного размера текста пока нет;
— Есть большая статья — гайд о том, как сделать iOS-приложение доступнее.
#book #accessibility #mobile
— В книге он рассказывает, как незрячие пользуются скринридером VoiceOver, как управлять телефоном голосом, как полностью парализованный человек может отдавать команды;
— А также: как подготовить к такому использованию iOS-приложение, как адаптировать интерфейс для увеличенного размера текста и как это всё протестировать;
— Книга ориентирована на разработчиков, но полезна и дизайнерам, поскольку адаптировать интерфейсы можно на уровне контролов, экранов и сценариев;
— Часть глав ещё в процессе публикации. Например, глав об адаптации для увеличенного размера текста пока нет;
— Есть большая статья — гайд о том, как сделать iOS-приложение доступнее.
#book #accessibility #mobile
vc.ru
Как сделать iOS-приложение доступнее? Большой и подробный гайд
Простой вопрос: как люди пользуются смартфоном? Смотрят на него, находят нужную кнопку, нажимают на неё — что сложного?
Forwarded from Журналус дейли
🇬🇧 Raunos Field Notes #5
Свежая заметка Рауно Фрейберга из команды Vercel, в которой он детально описал новый дизайн карточек уведомлений в панели навигации и то, как к нему пришёл: почему карточки должны выглядеть именно так, как устроены анимации и от каких решений он отказался.
#статья
Свежая заметка Рауно Фрейберга из команды Vercel, в которой он детально описал новый дизайн карточек уведомлений в панели навигации и то, как к нему пришёл: почему карточки должны выглядеть именно так, как устроены анимации и от каких решений он отказался.
#статья
🔥1
Forwarded from Журналус дейли
🇬🇧 10 tells of a slop ui. Пранав Десаи собрал десять признаков небрежно сгенерированного ИИ-интерфейса — от обилия градиентов и бессмысленных статусов до рекламных слоганов в рабочих экранах.
#статья
#статья
❤1
Forwarded from Про удобство (Михаил Греков) (Mikhail Grekov)
Всё приехали. UX отрывается от UI
UX создания и анализа чего-то через UI стремительно деградирует -- я [и тысячи других] больше не хотим работать с продуктами через UI, а хотим работать через AI.
Сорян, но так реально быстрее и проще.
По инерции ещё долго (несколько лет) мы будем создавать интерфейсы создания и анализа чего-то:
-- презентаций
-- формы в разных продуктах
-- какие-то отчеты
-- что-то там ещё
но основной путь создания уйдёт в агентский слой.
Зачем заходить в CRM и создавать клиента руками, если можно скинуть в сыром виде ИИшке и она сама всё создаст?
Зачем делать руками слайды, если можно делать это через диалог с ИИ?
Зачем идти в BI и строить какой-то срез анализа, если можно запросить его у ИИшки?
Зачем самому писать документ, если можно писать его с ИИшкой?
Зачем заходить в почту, чтобы написать письмо, если можно внутри ИИшки?
Незачем ))
Это всё, конечно, пугает и наводит на мысль о том, что "да мы же так все отупеем", но это не остановить. Точнее так: это может остановить только сценарий, при котором токены станут дороже ручного труда. Пока мы не там.
Если у продукта нет MCP и его нельзя подрубить к ИИ-агенту, то такой продукт в перспективе обречен. В b2b точно.
На уровне UI останется: просмотр таблиц, страниц и прочего контента, а также стандартная аналитика внутри продукта.
Вся рутина и действия улетят в агентский слой -- мы близки к формату работы в режиме моноокна ИИ тулы.
Вот такой UX будущего нас ждёт, а местами наступил. 70% моего рабочего времени проходит в интерфейсе клода, хотя при этом я работаю с разными продуктами. Но почти всё создание происходит через агентский интерфейс.
UX уже заменяется альтернативой Agent Experience (AX) -- насколько хорошо ваш продукт понимают агенты. AX дизайнеры в перспективе станут важнее, чем UX.
#UX
UX создания и анализа чего-то через UI стремительно деградирует -- я [и тысячи других] больше не хотим работать с продуктами через UI, а хотим работать через AI.
Сорян, но так реально быстрее и проще.
По инерции ещё долго (несколько лет) мы будем создавать интерфейсы создания и анализа чего-то:
-- презентаций
-- формы в разных продуктах
-- какие-то отчеты
-- что-то там ещё
но основной путь создания уйдёт в агентский слой.
Зачем заходить в CRM и создавать клиента руками, если можно скинуть в сыром виде ИИшке и она сама всё создаст?
Зачем делать руками слайды, если можно делать это через диалог с ИИ?
Зачем идти в BI и строить какой-то срез анализа, если можно запросить его у ИИшки?
Зачем самому писать документ, если можно писать его с ИИшкой?
Зачем заходить в почту, чтобы написать письмо, если можно внутри ИИшки?
Незачем ))
Это всё, конечно, пугает и наводит на мысль о том, что "да мы же так все отупеем", но это не остановить. Точнее так: это может остановить только сценарий, при котором токены станут дороже ручного труда. Пока мы не там.
Если у продукта нет MCP и его нельзя подрубить к ИИ-агенту, то такой продукт в перспективе обречен. В b2b точно.
На уровне UI останется: просмотр таблиц, страниц и прочего контента, а также стандартная аналитика внутри продукта.
Вся рутина и действия улетят в агентский слой -- мы близки к формату работы в режиме моноокна ИИ тулы.
Вот такой UX будущего нас ждёт, а местами наступил. 70% моего рабочего времени проходит в интерфейсе клода, хотя при этом я работаю с разными продуктами. Но почти всё создание происходит через агентский интерфейс.
UX уже заменяется альтернативой Agent Experience (AX) -- насколько хорошо ваш продукт понимают агенты. AX дизайнеры в перспективе станут важнее, чем UX.
#UX
Forwarded from Журналус дейли
F*cking Good Libraries. Каталог готовых библиотек, компонентов и маленьких репозиториев для интерфейсов и креативного кодинга.
Сайт содержит ИИ-поиск не только по названию, но и по задаче. Например, можно написать «Хочу исказить текст» или «Хочу крутые лоадеры», и сайт подберёт нужное. Работает на русском.
#инструменты
Сайт содержит ИИ-поиск не только по названию, но и по задаче. Например, можно написать «Хочу исказить текст» или «Хочу крутые лоадеры», и сайт подберёт нужное. Работает на русском.
#инструменты
Forwarded from Скопин | Яндекс | dsgn-директор
Please open Telegram to view this post
VIEW IN TELEGRAM