ДОПОЛНИТЕЛЬНОЕ ЧТЕНИЕ
Дополнительные материалы по Gemini
Учебные материалы, документация и разборы по дизайну с Gemini, перечисленные в опубликованном руководстве.
Gemini 
OpenDesign Проектируйте с
Gemini в
OpenDesign.
Как проектировать интерфейсы с Gemini CLI в OpenDesign: фото с доски как референс, GEMINI.md как свод правил, одна задача по операционной панели от брифа до проверенного файла и ограничения, которые нужно знать перед началом.
От брифа к интерфейсу01 / Gemini
ВЫ ПРИНОСИТЕ ИДЕЮ↗
«От фото с доски
до дашборда, который можно прочитать».
ТРИ ВАРИАНТА НАЧАТЬ С ЭТИМ РУКОВОДСТВОМ ПО GEMINI
Выберите, с чего начать с Gemini
ЭТО РУКОВОДСТВО · ДИЗАЙН ИНТЕРФЕЙСОВ
Создайте интерфейс продукта с Gemini
Это руководство: бриф, референсы, правила дизайна и проверенный результат в HTML.
Читать это руководство НАСТРОЙКАНастройте Gemini с нуля
Вот полный путь от чистой машины до Gemini CLI, который может создавать и проверять UI.
Перейти к настройке СРАВНЕНИЕСравнение Gemini с другими агентами
Чем Gemini отличается от Codex, Claude Code, Cursor в дизайн-задачах и когда стоит выбрать другой workflow.
Посмотреть сравнениеНа этой странице Пример
Одна полная дизайн-задача в Gemini
Дизайн-задача в Gemini: от брифа до интерфейса
Одна задача, показанная от начала до конца: бриф и ограничения, которые вы передаёте, артефакт, который получаете на выходе, и проверки, которые вы всё равно выполняете перед завершением. Интерфейс ниже — иллюстративный пример, созданный для этой страницы, а не запись реального запуска Gemini.
1Дизайн-бриф и ограничения
БрифСпроектируйте операционный дашборд по прикреплённому фото с whiteboard: четыре ключевых показателя, график недельного объёма и очередь инцидентов. Один экран на десктопе, прокручиваемая сводка на телефоне.
- Дизайн-системаOpenDesign paper canvas: Albert Sans, один зелёный акцент
- Брейкпоинты1440px десктоп и 390px мобильный, без горизонтального скролла
- ВзаимодействияДиапазон дат, фильтры инцидентов, навигация по очереди с клавиатуры
- РезультатОдин самодостаточный HTML-файл со стабильными хуками
data-od-id
2Разделение работы: вы, Gemini и OpenDesign
- Вы
Пишете бриф, выбираете дизайн-систему и определяете критерии приёмки.
- Gemini
Планирует макет, пишет HTML, CSS и JavaScript и корректирует по запросу.
- OpenDesign
Предоставляет дизайн-систему и skill, рендерит превью и сохраняет каждую версию как файл в проекте.
- Проверка
Перед передачей проверяются визуальная иерархия, отступы по сетке 8px, оба брейкпоинта и каждое взаимодействие.
3Артефакт Gemini: дашборд операций при 1440px и 390px
4Проверка перед передачей
Layout
Сетка и отступы
Четыре карточки, график и очередь используют одну сетку 8px; ничего не перекрывается ни при 1440, ни при 390.
Иерархия
Визуальная иерархия
Ключевые показатели читаются первыми, затем график, затем очередь; акцент выделяет один столбец и один критический маркер.
Responsive
Мобильная раскладка
По два показателя в строке, график ниже, очередь в виде списка; диапазон дат сворачивается в шторку.
Interaction
Проверка взаимодействия
Переключите диапазон, отфильтруйте по критическим, пройдите по очереди стрелками.
Fit
Когда Gemini подходит для задачи, а когда нет
Gemini подходит, когда
- Мультимодальный скриншот → UI. Сильное понимание изображений превращает референсное изображение в адаптивную разметку и проверяет результат по нему.
- Контекст 1M-token. Целая система дизайна, библиотека компонентов и набор референсов помещаются одновременно, поэтому результат использует ваши реальные примитивы.
- GEMINI.md + MCP. Файлы контекста содержат ваши конвенции; сервер Figma MCP приносит реальный дизайн-контекст в код.
- Открытый и бесплатный для начала. Apache-2.0 и щедрый бесплатный тариф через аккаунт Google, с BYOK через Gemini API.
Выберите другой workflow, если
- Вам нужны редактируемые векторные файлы. Артефакт — это HTML, а не редактируемый дизайн-документ. Проверьте отдельный векторный workflow для нужного вам формата файлов.
- У вас нет ни референса, ни ограничений. Без дизайн-системы или примеров результат стремится к типовому виду; сначала напишите бриф.
- У вас нет учётных данных, необходимых этому агенту. Требуется: аккаунт Google (бесплатный тариф) или Gemini API key (используется ваш собственный ключ). OpenDesign не предоставляет и не проксирует учётные данные.
- Ваша команда работает в Antigravity или Claude Code. У этих агентов есть свои страницы; рабочее пространство то же, настройка отличается. См. похожие агенты.
Совместимость
Что нужно перед началом работы с Gemini
Это руководство описывает Gemini при подключении через настольное приложение OpenDesign. Ссылки на источники проверены 6 сентября 2026 года.
Область применения инструментаGemini, от Google
Gemini CLI — это агент искусственного интеллекта для терминала от Google с открытым исходным кодом (Apache-2.0). Он читает вашу кодовую базу, редактирует файлы, выполняет команды, обращается в интернет и подтверждает ответы данными Google Search. На этой странице речь идёт о проектировании интерфейсов с помощью Gemini через OpenDesign, а не о собственном интерфейсе Gemini. В заметках по настройке OpenDesign перечислены доступные агенты.
Учётные записи и авторизацияАккаунт Google (бесплатный тариф) или Gemini API
Аккаунт Google (бесплатный тариф) или ключ Gemini API (BYOK). Авторизуйтесь через аккаунт Google или ключ Gemini API (BYOK) — учётные данные остаются на вашем устройстве. Эта страница не гарантирует определённую квоту или цену.
Система и версииДесктопное приложение или сборка из исходников
Загляните на страницу загрузок, чтобы найти десктопные сборки. Требования к Node.js и pnpm из исходного quickstart относятся к запуску из исходников, а не к установке десктопного пакета. Минимально совместимая версия Gemini здесь не проверялась.
Проверка подключенияСигнал об успехе
Следуйте инструкциям по подключению, показанным в установленной у вас версии, а затем выполните небольшую задачу. Убедитесь, что Gemini справился с ней и что артефакт открывается. Одной загрузки недостаточно для установления рабочего подключения.
Начните с десктопного приложения
Настройка Gemini за три шага
Сначала загрузите приложение, завершите настройку Gemini для установленной у вас версии, а затем проверьте небольшой результат. Вам не нужно собирать OpenDesign из исходников, чтобы пройти этот путь.
- 1
Загрузите десктопное приложение OpenDesign
Выберите пакет для вашего компьютера, установите его и откройте приложение.
Скачать OpenDesignКОНТРОЛЬНАЯ ТОЧКАОткрывается настольное приложение. Уже установлено? Переходите к следующему шагу — повторно скачивать не нужно. - 2
Подготовьте подключение Gemini
Следуйте инструкциям по Gemini в установленной у вас версии. Авторизуйтесь через аккаунт Google или ключ Gemini API (BYOK) — учётные данные остаются на вашем устройстве.
Документация Gemini CLI# 1. Install Gemini CLI (Node 20+) npm install -g @google/gemini-cli # or run without installing: npx https://github.com/google-gemini/gemini-cli # 2. Start it in your project and authenticate on first run cd your-project gemini # sign in with your Google account, or set GEMINI_API_KEYИз заметок по настройке Gemini в опубликованном руководстве; актуальную команду уточняйте в документации поставщика.
КОНТРОЛЬНАЯ ТОЧКАУбедитесь, что выбраны нужный агент и аккаунт. Если он недоступен, проверьте совместимость, прежде чем браться за более крупную задачу. - 3
Выполните одну небольшую задачу с Gemini
Используйте небольшой бриф, чтобы оценить весь цикл, включая одну доработку.
Начальный брифСоздайте экран настроек с формой профиля и подтверждением сохранения. Используйте мои правила дизайна. Проверьте на ширинах для десктопа и мобильных устройств.
КОНТРОЛЬНАЯ ТОЧКАОткройте результат, проверьте состояние сохранения и запросите одно конкретное изменение. Сгенерированный файл — это начало проверки, а не её конец.
Чтобы запустить OpenDesign из исходного кода, следуйте техническому quickstart.
Рабочий процесс проектирования с Gemini
Рабочий процесс проектирования с Gemini за пять шагов
Та же задача с операционной панелью, пройденная от брифа до проверенного файла. Каждый шаг описывает, что предоставляете вы, что делает Gemini, что добавляет OpenDesign и что вы проверяете.
- 1
Дизайн-бриф
Простой язык, от трёх до шести строк. Укажите аудиторию, задачу экрана и платформы.
- ВыНапишите бриф; приложите референсный скриншот, если он есть.
- GeminiЧитает бриф и файл инструкций проекта; задаёт вопросы, если что-то неоднозначно.
- OpenDesignПредоставляет проект, поверхность для промптов и skill для нужного типа артефакта.
- ПроверкаУбедитесь, что в брифе указаны критерии приёмки. Добавить их сейчас дешевле, чем после генерации.
- 2
Дизайн-ограничения
Дизайн-система и несколько строгих правил. Именно это отличает результат в стиле бренда от универсального вида.
- ВыВыберите дизайн-систему; укажите breakpoints и обязательные к использованию компоненты.
- GeminiЗагружает токены и правила поведения из DESIGN.md в контекст, прежде чем написать хоть строку.
- OpenDesignПоставляет библиотеку дизайн-систем и привязывает выбранную к шаблону skill.
- ПроверкаТокены соответствуют вашему бренду. Один акцентный цвет, нужные шрифты, нужный радиус.
- 3
Сгенерировать интерфейс
Gemini пишет самодостаточный HTML-файл: разметку, стили, интерактивность и стабильные хуки.
- ВыПодождите или ответьте на уточняющий вопрос. Настраивать ничего не нужно.
- GeminiПланирует разделы, пишет HTML, CSS и JavaScript, запускает файл и исправляет то, что не работает.
- OpenDesignСохраняет артефакт в папку проекта и индексирует его для предпросмотра.
- ПроверкаПока ничего. Оценивайте файл после рендеринга, а не по исходному коду.
- 4
Предпросмотр
Файл отображается внутри OpenDesign при указанных вами ширинах. Именно здесь оценивается дизайн.
- ВыПереключаете ширины, кликаете по интерактивным элементам, оставляете комментарии к элементам.
- GeminiЧитает ваши комментарии к превью и готовит следующую правку.
- OpenDesignОтображает предпросмотр, предоставляет цели
data-od-idдля комментариев и правок. - ПроверкаИерархия, контраст, переполнение при 390px, состояния фокуса и то, используется ли акцент умеренно.
- 5
Правки и проверка
Запрашивайте изменения, указывая на элементы в предпросмотре. Каждая правка — это новый файл; ничего не перезаписывается тихо.
- ВыПревращаете комментарии в запросы; решаете, когда задача выполнена.
- GeminiПрименяет изменения на месте и повторно запускает файл.
- OpenDesignХранит версии рядом друг с другом; экспортирует изображение или HTML, когда вы закончили.
- ПроверкаПовторно проверяете только изменённую область, затем всю страницу целиком на каждой контрольной точке.
Ресурсы
Ресурсы по дизайну для Gemini
Skills Просмотреть skills Дизайн-системы Просмотреть системы Шаблоны Просмотреть шаблоны
Skills для дизайна
Типы артефактов, которые Gemini может создавать в OpenDesign, — один skill на каждый тип.
Дизайн-системы
Токены бренда и компоненты, которые нужно привязать до того, как Gemini что-либо сгенерирует.
Шаблоны
Отправные точки для презентаций, лендингов и экранов продукта.
Ограничения
Ограничения Gemini, ручные проверки и запасные варианты
- Область примененияЭта страница описывает Gemini как агента, подключённого к OpenDesign, а не все возможности Gemini.
- Лимиты использованияЛимиты использования и стоимость зависят от учётных данных, которые вы используете (аккаунт Google (бесплатный тариф) или ключ Gemini API). Эта страница не делает заявлений о бесплатных квотах.
- СетьЛокальные файлы проекта не означают офлайн-инференс. Прежде чем передавать конфиденциальные данные, ознакомьтесь с настройками провайдера вашего агента и политиками обработки данных.
- Результат — HTMLПродукты представляют собой HTML-файлы, а не векторные файлы дизайна.
- Ручная проверкаДоступность, реальный контент, соответствие бренду и корректность взаимодействия проверяете вы сами в предпросмотре. Любую самопроверку агента следует считать лишь первым проходом.
- Запасной вариантЕсли агент недоступен или задача завершилась ошибкой, проверьте инструкции по подключению и авторизации для установленной версии. Перед изменением конфигурации сохраните ошибку и последний работающий артефакт.
Вопросы и ответы
Частые вопросы о Gemini и OpenDesign
Может ли Gemini CLI действительно выполнять дизайн-работу?
Да — с эстетическим skill, дизайн-системой и реальными референсными изображениями в контексте Gemini CLI создаёт готовый к продакшену, адаптивный UI, а его сильные мультимодальные модели проверяют результат по референсам. Без этого контекста он склоняется к типовому виду — этот разрыв и закрывает OpenDesign.
Нужно ли платить, чтобы проектировать с Gemini CLI?
Нет — вход через аккаунт Google даёт щедрый бесплатный тариф, а также можно использовать собственный ключ Gemini API (BYOK) или Vertex AI. OpenDesign в любом случае не проксирует ваши учётные данные.
Что делает Gemini CLI особенно хорошим для дизайна?
Две вещи: его модели сильно мультимодальны, поэтому он хорошо читает референсные скриншоты, а контекст в 1M-token может вместить всю дизайн-систему и набор референсов сразу. Оба фактора важны — но вкус всё равно определяется дизайн-системой, skill и референсами, которые вы предоставляете.
Gemini CLI или Claude Code для фронтенд-дизайна?
Оба сильны. Claude Code известен точными решениями по дизайну с учётом кодовой базы; преимущество Gemini CLI — мультимодальное понимание, огромный контекст и бесплатный тариф. Многие команды используют оба — OpenDesign позволяет переключаться между агентами без изменения рабочего процесса дизайна.
Как подключить Gemini CLI к Figma?
Добавьте MCP-сервер Figma в mcpServers в ~/.gemini/settings.json. После этого Gemini может получать реальный дизайн-контекст — компоненты, переменные, данные о макете, — так что сгенерированный код соответствует источнику, а не приближает его.
Начните первую дизайн-задачу с Gemini
Начните с небольшой задачи, оцените результат обмена, а затем переходите к реальному брифу. Выберите вариант, соответствующий вашей настройке; страница не определяет её автоматически.