Mimic AI

Mimic AI

Transforma HTML em Figma usando apenas o seu design system, impondo o uso correto de componentes e recuando com segurança quando necessário, melhorando a precisão a cada build.

Servidor MCP de código aberto. Executa localmente. Seus dados de design nunca saem da sua máquina.

Controlado, não apenas orientado

A IA escrever no Figma não é mais a parte difícil; várias ferramentas já fazem isso. As diferenças aparecem quando a IA tenta alcançar algo que seu design system não possui. Uma ferramenta que orienta um agente para seus componentes ainda pode cair em um valor hex bruto, um tamanho de pixel bruto ou uma fonte que seu sistema não usa, e a orientação geral para essa categoria de ferramenta é que o resultado pode precisar de revisão manual e limpeza antes de ser utilizável. O Mimic impõe no momento da escrita, dentro do próprio plugin do Figma, não apenas no prompt.

O que o controle bloqueia

• Preenchimentos hex/rgb brutos quando existe uma variável de cor do DS
• Tamanhos de fonte em pixels brutos quando existe um estilo de texto do DS
• Fontes fora do design system
• Incompatibilidade de categoria de variável (ex.: um token de fundo usado como traço)
• Frames primitivos para elementos que o DS já tem como componentes (botões, badges, inputs, células de tabela e mais)

Se o DS realmente não tem equivalente, o Mimic diz isso no relatório do build em vez de deixar um valor bruto silenciosamente.

O que o aprendizado acumula

• Receitas de componentes, reproduzidas automaticamente após confirmadas entre builds
• Padrões de variantes por maioria, aprendidos com seus próprios padrões de uso
• Regras de design definidas por você uma vez ao corrigir um build, aplicadas em todos os subsequentes
• Compilações sem êxito: padrões testados e confirmados como não funcionais, para não serem repetidos
• Detecção de obsolescência: sinaliza uma receita armazenada no momento em que deixa de corresponder ao seu DS atual
• Tudo escopado por biblioteca de design system: nada vaza entre arquivos não relacionados

Nada mais acumula isso entre builds. Uma Skill de Agente do Figma escrita manualmente é texto estático; ela não aprende com o que você corrige.

O que o relatório prova Todo build termina com um relatório auditado quanto à conformidade: componentes usados e suas chaves, primitivos construídos e por quê, quais regras armazenadas foram verificadas e se foram cumpridas, e onde o DS ainda tem lacunas de cobertura. Ele é feito para ser mostrado a um stakeholder, não apenas lido por quem executou o build.

Por que o Mimic existe

Você construiu um design system. Componentes, tokens, variáveis. Cada decisão intencional. Então alguém precisa de uma tela no Figma e começa do zero. Cores codificadas. Tamanhos de fonte brutos. Frames que quebram quando redimensionados. Seu sistema está ali mesmo no painel de biblioteca. Não usado.

A saída do Mimic é o entregável: camadas reais do Figma com instâncias reais de componentes, vínculos de variáveis e auto-layout. Nada para converter. Nada para trocar. Pronto para entrega.

Ele aprende o seu sistema

O primeiro build escaneia o design system. No terceiro, componentes recorrentes são verificados automaticamente. No décimo, a maioria das decisões é instantânea. O conhecimento se acumula a cada build.

Corrija uma vez. Diga ao Mimic "Esse não é o Badge certo, use Tag/Neutral." O mapeamento é atualizado permanentemente. Todos os builds futuros usam a correção sem você precisar se repetir.

Seu DS evolui. O Mimic acompanha. Adições, remoções e mudanças de variantes de componentes são detectadas no início de cada build por comparação com o que foi armazenado em cache da última vez — sem re-sincronização manual. Detecção mais profunda de mudanças no nível de variáveis (ex.: um token de cor renomeado) está prevista para uma versão futura.

Todo build é uma revisão do DS. Após cada build, o Mimic gera um relatório: quais componentes usou, o que construiu a partir de primitivos e por quê, quais padrões aprendeu e o que seu DS está perdendo. As recomendações vêm como perguntas, não comandos: "Seu DS deveria incluir um Status Badge? 4 elementos em 3 builds foram construídos como primitivos."

Como funciona

Escolha qualquer ponto de partida:

"Crie um dashboard com três cartões de métricas e uma tabela de atividades"

"Aqui está o HTML do nosso ambiente de staging, construa no Figma"

"Reconstrua este protótipo do Claude Design com componentes reais"

O Mimic descobre o design system no seu arquivo, combina componentes e tokens e constrói o Figma estruturado. Mesmas regras, mesma qualidade de saída, independentemente de como você começa.

Como o Mimic se compara

O Claude Design é ótimo para ideação. O Figma Make é ótimo para prototipagem interativa. O Framelink é ótimo para dar contexto de IA sobre seus designs. O Mimic é para quando a saída precisa ser o arquivo Figma real que você vai entregar.

Para quem é

O Mimic funciona com qualquer biblioteca do Figma: a do seu time, um kit da comunidade ou o sistema publicado de um cliente.

• Designers que querem telas em conformidade com o DS sem caçar componentes manualmente
• Líderes de design system testando seu sistema construindo telas reais, revelando lacunas de cobertura com evidências
• Novos membros do time aprendendo um DS ao construí-lo, vendo quais componentes existem e o que falta
• Agências e freelancers que assumem a biblioteca de um cliente e precisam produzir telas rapidamente
• Times de migração de DS reconstruindo telas existentes com um novo sistema para avaliar a cobertura antes de se comprometer
• Desenvolvedores que precisam de uma referência no Figma que corresponda aos seus componentes de frontend
• Gerentes de produto que querem prototipar ideias usando o DS sem esperar um designer

Primeiros passos

Requer: Node.js v20.6+ · o app desktop do Figma (Figma no navegador não é suportado — baixar) · um plano Profissional do Figma ou superior (necessário para publicar e usar bibliotecas de equipe).

1. Instalação

Instalador de uma linha:

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

Isso clona o repositório em ~/mimic-ai, executa npm install, solicita seu token de acesso pessoal do Figma e oferece registrar mimic-ai no settings.json do Claude Code automaticamente.

Instalação manual:

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

Em seguida, defina FIGMA_TOKEN na configuração do servidor do seu cliente MCP (ou em ~/.mimic-ai.json — veja "Detalhes da configuração do Figma" mais abaixo para saber como gerar o token) e aponte a entrada de mimic-ai do seu cliente para o mcp.js clonado ({ "command": "node", "args": ["/path/to/mimic-ai/mcp.js"] }).

2. Adicione o plugin do Figma

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

3. Conecte (a cada sessão)

Figma: Plugins > Development > Mimic AI > Run

A ponte inicia automaticamente quando você faz a primeira chamada de ferramenta. Nenhum processo separado para gerenciar.

4. Habilite seu design system

Painel Assets > ícone da biblioteca do time > ative. Uma vez por arquivo. Bibliotecas da comunidade funcionam direto.

5. Construa

"Crie uma página de configurações com três campos de formulário e um botão de salvar."

Uma chamada descobre todo o DS (variáveis, estilos, componentes), pré-carrega tudo e avança para o estado pronto para construir. Sem configuração em várias etapas.

O que ele aprende e impõe

O que ele aprende:

• Receitas de componentes: Configure um componente uma vez (variantes, booleanos, slots de texto). O Mimic reproduz essa configuração em toda inserção futura. Após 3 builds, a receita é confirmada e aplicada automaticamente.
• Padrões de layout: Configurações de frame (direção, padding, gap, preenchimentos) capturadas no primeiro build e reutilizadas quando o mesmo padrão aparece.
• Regras de design: Corrija o Mimic uma vez ("a cor da marca é apenas para links", "cards devem ter um componente de cabeçalho de card"). Ele salva a regra e a impõe em todo build futuro.
• Lacunas do DS: Padrões construídos como primitivos são rastreados entre builds. O Mimic apresenta recomendações baseadas em evidências ("Status Badge usado 31 vezes como primitivo em 5 builds").

