Design to Code Tools

Недавно решил обновить свой опыт использовать ИИ в части UX/UI проектирования (в 2024 когда тестил — хромало).

Итак, апдейт:
1️⃣ Codia — ИИ плагин Figma. Скриншот → макет. Удобно, можно скринить (сейчас большинство сайтов блокируют кроулеры и показывают заглушку) = не скопировать так просто. Скриншоты решают эту проблему с помощью OCR.
Распознает шрифты, язык, SVG конвертит и сразу адаптирует код (фича в Фигме) для v0, Lovable

Заявляет о 140k юзеров

2️⃣ Builder.io — классный, но нужна платная фигма для PRO версии, чтобы код был. У меня нет, но можно оформить бесплатно версию для студентов на 2 года. Конверит в React, Vue, Angular, SwiftUI, Tailwind

3️⃣ html.to.design — четко работает, но сайты, которые блокируют кроулеры, будут выдавать заглушку. Но можно использовать плагин для хрома → делаем скрин → загружаем h2d файл → получаем готовый макет.

300к пользователей

4️⃣ Screenshot2Design – Работает тоже через OCR, но у меня не заработал.

12k пользователей

5️⃣ плагин Attention Insight для Figma – легко анализируйте дизайны в Figma с помощью предиктивных тепловых карт отслеживания глаз.

64.3k пользователей

6️⃣ Fronty — превращает дизайн веб-страницы в код HTML, CSS

7️⃣ Screenshot2Design — последний апдейт 30.05.2023 — скорее всего мертв.

======

☑️Используйте Codia для создания дизайна в Figma.
☑️Используйте Builder.io, для генерации начального кода.
☑️Используйте МСР (superflex / mcp.so / Coincap MCP Server / Firecrawl / Smithery MCP / context7 / aci.dev) сервера, что настроить прямую интеграцию Figma → MCP server* → IDE Cursor (тут подробнее)
☑️Импортируйте этот код в WinSurfs, Cursor или Replit для дальнейшей разработки с использованием их функций.
☑️Для Lovable, v0 или Bolt попробуйте импортировать код для доработки, если это поддерживается, или создайте новый проект на основе текстового описания.

* Сервер MCP — это компонент, который обеспечивает стандартизированный интерфейс для подключения моделей искусственного интеллекта, таких как большие языковые модели (LLM), к внешним инструментам, источникам данных и сервисам.

Заработок на Vibe Coding'е

Новый ИИ агент Replit Agent v2 создает клон Reddit 1:1 всего за 15 мин. и 25$ в мес.

🎞 Смотрите сами

Я провел 🔍 Deep Research «что лучше сейчас использовать для разработки веб-сервисов (v0, Bolt, Lovable, DataButton)» в Grok и Perplexity (даю ссылки на ресерчи, чтобы ты мог изучить детально), анализируя реальный опыт использования этих IDE сервисов на просторах Reddit, x.com, YouTube , LinkedIn.

Большинство вайб-кодеров используют Replit т.к. с ним можно создать MVP, а если в процессе работы застревают в коде, то используют Cursor или WindSurf для редактирования кода. Я думаю, что это хорошая связка.

Ключевые моменты
- Исследования показывают, что Lovable и DataButton, скорее всего, обеспечивают лучшее качество лендингов по сравнению с Bolt и Repl.it Agent, особенно для не-технических пользователей.
- Все инструменты поддерживают адаптивный дизайн для мобильных устройств, но Lovable и DataButton имеют более удобные интерфейсы для создания лендингов.
- Соответствие макетам Figma зависит от описания дизайна пользователем, и Lovable, DataButton и Bolt, кажется, лучше справляются с этим, чем Repl.it Agent.
- Новый Repl.it Agent в бета-доступе, но, по отзывам, его качество для лендингов может быть ниже, чем у Lovable и Bolt.
- 📲Если нужно писать код для мобильного приложения с использованием Flutter, то подойдет Replit и Cursor, позволяющие писать и запускать код в более чем 50 языках программирования, включая Dart, используемый в Flutter.

💭 Какие выводы: для меня Replit Agent v2 это то, что мне нужно с т.з. моего развития, в Lovable и Bolt любой сможет, что несколько обесценивает твои навыки, а более сложный инструмент — более выгодное положение. + если есть навыки базового понимания кода, то это то, что нужно.
🎁Cкидка 60% на первый месяц Replit до 31 МАРТА:
1. Для ежемесячного тарифа промокод v2monthly
2. Для годовых v2yearly

🤔 В США кстати уже ищут ищут вайб-кодеров для проектов.

