mockit-mcp

Qué hace

Pregúntale a Claude Code (o a cualquier cliente MCP):

Diseña el panel de control principal para un rastreador de fitness. Tres anillos de actividad concéntricos, gráfico de barras semanal, lista de entrenamientos recientes, modo oscuro premium con acentos de neón.

mockit-mcp devuelve un prototipo PNG real (con un tamaño de 390×844 a escala 2x, un viewport de clase iPhone) y el código fuente HTML/Tailwind subyacente, para que puedas iterar visualmente y portarlo a SwiftUI cuando estés listo para construir.

No es un motor de plantillas estático ni basura de IA genérica. El prompt del sistema está ajustado manualmente para una estética premium de iOS: contenido real, iconos SVG (sin emojis), degradados elegantes en lugar de fotos de stock, escala tipográfica HIG de iOS y capas tonales en lugar de sombras pesadas.

Aspectos destacados

• Dos backends, mismas herramientas. Usa la CLI local claude (suscripción, $0 extra) o la API de Anthropic (clave + precios por llamada). Cambia con una variable de entorno.

• Salida PNG real. Chromium headless a través de Playwright. El viewport predeterminado es 390×844 @2x (clase iPhone); cualquier tamaño personalizado está a una variable de entorno de distancia.

• Refinamiento iterativo. iterate_screen toma un ID de pantalla + comentarios ("haz la tarjeta principal más pequeña") y produce una nueva versión, rastreando padre/hijo.

• Biblioteca respaldada por disco. Cada generación guarda metadatos HTML + PNG + JSON. Explora, filtra, reexporta.

• Estándar MCP. Funciona con Claude Code, Claude Desktop, Cursor, Windsurf o cualquier cliente MCP.

• Transportes Stdio + HTTP. Ejecuta localmente para desarrollo, o como un servicio de red para uso compartido/contenedorizado.

Herramientas

Instalación

Requisitos previos

• Node.js 20+

• O bien la CLI claude iniciada (cli backend, predeterminado) o una clave de API de Anthropic (api backend)

• Descarga de Chromium de Playwright (~170 MB, una sola vez)

Inicio rápido (backend CLI, recomendado para desarrollo local)

git clone https://github.com/karyaboyraz/mockit-mcp.git
cd mockit-mcp
npm install
npx playwright install chromium
npm run build

Añadir a Claude Code:

claude mcp add mockit -- node "$(pwd)/dist/server.js"

Listo. No se necesita clave de API: utiliza tu sesión de CLI claude existente.

Backend de API (sin CLI de claude en el host)

echo "CLAUDE_BACKEND=api" > .env
echo "ANTHROPIC_API_KEY=sk-ant-..." >> .env
npm run build
claude mcp add mockit -- node "$(pwd)/dist/server.js"

Docker (transporte HTTP, para despliegue compartido)

cat > .env <<'ENV'
CLAUDE_BACKEND=api
ANTHROPIC_API_KEY=sk-ant-...
# Required if you change the port binding from 127.0.0.1 to 0.0.0.0:
MCP_HTTP_TOKEN=$(openssl rand -hex 32)
ENV
docker compose up -d --build

Por defecto, docker-compose.yml vincula el puerto HTTP solo a 127.0.0.1 y el servidor requiere MCP_HTTP_TOKEN para cualquier solicitud que no sea de loopback. No expongas este servidor a una red pública sin establecer un MCP_HTTP_TOKEN fuerte: cada generación consume tu clave de API de Anthropic.

Luego apunta cualquier cliente a la URL de loopback:

claude mcp add --transport http mockit http://127.0.0.1:7821/mcp \
  -H "Authorization: Bearer <MCP_HTTP_TOKEN>"

Para acceso remoto, cambia el enlace de puerto de docker-compose.yml a 0.0.0.0:7821:7821 y asegúrate de que MCP_HTTP_TOKEN esté configurado; de lo contrario, el servidor se negará a iniciarse.

Uso

En cualquier cliente MCP, simplemente pregunta:

Diseña un panel de control para un rastreador de fitness. Muestra el progreso del anillo de hoy, un gráfico semanal y una lista de entrenamientos recientes. Modo oscuro, acento verde neón.

