Question 1

O Pi Realmente Consegue Fazer Trabalho de Design?

Accepted Answer

Sim — com um skill estético, um design system e imagens de referência reais no contexto, o Pi produz UI responsiva de qualidade de produção, e você pode direcioná-lo para um modelo multimodal robusto para verificar o resultado em relação às referências. Sem esse contexto, ele tende a assumir um visual genérico, que é a lacuna que o OpenDesign preenche.

Question 2

Preciso Pagar para Projetar com o Pi?

Accepted Answer

O Pi em si é gratuito e de código aberto (MIT). Você paga apenas pelo modelo subjacente — use sua própria chave de API de provedor (BYOK) ou uma assinatura Claude Pro/Max, ChatGPT Plus/Pro ou GitHub Copilot via /login. O OpenDesign nunca faz proxy das suas credenciais em nenhum dos casos.

Question 3

O Que Torna o Pi Adequado para Design?

Accepted Answer

É independente de provedor: você usa suas próprias chaves e direciona para qualquer um dos mais de 20 provedores, escolhendo o modelo cujos pontos fortes se encaixam na tarefa e trocando no meio da sessão. Mas o bom gosto ainda vem do design system, do skill e das referências que você fornece, não do modelo.

Question 4

Qual Modelo Devo Usar com o Pi para Design de Frontend?

Accepted Answer

O Pi direciona para muitos provedores, então escolha por tarefa — um modelo multimodal robusto lê bem capturas de tela de referência, enquanto outros podem ser mais adequados para refatoração. A vantagem do Pi é que você pode trocar sem alterar seu workflow. O OpenDesign permite manter o mesmo contexto de design independentemente do modelo escolhido.

Question 5

Como Conecto o Pi ao Figma?

Accepted Answer

Pi suporta servidores MCP, então você pode adicionar um servidor MCP do Figma e extrair contexto de design real — componentes, variáveis, dados de layout — para que o código gerado corresponda à fonte em vez de apenas se aproximar dela.

Question 6

O que o Pi realmente é

Accepted Answer

O Pi é um agente de código de IA open-source (MIT) para o terminal, parte do kit de ferramentas pi da earendil-works. Ele lê seu repositório, edita arquivos e executa comandos de shell — planejando e verificando o trabalho a partir de tarefas em linguagem natural, em vez de apenas completar linhas. Seu núcleo é deliberadamente pequeno: quatro ferramentas padrão — read, write, edit e bash — além de grep, find e ls integrados.

Para o trabalho de design, a propriedade que mais se destaca é que o Pi é agnóstico em relação ao provedor. Ele normaliza Anthropic, OpenAI, Google e muitos outros provedores por trás de uma única API unificada, então você traz suas próprias chaves e escolhe o modelo por tarefa — por exemplo, um modelo multimodal forte para ler capturas de tela de referência — e troca com /model ou Ctrl+L no meio da sessão sem mudar seu fluxo de trabalho.

Qualquer modelo, suas chaves: o Pi roteia para mais de 20 provedores, incluindo Anthropic e OpenAI. Você se autentica com suas próprias chaves de API (BYOK), ou entra em uma assinatura Claude Pro/Max, ChatGPT Plus/Pro ou GitHub Copilot com /login.

Skills + Extensions: o Pi carrega Skills (pacotes de capacidades em Markdown que seguem o padrão Agent Skills) e Extensions em TypeScript — o lugar natural para codificar suas convenções de design e adicionar ferramentas personalizadas.

Sessões ramificadas: as sessões são armazenadas como árvores JSONL, então você pode ramificar uma exploração e navegar pelo histórico em um único arquivo sem perder as passagens anteriores.

Credencial: sua própria chave de API do provedor (BYOK — Anthropic, OpenAI, Google, etc.) ou um login de assinatura via /login; armazenada localmente em ~/.pi/agent/auth.json (0600)

Fornecedor: earendil-works (projeto de comunidade open-source)

Licença: MIT, open source

Question 7

Por que um agente multiprovedor com BYOK se encaixa no design

Accepted Answer

A vantagem do Pi em design é a flexibilidade, não um único modelo integrado — mas, como acontece com todo agente, o bom gosto ainda precisa ser fornecido.

Escolha o modelo certo por tarefa: como o Pi roteia para qualquer provedor, você pode recorrer a um modelo multimodal forte para ler capturas de tela de referência e depois trocar para outro para refatorar — sem sair do agente.

Suas chaves, sem aprisionamento: o BYOK significa que você não está preso ao preço nem aos limites de contexto de um fornecedor; escolha o modelo cujos pontos fortes se encaixem no trabalho de design que você tem em mãos.

Convenções em Skills: uma Skill (mais uma fonte MCP, como um servidor Figma) aponta o agente para seus tokens, componentes e especificações reais, de modo que ele trabalhe a favor de uma marca em vez de uma aparência padrão.

O bom gosto vem de três insumos que você fornece: um design system, uma skill e imagens de referência reais.

A lição é a mesma que todo agente ensina: o Pi não tem bom gosto por padrão, e nenhuma escolha de modelo o fornece. Ele produz bom design quando você lhe dá restrições — um design system, uma skill estética e referências concretas. O OpenDesign empacota exatamente esses insumos, e é por isso que os dois se encaixam (mais abaixo).

