Иван Сергеев

Гайды  /  Вайбкодинг

Вайбкодинг · Дизайн

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

Раньше между твоей идеей в голове и готовым экраном всегда стоял переводчик - дизайнер. Ты объяснял словами, он переводил в пиксели, ты ждал и платил. Этот переводчик был нужен на каждом стыке: макет, дизайн-система, приложение, токены, фабрика. Сейчас на каждом из этих стыков сидит инструмент, который сам понимает обычный текст. Пять инструментов закрывают весь путь - от первого экрана до спецификации, которую можно отправить на завод. Этот гайд - что каждый делает, как поставить и какие промпты ему давать.

С чего всё начиналось

«Чтобы это выглядело нормально, нужен дизайнер»

Эта мысль стопорит почти всех, кто начинает. Есть идея продукта, приложения или физической вещи - но дальше упираешься в стену. Нанять дизайнера дорого, а сделать самому страшно: выйдет колхоз, который стыдно показать.

Дальше начинается знакомый круг. Ищешь фрилансера, ждёшь неделю, платишь, получаешь не то, объясняешь заново. С физическим продуктом ещё хуже: один тех-пак у конструктора стоит от 300 до 1500 долларов, и это только чертёж, до фабрики ещё далеко. В итоге проще отложить идею, чем продираться через всё это.

А люди вокруг тем временем собирают целые продукты текстом. И первая реакция честная: «ну на нейронку дизайн не свалишь, выйдет та самая безликая ИИ-картинка». Оказалось - нет.

Сдвиг

Дизайн - это не талант, а конвейер из стыков

Дизайнер никогда не делал «магию». Он переводил твою идею через цепочку стыков: набросал экран, свёл всё в единую систему, превратил в работающее приложение, увязал цвета и шрифты, а для физической вещи - собрал чертёж для завода. На каждом стыке нужно было дождаться человека и ему заплатить.

Только теперь на каждый стык есть свой инструмент, который понимает обычный текст. Ты описываешь словами - он выдаёт готовый кусок. Тебе остаётся то, что делегировать нельзя: вкус и решение, что вообще собирать.

Ниже - пять инструментов, по одному на каждый стык. Первые четыре - для тех, кто собирает софт. Последний - для тех, кто делает физический продукт.

01 / UI

Superdesign - рисует экраны прямо в редакторе

Открытый дизайн-агент, который живёт внутри твоего редактора кода - VS Code, Cursor, Windsurf, Claude Code. Описываешь экран словами, он выдаёт макеты, готовые компоненты и каркасы, не заставляя выходить из проекта. Открытый код, лицензия MIT, собрал его автор под ником AI Jason, на момент выхода - около 6,5 тысяч звёзд на GitHub.

Сильная сторона - он генерит варианты пачкой. Ты смотришь сразу десять направлений, а не цепляешься за первое попавшееся. Макеты сохраняются у тебя в репозитории под гитом, а не на чужом сервере.

Установка

# в VS Code / Cursor / Windsurf
Открой Extensions -> найди "SuperDesign" -> Install
Открой боковую панель SuperDesign

# открыть холст
cmd + shift + p -> superdesign: open canva

# макеты лежат в папке проекта
.superdesign/

Сам инструмент бесплатный, но запуск агента тратит твои API-кредиты модели. Следи за расходом.

Промпты

Design a modern login screen with a centered card,
soft shadow, and a teal primary button
Create a reusable pricing card component with a title,
price, feature list, and CTA button

02 / Дизайн-система

DESIGN.md - целая дизайн-система одним файлом

Библиотека готовых дизайн-систем, где каждая упакована в один файл DESIGN.md. Твой ИИ-редактор читает этот файл и приводит весь интерфейс к единому виду. Формат - открытый стандарт, работает с Claude Code, Cursor и любым ИИ-кодером.

Вся установка - перетащить один markdown-файл в корень проекта, рядом с README.md. Никакой настройки. Дальше говоришь ИИ: «возьми файл DESIGN.md и стилизуй приложение под него».

Три способа подключить

# A. Вручную, без инструментов
Скачай любую систему как файл DESIGN.md
Брось его в корень проекта рядом с README.md
Скажи ИИ: "Use the @DESIGN.md file and style my app"

# B. Через CLI
npm install -g designmd
export DESIGNMD_API_KEY=dk_твой-ключ-сюда

# C. Через MCP (Claude Code)
claude mcp add -s user designmd -e DESIGNMD_API_KEY=dk_твой-ключ -- npx designmd-mcp

Поиск и просмотр работают без ключа. Скачивание и загрузка требуют бесплатного API-ключа - заводится на сайте сервиса.

Промпт

Use the @DESIGN.md file and restyle the entire app
to match it

03 / Приложение

Rork - текст превращается в нативное приложение для сторов