El PNG aparece en línea. El HTML se guarda en designs/{project}/{name}-{id}.html.

Para seguimientos:

iterate_screen en ese panel de control de fitness: reemplaza el gráfico con la frecuencia cardíaca a lo largo del tiempo y añade un botón de "compartir entrenamiento" debajo.

Consulta examples/ para ver patrones de prompts y resultados completos.

Configuración

Todo opcional. Consulta .env.example para ver la lista completa.

Costo

Por generación: ~3K tokens de entrada (prompt del sistema) + ~6–12K tokens de salida dependiendo de la complejidad de la pantalla. La salida domina el costo en Opus.

El almacenamiento en caché del prompt del sistema está activado por defecto (TTL de 5 minutos). Ahorra unos centavos por llamada, pero no es un descuento de un orden de magnitud: los tokens de salida siguen facturándose a tarifa completa. Para una reducción de costos real, cambia a un modelo más pequeño (claude-sonnet-4-6 o claude-haiku-4-5).

Arquitectura

┌─────────────────┐
│   MCP Client    │  (Claude Code, Cursor, Windsurf, …)
└────────┬────────┘
         │ tool call: generate_screen({ prompt, ... })
         ▼
┌─────────────────────────────────────────────────────┐
│  mockit-mcp                                          │
│                                                      │
│  ┌──────────────┐    ┌────────────────────────┐    │
│  │  Backend     │    │  Renderer              │    │
│  │              │    │                        │    │
│  │ ► cli   ─────┼──► │  Playwright (headless  │    │
│  │ ► api   ─────┘    │  Chromium @ iPhone     │    │
│  │  → HTML+Tailwind  │  viewport)             │    │
│  └──────────────┘    │  → PNG screenshot      │    │
│                      └────────────────────────┘    │
│                                                      │
│  ┌────────────────────────────────────────────┐    │
│  │ Storage (disk): HTML + PNG + JSON metadata │    │
│  └────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────┘

Diseño de almacenamiento

designs/
└── {project-slug}/
    ├── {name-slug}-{id8}.html   # id8 = first 8 chars of the screen UUID
    ├── {name-slug}-{id8}.png
    └── {name-slug}-{id8}.json   # full UUID, prompt, parent ID, tokens, model, cost

Ajuste de la voz de diseño

El prompt del sistema ajustado manualmente reside en src/system-prompt.ts. Es donde se codifican la aplicación de HIG de iOS, la regla de no usar fotos de stock, la cadena de respaldo de SF Pro y las preferencias de tipografía editorial. ¿Quieres Material You en su lugar, o una voz de panel de control de escritorio? Edítalo.

Desarrollo

npm run dev    # tsx watch mode, stdio transport
npm run http   # tsx watch mode, http transport on :7821
npm run build  # compile to dist/

Hoja de ruta

• [ ] Ajustes preestablecidos de viewport para Watch / iPad / Android

• [ ] Generación de flujo multipantalla (secuencias de incorporación)

• [ ] Herramienta de portabilidad HTML → SwiftUI / Jetpack Compose

• [ ] Importación de sistema de diseño (configuración de Tailwind, tokens de diseño)

• [ ] Referencias de imagen (usa --image para inspiración visual)

• [ ] Generación de variantes (3-5 alternativas por prompt)

Contribución

Las incidencias y PR son bienvenidas: consulta CONTRIBUTING.md.

Licencia

MIT

Agradecimientos

Construido sobre:

• Anthropic Claude — el modelo que hace el trabajo pesado

• Model Context Protocol — el estándar de integración

• Playwright — el renderizador

• Tailwind CSS — vía CDN, en cada pantalla generada

Marcas registradas

iPhone, iPad, Apple Watch e iOS son marcas registradas de Apple Inc. Claude es una marca registrada de Anthropic, PBC. mockit-mcp es un proyecto de código abierto independiente y no está afiliado, respaldado ni patrocinado por Apple Inc. o Anthropic, PBC. Todos los demás nombres de productos, logotipos y marcas son propiedad de sus respectivos dueños.