ДОПОЛНИТЕЛЬНОЕ ЧТЕНИЕ
Дополнительные материалы по Kilo
Учебные материалы, документация и пошаговые разборы по дизайну с Kilo из опубликованного руководства.
Kilo 
OpenDesign Проектируйте с
Kilo в
OpenDesign.
Как проектировать интерфейсы с Kilo Code в OpenDesign: модель, которую вы выбираете, ваши собственные правила и режимы, одна задача по странице продукта от скриншота до проверенного файла, а также ограничения, которые нужно знать перед началом работы.
От брифа к интерфейсу01 / Kilo
ВЫ ПРИНОСИТЕ ИДЕЮ↗
«Страница товара по скриншоту,
с любой выбранной моделью».
ТРИ ПУТИ В ЭТОТ ГАЙД ПО KILO
Выберите, с чего начать с Kilo
ЭТО РУКОВОДСТВО · ДИЗАЙН ИНТЕРФЕЙСОВ
Создайте интерфейс продукта с Kilo
Это руководство: бриф, референсы, правила дизайна и проверенный результат в HTML.
Читать это руководство НАСТРОЙКАНастройте Kilo с нуля
Вот полный путь от чистой машины до Kilo Code, способного создавать и проверять UI.
Перейти к настройке СРАВНЕНИЕСравните Kilo с другими агентами
Чем Kilo отличается от Codex, Claude Code, Cursor в задачах дизайна и когда выбрать другой рабочий процесс.
Посмотреть сравнениеНа этой странице Пример
Одна полная дизайн-задача с Kilo
Дизайн-задача с Kilo, от брифа до интерфейса
Одна задача, показанная от начала до конца: бриф и ограничения, которые вы передаёте, продукт, который вы получаете, и проверки, которые вы всё равно проводите перед завершением. Интерфейс ниже — иллюстративный пример, созданный для этой страницы, а не запись реального запуска Kilo.
1Дизайн-бриф и ограничения
БрифСпроектируйте страницу товара для бренда outdoor-снаряжения по прикреплённому скриншоту: галерея, цена, варианты размера и цвета, добавление в корзину и похожие товары. Десктоп и телефон.
- Дизайн-системаOpenDesign paper canvas: Albert Sans, один зелёный акцент
- Брейкпоинты1440px десктоп и 390px мобильный, без горизонтального скролла
- ВзаимодействияМиниатюры галереи, выбор опций, добавление в корзину, прокрутка похожих товаров
- РезультатОдин самодостаточный HTML-файл со стабильными хуками
data-od-id
2Разделение работы: вы, Kilo и OpenDesign
- Вы
Пишете бриф, выбираете дизайн-систему и определяете критерии приёмки.
- Kilo
Планирует макет, пишет HTML, CSS и JavaScript и корректирует по запросу.
- OpenDesign
Предоставляет дизайн-систему и skill, рендерит превью и сохраняет каждую версию как файл в проекте.
- Проверка
Перед передачей проверяются визуальная иерархия, отступы по сетке 8px, оба брейкпоинта и каждое взаимодействие.
3Артефакт Kilo: страница продукта при 1440px и 390px
4Проверка перед передачей
Layout
Сетка и отступы
Галерея и информационная колонка на сетке 8px; информационная колонка никогда не превышает высоту галереи при 1440.
Иерархия
Визуальная иерархия
Название, цена, затем опции; акцентный цвет отмечает только кнопку добавления в корзину.
Responsive
Мобильная раскладка
Сначала галерея, затем название и цена, опции, кнопка на всю ширину; сопутствующие товары со скроллом.
Interaction
Проверка взаимодействия
Переключить миниатюру, выбрать размер, добавить в корзину, прокрутить сопутствующие товары.
Fit
Когда Kilo подходит для задачи, а когда нет
Kilo подходит, когда
- Скриншот → UI независимо от модели. Используйте модель с поддержкой зрения, которая лучше всего превращает референсное изображение в адаптивную разметку, и сверьте результат с оригиналом.
- BYOK для разных провайдеров. Используйте собственные ключи для Anthropic, OpenAI, Google, OpenRouter и других — или шлюз Kilo — так стоимость и учётные данные остаются под вашим контролем.
- Режимы + пользовательские правила + MCP. Планируйте в режиме Architect, собирайте в режиме Code, храните конвенции в пользовательских правилах и подключайте реальный дизайн-контекст через сервер Figma MCP.
- С открытым исходным кодом. Проверяйте каждый промпт и полезную нагрузку контекста; ничего не скрыто, а агент работает в вашей IDE или CLI.
Выберите другой workflow, если
- Вам нужны редактируемые векторные файлы. Артефакт — это HTML, а не редактируемый дизайн-документ. Проверьте отдельный векторный workflow для нужного вам формата файлов.
- У вас нет ни референса, ни ограничений. Без дизайн-системы или примеров результат стремится к типовому виду; сначала напишите бриф.
- У вас нет учётных данных, необходимых этому агенту. Требуется: ваш собственный API-ключ провайдера (bring your own key) или шлюз Kilo. OpenDesign не предоставляет и не проксирует учётные данные.
- Ваша команда работает в OpenCode или Aider. У этих агентов есть свои страницы; рабочее пространство то же, настройка отличается. См. похожие агенты.
Совместимость
Требования Kilo перед началом работы
Это руководство описывает Kilo при подключении через настольное приложение OpenDesign. Ссылки на источники проверены 6 сентября 2026 года.
Область применения инструментаKilo, от Kilo Code, Inc.
Kilo Code — это агент для кода с открытым исходным кодом от Kilo Code, Inc. Он работает в VS Code, JetBrains IDE и терминале, читает вашу кодовую базу, редактирует файлы и выполняет команды. Эта страница посвящена проектированию интерфейсов с Kilo через OpenDesign, а не собственному интерфейсу Kilo. В заметках по настройке OpenDesign перечислены доступные агенты.
Аккаунты и аутентификацияСобственный API-ключ провайдера (BYOK) или ключ Kilo
Собственный API-ключ провайдера (BYOK) или шлюз Kilo. Аутентифицируйтесь с помощью собственного ключа провайдера (BYOK) или шлюза Kilo — учетные данные остаются на вашем компьютере. Эта страница не гарантирует квоту или цену.
Система и версииДесктопное приложение или сборка из исходников
Проверьте страницу загрузки для настольных сборок. Требования к Node.js и pnpm в исходном quickstart применимы к запуску из исходного кода, а не к установке настольного пакета. Минимальная совместимая версия Kilo: здесь не проверена.
Проверка подключенияСигнал об успехе
Следуйте инструкциям по подключению, показанным вашей установленной версией, затем запустите небольшую задачу. Убедитесь, что Kilo справился с ней и что артефакт открывается. Одной загрузки недостаточно для установления рабочего подключения.
Начните с десктопного приложения
Настройка Kilo в три шага
Сначала загрузите, завершите настройку Kilo для вашей установленной версии, затем проверьте небольшой результат. Вам не нужно собирать OpenDesign из исходного кода, чтобы следовать этому пути.
- 1
Загрузите десктопное приложение OpenDesign
Выберите пакет для вашего компьютера, установите его и откройте приложение.
Скачать OpenDesignКОНТРОЛЬНАЯ ТОЧКАОткрывается настольное приложение. Уже установлено? Переходите к следующему шагу — повторно скачивать не нужно. - 2
Подготовьте подключение Kilo
Следуйте инструкциям Kilo в установленной у вас версии. Авторизуйтесь с помощью собственного ключа провайдера (BYOK) или через шлюз Kilo — учётные данные остаются на вашем компьютере.
Документация Kilo Code# 1. Install the Kilo Code extension from the VS Code # (or JetBrains) marketplace, or install the CLI. # 2. Open your project and sign in / add a provider key cd your-project kilo # connect your provider (BYOK) or Kilo's gatewayПо материалам заметок о настройке Kilo из опубликованного руководства; актуальную команду уточняйте в документации поставщика.
КОНТРОЛЬНАЯ ТОЧКАУбедитесь, что выбраны нужный агент и аккаунт. Если он недоступен, проверьте совместимость, прежде чем браться за более крупную задачу. - 3
Выполните одну небольшую задачу в Kilo
Используйте небольшой бриф, чтобы оценить весь цикл, включая одну доработку.
Начальный брифСоздайте экран настроек с формой профиля и подтверждением сохранения. Используйте мои правила дизайна. Проверьте на ширинах для десктопа и мобильных устройств.
КОНТРОЛЬНАЯ ТОЧКАОткройте результат, проверьте состояние сохранения и запросите одно конкретное изменение. Сгенерированный файл — это начало проверки, а не её конец.
Чтобы запустить OpenDesign из исходного кода, следуйте техническому quickstart.
Рабочий процесс дизайна в Kilo
Рабочий процесс дизайна в Kilo за пять шагов
Одна и та же задача по странице продукта, пройденная от брифа до проверенного файла. На каждом шаге указано, что предоставляете вы, что делает Kilo, чем помогает OpenDesign и что вы проверяете.
- 1
Дизайн-бриф
Простой язык, от трёх до шести строк. Укажите аудиторию, задачу экрана и платформы.
- ВыНапишите бриф; приложите референсный скриншот, если он есть.
- KiloЧитает бриф и файл инструкций проекта; задаёт вопросы, если что-то неоднозначно.
- OpenDesignПредоставляет проект, поверхность для промптов и skill для нужного типа артефакта.
- ПроверкаУбедитесь, что в брифе указаны критерии приёмки. Добавить их сейчас дешевле, чем после генерации.
- 2
Дизайн-ограничения
Дизайн-система и несколько строгих правил. Именно это отличает результат в стиле бренда от универсального вида.
- ВыВыберите дизайн-систему; укажите breakpoints и обязательные к использованию компоненты.
- KiloЗагружает токены и правила поведения из DESIGN.md в контекст, прежде чем написать хоть строку.
- OpenDesignПоставляет библиотеку дизайн-систем и привязывает выбранную к шаблону skill.
- ПроверкаТокены соответствуют вашему бренду. Один акцентный цвет, нужные шрифты, нужный радиус.
- 3
Сгенерировать интерфейс
Kilo пишет самодостаточный HTML-файл: разметку, стили, взаимодействия и стабильные хуки.
- ВыПодождите или ответьте на уточняющий вопрос. Настраивать ничего не нужно.
- KiloПланирует разделы, пишет HTML, CSS и JavaScript, запускает файл и исправляет ошибки.
- OpenDesignСохраняет артефакт в папку проекта и индексирует его для предпросмотра.
- ПроверкаПока ничего. Оценивайте файл после рендеринга, а не по исходному коду.
- 4
Предпросмотр
Файл отображается внутри OpenDesign при указанных вами ширинах. Именно здесь оценивается дизайн.
- ВыПереключаете ширины, кликаете по интерактивным элементам, оставляете комментарии к элементам.
- KiloЧитает ваши комментарии к предпросмотру и готовит следующую версию.
- OpenDesignОтображает предпросмотр, предоставляет цели
data-od-idдля комментариев и правок. - ПроверкаИерархия, контраст, переполнение при 390px, состояния фокуса и то, используется ли акцент умеренно.
- 5
Правки и проверка
Запрашивайте изменения, указывая на элементы в предпросмотре. Каждая правка — это новый файл; ничего не перезаписывается тихо.
- ВыПревращаете комментарии в запросы; решаете, когда задача выполнена.
- KiloПрименяет изменения на месте и повторно запускает файл.
- OpenDesignХранит версии рядом друг с другом; экспортирует изображение или HTML, когда вы закончили.
- ПроверкаПовторно проверяете только изменённую область, затем всю страницу целиком на каждой контрольной точке.
Ресурсы
Ресурсы по дизайну в Kilo
Skills Просмотреть skills Дизайн-системы Просмотреть системы Шаблоны Просмотреть шаблоны
Skills для дизайна
Типы продуктов, которые Kilo может создавать в OpenDesign, — по одному skill на тип.
Дизайн-системы
Токены бренда и компоненты, которые нужно привязать, прежде чем Kilo начнёт что-либо генерировать.
Шаблоны
Отправные точки для презентаций, лендингов и экранов продукта.
Ограничения
Ограничения Kilo, ручные проверки и запасные варианты
- Область примененияKilo независим от модели и поддерживает BYOK у многих провайдеров, режимы Architect/Code/Debug/Ask и MCP, поэтому вы сами выбираете модель и сохраняете контроль над учётными данными. Эта страница описывает Kilo как агента, подключённого к OpenDesign, а не все его функции.
- Лимиты использованияЛимиты использования и стоимость зависят от учётных данных, которые вы используете (собственный API-ключ провайдера или шлюз Kilo). На этой странице не утверждается ничего о бесплатных квотах.
- СетьЛокальные файлы проекта не означают офлайн-инференс. Прежде чем передавать конфиденциальные данные, ознакомьтесь с настройками провайдера вашего агента и политиками обработки данных.
- Результат — HTMLПродукты представляют собой HTML-файлы, а не векторные файлы дизайна.
- Ручная проверкаДоступность, реальный контент, соответствие бренду и корректность взаимодействия проверяете вы сами в предпросмотре. Любую самопроверку агента следует считать лишь первым проходом.
- Запасной вариантЕсли агент недоступен или задача завершилась ошибкой, проверьте инструкции по подключению и авторизации для установленной версии. Перед изменением конфигурации сохраните ошибку и последний работающий артефакт.
Вопросы и ответы
Часто задаваемые вопросы о Kilo и OpenDesign
Может ли Kilo Code действительно выполнять дизайнерскую работу?
Да — при наличии эстетического skill, дизайн-системы и реальных референсных изображений в контексте Kilo Code выдаёт готовый к продакшену, отзывчивый UI, а модель с поддержкой зрения проверяет результат по референсам. Без этого контекста он склоняется к типовому виду — этот разрыв закрывает OpenDesign.
Нужно ли платить за дизайн с Kilo Code?
Kilo Code — open-source и бесплатен для установки. Вы используете свой ключ API провайдера (BYOK) и платите этому провайдеру напрямую, либо используете собственный шлюз Kilo по цене провайдера. OpenDesign в любом случае не проксирует ваши учётные данные.
Что делает Kilo Code особенно подходящим для дизайна?
Он не привязан к конкретной модели и открытый, поэтому вы можете использовать любую модель с поддержкой зрения, которая лучше всего читает референсные скриншоты, точно видеть, какой контекст отправляется, и контролировать стоимость и учётные данные. Вкус всё равно определяется дизайн-системой, skill и референсами, которые вы предоставляете.
Kilo Code или Claude Code для фронтенд-дизайна?
Оба сильны. Claude Code известен конкретными, учитывающими кодовую базу дизайн-решениями; преимущество Kilo Code — открытый код и независимость от модели с BYOK, так что модель выбираете вы. Многие команды используют оба — OpenDesign позволяет переключать агентов без изменения вашего рабочего процесса дизайна.
Как подключить Kilo Code к Figma?
Добавьте MCP-сервер Figma из маркетплейса MCP Kilo или настроек MCP. После этого Kilo сможет получать реальный дизайн-контекст — компоненты, переменные, данные о раскладке, — чтобы сгенерированный код соответствовал источнику, а не приближённо его повторял.
Начать первую задачу дизайна с Kilo
Начните с небольшой задачи, оцените результат обмена, а затем переходите к реальному брифу. Выберите вариант, соответствующий вашей настройке; страница не определяет её автоматически.