baoyu-design — скилл
Скилл-движок дизайна для локальных агентов: мокапы, прототипы, лендинги, дашборды и слайды в виде самодостаточного HTML прямо в редакторе
- 6 367 ★ репозитория
- Последний коммит
Расширенный доступ
Почему такой уровень
- Пишет файлы в проект и поднимает локальный сервер предпросмотра
- Запускает установщик и вспомогательные скрипты на Node.js
Установка
- Работает в
Ручная установка
npx skills add JimLiu/baoyu-designСтавит скилл в текущий проект и сам определяет агента. Добавьте -g для установки на все проекты, --agent claude-code или --agent cursor для явного выбора.
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Пишет файлы в проект и поднимает локальный сервер предпросмотра
- Запускает установщик и вспомогательные скрипты на Node.js
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл переносит методику Claude Design в локального агента, чтобы тот делал дизайн-артефакты без обращения к сайту. Агент читает SKILL.md, подхватывает методику из system-prompt.md, определяет свою среду (Claude Code, Cursor, Codex или другую) и берет только нужные встроенные под-скиллы: hi-fi макеты, интерактивные прототипы, вайрфреймы, лендинги, дашборды, мобильные экраны, слайды, документы и иллюстрации. Результат сохраняется в папку designs как самодостаточный HTML, который можно смотреть по localhost и править, указывая на элемент в предпросмотре. Есть импорт контекста из файлов Figma, репозиториев GitHub и готового HTML или CSS, работа по дизайн-системам и экспорт в PDF, PPTX и видео.
Для кого. Для дизайнеров, продуктовых команд и разработчиков, которым нужны макеты и прототипы прямо в редакторе с локальным агентом.
Подходит, если
- Нужны варианты макета экрана или лендинга без отдельного сервиса
- Нужен рабочий интерактивный прототип с состоянием и переходами
- Нужно собрать слайды и выгрузить их в PowerPoint
- Нужно перенести дизайн из файла Figma или готового HTML в проект
Не подходит, если
- Нужен продакшн-код фреймворка, а не HTML-макет
- Под рукой нет локального агента, способного читать и писать файлы
Пример запроса к агенту
Сделай три hi-fi варианта экрана настроек для приложения для медитацииОграничения
Скилл это большой дизайн-бриф, результат сильно зависит от модели, автор советует Opus. Нужен локальный агент с доступом к файлам, Node.js для установщика и Python 3 для локального предпросмотра. Экспорт в PPTX работает после разовой сборки локального CLI с Playwright и Chromium. Проект независимый, репакует Claude Design и не связан с Anthropic.
Как отключить. Удалите папку baoyu-design из каталога скиллов агента: .claude/skills/ у Claude Code или .agents/skills/ у Cursor и Codex, для глобальной установки те же папки в домашнем каталоге.
Частые вопросы
Нужна ли подписка на сайт claude.ai/design?
Нет. Скилл работает на вашем локальном агенте и модели, отдельная подписка на сайт не требуется.
Как править результат?
Готовый HTML открывается по localhost. Можно указать на элемент в предпросмотре агента и сказать, что изменить, агент поправит исходник.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл дизайна интерфейсов: арт-дирекция под продукт, общий DESIGN.md, токены, проверка верстки и доступности в браузере.
Скилл дизайна интерфейсов для агента: диагностика, четыре направления на выбор, реализация и приемка без вида шаблона от ИИ
Скилл дизайна веб-страниц для Claude Code: сначала спецификация DESIGN.md, потом код по ней
Реестр устанавливаемых дизайн-скиллов: готовые файлы SKILL.md и DESIGN.md с токенами, правилами компонентов и доступностью под разные стили
Скилл дизайна интерфейсов, презентаций и графики для кодинг-агентов: черновики на холсте через CLI superdesign
Скилл Claude превращает сайты, картинки и файлы Figma в дизайн-систему: Markdown, токены DTCG и промпты для сборки элементов
Коротко о README
README представляет baoyu-design как перенос движка Claude Design в формат переносимого Agent Skill для Cursor, Claude Code, Codex и других агентов с доступом к файлам. Скилл собран из Markdown и нескольких JSX и JS заготовок без шага сборки: SKILL.md запускает процесс, system-prompt.md держит методику, папки built-in-skills и starter-components дают специализированные под-скиллы и готовые заготовки экранов и оболочек. Описаны установка через npx skills, работа по дизайн-системам, импорт из Figma, GitHub и HTML, экспорт в PDF, PPTX и MP4. Отдельный раздел разбирает локальный конвейер gen-pptx, который рендерит HTML в Chromium через Playwright и переводит его в нативный PowerPoint. Лицензия MIT, проект независимый и не связан с Anthropic.
Бейдж для README
Исходный SKILL.md
--- name: baoyu-design description: >- Create polished design artifacts as self-contained HTML: UI mockups, interactive prototypes, wireframes, landing pages, dashboards, app screens, mobile apps, slide decks (a.k.a. PPT / PowerPoint presentations), documents and résumés, animations, 3D objects, research reports, HTML email, diagrams, fliers, and visual explorations. Use whenever the user asks to design, mock up, prototype, wireframe, visualize, explore, or make a PPT/deck for an interface, product screen, user flow, content layout, visual artifact, or pitch/deck concept, even if they do not say "design". Also use to export a deck built with this skill to PowerPoint (PPT/PPTX) — but only decks authored here (deck-stage / this skill's slide-structured HTML), NOT arbitrary HTML, so confirm the target is such a deck first. Also use for setting up, importing, or authoring reusable design systems, UI kits, brand tokens, or component libraries. Harness-agnostic for Claude Code, Cursor, Codex Agent, and similar file-capable agents. --- # Design You are an expert designer producing design artifacts as HTML on the user's behalf. This skill wraps a full design methodology — follow it whenever you're asked to design, mock up, prototype, wireframe, or visualize an interface. It is **harness-agnostic**: it runs on Claude Code, Cursor, Codex Agent, or any comparable file-capable agent, resolving each environment's unique tools from a per-harness reference doc. ## How to use this skill **1. Load the methodology.** Read [`system-prompt.md`](system-prompt.md) (in this skill's directory) — the core design process and craft standards. Follow it for the whole job. **2. Identify your harness and load its tool reference.** Generic tools (shell, file read/write/edit/search, `gh`) work the same everywhere and need no special doc. The harness-unique tools — **asking the user a question, previewing/showing a page, taking screenshots, and debugging/verifying** — differ per environment.