baoyu-design

Установка

npx skillfoxx add skills/baoyu-design

npx skills add jimliu/baoyu-design --skill baoyu-design -a claude-code -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jimliu/baoyu-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/baoyu-design/
git -C "$tmp" checkout 6530033592bf7fa58bc1a5a2a2ad278da45213a9
mkdir -p .claude/skills
cp -R "$tmp/skills/baoyu-design" .claude/skills/baoyu-design

npx skills add jimliu/baoyu-design --skill baoyu-design -a cursor -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jimliu/baoyu-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/baoyu-design/
git -C "$tmp" checkout 6530033592bf7fa58bc1a5a2a2ad278da45213a9
mkdir -p .agents/skills
cp -R "$tmp/skills/baoyu-design" .agents/skills/baoyu-design

npx skills add jimliu/baoyu-design --skill baoyu-design -a github-copilot -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jimliu/baoyu-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/baoyu-design/
git -C "$tmp" checkout 6530033592bf7fa58bc1a5a2a2ad278da45213a9
mkdir -p .github/skills
cp -R "$tmp/skills/baoyu-design" .github/skills/baoyu-design

npx skills add jimliu/baoyu-design --skill baoyu-design -a codex -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jimliu/baoyu-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/baoyu-design/
git -C "$tmp" checkout 6530033592bf7fa58bc1a5a2a2ad278da45213a9
mkdir -p .agents/skills
cp -R "$tmp/skills/baoyu-design" .agents/skills/baoyu-design

npx skills add jimliu/baoyu-design --skill baoyu-design -a gemini-cli -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jimliu/baoyu-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/baoyu-design/
git -C "$tmp" checkout 6530033592bf7fa58bc1a5a2a2ad278da45213a9
mkdir -p .agents/skills
cp -R "$tmp/skills/baoyu-design" .agents/skills/baoyu-design

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jimliu/baoyu-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/baoyu-design/
git -C "$tmp" checkout 6530033592bf7fa58bc1a5a2a2ad278da45213a9
mkdir -p .devin/skills
cp -R "$tmp/skills/baoyu-design" .devin/skills/baoyu-design

npx skills add jimliu/baoyu-design --skill baoyu-design -a cline -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jimliu/baoyu-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/baoyu-design/
git -C "$tmp" checkout 6530033592bf7fa58bc1a5a2a2ad278da45213a9
mkdir -p .cline/skills
cp -R "$tmp/skills/baoyu-design" .cline/skills/baoyu-design

npx skills add jimliu/baoyu-design --skill baoyu-design -a roo -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jimliu/baoyu-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/baoyu-design/
git -C "$tmp" checkout 6530033592bf7fa58bc1a5a2a2ad278da45213a9
mkdir -p .roo/skills
cp -R "$tmp/skills/baoyu-design" .roo/skills/baoyu-design

npx skills add jimliu/baoyu-design --skill baoyu-design -a opencode -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jimliu/baoyu-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/baoyu-design/
git -C "$tmp" checkout 6530033592bf7fa58bc1a5a2a2ad278da45213a9
mkdir -p .agents/skills
cp -R "$tmp/skills/baoyu-design" .agents/skills/baoyu-design

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jimliu/baoyu-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/baoyu-design/
git -C "$tmp" checkout 6530033592bf7fa58bc1a5a2a2ad278da45213a9
mkdir -p .agents/skills
cp -R "$tmp/skills/baoyu-design" .agents/skills/baoyu-design

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jimliu/baoyu-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/baoyu-design/
git -C "$tmp" checkout 6530033592bf7fa58bc1a5a2a2ad278da45213a9
mkdir -p .agents/skills
cp -R "$tmp/skills/baoyu-design" .agents/skills/baoyu-design

npx skills add JimLiu/baoyu-design

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Скилл переносит методику Claude Design в локального агента, чтобы тот делал дизайн-артефакты без обращения к сайту. Агент читает SKILL.md, подхватывает методику из system-prompt.md, определяет свою среду (Claude Code, Cursor, Codex или другую) и берет только нужные встроенные под-скиллы: hi-fi макеты, интерактивные прототипы, вайрфреймы, лендинги, дашборды, мобильные экраны, слайды, документы и иллюстрации. Результат сохраняется в папку designs как самодостаточный HTML, который можно смотреть по localhost и править, указывая на элемент в предпросмотре. Есть импорт контекста из файлов Figma, репозиториев GitHub и готового HTML или CSS, работа по дизайн-системам и экспорт в PDF, PPTX и видео.

Для кого. Для дизайнеров, продуктовых команд и разработчиков, которым нужны макеты и прототипы прямо в редакторе с локальным агентом.

Пример запроса к агенту

Сделай три hi-fi варианта экрана настроек для приложения для медитации

Ограничения

Скилл это большой дизайн-бриф, результат сильно зависит от модели, автор советует Opus. Нужен локальный агент с доступом к файлам, Node.js для установщика и Python 3 для локального предпросмотра. Экспорт в PPTX работает после разовой сборки локального CLI с Playwright и Chromium. Проект независимый, репакует Claude Design и не связан с Anthropic.

Как отключить. Удалите папку baoyu-design из каталога скиллов агента: .claude/skills/ у Claude Code или .agents/skills/ у Cursor и Codex, для глобальной установки те же папки в домашнем каталоге.

Проверка безопасности

• Пишет файлы в проект и поднимает локальный сервер предпросмотра
• Запускает установщик и вспомогательные скрипты на Node.js

Коротко о 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.

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.

Похожие