Гайды / Вайбкодинг
Вайбкодинг · Дизайн
Дизайн без дизайнера: пять инструментов делают 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 живых эфира
Ещё по теме
Нейросети и ИИ-инструменты
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. Где взять, как пользоваться по…