Repolode
Предложить
JimLiu

JimLiu/baoyu-design

Agent Skill, который запускает Claude Design локально в Cursor, Claude Code и других агентах и создаёт автономные HTML-макеты, прототипы и презентации.

Open source альтернатива:Claude DesignFigma

Открыть на GitHub
Звёзды
6,161
Форки
481
Открытые issues
0
Последний коммит
позавчера

Что это?

baoyu-design упаковывает рабочий процесс Claude Design с claude.ai/design в переносимый Agent Skill, который запускается в локальном агенте для разработки, например Cursor, Claude Code или Codex. Агент задаёт уточняющие вопросы, создаёт UI-макеты, интерактивные прототипы, вайрфреймы, лендинги, дашборды, экраны для мобильных устройств и слайды в виде автономных HTML-файлов в папке designs/, а затем показывает их в браузере на localhost.

В репозитории также есть четыре дополняющих навыка для редактируемых артефактов: claude-slides для презентаций, claude-design для холстов с артбордами, claude-design-system для дизайн-систем и claude-dashboard для дашбордов с данными. Каждый из них открывается в локальном редакторе. Презентации можно экспортировать в PowerPoint, PDF или HTML, а дизайн-системы — импортировать из файлов Figma .fig или библиотек компонентов.

Навык состоит из обычных Markdown-файлов и каркасов на JSX/JS, без этапа сборки; установить его можно через CLI npx skills. Автор отмечает, что лучшие результаты получаются с Claude Opus 5.5, а проект не связан с Anthropic.

Ключевые возможности

  • 01Создаёт UI-макеты, прототипы, вайрфреймы и лендинги в виде автономных HTML-файлов.
  • 02Показывает дизайн на localhost и позволяет указать на элемент, чтобы запросить правки.
  • 03Экспортирует презентации в редактируемый PowerPoint с нативными анимациями или в виде скриншотов.
  • 04Предоставляет редакторы для презентаций, холстов с дизайном, дизайн-систем и дашбордов.
  • 05Импортирует исходники дизайна из файлов Figma .fig, репозиториев GitHub и готовых HTML/CSS-файлов.
  • 06Устанавливается через CLI npx skills в Claude Code, Cursor и Codex.

Сценарии использования

  • Создание макета экрана настроек или сценария онбординга прямо в редакторе.
  • Преобразование PRD или CSV-файла с аналитикой в презентацию или дашборд.
  • Импорт набора компонентов из Figma .fig и его преобразование в переиспользуемую дизайн-систему.
  • Создание лендингов с последующим экспортом в автономный HTML.

Быстрый старт

  1. 1

    Установите skills в свой проект с помощью skills CLI

    npx skills add JimLiu/baoyu-design
  2. 2

    Опишите агенту задачу по дизайну, например экран настроек для приложения для медитации

  3. 3

    Запустите локальный сервер предпросмотра для созданных дизайнов

    python3 -m http.server 4311 --directory designs

Что важно знать

  • Для наилучших результатов нужна модель Claude Opus 5.5; для её использования может потребоваться платная подписка.
  • Для редакторов артефактов требуется Node.js 20 или новее (для dashboard skill — Node.js 22 или новее).

В подборках

Навыки дизайна интерфейсов для ИИ-агентовИнструменты, навыки и плагины для Claude CodeИИ-ассистенты и агенты для программированияБиблиотеки навыков для ИИ-агентов

Темы

#agent-skills#claude-code#cursor#ui-design#prototyping#html#design-system#slides#claude#claude-design

Частые вопросы

Что такое baoyu-design?
Agent Skill, который запускает Claude Design локально в Cursor, Claude Code и других агентах и создаёт автономные HTML-макеты, прототипы и презентации. baoyu-design упаковывает рабочий процесс Claude Design с claude.ai/design в переносимый Agent Skill, который запускается в локальном агенте для разработки, например Cursor, Claude Code или Codex. Агент задаёт уточняющие вопросы, создаёт UI-макеты, интерактивные прототипы, вайрфреймы, лендинги, дашборды, экраны для мобильных устройств и слайды в виде автономных HTML-файлов в папке designs/, а затем показывает их в браузере на localhost.
baoyu-design можно использовать бесплатно? Какая у него лицензия?
baoyu-design распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
baoyu-design всё ещё поддерживается?
Активно поддерживается. Последний коммит в baoyu-design — 5 нояб. 2026 г..
Для чего можно использовать baoyu-design?
Создание макета экрана настроек или сценария онбординга прямо в редакторе. Преобразование PRD или CSV-файла с аналитикой в презентацию или дашборд. Импорт набора компонентов из Figma .fig и его преобразование в переиспользуемую дизайн-систему. Создание лендингов с последующим экспортом в автономный HTML.
Как установить baoyu-design?
Установите skills в свой проект с помощью skills CLI: npx skills add JimLiu/baoyu-design Опишите агенту задачу по дизайну, например экран настроек для приложения для медитации Запустите локальный сервер предпросмотра для созданных дизайнов: python3 -m http.server 4311 --directory designs
Где скачать baoyu-design?
Исходный код и инструкции по установке — на GitHub: https://github.com/JimLiu/baoyu-design

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты