Mimic AI

Mimic AI

Convierte HTML en Figma usando solo tu design system, aplicando el uso correcto de componentes y recurriendo a alternativas seguras cuando es necesario, mientras mejora su precisión con cada compilación.

Servidor MCP de código abierto. Se ejecuta localmente. Tus datos de diseño nunca salen de tu máquina.

Controlado, no guiado

La escritura de IA en Figma ya no es la parte difícil; varias herramientas lo hacen hoy. Las diferencias aparecen cuando la IA busca algo que tu design system no tiene. Una herramienta que orienta a un agente hacia tus componentes aún puede terminar con un valor hex crudo, un tamaño de píxel crudo o una fuente que tu sistema no usa, y la guía general para esa categoría de herramientas es que el resultado puede necesitar revisión y limpieza manual antes de ser utilizable. Mimic aplica el control en el momento de la escritura, dentro del propio plugin de Figma, no solo en el prompt.

Lo que el control bloquea

• Rellenos hex/rgb crudos cuando existe una variable de color del DS
• Tamaños de fuente en píxeles crudos cuando existe un estilo de texto del DS
• Fuentes fuera del design system
• Desajustes de categoría de variables (p. ej., un token de fondo usado como trazo)
• Frames primitivos para elementos que el DS ya tiene como componentes (botones, badges, inputs, celdas de tabla y más)

Si el DS realmente no tiene equivalente, Mimic lo indica en el informe de compilación en lugar de dejar silenciosamente un valor crudo en su lugar.

Lo que el aprendizaje acumula

• Recetas de componentes, reproducidas automáticamente una vez confirmadas entre compilaciones
• Valores predeterminados de variantes por mayoría, aprendidos de tus propios patrones de uso
• Reglas de diseño que estableces una vez al corregir una compilación, aplicadas en todas las posteriores
• Compilaciones sin éxito: patrones probados y confirmados como no funcionales, para no reintentarlos
• Detección de obsolescencia: marca una receta almacenada en el momento en que deja de coincidir con tu DS actual
• Todo limitado por biblioteca de design system: nada se filtra entre archivos no relacionados

Nada más acumula esto entre compilaciones. Una Figma Agent Skill escrita a mano es texto estático; no aprende de lo que corriges.

Lo que demuestra el informe Cada compilación termina en un informe auditado de cumplimiento: componentes usados y sus claves, primitivos construidos y por qué, qué reglas almacenadas se verificaron y si se cumplieron, y dónde el DS aún tiene brechas de cobertura. Está diseñado para mostrarse a un interesado, no solo para que lo lea quien ejecutó la compilación.

Por qué existe Mimic

Construiste un design system. Componentes, tokens, variables. Cada decisión intencional. Luego alguien necesita una pantalla en Figma y empieza desde cero. Colores codificados. Tamaños de fuente crudos. Frames que se rompen al redimensionarlos. Tu sistema está justo ahí en el panel de bibliotecas. Sin usar.

El resultado de Mimic es el entregable: capas reales de Figma con instancias reales de componentes, enlaces de variables y auto-layout. Nada que convertir. Nada que reemplazar. Listo para entregar.

Aprende tu sistema

La primera compilación escanea el design system. Para la tercera, los componentes recurrentes se auto-verifican. Para la décima, la mayoría de las decisiones son instantáneas. El conocimiento se acumula en cada compilación.

Corrígelo una vez. Dile a Mimic "Ese no es el Badge correcto, usa Tag/Neutral". La asignación se actualiza permanentemente. Cada compilación futura usa la corrección sin que tengas que repetirte.

Tu DS evoluciona. Mimic se mantiene al día. Las adiciones, eliminaciones y cambios de variantes de componentes se detectan al inicio de cada compilación comparando con lo que se almacenó en caché la última vez, sin resincronización manual. La detección de cambios a nivel de variables más profunda (p. ej., un token de color renombrado) llegará en una versión futura.

Cada compilación es una revisión del DS. Después de cada compilación, Mimic genera un informe: qué componentes usó, qué construyó con primitivos y por qué, qué patrones aprendió y qué le falta a tu DS. Las recomendaciones vienen como preguntas, no como órdenes: "¿Debería tu DS incluir un Status Badge? 4 elementos en 3 compilaciones se construyeron como primitivos."

Cómo funciona

Elige cualquier punto de partida:

"Crea un dashboard con tres tarjetas de métricas y una tabla de actividad"

"Aquí está el HTML de nuestro entorno de staging, constrúyelo en Figma"

"Reconstruye este prototipo de Claude Design con componentes reales"

Mimic descubre el design system en tu archivo, empareja componentes y tokens, y construye Figma estructurado. Mismas reglas, misma calidad de salida, sin importar cómo empieces.

Cómo se compara Mimic

Claude Design es excelente para ideación. Figma Make es excelente para prototipado interactivo. Framelink es excelente para dar contexto de IA sobre tus diseños. Mimic es para cuando la salida debe ser el archivo real de Figma que entregas.

Para quién es

Mimic funciona con cualquier biblioteca de Figma: la de tu equipo, un kit de la comunidad o el sistema publicado de un cliente.

• Diseñadores que quieren pantallas compatibles con el DS sin buscar componentes manualmente
• Líderes de design system que prueban su sistema construyendo pantallas reales, revelando brechas de cobertura con evidencia
• Nuevos miembros del equipo que aprenden un DS construyendo con él, viendo qué componentes existen y qué falta
• Agencias y freelancers que retoman la biblioteca de un cliente y necesitan producir pantallas rápido
• Equipos de migración de DS que reconstruyen pantallas existentes con un sistema nuevo para evaluar la cobertura antes de comprometerse
• Desarrolladores que necesitan una referencia de Figma que coincida con sus componentes de frontend
• Product managers que quieren prototipar ideas usando el DS sin esperar a un diseñador

Comenzar

Requiere: Node.js v20.6+ · la app de escritorio de Figma (Figma en navegador no es compatible — descargar) · un plan Professional de Figma o superior (necesario para publicar y usar bibliotecas de equipo).

1. Instalación

Instalador de una línea:

