Repolode
Enviar
JimLiu

JimLiu/baoyu-design

Uma Agent Skill que executa o Claude Design localmente no Cursor, Claude Code ou agentes similares para criar mockups, protótipos e apresentações em HTML autocontido.

Alternativa open source a:Claude DesignFigma

Ver no GitHub
Estrelas
6,161
Forks
481
Issues abertas
0
Último commit
ontem

O que é?

baoyu-design empacota o fluxo de trabalho do Claude Design, disponível em claude.ai/design, como uma Agent Skill portátil que roda em um agente de programação local, como Cursor, Claude Code ou Codex. O agente faz perguntas para esclarecer os requisitos e cria mockups de UI, protótipos interativos, wireframes, landing pages, dashboards, telas para dispositivos móveis e apresentações em HTML autocontido, dentro da pasta designs/, com pré-visualização em localhost.

O repositório também inclui quatro skills complementares para artefatos editáveis: claude-slides para apresentações, claude-design para canvases de pranchetas, claude-design-system para sistemas de design e claude-dashboard para dashboards com dados. Cada uma é aberta em um editor local. As apresentações podem ser exportadas para PowerPoint, PDF ou HTML, e os sistemas de design podem ser importados de arquivos .fig do Figma ou de bibliotecas de componentes.

A skill consiste em Markdown simples e estruturas de JSX/JS, sem etapa de build, e pode ser instalada pelo CLI npx skills. O autor observa que os melhores resultados são obtidos com Claude Opus 5.5 e que o projeto não é afiliado à Anthropic.

Recursos principais

  • 01Gera mockups de UI, protótipos, wireframes e landing pages como HTML autocontido.
  • 02Mostra prévias dos designs em localhost e permite apontar para um elemento para solicitar alterações.
  • 03Exporta apresentações editáveis para PowerPoint com animações nativas ou como capturas de tela.
  • 04Oferece editores para apresentações, canvases de design, sistemas de design e dashboards.
  • 05Importa fontes de design de arquivos .fig do Figma, repositórios do GitHub e HTML/CSS existentes.
  • 06Instala pelo CLI npx skills no Claude Code, Cursor e Codex.

Casos de uso

  • Criar um mockup de uma tela de configurações ou de um fluxo de onboarding no próprio editor.
  • Transformar um PRD ou um CSV de analytics em uma apresentação ou dashboard.
  • Importar um kit .fig do Figma e transformá-lo em um sistema de design reutilizável.
  • Criar landing pages e exportá-las como HTML independente.

Início rápido

  1. 1

    Instale as skills no seu projeto com a skills CLI

    npx skills add JimLiu/baoyu-design
  2. 2

    Descreva uma tarefa de design para o seu agente, por exemplo, uma tela de configurações para um app de meditação

  3. 3

    Inicie um servidor de pré-visualização local para os designs gerados

    python3 -m http.server 4311 --directory designs

Antes de usar

  • Para obter os melhores resultados, é necessário usar Claude Opus 5.5 como modelo, o que pode exigir uma assinatura paga.
  • Os editores de artefatos exigem Node.js 20 ou superior (Node.js 22 ou superior para a skill de dashboard).

Em coleções

Skills de design de interface para agentes de programaçãoFerramentas, skills e plugins para Claude CodeAssistentes e agentes de programação com IABibliotecas de skills para agentes de IA

Tópicos

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

Perguntas frequentes

O que é baoyu-design?
Uma Agent Skill que executa o Claude Design localmente no Cursor, Claude Code ou agentes similares para criar mockups, protótipos e apresentações em HTML autocontido. baoyu-design empacota o fluxo de trabalho do Claude Design, disponível em claude.ai/design, como uma Agent Skill portátil que roda em um agente de programação local, como Cursor, Claude Code ou Codex. O agente faz perguntas para esclarecer os requisitos e cria mockups de UI, protótipos interativos, wireframes, landing pages, dashboards, telas para dispositivos móveis e apresentações em HTML autocontido, dentro da pasta designs/, com pré-visualização em localhost.
baoyu-design é gratuito? Qual é a licença?
baoyu-design é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
baoyu-design ainda é mantido?
Manutenção ativa. O último commit de baoyu-design foi em 5 de nov. de 2026.
Para que posso usar baoyu-design?
Criar um mockup de uma tela de configurações ou de um fluxo de onboarding no próprio editor. Transformar um PRD ou um CSV de analytics em uma apresentação ou dashboard. Importar um kit .fig do Figma e transformá-lo em um sistema de design reutilizável. Criar landing pages e exportá-las como HTML independente.
Como instalar baoyu-design?
Instale as skills no seu projeto com a skills CLI: npx skills add JimLiu/baoyu-design Descreva uma tarefa de design para o seu agente, por exemplo, uma tela de configurações para um app de meditação Inicie um servidor de pré-visualização local para os designs gerados: python3 -m http.server 4311 --directory designs
Onde consigo baoyu-design?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/JimLiu/baoyu-design

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados