106.9K+Baixar
Ir para o guia de uso
Create Canvaspor ibelick

Create Canvas Skill.

Mantenha alternativas interativas de design em um espaço de comparação com nomes e prévias móveis.

  • Exploração de design
  • Canvas
Baixar OpenDesignVer guia de uso
Análise da fonte · create-canvasSKILL.md
Tarefa Mantenha alternativas interativas de design em um espaço de comparação com nomes e prévias móveis. Entregáveis Um registro definido no código-fonte com itens de prévia interativos e nomeados. Antes de começar A lista de itens incluídos e a implementação das prévias permanecem no código-fonte; o armazenamento não pode criar nem ocultar conteúdo.
Resumo editorial · fonte revisada em 2026-11-02 · não é um exemplo gerado

01 Funcionalidades

Mantenha alternativas interativas de design em um espaço de comparação com nomes e prévias móveis

Crie um canvas livre com prévias interativas nomeadas, alternativas independentes, layout salvo e interações seguras que preservam os dados inseridos.

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

A abordagem de trabalho

Create Canvas cria um espaço para explorar várias alternativas interativas de design por meio de conversa. Cada prévia tem um ID estável e um nome legível em um registro definido no código-fonte. É possível copiar o nome para se referir a uma versão específica, mover prévias por alças próprias e navegar com deslocamento ou zoom.

O conteúdo permanece nos arquivos-fonte, enquanto o armazenamento do navegador lembra o layout. Essa separação torna pedidos posteriores concretos: outra versão recebe identidade e estado próprios, enquanto uma alteração em uma versão existente preserva sua posição. A skill mantém os experimentos locais até que sua transferência para produção seja solicitada.

Entregas esperadas

  • Um registro definido no código-fonte com itens de prévia interativos e nomeados.
  • Um canvas com alças de movimentação, controles de câmera e seleção do tema global suportado.
  • Posições salvas da câmera e dos itens, com relatório das interações verificadas e não testadas.
Ver o briefing de exemplo

Do briefing à revisão

  1. 01
    Prepare uma prévia interativa segura

    Inspecione o canvas existente antes de criar outro. Monte uma prévia com dados sintéticos, rótulo separado e alça de movimentação, usando o framework do projeto.

  2. 02
    Adicione alternativas distintas

    Dê a cada nova variação um ID estável, nome único e estado independente. Preserve as alternativas anteriores e as posições medidas ao adicionar conteúdo.

  3. 03
    Preserve a entrada ao navegar

    Separe gestos do canvas de digitação, seleção e rolagem aninhada. Mantenha portais nativos e verifique que copiar, mover ou aplicar zoom não remonta as prévias.

  4. 04
    Salve o layout e verifique o comportamento

    Persista valores de câmera dentro dos limites, o tema suportado e as posições por ID do registro. Valide recargas, dados malformados no armazenamento e gestos relevantes dos dispositivos antes de declarar que funcionam.

02 Quando usar

Quando usar

A lista de itens incluídos e a implementação das prévias permanecem no código-fonte; o armazenamento não pode criar nem ocultar conteúdo.

Bom encaixe

  • Comparação de designMantenha várias alternativas interativas lado a lado e faça referência a elas pelos nomes exatos.
  • Exploração contínuaRetome um espaço existente sem perder alternativas anteriores ou decisões de layout.

Limites a verificar

  • O código-fonte controla o conteúdoA lista de itens incluídos e a implementação das prévias permanecem no código-fonte; o armazenamento não pode criar nem ocultar conteúdo.
  • Isolamento da produçãoOs experimentos usam dados de teste seguros e não alteram o código dos componentes de produção.
  • Escopo limitado de ediçãoDesenho, conectores, redimensionamento e histórico de desfazer ficam de fora, salvo solicitação.

Traga estas entradas

  • Lista de experimentosNomeie as alternativas, dimensões pretendidas e diferenças a explorar.
  • Componentes segurosForneça APIs públicas dos componentes e dados de teste que evitem dados pessoais e gravações reais.
  • Espaço existenteIdentifique rota, registro, tema e layout atuais a preservar.

03 Decisões importantes

Decisões importantes

  1. Referências precisas

    Nomes copiáveis tornam inequívocos pedidos posteriores, como alterar uma versão.

  2. Alternativas independentes

    Novas versões mantêm identidades e estados interativos separados.

  3. Organização persistente

    O layout salvo restaura posições, enquanto o código-fonte atual continua sendo a referência principal.

04 Exemplo de briefing

Experimente um briefing específico

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

Confira a fonte e a configuração

Nomeie as alternativas, dimensões pretendidas e diferenças a explorar.

Arquivo-fonte original
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/create-canvas/SKILL.md

A referência abaixo abre as instruções originais. Confira a configuração do repositório antes de usá-las; não é um comando de instalação.

Comece com um entregável

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

Briefing de exemplo
Use create-canvas para comparar três experimentos de cartões de preços no projeto existente. Mantenha o cartão original e crie duas alternativas com nomes independentes, usando os mesmos dados de planos e dimensões. Use dados de teste seguros e preserve nossas implementações atuais dos componentes de produção. Adicione nomes copiáveis, alças próprias para movimentação e controles de deslocamento, zoom e ajuste à tela. Preserve digitação e seleção nas prévias. Salve o layout, não o conteúdo dos formulários. Depois de construir, teste recargas, movimentação e zoom e relate gestos de dispositivos ou comportamentos do histórico do navegador que não conseguiu verificar.

Inspecione o resultado

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

  • As novas alternativas preservam IDs, nomes e posições anteriores.
  • Mudanças de câmera e movimentação dos itens não apagam dados inseridos nas prévias.
  • O armazenamento contém apenas layout e entradas inválidas usam um fallback seguro.

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.

Baixar OpenDesignLer o guia rápido

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
ibelick
Repositório
ibelick/ui-skills
Arquivo da skill
SKILL.md
Licença
MIT
Versão revisada
2026-11-02 · 4907a526b079
Resumo editorial da fonte
Mantenha alternativas interativas de design em um espaço de comparação com nomes e prévias móveis.

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

06 Perguntas antes de começar

Perguntas antes de começar

O armazenamento do navegador pode se tornar a fonte do conteúdo?

Não. O registro define quais itens existem e sua implementação; posições salvas se aplicam apenas aos IDs atuais.

Um iframe separado garante segurança?

Não. A fonte exige providers e dados de teste seguros antes da montagem; separar documentos não impede, por si só, requisições reais.

Redefinir remove os experimentos?

A redefinição altera a câmera e preserva os itens incluídos, posições, temas e rascunhos.

OpenDesign

Mantenha o briefing e o trabalho de design juntos.

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.

Baixar OpenDesignExplorar skills de design
Arquivo-fonte original
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/create-canvas/SKILL.md