Превратите референсное изображение в настоящую страницу с Open Design (бесплатно через Gemini)

Это руководство про один конкретный, недооценённый рабочий процесс Open Design: начать с референсного изображения. Найдите понравившийся дизайн — шот с Dribbble, скриншот любого сайта — добавьте его, и Open Design соберёт настоящую страницу в этом визуальном языке. И весь процесс можно запустить бесплатно на бесплатном тарифе кодинг-агента. Оно следует разбору, который Compile Future даёт в своём видео, переписанному и обновлённому под текущий релиз. Посмотрите видео выше или читайте текстовую версию ниже.

Рабочее пространство Open Design: опишите, что хотите создать, выберите режим, а остальное сделает ваш агент.

Что такое Open Design?

Open Design — это open-source, local-first дизайн-платформа, альтернатива Claude Design, которая работает на вашей собственной машине. Главное отличие: вместо привязки к одной модели она управляет тем кодинг-агентом, которым вы уже пользуетесь — Claude Code, Codex, Cursor, Gemini, OpenCode и другими. Она поставляется с обширной библиотекой навыков и брендовых дизайн-систем (Airbnb, Apple, Cursor, Ferrari, Figma и многих других), так что генерация стартует от настоящей эстетики, а не от обобщённого промпта.

• Open source, Apache-2.0 — клонируйте, разверните у себя или просто скачайте приложение.
• Работает локально — ваши проекты живут на вашей собственной машине.
• Любая модель — включая бесплатные тарифы; GPU не нужен (модель работает в облаке через ваш CLI, а не на вашем железе).

Шаг 1 — Установите и подключите бесплатную модель

Скачайте установщик с open-design.ai/download (macOS DMG или Windows .exe) либо запустите из исходников. При первом запуске выберите своего агента. Compile Future использует Gemini CLI, потому что его бесплатный тариф щедрый (много бесплатных запросов в день) — так что весь рабочий процесс не стоит ничего:

• Выберите Gemini в настройке. Если он не определился, установите Gemini CLI (одна команда с его сайта) и войдите с аккаунтом Google.
• Предпочитаете что-то другое? Подойдёт любой обнаруженный CLI, или подключите собственный API key.

Вот почему «GPU не нужен»: модель работает в облаке через ваш CLI, так что хватит даже скромного ноутбука.

Шаг 2 — Сборка из текстового промпта (базовый вариант)

Задайте дизайн-систему по умолчанию (Compile Future любит смелую), выберите Prototype, дайте название и выберите high fidelity для лучшего результата. Отправьте свой бриф. Open Design задаст несколько уточняющих вопросов (один инструмент / лендинг / всё в одном? адаптивный? тон? контекст бренда?) и предложит визуальное направление (например, минималистичный вид в стиле Vercel), а затем соберёт аккуратную первую версию. Акцентные цвета можно настраивать прямо на странице.

Настоящий сгенерированный прототип, отрисованный в превью — тёмный, кинематографичный лендинг агентства.

Шаг 3 — Рабочий процесс с референсным изображением (самое вкусное)

Вот приём, ради которого стоит смотреть видео. Вместо того чтобы описывать вид словами, покажите Open Design этот вид:

1. Найдите понравившийся дизайн — для вдохновения полистайте Dribbble (например, поиск «tools website») или любой действующий сайт.
2. Сохраните его скриншот.
3. Вернувшись в Open Design, создайте проект в режиме free-form, прикрепите скриншот и задайте промпт: «build my [site], use the design language from the image I shared.»
4. Ответьте на уточняющие вопросы, сказав ему повторить UI изображения.

Open Design напишет brand spec по референсу (покажет её и попросит подтвердить), а затем соберёт страницу в этом визуальном языке — то же ощущение макета, цвета и шрифты, что и у вашего референса, применённые к вашему контенту. Это самый быстрый способ получить результат в духе бренда, когда вы видите, чего хотите, но не можете это описать.

Библиотека плагинов: устанавливайте навыки прямо из registry — включая anti-slop дизайн-навыки.

Шаг 4 — Редактирование и публикация

Дорабатывайте обычным языком — «remove the sign-in button», «adjust the card radius» — и смотрите, как всё обновляется. Посмотрите код через Source, затем через Share скачайте ZIP, PDF или PowerPoint, экспортируйте автономный HTML или deploy to Vercel в один клик (просто вставьте Vercel token), чтобы получить ссылку для шеринга.

Советы

• Запускайте бесплатно на бесплатном тарифе Gemini CLI (или любом CLI с бесплатным тарифом) — без подписки, без GPU.
• Используйте референсное изображение, когда можете представить вид, но не можете его описать — Dribbble или скриншот любого сайта.
• Режим free-form + «match the image» — это шаблон промпта, который точно воспроизводит референс.
• Подтвердите brand spec, которую он генерирует, прежде чем он начнёт сборку, чтобы направление было верным.
• high fidelity для отполированного результата; итерируйте правками на обычном языке.

FAQ

Нужен ли мне GPU? Нет. Модель работает через ваш CLI (в облаке), а не на вашей машине — обычного ноутбука достаточно.

Правда можно запустить бесплатно? Да — направьте его на CLI с бесплатным тарифом, например Gemini, и сможете генерировать дизайны без затрат; платить нужно, только если выберете платную модель/API.

Как создавать дизайн из понравившегося изображения? Используйте режим free-form, прикрепите скриншот и скажите ему использовать дизайн-язык изображения; он извлечёт brand spec и соберёт в этом стиле.

Это бесплатно и open source? Да — Apache-2.0. Запускайте локально бесплатно; вы платите только за использование модели/медиа того, что подключаете.

---

Это текстовое руководство основано на разборе от Compile Future. Посмотрите полное видео выше и подпишитесь на Compile Future, чтобы получить больше бесплатных рабочих процессов с ИИ.