Como ele impõe:

• Categorias de variáveis. Usa bg-* para um traço? O Mimic avisa e sugere border-. Usa bg- como cor de texto? Avisa e sugere text-*.
• Component-first baseado em experiência. Se o Mimic usou um componente Badge em 3+ builds e você tenta construir um como frame bruto, ele bloqueia com a chave do componente e diz "use isto em vez disso."
• Conformidade com regras. Todo relatório de build audita as regras armazenadas contra o que foi construído. Violações são listadas com evidências.
• Semântica de cores de gráficos. As cores Brand, Success, Warning e Error são excluídas das paletas de gráficos. Apenas cores utilitárias neutras são sugeridas para visualização de dados.

Funcionalidades de eficiência:

• Lote de texto: Todos os overrides de texto em uma instância de componente definidos em uma única chamada
• Construtor de tabelas em massa: Uma tabela de dados inteira (cabeçalhos, células, variantes, texto) em uma chamada
• Construtor de gráficos em massa: Gráficos de barras, linhas, rosca e radar em uma chamada com vínculos de cores do DS

O que é verificado automaticamente

Todo build impõe 19 regras de qualidade em 6 fases sequenciais.

• Texto usa estilos de texto do DS, não propriedades de fonte brutas
• Cores vinculadas a variáveis do DS, não codificadas
• Categorias de variáveis impostas: text-* para texto, bg-* para preenchimentos, border-* para traços
• Cores semânticas (Brand, Success, Warning, Error) restritas ao uso pretendido
• Espaçamento e raio vinculados a tokens do DS quando disponíveis
• Todo frame usa auto-layout
• Conteúdo corresponde à fonte exatamente, caractere por caractere
• Componentes do DS usados sempre que existe uma correspondência, incluindo componentes aprendidos de builds anteriores
• Componentes totalmente configurados: overrides de texto, variantes, slots de ícones
• Regras de design definidas pelo usuário impostas no ponto de uso e auditadas no relatório do build
• Relatório de build com porcentagem de uso de componentes, qualidade de vínculo, conformidade de regras e recomendações de lacunas do DS

Especificação completa: CLAUDE.md

Funciona com qualquer design system

A aplicação se adapta ao que o DS fornece. Uma biblioteca com estilos de texto mas sem variáveis de cor impõe estilos de texto e aceita cores brutas. O relatório do build mostra o que está faltando e o que adicionar liberaria.

Configuração do cliente MCP

Works with any MCP client. Optimized for Claude Code. Setup for Claude Code, Cursor, Codex CLI, and Gemini CLI (plus the general stdio-host case) is also in 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 os clientes precisam do plugin do Figma ativo. A ponte está embutida e inicia automaticamente.

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

FAQ

Privacidade

Tudo roda localmente.

Nenhum dado de design sai da sua máquina. Sem telemetria. Sem rastreamento.

A única chamada de saída é para a API REST do Figma para chaves de componentes publicados.

Restrições

• Plano Professional do Figma necessário. O plano gratuito não pode publicar bibliotecas.
• Cache de fontes na primeira construção. Fontes DS não-Inter podem falhar no primeiro nó de texto. A nova tentativa tem sucesso.
• Modo npx. Não define FIGMA_ACCESS_TOKEN. Use o instalador completo para suporte a bibliotecas de equipe.
• Aplicação gradual do DS. Adapta-se ao que o DS fornece. Uma biblioteca somente de componentes recebe componentes; valores brutos preenchem as lacunas. O relatório mostra o que adicionar.
• Otimizado para Claude. O protocolo de 6 fases e as dicas contextuais de ferramentas funcionam melhor com Claude Code. Outros clientes MCP recebem as ferramentas, mas podem não seguir o protocolo completo.

Contribuindo

Issues e PRs são bem-vindos. Veja o rastreador de issues e o CONTRIBUTING.md para configuração de desenvolvimento e expectativas de PR. Encontrou um problema de segurança? Veja SECURITY.md em vez de abrir um issue público.

Licença

MIT