bash <(curl -fsSL https://raw.githubusercontent.com/miapre/mimic-ai/main/install.sh)

Esto clona el repositorio en ~/mimic-ai, ejecuta npm install, solicita tu token de acceso personal de Figma y ofrece registrar mimic-ai en el settings.json de Claude Code automáticamente.

Instalación manual:

git clone https://github.com/miapre/mimic-ai.git
cd mimic-ai
npm install

Luego establece FIGMA_TOKEN en la configuración del servidor de tu cliente MCP (o en ~/.mimic-ai.json — consulta "Detalles de configuración de Figma" más abajo para saber cómo generar el token), y apunta la entrada de mimic-ai de tu cliente al mcp.js clonado ({ "command": "node", "args": ["/path/to/mimic-ai/mcp.js"] }).

2. Añade el plugin de Figma

Plugins > Development > Import plugin from manifest > selecciona ~/mimic-ai/plugin/manifest.json

3. Conecta (en cada sesión)

Figma: Plugins > Development > Mimic AI > Run

El puente se inicia automáticamente cuando haces tu primera llamada de herramienta. No hay proceso separado que gestionar.

4. Habilita tu design system

Panel de Assets > icono de biblioteca del equipo > actívalo. Una vez por archivo. Las bibliotecas de la comunidad funcionan sin configuración adicional.

5. Construye

"Crea una página de configuración con tres campos de formulario y un botón de guardar."

Una sola llamada descubre todo el DS (variables, estilos, componentes), precarga todo y avanza a listo para construir. Sin configuración de varios pasos.

Lo que aprende y aplica

Lo que aprende:

• Recetas de componentes: Configura un componente una vez (variantes, booleanos, ranuras de texto), Mimic reproduce esa configuración en cada inserción futura. Después de 3 compilaciones, la receta se confirma y se aplica automáticamente.
• Patrones de layout: Configuraciones de frame (dirección, padding, gap, rellenos) capturadas desde la primera compilación y reutilizadas cuando aparece el mismo patrón.
• Reglas de diseño: Corrige a Mimic una vez ("el color de marca es solo para enlaces", "las tarjetas deben tener un componente de encabezado de tarjeta"), guarda la regla y la aplica en cada compilación futura.
• Brechas del DS: Los patrones construidos como primitivos se rastrean entre compilaciones. Mimic presenta recomendaciones respaldadas por evidencia ("Status Badge usado 31 veces como primitivo en 5 compilaciones").

Cómo lo aplica:

• Categorías de variables. ¿Usas bg-* para un trazo? Mimic advierte y sugiere border-. ¿Usas bg- como color de texto? Advierte y sugiere text-*.
• Componentes primero por experiencia. Si Mimic ha usado un componente Badge en 3+ compilaciones e intentas construir uno como frame crudo, lo bloquea con la clave del componente y dice "usa esto en su lugar".
• Cumplimiento de reglas. Cada informe de compilación audita las reglas almacenadas contra lo construido. Las violaciones se enumeran con evidencia.
• Semántica de colores de gráficos. Los colores Brand, Success, Warning y Error se excluyen de las paletas de gráficos. Solo se sugieren colores utilitarios neutros para visualización de datos.

Funciones de eficiencia:

• Lote de texto: Todos los overrides de texto en una instancia de componente se establecen en una sola llamada
• Constructor de tablas en lote: Una tabla de datos completa (encabezados, celdas, variantes, texto) en una sola llamada
• Constructor de gráficos en lote: Gráficos de barras, líneas, dona y radar en una sola llamada con enlaces de color del DS

Lo que se verifica automáticamente

Cada compilación aplica 19 reglas de calidad en 6 fases secuenciales.

• El texto usa estilos de texto del DS, no propiedades de fuente crudas
• Los colores están vinculados a variables del DS, no codificados
• Categorías de variables aplicadas: text-* para texto, bg-* para rellenos, border-* para trazos
• Colores semánticos (Brand, Success, Warning, Error) restringidos a su uso previsto
• Espaciado y radio vinculados a tokens del DS cuando están disponibles
• Cada frame usa auto-layout
• El contenido coincide exactamente con la fuente, carácter por carácter
• Los componentes del DS se usan siempre que exista una coincidencia, incluidos los componentes aprendidos de compilaciones anteriores
• Componentes completamente configurados: overrides de texto, variantes, ranuras de iconos
• Reglas de diseño definidas por el usuario aplicadas en el punto de uso y auditadas en el informe de compilación
• Informe de compilación con % de uso de componentes, calidad de vinculación, cumplimiento de reglas y recomendaciones de brechas del DS

Especificación completa: CLAUDE.md

Funciona con cualquier design system

La aplicación se adapta a lo que proporciona el DS. Una biblioteca con estilos de texto pero sin variables de color aplica los estilos de texto y acepta colores crudos. El informe de compilación muestra qué falta y qué desbloquearía añadirlo.

Configuración del cliente MCP

Funciona con cualquier cliente MCP. Optimizado para Claude Code. La configuración para Claude Code, Cursor, Codex CLI y Gemini CLI (además del caso general de stdio-host) también está en docs/HOSTS.md.

{
  "mcpServers": {
    "mimic-ai": {
      "command": "npx",
      "args": ["-y", "@miapre/mimic-ai"]
    }
  }
}

{
  "mcpServers": {
    "mimic-ai": {
      "command": "npx",
      "args": ["-y", "@miapre/mimic-ai"]
    }
  }
}

{
  "mcp": {
    "servers": {
      "mimic-ai": {
        "command": "npx",
        "args": ["-y", "@miapre/mimic-ai"]
        }
    }
  }
}

{
  "mcpServers": {
    "mimic-ai": {
      "command": "npx",
      "args": ["-y", "@miapre/mimic-ai"]
    }
  }
}

Todos los clientes necesitan el plugin de Figma activo. El puente está integrado y se inicia automáticamente.

MCP Client (Claude Code, Cursor, VS Code)
    |
    | MCP Protocol (stdio)
    v
MCP Server (intelligence layer)
    - Tool registry, DS cache, knowledge store
    - Variable validation + suggestions before plugin
    - Circuit breaker (3 failures -> stop + report)
    - Chart geometry engine (Node.js)
    - Phase enforcement (6 sequential phases)
    |
    | Embedded WebSocket bridge (auto-starts)
    v
Figma Plugin (enforcement gate)
    - DS enforcement: rejects raw values when DS has tokens
    - Binding feedback: reports which bindings succeeded/failed
    - Thin handlers: mechanical operations only
    |
    v
Figma Plugin API > Canvas

Preguntas frecuentes

Privacidad

Todo se ejecuta localmente.

Ningún dato de diseño sale de tu máquina. Sin telemetría. Sin seguimiento.

La única llamada saliente es a la API REST de Figma para las claves de componentes publicados.

Restricciones

• Se requiere el plan Professional de Figma. El plan gratuito no puede publicar bibliotecas.
• Caché de fuentes en la primera compilación. Las fuentes de DS que no sean Inter pueden fallar en el primer nodo de texto. Reintentar funciona.
• Modo npx. No establece FIGMA_ACCESS_TOKEN. Usa el instalador completo para soporte de bibliotecas de equipo.
• Aplicación gradual del DS. Se adapta a lo que el DS proporciona. Una biblioteca solo de componentes obtiene componentes; los valores en bruto llenan los vacíos. El informe muestra qué añadir.
• Optimizado para Claude. El protocolo de 6 fases y las pistas contextuales de las herramientas funcionan mejor con Claude Code. Otros clientes MCP obtienen las herramientas pero pueden no seguir el protocolo completo.

Contribuciones

Se aceptan issues y PRs. Consulta el rastreador de issues y CONTRIBUTING.md para la configuración de desarrollo y las expectativas de PR. ¿Encontraste un problema de seguridad? Consulta SECURITY.md en lugar de abrir un issue público.

Licencia

MIT