Гайды / Вайбкодинг
Вайбкодинг · Дизайн
Дизайн без дизайнера: пять инструментов делают 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.
Как начать
- →
Зайди на rork.com и опиши идею приложения обычным текстом
- →
Смотри, как Rork собирает работающее приложение прямо в браузере
- →
Тестируй сразу на своём телефоне, дорабатывай через чат
- →
Готовь к публикации в 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.
Как устроен поток
- →
Поставь плагин Tokens Studio в Figma из библиотеки сообщества
- →
Собери наборы токенов: цвет, типографика, отступы, размеры
- →
Сгруппируй их в темы и режимы - например, светлую и тёмную
- →
Подключи GitHub и выгружай токены в код через Style Dictionary
Архитектуру токенов и схему именования продумай заранее. Переименовывать потом, когда их уже сотни и они ссылаются друг на друга, - больно.
05 / Физический продукт
Genpire - от промпта до чертежа для фабрики
ИИ-генератор тех-паков. Описываешь продукт словами или грузишь скетч - он выдаёт готовый для завода тех-пак: размеры, спецификацию материалов, заметки по конструкции, и сразу подбирает производителя. Цены - от 14,90 доллара в месяц.
Большинство ИИ-инструментов останавливаются на красивой картинке. Genpire идёт дальше - от промпта до фабричных спеков и выхода на производителя в одном месте. Он закрывает работу того самого конструктора тех-паков за 300-1500 долларов и тянет 11 с лишним направлений: одежда, обувь, украшения, мебель, товары для дома, бьюти.
Сквозной поток
- →
Выбери категорию продукта и опиши его текстом или загрузи скетч
- →
ИИ генерит визуал, потом по нему - тех-пак с размерами и материалами
- →
Правишь силуэт, цвет, детали промптом или руками
- →
Выгружаешь в 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 живых эфира
Коротко
Частые вопросы
Что делают эти пять инструментов вместе?
Они закрывают весь путь от первого экрана до чертежа для завода: каждый берёт на себя один стык, который раньше держал дизайнер. Первые четыре нужны тем, кто собирает софт: экран, дизайн-система, приложение, токены. Пятый - для тех, кто делает физическую вещь и нужен чертёж для фабрики. Тебе остаётся то, что делегировать нельзя: вкус и решение, что вообще собирать.
Сколько стоит Superdesign?
Сам инструмент бесплатный: открытый код на лицензии MIT, собрал его автор под ником AI Jason. Платить не нужно за сам Superdesign, но запуск агента внутри редактора тратит твои API-кредиты модели, так что за расходом стоит следить. На момент выхода этого гайда у проекта было около 6,5 тысяч звёзд на GitHub.
Нужен ли платный ключ для DESIGN.md?
Нет, не для всего: поиск и просмотр готовых дизайн-систем работают без ключа. Ключ нужен только для скачивания и загрузки файлов, заводится он бесплатно на сайте сервиса. Подключить файл можно тремя способами: вручную перетащить в проект, через CLI-пакет designmd или через MCP в Claude Code.
Сколько стоит Rork?
Rork Pro стоит примерно 25-100 долларов в месяц, Rork Max - от 200 долларов. Тарифы менялись со временем, точные цены стоит смотреть на сайте перед оплатой. Rork Pro собирает кросс-платформенные приложения на React Native и Expo, а Rork Max делает нативные SwiftUI-приложения под iPhone, iPad, Apple Watch и Vision Pro.
Чем Tokens Studio отличается от обычного плагина Figma?
Tokens Studio - это открытое ядро дизайн-токенов без привязки к одному вендору, а не просто плагин: держит цвета, шрифты и отступы в синхроне между дизайном и кодом. Сам плагин для Figma набрал около 300 тысяч пользователей, но инструмент работает и с Penpot, GitHub, Style Dictionary. На нём держат свои системы такие команды, как Babbel и TomTom.
Сколько стоит Genpire и что он делает?
Genpire стоит от 14,90 доллара в месяц. Это ИИ-генератор тех-паков для физического продукта: по тексту или скетчу выдаёт размеры, спецификацию материалов и подбирает производителя. Он закрывает работу того самого конструктора тех-паков, который обычно стоит от 300 до 1500 долларов, и тянет 11 с лишним направлений - от одежды до товаров для дома.
Ещё по теме
Нейросети и ИИ-инструменты
Open Design: бесплатная копия Claude Design для сайтов и презентаций
Open Design - бесплатный опенсорс-аналог Claude Design: что скачать, куда нажать, как собрать первый макет на любой нейросети. Пошагово для…
Презентация без VPN: собрать из текста за 10 минут на ИИ
Презентация без VPN: собираем из обычного текста за 10 минут на бесплатной российской нейросети GigaChat, без дизайнера, с экспортом в…
ГУГЛ: 8 бесплатных ИИ-инструментов Google - разбор для новичка
8 бесплатных ИИ-инструментов Google: Stitch, AI Studio, Flow, Lyria, Mixboard, Pomelli, Opal и Lumiere. Где взять, как пользоваться по…