prototype assistant

MCP-Prototype

Uma ferramenta MCP que permite prototipagem diretamente baseada em HTML, permitindo que a IA construa protótipos de software rapidamente, mesmo sem Figma ou Axure.

Recursos da ferramenta:

• Fornece uma barra de navegação.

• Desacopla marcadores do protótipo.

• Suporta anotações adicionais por página.

Método de configuração

Adicione o seguinte conteúdo à configuração do MCP da IA

{
  "mcpServers": {
    "mcp-prototype": {
      "command": "npx",
      "args": [
        "-y",
        "@llxxbb/mcp-prototype"
      ]
    }
  }
}

Depuração local

    "mcp-prototype": {
      "command": "npm",
      "args": [
        "--prefix",
        "path/to/mcp-prototype",
        "start:mcp"
      ]
    }

Sugestões de prompt para IA

Antes do design do protótipo:

Requisitos:

• Projete o protótipo de acordo com as especificações da ferramenta de prototipagem.

• Requisitos: abcd...

Durante o uso, se quiser exibir o protótipo, basta digitar:

Exibir protótipo

A exibição do protótipo iniciará um processo em segundo plano, portanto não é necessário inserir o comando várias vezes, caso contrário, várias instâncias serão iniciadas.

Para fechar, você pode digitar:

Parar exibição

ou

Fechar protótipo

Especificações de uso

• Barra de navegação:

  • Definição de hierarquia: corresponde um a um à estrutura de diretórios do sistema de arquivos onde o protótipo está localizado.

  • Nome do protótipo: derivado do valor do atributo de dados data-nav-name da tag da página do protótipo; se omitido, o nome do arquivo será usado.

• Injeção de funcionalidade: o MCP-Prototype injetará em cada página HTML:

  • Tag , preste atenção à correção do caminho de "referência".
  • Arquivo mcp-prototype-inject.js, usado para exibir marcadores.

• Marcadores: melhore a compreensão do usuário sobre os elementos de UI definindo o atributo de dados data-marker nos elementos de UI, opcional. Se o significado dos elementos de interface relacionados já for óbvio, não é recomendado configurá-los.

                       

• Anotações adicionais da página, usadas para expressar conteúdo que não pode ser expresso na página do protótipo, como conceitos de design, arrastar e soltar elementos, avisos, etc. Formato Markdown, nome do arquivo no formato [nome do arquivo da página do protótipo].annotation.md

Referência específica: arquivo src\mcp\tool\getSpec.ts

Stack de tecnologia

• Node.js, SvelteKit, Vite, TypeScript