prototype assistant

MCP-Prototype

Una herramienta MCP que permite diseñar prototipos directamente basados en HTML, incluso sin Figma o Axure, para construir prototipos de software rápidamente.

Capacidades de la herramienta:

• Proporciona una barra de navegación.

• Desacopla las marcas del prototipo.

• Admite notas adicionales por página.

Método de configuración

Agregue el siguiente contenido a la configuración de MCP de IA

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

Depuración local

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

Sugerencias de indicaciones para IA

Antes del diseño del prototipo:

Requisitos:

• Diseñe el prototipo siguiendo las especificaciones de la herramienta de prototipado.

• Requisitos: abcd...

Durante el uso, si desea mostrar el prototipo, simplemente ingrese:

Mostrar prototipo

La visualización del prototipo iniciará un proceso en segundo plano, por lo que no es necesario ingresar el comando varias veces; de lo contrario, se iniciarán múltiples instancias.

Si desea cerrarlo, puede ingresar:

Detener visualización

o

Cerrar prototipo

Especificaciones de uso

• Barra de navegación:

  • Definición de niveles: corresponde uno a uno con la estructura de directorios del sistema de archivos donde se encuentra el prototipo.

  • Nombre del prototipo: proviene del valor del atributo de datos data-nav-name de la etiqueta de la página del prototipo; si se omite, se usa el nombre del archivo.

• Inyección de funciones: MCP-Prototype inyectará en cada página HTML:

  • Etiqueta , preste atención a la corrección de la ruta de "referencia".
  • Archivo mcp-prototype-inject.js, utilizado para mostrar marcas.

• Marcas: se mejora la comprensión de los elementos de la interfaz de usuario mediante el atributo de datos data-marker en los elementos de la interfaz, opcional. Si el significado de los elementos de la interfaz relacionados ya es muy evidente, no se recomienda configurarlo.

                       

• Notas adicionales de la página, utilizadas para expresar contenido que no se puede mostrar en la página del prototipo, como conceptos de diseño, arrastre de elementos, precauciones, etc. Formato markdown, nombre de archivo con formato [nombre de archivo de la página del prototipo].annotation.md

Referencia específica: archivo src\mcp\tool\getSpec.ts

Pila tecnológica

• nodejs, SvelteKit, Vite, ts