Baoyu Design — Claude Design как Agent Skill для локальных агентов

Baoyu Design — это Agent Skill, который упаковывает движок Claude Design (тот самый, что работает на claude.ai/design) в формат, запускаемый на любом локальном AI-агенте. Результат — UI-макеты, прототипы, вайрфреймы, лендинги, дашборды, мобильные приложения и презентации, — всё в виде самодостаточного HTML, который остаётся в вашем репозитории.

Проект создан Jim Liu (宝玉), распространяется под лицензией MIT и не является официальным продуктом Anthropic.

Зачем запускать Claude Design локально

Независимость от веб-сайта. Вы получаете подавляющее большинство возможностей claude.ai/design, не выходя из редактора. Та же методология, те же стандарты качества, тот же формат вывода.

Лучший результат на Opus 4.8. Skill представляет собой длинный, требовательный дизайн-бриф — чем мощнее модель, тем лучше результат. Рекомендуется Claude Opus 4.8, но работает и на других моделях.

Итерация через указание, а не описание. Поскольку результат — это HTML, доступный на localhost, вы можете использовать встроенные инструменты браузерного превью агента (Cursor Browser, Claude Preview, Codex Browser). Укажите на кнопку в превью, скажите, что хотите изменить, и агент отредактирует исходный код — быстрый визуальный цикл правок.

Всё ваше. Результаты сохраняются в designs/<project>/ как самодостаточный HTML, который можно версионировать, форкать, экспортировать или сразу использовать.

Что умеет

Skill управляет полным дизайн-процессом: уточняющие вопросы → сбор контекста → создание HTML-артефактов → превью и верификация. Встроены 24 специализированных навыка и набор готовых компонентных шаблонов.

Стартовые компоненты избавляют агента от создания базовых элементов с нуля: фреймы iOS / Android / macOS / браузера, дизайн-канвас с зумом, сцена для слайдов, движок покадровой анимации, панель настроек, слот для изображений.

Как работает

Skill — это чистый Markdown плюс несколько JSX/JS шаблонов. Никакого build-шага, никакого runtime.

skills/baoyu-design/
├── SKILL.md              # Точка входа — оркестрирует весь процесс
├── system-prompt.md      # Дизайн-методология и стандарты качества
├── references/
│   ├── claude.md         # Маппинг инструментов для Claude Code
│   ├── cursor.md         # Маппинг инструментов для Cursor
│   └── codex.md          # Маппинг инструментов для Codex Agent
├── built-in-skills/      # 24 специализированных промпта
└── starter-components/   # Фреймы устройств, сцена для слайдов, канвас и т.д.

Когда вы запрашиваете дизайн, агент читает SKILL.md, загружает методологию из system-prompt.md, определяет среду выполнения (Cursor, Claude Code, Codex Agent или универсальный агент) и подключает нужные reference-документы. Затем подтягивает только те встроенные навыки, которые нужны для задачи.

Установка

Рекомендуемый способ — CLI-утилита npx skills от Vercel Labs:

npx skills add JimLiu/baoyu-design

npx skills add JimLiu/baoyu-design -g

npx skills add JimLiu/baoyu-design --agent claude-code
npx skills add JimLiu/baoyu-design --agent cursor
npx skills add JimLiu/baoyu-design --agent codex

Устанавливается в .claude/skills/ для Claude Code и .agents/skills/ для Cursor/Codex (флаг -g — в домашнюю директорию).

Альтернатива — просто передать URL репозитория агенту в чате:

Прочитай https://github.com/JimLiu/baoyu-design и следуй skills/baoyu-design/SKILL.md для дизайна экрана настроек приложения для медитации.

Агент сам загрузит репозиторий и начнёт работу — подходит для разовых задач.

Использование

После установки skill активируется автоматически по описанию — просто опишите задачу на естественном языке:

Design 3 hi-fi variations of a settings screen for a meditation app.

В Claude Code можно активировать явно через /baoyu-design. Агент задаст уточняющие вопросы, создаст HTML в директории designs/ и покажет превью на localhost.

Для превью вручную:

python3 -m http.server 4311 --directory designs

Затем откройте http://localhost:4311/<project>/<file>.html.

Дизайн-системы

Skill поддерживает работу с дизайн-системами — версионированными наборами токенов, шрифтов, компонентов и UI-китов. Системы хранятся рядом с проектами в designs/.

При старте нового дизайна агент спрашивает, какую дизайн-систему использовать, и обнаруживает все доступные. Можно указать систему сразу:

Design a settings screen using the Fluent 2 design system.

Система привязывается к проекту как визуальный контракт — каждый экран строится из реальных токенов и компонентов системы, агент не придумывает стили со стороны. Привязка сохраняется при повторном открытии проекта.

Примеры промптов

• «Design 3 hi-fi variations of a pricing page using the brand in this screenshot.»
• «Prototype a working onboarding flow — real state, transitions, form validation.»
• «Make a 10-slide deck from this PRD for an engineering all-hands.»
• «Wireframe a few layout ideas for a mobile expense-tracker home screen.»
• «Recreate the composer UI from this codebase, then export it as standalone HTML.»
• «Build a dashboard using our design system, starting from its analytics screen.»

Для лучших результатов предоставьте дизайн-контекст — скриншот, UI-кит, ссылку на Figma или кодовую базу. Наличие реального контекста — главный фактор качества.

Поддерживаемые агенты

Cursor, Claude Code, Codex Agent — с first-class поддержкой (специализированные reference-документы). Также работает с Cline, Roo Code, GitHub Copilot и 70+ другими агентами, поддерживаемыми установщиком npx skills.