Question 8

Configure o Pi para Trabalho de Design do Zero

Accepted Answer

A sequência de configuração: instalar → autenticar (BYOK) → codificar as regras de design em uma Skill → escolher um modelo → habilitar a verificação no navegador.Codifique suas regras de design: coloque seus tokens, primitivas e convenções em uma Skill e aponte o Pi para elas, para que a saída corresponda a uma marca em vez de recorrer a uma aparência genérica.Adicione verificação no navegador: conecte um MCP do Playwright ou de navegador para que o Pi renderize em um navegador real e verifique sua saída em diferentes breakpoints, em vez de apenas confirmar que o build passa.Use a seção de configuração atual para comandos e detalhes específicos de versão, que podem mudar.# 1. Install the Pi coding agent CLI (Node)
npm install -g --ignore-scripts @earendil-works/pi-coding-agent

# 2. Authenticate with your own provider key (BYOK)
export ANTHROPIC_API_KEY=sk-ant-...   # or OPENAI_API_KEY=sk-...
#    (or run /login inside Pi for a Claude / ChatGPT / Copilot subscription)

# 3. Start it in your project
cd your-project
pi

# 4. Switch models any time with /model or Ctrl+LExemplo de comando histórico do guia anterior; verifique a sintaxe atual na documentação do fornecedor vinculada.

Question 9

O fluxo de trabalho de captura de tela para UI

Accepted Answer

O loop de design de maior alavancagem com o Pi é transformar uma imagem de referência em uma UI funcional e responsiva e iterar até que ela corresponda — apoiando-se em um modelo multimodal para comparar a saída com a referência. Como o Pi é agnóstico em relação ao provedor, aponte-o para o modelo que lê imagens melhor nesta passagem.Comece pelas referências visuais mais claras que você tiver — e inclua múltiplos estados (desktop e mobile, hover, vazio, carregando), não apenas uma imagem principal.Escolha um modelo multimodal forte para a passagem com /model, já que a compreensão de imagens é o que determina a qualidade de captura de tela para UI.Seja específico no prompt; prompts vagos produzem UI genérica mesmo com um modelo forte.Mantenha seu design system e suas convenções em uma Skill e diga ao Pi onde ficam os tokens e as primitivas canônicas.Rode um servidor de desenvolvimento e faça o Pi renderizar em um navegador real, redimensionando para os breakpoints, e então itere comparando sua implementação com as capturas de tela — não apenas confirme que o build passa.Dê ao agente as referências e as restrições concretas desde o início:Mantenha os prompts pequenos e focados, faça commit das boas iterações e reverta as ruins (avisando o Pi quando você reverte), para que cada passagem se apoie em uma base limpa. As sessões JSONL ramificadas do Pi também permitem explorar uma alternativa sem perder a linha original.pi
# in the prompt:
> Implement reference-desktop.png and reference-mobile.png in
  React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens (see the Skill).
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.Exemplo de comando histórico do guia anterior; verifique a sintaxe atual na documentação do fornecedor vinculada.

Question 10

Skills, Extensions e temas

Accepted Answer

O Pi se autoestende em tempo de execução por meio de algumas camadas, e elas se encaixam bem em um fluxo de trabalho de design aberto.

Skills: pacotes de capacidades em Markdown que seguem o padrão Agent Skills — o lar durável e portátil das suas convenções de design, tokens e listas de verificação de revisão. A mesma Skill funciona em agentes compatíveis, não só no Pi.

Extensions e templates de prompt: as Extensions em TypeScript adicionam ferramentas, comandos e UI personalizados; templates de prompt reutilizáveis são executados via /name. Ambos permitem programar o loop de verificação sem sair do terminal.

MCP e temas: o Pi se conecta a servidores MCP para trazer contexto externo de design (o mais relevante sendo um servidor MCP do Figma), e os temas recarregam a quente para que a UI do terminal permaneça legível enquanto você trabalha.

Essas são capacidades portáteis — Skills e MCP especialmente — exatamente o tipo de coisa que o OpenDesign foi feito para orquestrar, em vez de recriar a cada projeto.

Question 11

Pi vs Codex vs Claude Code vs Cursor vs Gemini CLI para design

Accepted Answer

Não há um único vencedor para o trabalho de design — cada agente tem uma força diferente, e equipes experientes os combinam. Um resumo justo:

Pi — Agnóstico em relação ao provedor e BYOK — roteie para qualquer modelo (Anthropic, OpenAI, Google…) e troque no meio da sessão; MIT, autoextensível — Escolher o melhor modelo por tarefa sem aprisionamento a fornecedor

Codex — Forte acabamento visual com uma skill de frontend; builds assíncronos em sandbox — Builds assíncronos delegados e regras portáteis em AGENTS.md

Claude Code — Decisões de design específicas (hex, espaçamento, tipografia) e UX ciente da base de código — Raciocínio de frontend e refatorações com grande contexto

Cursor — Loop visual de construir e ver com preview ao vivo e edições inline — Trabalho de UI de iterar e observar, dentro de uma IDE

Gemini CLI — Forte compreensão multimodal de imagens e um contexto de 1M tokens; nível gratuito — Trabalho com muitas capturas de tela e manter um design system inteiro em contexto

O ângulo do Pi é ortogonal aos outros: é o agente que permite usar qualquer um desses modelos subjacentes com suas próprias chaves. O veredito recorrente da comunidade ainda se mantém — o bom gosto vem dos humanos: todos eles recorrem a uma estética genérica sem skills, referências e restrições. Esse é o problema real a resolver, e ele tem a forma de ferramenta de design, não de modelo.

Agente — Força em design — Melhor para

Question 12

Armadilhas e como evitar o visual de “AI slop”

Accepted Answer

A reclamação mais comum sobre design gerado por IA é que ele parece genérico — gradientes suaves, painéis flutuantes, cantos arredondados exagerados, sombras dramáticas, uma vibe de Inter com roxo que “grita que uma IA fez isso”. Outros problemas relatados incluem layouts mobile quebrados e instruções vazando para o texto da UI. Nenhum deles é exclusivo do Pi nem de qualquer modelo; são o que acontece quando qualquer agente roda sem um contexto de design curado.

Adicione uma skill estética: uma skill de design curada força o agente a assumir uma direção real em vez da aparência padrão — e, como é uma Skill portátil, ela viaja com você entre modelos.

Verifique em um navegador real: escolha um modelo multimodal e faça o Pi renderizar e se autoverificar em diferentes breakpoints, para que os layouts não se quebrem silenciosamente no mobile.

Forneça tokens e referências: tokens de design reais e capturas de tela de referência são a maior alavanca única sobre a qualidade da saída.

Codifique regras onde o Pi as lê: coloque regras do tipo “nada de hero cards, no máximo duas famílias tipográficas, hierarquia com a marca em primeiro lugar” em uma Skill que o agente carrega a cada execução.

Observe que toda mitigação consiste em dar ao agente um contexto de design curado — independentemente de para qual provedor você roteia. Manter esse contexto à mão, projeto a projeto, é a fadiga que o OpenDesign elimina.

Question 13

Projetar com o Pi dentro do OpenDesign

Accepted Answer

O OpenDesign é a camada de design open-source que o fluxo de trabalho acima não para de pedir. Ele trata o Pi como um adaptador de primeira linha e o envolve em uma skill curada e uma biblioteca de design systems, um pipeline de renderização estruturado e uma UI de desktop local — assim o contexto de design que torna o Pi bom está lá desde a primeira execução, em vez de ser montado à mão a cada vez. Ambos são open-source e local-first, o que torna o par uma combinação natural.

Autentique-se com sua própria chave de API do provedor (BYOK) ou um login de assinatura — as credenciais ficam na sua máquina, em ~/.pi/agent/auth.json, e nunca passam por proxy nosso.

Escolha um design system e uma skill e então gere apresentações, protótipos e landing pages com bom gosto consistente.

Todo artefato e arquivo DESIGN.md fica no seu próprio repositório, não em uma nuvem hospedada.

Mesmo agente Pi, mesmas chaves, mesma liberdade de trocar de modelo — além de um fluxo de trabalho de design real, portátil e open-source em volta dele. É local-first e MIT, então nada do seu trabalho ou das suas credenciais sai da sua máquina.

Instale o OpenDesign e selecione o Pi como seu agente.

Question 14

O OpenDesign é afiliado ao Pi?

Accepted Answer

Não. O OpenDesign é independente e integra o Pi como um adaptador com suporte da comunidade.

Projetar com
Pi no
OpenDesign.

Escolha seu ponto de partida para o Pi

Crie uma interface de produto usando o Pi

Configure o Pi Do Zero

Compare o Pi Com Outros Agentes

Um trabalho de design com o Pi: do briefing à interface

1Briefing de Design e Restrições

2Quem faz o quê: você, o Pi e o OpenDesign

3Artefato do Pi: página de comparação de planos em 1440px e 390px

4Revisar Antes da Entrega

Grade e Espaçamento

Hierarquia Visual

Layout Mobile

Verificações de Interação

Quando o Pi é a escolha certa — e quando não é

O Pi É Adequado Quando

Escolha Outro Workflow Quando

Requisitos do Pi antes de começar

Escopo da ferramentaPi, pela comunidade

Contas e autenticaçãoSua própria chave de API do provedor (BYOK) ou

Sistema e VersõesApp de desktop ou código-fonte

Verificação de ConexãoO sinal de sucesso

Configuração do Pi em três passos

Baixe o App de Desktop da OpenDesign

Prepare sua conexão com o Pi

Execute uma pequena tarefa no Pi

Fluxo de design em cinco etapas do Pi

Briefing de Design

Restrições de Design

Gerar a Interface

Pré-visualização

Revisar e Verificar

Recursos de Design para Pi

Leituras Adicionais para Pi

Skills de Design

Sistemas de Design

Templates

Limitações do Pi, Verificações Manuais e Alternativas

Perguntas Frequentes Sobre Pi e OpenDesign

Projetar com Pi no OpenDesign.