Ir para o guia de uso
Baoyu Designpor JimLiu

Baoyu Design Skill.

Use um fluxo de design baseado em arquivos para protótipos, conceitos de apresentação e sistemas visuais reutilizáveis.

  • Prototipagem
  • Sistemas de design
  • Apresentações
Revisão da fonte · Baoyu DesignSKILL.md
Tarefa Prototipagem Produz • Artefatos de design HTML autocontidos com recursos copiados • Um projeto com vínculos de design-system e metadados de recursos registrados • Exportações compatíveis de apresentações ou animações, quando os fluxos dedicados se aplicam Antes de começar Um agente com acesso a arquivos e a metodologia, os guias integrados, os documentos de referência e os scripts do repositório. Os caminhos de exportação e importação têm seus próprios pré-requisitos.
Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Baoyu Design: artefatos HTML autocontidos

Um orquestrador de design HTML com receitas específicas por artefato, caminhos de importação e criação de design-system, pré-visualização local e fluxos de exportação com escopo cuidadosamente definido.

Fluxo baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Baoyu Design é uma skill ampla de orquestração para produzir artefatos de design HTML. Sua entrada direciona entregas diferentes, como wireframes, telas de aplicativos, diagramas, documentos e slides, para guias integrados especializados, enquanto uma metodologia compartilhada fornece o processo de design.

O diferencial é o contexto de design explícito. Ela pode encaminhar arquivos Figma locais, referências de repositório e HTML/CSS existentes para fluxos de importação, ou vincular um projeto a um sistema de design copiado. As entregas permanecem agrupadas com seus recursos e metadados de projeto, em vez de virarem arquivos HTML desconectados. O escopo de exportação é específico: a exportação para PowerPoint se aplica a apresentações criadas na estrutura de slides compatível, não a HTML arbitrário.

Entregas esperadas

  • Artefatos de design HTML autocontidos com recursos copiados
  • Um projeto com vínculos de design-system e metadados de recursos registrados
  • Exportações compatíveis de apresentações ou animações, quando os fluxos dedicados se aplicam
Ver o briefing de exemplo

Do briefing à revisão

  1. 01
    Estabeleça o contexto

    Identifique o tipo de artefato, a fidelidade, as referências de marca e qualquer sistema de design existente antes de escolher uma receita.

  2. 02
    Carregue o caminho certo

    Siga o guia integrado apropriado e a referência de ferramentas do ambiente do agente, em vez de presumir que todo ambiente tem as mesmas ferramentas de pré-visualização.

  3. 03
    Vincule o sistema de design

    Ao usar um sistema existente, importe uma cópia local ao projeto e registre o vínculo. Ao criar um, use o fluxo de compilar, verificar e pré-visualizar.

  4. 04
    Construa e pré-visualize

    Mantenha HTML e os recursos referenciados juntos, sirva o resultado localmente e verifique-o em uma pré-visualização real antes de considerá-lo entregue.

02 Quando usar

Quando usar

Um agente com acesso a arquivos e a metodologia, os guias integrados, os documentos de referência e os scripts do repositório. Os caminhos de exportação e importação têm seus próprios pré-requisitos.

Boa opção

  • Conceitos de design explorávelAdequada para um protótipo baseado em arquivos ou artefato visual que as partes interessadas possam abrir e inspecionar.
  • Trabalho com sistemas reutilizáveisA entrada tem rotas explícitas para criar, importar, validar e pré-visualizar material de design-system.

Limites a verificar

  • A exportação tem escopo definidoA rota de PowerPoint serve para apresentações compatíveis criadas com esta skill; não promete converter qualquer página web em uma apresentação editável.
  • A entrada é um orquestradorO processo de criação e as ferramentas específicas de cada ambiente ficam em arquivos adicionais. Copiar apenas SKILL.md omite instruções essenciais.

Traga estes insumos

  • Tipo de artefatoEspecifique se o resultado é um wireframe, uma tela de alta fidelidade, uma apresentação, um documento, um diagrama ou outra forma compatível.
  • Referências de designForneça a marca, o kit de UI, o arquivo Figma local, o HTML/CSS ou a referência de repositório de escopo restrito que forem relevantes.
  • Restrições de saídaInforme onde o projeto deve ficar e se é necessária uma pré-visualização no navegador ou uma exportação compatível específica.

03 Decisões importantes

Decisões importantes

  1. O contexto de design acompanha o projeto

    Cópias locais do sistema e metadados tornam a restrição visual explícita quando o trabalho é retomado.

  2. Regras específicas por artefato

    E-mails, documentos semelhantes a impressos, slides e telas interativas seguem receitas distintas, em vez de uma fórmula genérica de página web.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Revise a configuração

Obtenha o diretório completo de baoyu-design, e não apenas o arquivo de entrada; preserve built-in-skills, agents, references e os componentes iniciais.

Arquivo de origem upstream
https://github.com/JimLiu/baoyu-design/blob/6530033592bf7fa58bc1a5a2a2ad278da45213a9/skills/baoyu-design/SKILL.md

Um agente com acesso a arquivos e a metodologia, os guias integrados, os documentos de referência e os scripts do repositório. Os caminhos de exportação e importação têm seus próprios pré-requisitos.

Comece com uma entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo
Use Baoyu Design para criar um protótipo HTML autocontido de um aplicativo de leitura editorial a partir da referência HTML/CSS fornecida. Preserve sua tipografia e seus tokens de cor, registre o vínculo de design-system e crie dois estados de leitura realistas. Mantenha os recursos locais, faça a pré-visualização via HTTP e não tente exportar para PowerPoint.

Inspecione o resultado

Confira o resultado real com estes critérios observáveis.

  • O artefato segue o contexto de design fornecido.
  • Os recursos referenciados estão dentro do projeto entregue.
  • A pré-visualização carrega e o escopo de exportação selecionado é verdadeiro.

OpenDesign oferece um espaço de trabalho de design local para agentes de programação. Esta listagem não significa que a skill esteja incluída nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte vinculada abaixo. O comportamento e os requisitos upstream podem mudar.

Responsável pela fonte
JimLiu
Licença
MIT
Versão revisada
2026-10-07 · 6530033592bf
Resumo editorial da fonte
Um orquestrador de design HTML com receitas específicas por artefato, caminhos de importação e criação de design-system, pré-visualização local e fluxos de exportação com escopo cuidadosamente definido.

Resumo original de OpenDesign, baseado na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não indicam uso da skill nem uma nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Depende de um único agente de programação?

Não está presa a um único agente de programação. A fonte descreve um fluxo baseado em arquivos, com referências de ferramentas separadas para os ambientes compatíveis.

Consegue ler um arquivo Figma local?

A entrada inclui uma rota de importação offline de .fig. O guia de importação detalhado e os scripts são necessários para esse fluxo.

Consegue exportar qualquer HTML para PowerPoint?

Não. A fonte limita expressamente a exportação de apresentações aos HTML compatíveis, estruturados em slides.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Arquivo de origem upstream
https://github.com/JimLiu/baoyu-design/blob/6530033592bf7fa58bc1a5a2a2ad278da45213a9/skills/baoyu-design/SKILL.md