Как на этом зарабатывать? Гуглишь ниши → находишь старые сайты в Google Maps → собираешь с 0 → показываешь результат владельцу старого сайта → продаешь.

🎞 Так делает этот парень в США + ещё и ещё пример. И это не только про лендинги, а про полноценные веб-сервисы с БД, авторизацией, API интеграциями через Zapier / Make.

🎞 Или делать 750$ в день продавая решения на Upwork выполняя проекты на заказ.

Или автоматизировать сложные проекты для компаний с помощью Manus агента (подписка на сервис обойдется в 35$)

Или собирать SaaS / App продукты и выстраивать в них воронку привлечения → активации → повторных продаж. Так сделали эти 20-летние ребята , не будучи разработчикамии делают $30 млн. в год на приложении для похудения.

Я собрал этот сайт на 2х языках по референсу с behance за 10 минут.

🎞 И ещё интересное видео с промптами, как эффективнее писать код в Cursor:
- действуй как 10 инжинеров (перечисли их компетенции)
- оптимизуй код
- улучши производительность сайта
- не останавливайся пока не закончишь эту функцию до конца (модель ленится, переходит на другие задачи)
- лучше писать на англ. (обучение было на англ. языке)
- проанализируй функционал и предложи оптимизацию
- use js, css and normal html

Создаем iOS / Android приложение с Replit

Для работы понадобится Expo Go (это моб. приложение — кроссплатформенная среда-песочница) и Шаблон который нужно добавить в Replit

Пошагово:
🎞 Часть 1

🎞 Часть 2

🚀 Как построить AI-стартап на $1M+ в 2025 году

Инсайты подкаста Грега Айзенберга

Парадокс AI-рынка 2025 года
- "Никогда не было легче создать бизнес на миллион долларов и никогда не было легче потерять всю стоимость своей доли"
- Сегодня любой может "вайб-кодить" ваш продукт за выходные
- Конкуренция выросла экспоненциально — теперь вы соревнуетесь не только с другими стартапами, но и с AI-агентами

Что действительно работает в 2025
1. Для успешного AI-бизнеса нужно либо преимущество в данных, либо сетевой эффект
2. Дистрибуция стала новым защитным рвом — инструменты сами по себе больше не создают ценность
3. Сначала медиа, потом AI — сначала постройте аудиторию, затем добавляйте AI-инструменты
4. Фокус на нишах с высокой ценностью, а не на массовой аудитории
5. Безопасность как конкурентное преимущество — особенно для финансовых данных и личных коммуникаций

Перспективные идеи AI-стартапов
"Secure MCP" — платформа для безопасной интеграции данных с AI (как "1Password для Model Context Protocol")

AI-агентство веб-дизайна — автоматическое улучшение сайтов локальных бизнесов с последующей монетизацией

"Message Maxing" — анализ текстовых сообщений для выявления токсичных отношений и улучшения коммуникации

"Bank of Vibe Coding" — AI-платформа кредитования для разработчиков, берущая процент от прибыли

Стратегия выживания
- Не стройте просто "обертку вокруг GPT" — через 2-3 месяца у вас будет 100 конкурентов
- Создавайте продукты, которые сложно скопировать из-за сетевых эффектов
- Используйте AI как инструмент для снижения затрат, но не рассчитывайте на долгосрочное преимущество только от этого
- Помните: "Бизнесы, которые легче всего запустить, часто оказываются худшими в долгосрочной перспективе"

🔮7 успешных A/B-тестов, которые кажутся незаконными

Сегодня хочу поделиться невероятными инсайтами из мира A/B-тестирования

📊Шокирующая статистика
За последние 4 года было проанализировано 150 000 A/B-тестов. И знаете что? 89% из них провалились! Почему? Потому что большинство команд гонятся за количеством тестов, а не за их качеством.

7 неожиданных открытий

1️⃣ Ясность побеждает простоту
Peloton доказал: два конкретных CTA "Посмотреть детали " и "Быстрое добавление" работают лучше, чем один общий "Купить сейчас".

2️⃣ Карусели на самом деле работают
The New York Times обнаружил, что карусели в hero-секциях превосходят статичные изображения.

3️⃣ "Выгода-первая" в CTA проигрывает
Apple выяснил: "Попробовать бесплатно" побеждает "Начать слушать".

4️⃣ Возвращение к простым сообщениям
Mailchimp вернулся от сложных описаний к простому "Превратите письма в доход".

5️⃣ Сравнение с конкурентами убивает конверсию
Square обнаружил, что сравнительные таблицы на странице цен снижают конверсию.

6️⃣ Логотипы клиентов вредят конверсии
Asana доказала: версия без логотипов клиентов работает лучше.

7️⃣ Зачеркнутые цены разрушают доверие
Spotify выяснил, что показ старой цены $99\.99 $29\.99 вызывает сомнения в ценности продукта.

🔮 AI-интерфейсы будущего: 7 трендов, которые изменят нашу работу

Вчера наткнулся на потрясающее видео от Y Combinator о новых интерфейсах искусственного интеллекта. И знаете что? Мы находимся на пороге революции, сравнимой с появлением сенсорных экранов в 2010-м.

Как СРО, я вижу, что большинство команд все еще используют ИИ как "улучшенный Google" — вводим запрос, получаем ответ. Но будущее намного интереснее!

От существительных к глаголам

Традиционные интерфейсы — это набор статичных элементов: кнопки, формы, выпадающие списки. По сути, существительные.

ИИ-интерфейсы — это действия и процессы: автозаполнение, автоматический сбор информации, генерация контента. Глаголы!

Мы пока не научились "рисовать глаголы" на экране. Именно поэтому сейчас происходит такой взрыв экспериментов с новыми типами взаимодействия.

7 трендов AI-интерфейсов, которые меняют правила игры

1. Голосовые интерфейсы с минимальной задержкой
Ключевой фактор здесь — латентность. Если AI отвечает с задержкой больше 500 мс, иллюзия разговора с человеком разрушается. Компании вроде Vapi и Retell AI создают голосовые интерфейсы, где задержка минимальна, а голос неотличим от человеческого.

2. Визуализация рабочих процессов для AI-агентов
Когда AI работает автономно, нам нужен способ контролировать его действия. Решение? Интерактивные канвасы с блок-схемами, показывающие каждый шаг принятия решений.

3. Интерактивные таблицы с AI-агентами в каждой ячейке
Представьте таблицу, где каждая ячейка — это отдельный AI-агент, собирающий данные из интернета. Вы просто добавляете новый столбец "Финансирование компании", и AI заполняет его актуальными данными.

4. Итеративный дизайн с мгновенной обратной связью
Вместо часов работы в Figma — опишите интерфейс словами, получите готовый дизайн, внесите корректировки голосом или текстом. Мгновенно.

5. Адаптивные интерфейсы, меняющиеся в зависимости от контекста
Вместо сотни кнопок в Microsoft Word — только те, которые нужны вам прямо сейчас, исходя из контекста вашего документа.

6. Видеогенерация с предварительным просмотром
Создание видео с цифровым двойником занимает много времени. Решение? Показывать размытую версию с правильным аудио для быстрой итерации, прежде чем запускать полную рендеринг.

7. Клавиатурные сокращения вместо меняющихся кнопок
Когда интерфейс адаптивный, кнопки постоянно меняются. Решение? Стабильные клавиатурные сокращения, которые работают одинаково в любом контексте.

Что это значит для продакт-менеджеров?

Эрик Саймонс, основатель Bolt (AI-инструмент для создания веб-приложений), уверен: в мире AI именно продакт-менеджеры окажутся в выигрыше.

Почему? Потому что:
- Умение четко формулировать задачи становится ключевым навыком
- Понимание пользователей важнее технических деталей
- Способность быстро тестировать гипотезы становится суперсилой

Представьте: вы придумали новую фичу, тут же создали прототип и показали пользователям. Без ожидания спринтов и согласований с разработкой!

Как подготовиться к такому будущему уже сейчас?

1. Начните экспериментировать с AI-инструментами.
2. Развивайте навык промптинга под все повторяющиеся задачи
3. Фокусируйтесь на решении проблем и создании ценности,
4. Изучайте основы промпт-инжиниринга — это новый вид программирования.
5. Следите за новыми интерфейсами — мы только в начале пути.


====

Хотите научиться эффективно интегрировать ИИ в рабочие процессы вашей команды?

Пишите — помогу избежать типичных ошибок @asmadeyi

AI-Powered Product Manager

Мастер-классы по ИИ для менеджеров по продуктам

1️⃣ The AI-Powered Product Manager

2️⃣ AI-Powered User Research for Product Managers

3️⃣ 3 AI Workflows to Become a 10x PM

4️⃣ Automate Product Management Tasks with AI

5️⃣ 5 Key Skills for AI Product Managers

6️⃣ Become 1% Agentic AI Growth Practitioner

7️⃣ Growth Hacking with AI: From Strategy to Execution

8️⃣ The New AI Practitioner: Lead In The New Era Of Agentic AI.

9️⃣ Prototyping with AI