Платформа, которая собирает из обычного текста настоящее нативное мобильное приложение - такое, что можно публиковать в App Store и Google Play. Большинство ИИ-генераторов останавливаются на веб-приложении. Rork с первого дня сделан под мобайл и поднял раунд в 15 миллионов долларов (Left Lane Capital, апрель 2026).

Два режима. Rork Pro собирает кросс-платформенные приложения на React Native и Expo - том самом стеке, на котором работают Discord и Shopify. Rork Max делает нативные SwiftUI-приложения, компилирует их через Xcode в облаке и метит сразу в iPhone, iPad, Apple Watch и Vision Pro.

Как начать

  1. Зайди на rork.com и опиши идею приложения обычным текстом

  2. Смотри, как Rork собирает работающее приложение прямо в браузере

  3. Тестируй сразу на своём телефоне, дорабатывай через чат

  4. Готовь к публикации в App Store или Google Play

Тарифы менялись со временем. Pro - примерно 25-100 долларов в месяц, Max - от 200. Точные цены смотри на сайте перед оплатой.

Промпт

Build a minimalist habit tracker app with daily streaks,
a clean home screen, and dark mode

04 / Токены

Tokens Studio - один источник правды для цветов и шрифтов

Платформа дизайн-токенов: держит цвета, шрифты, отступы в синхроне между дизайном и кодом. Определил токен один раз - и он расходится везде, без ручного копирования между макетом и проектом. Плагин для Figma набрал около 300 тысяч пользователей.

Открытое ядро, без привязки к одному вендору: работает с Figma, Penpot, GitHub, Style Dictionary. На нём держат свои системы такие команды, как Babbel и TomTom.

Как устроен поток

  1. Поставь плагин Tokens Studio в Figma из библиотеки сообщества

  2. Собери наборы токенов: цвет, типографика, отступы, размеры

  3. Сгруппируй их в темы и режимы - например, светлую и тёмную

  4. Подключи GitHub и выгружай токены в код через Style Dictionary

Архитектуру токенов и схему именования продумай заранее. Переименовывать потом, когда их уже сотни и они ссылаются друг на друга, - больно.

05 / Физический продукт

Genpire - от промпта до чертежа для фабрики

ИИ-генератор тех-паков. Описываешь продукт словами или грузишь скетч - он выдаёт готовый для завода тех-пак: размеры, спецификацию материалов, заметки по конструкции, и сразу подбирает производителя. Цены - от 14,90 доллара в месяц.

Большинство ИИ-инструментов останавливаются на красивой картинке. Genpire идёт дальше - от промпта до фабричных спеков и выхода на производителя в одном месте. Он закрывает работу того самого конструктора тех-паков за 300-1500 долларов и тянет 11 с лишним направлений: одежда, обувь, украшения, мебель, товары для дома, бьюти.

Сквозной поток

  1. Выбери категорию продукта и опиши его текстом или загрузи скетч

  2. ИИ генерит визуал, потом по нему - тех-пак с размерами и материалами

  3. Правишь силуэт, цвет, детали промптом или руками

  4. Выгружаешь в PDF и Excel и рассылаешь запросы подобранным фабрикам

ИИ делает черновую техническую работу, но не заменяет производственное чутьё. Считай тех-пак сильным первым драфтом - перепроверь размеры и допуски до большого заказа.

Промпт

A black oversized hoodie, heavyweight cotton fleece,
kangaroo pocket, ribbed cuffs, dropped shoulders

Как это складывается

От идеи до готового - за один проход

Сначала экран. Открываешь Superdesign в редакторе, прогоняешь несколько вариантов, забираешь тот, что зашёл.

Дальше закрепляешь стиль, чтобы он не поплыл от экрана к экрану - берёшь DESIGN.md или собираешь токены в Tokens Studio.

Когда направление готово, несёшь его в Rork: описываешь приложение, тестируешь прямо на телефоне, готовишь к стору.

А если строишь не софт, а физическую вещь - прогоняешь идею через Genpire и получаешь чертёж для фабрики вместе с подбором производителя.

Линия одна для всех: на входе обычный текст, на выходе артефакт, который можно выпускать. Софт собирают на первых четырёх, физический продукт опирается на пятый.

Бесплатный ИИ-Лагерь

Инструменты ты теперь знаешь. Осталось собрать из них свою систему

Скачать пять инструментов - легко. Связать их в один поток под своё дело и довести до первого продукта - вот где затык. На бесплатном ИИ-Лагере по Claude Code Иван показывает, как собирать такие штуки руками Claude и доводить идею до готового результата, без отдельного специалиста на каждый стык. Заходи и записывайся.

Забрать бесплатную путёвку

Бесплатно · 3 живых эфира

Ещё по теме

Нейросети и ИИ-инструменты

Все статьи по теме «какая нейросеть лучше»