Buscar matérias, modelos, ferramentas…
Open Source

Agente local leva recursos do Claude Design a editores de código

Projeto transforma prompts em protótipos, wireframes e apresentações HTML sem depender do claude.ai/design.

Redação NovidadesIA 5 min de leitura
Reprodução · github.com

O repositório JimLiu/baoyu-design empacota o Claude Design como uma habilidade portátil para agentes locais, compatível com Cursor, Claude Code, Claude Desktop e outros agentes capazes de manipular arquivos. Criado por Jim Liu, o projeto está em alta no ranking diário do Trendshift, na posição #19, e resolve um problema prático: produzir interfaces e materiais visuais diretamente no ambiente de desenvolvimento, com arquivos que permanecem no repositório do usuário.

Dados rápidos

  • Repositório: JimLiu/baoyu-design
  • Licença: MIT
  • Linguagem: JavaScript
  • Popularidade: 3.235 estrelas e 235 forks; 83 estrelas no período
  • Ranking: Trendshift diário, #19
  • Consulta: 9 de agosto de 2026

O problema que o projeto resolve

Ferramentas de design baseadas em IA costumam separar a criação visual do ambiente onde o código será implementado. Esse fluxo pode exigir exportações, uploads e várias rodadas de descrição para ajustar um botão, uma tela ou uma apresentação.

O baoyu-design propõe outro caminho. O agente local recebe o pedido, conduz etapas de definição do contexto visual e entrega um ou mais arquivos HTML autocontidos. O resultado pode ser aberto no navegador, versionado, alterado ou encaminhado para outras etapas do projeto.

Segundo o README, a habilidade busca reproduzir localmente a maior parte das capacidades do claude.ai/design. O material gerado inclui mockups de alta fidelidade, protótipos interativos, wireframes, landing pages, dashboards, aplicativos móveis e decks de slides.

Como funciona e como instalar

A implementação é formada principalmente por Markdown, com alguns scaffolds em JSX e JavaScript. Scaffold é uma estrutura inicial de componentes que evita que o agente precise criar elementos básicos do zero. O repositório não exige etapa de build nem runtime próprio.

A estrutura inclui um arquivo SKILL.md, que coordena o fluxo, um system-prompt.md, descrito como fonte da metodologia de design, referências específicas para Claude Code, Cursor e Codex, além de habilidades especializadas e componentes iniciais.

A instalação descrita no README consiste em colocar a habilidade no agente local compatível. O repositório não informa um comando específico de instalação. Também não há site oficial informado.

Depois de carregada, a habilidade segue um fluxo que começa com perguntas de esclarecimento, passa pela coleta de contexto de design e termina com a geração, visualização e verificação dos arquivos HTML. A saída fica em designs/<project>/, conforme o README.

Casos de uso práticos

  • Prototipagem de aplicativos: um pedido para criar um aplicativo móvel ou desktop pode resultar em telas navegáveis para validar fluxos antes da implementação.
  • Landing pages e sites: equipes podem gerar uma direção visual inicial para páginas de campanha, produtos ou serviços.
  • Dashboards: a ferramenta inclui recursos para visualização de dados, gráficos e estruturas de painel.
  • Apresentações: o projeto cria decks, notas de apresentação e formatos exportáveis, incluindo PPTX editável e PPTX baseado em capturas de tela.
  • Wireframes e sistemas visuais: usuários podem criar wireframes, sistemas de design, componentes .dc.html e painéis de ajustes para modificar resultados.

O README também lista suporte a pesquisa na web, leitura de PDFs, mapas, ilustrações em aquarela, objetos 3D, e-mails HTML, vídeos e efeitos sonoros. A disponibilidade prática desses recursos depende do agente e dos modelos usados.

O que diferencia a proposta

A principal diferença está no formato e no local de trabalho. Em vez de depender de uma interface web específica, o baoyu-design funciona dentro de editores e agentes que já operam no computador do usuário. Os artefatos são HTML autocontido, sem uma etapa de upload indicada no README.

Outro ponto é o ciclo de revisão visual. Como o resultado pode ser servido em localhost, o usuário pode abrir a prévia, apontar para um elemento e pedir mudanças ao agente. O README cita ferramentas de navegador e inspeção disponíveis em Cursor, Claude Preview e Codex Browser.

O projeto também reúne, em uma única habilidade, recursos que vão de protótipos e apresentações a importação de arquivos Figma .fig, repositórios GitHub e HTML/CSS existente. O repositório não informa uma comparação quantitativa com outras ferramentas.

Limitações e cuidados

O projeto foi criado em 7 de junho de 2026, teve seu último commit em 30 de julho e está na versão v1.2.0, lançada em 26 de julho. Esses dados indicam uma base recente; não há informação no repositório sobre histórico de estabilidade, suporte ou compatibilidade detalhada entre versões dos agentes.

O README recomenda o uso com Claude Opus 4.8 para obter os melhores resultados, embora afirme que a habilidade também funciona com outros modelos capazes. O repositório não informa requisitos mínimos de hardware, custos de modelos, desempenho, disponibilidade regional ou política de tratamento dos dados.

Como os resultados são gerados por agentes locais e podem incluir HTML, JavaScript, imagens e integrações com serviços de IA, é necessário revisar o código antes de publicar ou executar. A licença MIT permite uso, cópia, modificação e distribuição nos termos da licença, mas não substitui auditoria de segurança. O risco principal é confiar em artefatos ou chamadas externas sem verificar seu conteúdo.

Resumo rápido

  • Projeto: habilidade local para gerar designs em HTML
  • Licença: MIT
  • Linguagem: JavaScript
  • Estrelas: 3.235
  • Ranking: Trendshift diário, #19
  • Risco principal: artefatos e integrações não auditados

Fontes

Fontes

JavaScriptMITOpen SourceTrendshift
Como fazemos: nossa equipe monitora diariamente os repositórios de código aberto em maior alta e produz esta cobertura com apoio de modelos de linguagem, sempre a partir de dados verificados na fonte primária — repositório, documentação oficial e ranking público. Os números de estrelas e a posição no ranking refletem o momento da coleta. Entenda o método.

Leia também