Pi para design.

O que o Pi realmente é

O Pi é um agente de programação de IA open source (MIT) para o terminal, parte do toolkit earendil-works pi. 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 enxuto: quatro ferramentas padrão — read, write, edit e bash — mais grep, find e ls integrados.

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

• 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 capacidade 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 com ramificação: 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 passagens anteriores.

• Fornecedor: earendil-works (projeto open source da comunidade)
• Credencial: sua própria chave de API de provedor (BYOK — Anthropic, OpenAI, Google, etc.) ou um login de assinatura via /login; armazenada localmente em ~/.pi/agent/auth.json (0600)
• Licença: MIT, open source

Por que um agente BYOK multi-provedor combina com design

A vantagem de design do Pi é a flexibilidade, não um único modelo embutido — 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 screenshots de referência e depois trocar para outro para refatorar — sem sair do agente.
• Suas chaves, sem aprisionamento: BYOK significa que você não fica preso aos preços ou aos limites de contexto de um único fornecedor; escolha o modelo cujos pontos fortes combinam com o trabalho de design à sua frente.
• Convenções em Skills: Uma Skill (mais uma fonte MCP como um servidor do Figma) aponta o agente para seus tokens, componentes e specs reais, para que ele trabalhe em função de uma marca em vez de um visual padrão.

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 Open Design empacota exatamente esses insumos, e é por isso que os dois se encaixam (mais sobre isso abaixo).

Configure o Pi para trabalho de design, do zero

Aqui está o caminho completo de uma máquina limpa até um Pi capaz de construir e verificar UI.

# 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+L

• Codifique suas regras de design: Coloque seus tokens, primitivos e convenções em uma Skill e aponte o Pi para eles, para que a saída combine com uma marca em vez de recorrer a um visual genérico.
• Adicione verificação no navegador: Conecte um MCP de Playwright ou de navegador para que o Pi renderize em um navegador real e confira a saída em diferentes breakpoints em vez de apenas confirmar que o build passou.

O fluxo de screenshot para UI

O laço de design de maior alavancagem com o Pi é transformar uma imagem de referência em UI responsiva e funcional e iterar até que ela corresponda — apoiando-se em um modelo multimodal para comparar a saída de volta com a referência. Como o Pi é agnóstico de provedor, aponte-o para o modelo que melhor lê imagens nesta passagem.

1. 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 única imagem de destaque.
2. Escolha um modelo multimodal forte para a passagem com /model, já que a compreensão de imagens é o que conduz a qualidade do screenshot para UI.
3. Seja específico no prompt; prompts vagos produzem UI genérica mesmo com um modelo forte.
4. Mantenha seu design system e suas convenções em uma Skill e diga ao Pi onde ficam os tokens e os primitivos canônicos.
5. Rode um servidor de desenvolvimento e faça o Pi renderizar em um navegador real, redimensionando para os breakpoints, e depois itere comparando sua implementação de volta com os screenshots — não apenas confirmar que ela faz o build.

Dê ao agente as referências e restrições concretas de antemão:

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.

Mantenha os prompts pequenos e focados, faça commit das boas iterações e reverta as ruins (avisando o Pi quando reverter), para que cada passagem parta de uma base limpa. As sessões JSONL com ramificação do Pi também permitem explorar uma alternativa sem perder a linha original.

Skills, Extensions e temas

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

• Skills: Pacotes de capacidade em Markdown que seguem o padrão Agent Skills — o lar durável e portátil das suas convenções de design, tokens e checklists de revisão. A mesma Skill funciona entre agentes compatíveis, não apenas no Pi.
• Extensions e templates de prompt: As Extensions em TypeScript adicionam ferramentas, comandos e UI personalizados; templates de prompt reutilizáveis rodam via /name. Ambos permitem programar o laço de verificação sem sair do terminal.
• MCP e temas: O Pi se conecta a servidores MCP para trazer contexto de design externo (mais relevante, 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 em especial — exatamente o tipo de coisa que o Open Design foi feito para orquestrar, em vez de recriar a cada projeto.

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

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

O ângulo do Pi é ortogonal aos demais: ele é o agente que permite usar qualquer um desses modelos subjacentes com suas próprias chaves. O veredito recorrente da comunidade ainda vale — o bom gosto vem das pessoas: 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 formato de ferramenta de design, não de modelo.

Armadilhas, e como evitar o visual de “lixo de IA”

A queixa mais comum sobre design gerado por IA é que ele parece genérico — gradientes suaves, painéis flutuantes, cantos arredondados exagerados, sombras dramáticas, aquela vibe de Inter-com-roxo que “grita que uma IA fez isto”. Outros problemas relatados incluem layouts mobile quebrados e instruções vazando para o texto da UI. Nenhum desses é exclusivo do Pi ou de qualquer modelo específico; é 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 se comprometer com uma direção real em vez do visual padrão — e, por ser uma Skill portátil, ela viaja com você entre os 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 quebrem silenciosamente no mobile.
• Forneça tokens e referências: Tokens de design reais e screenshots de referência são a maior alavanca isolada sobre a qualidade da saída.
• Codifique regras onde o Pi as lê: Coloque regras de estilo como “sem hero cards, no máximo duas famílias tipográficas, hierarquia que prioriza a marca” em uma Skill que o agente carrega a cada execução.

Note que toda mitigação consiste em dar ao agente um contexto de design curado — independentemente do provedor para o qual você roteia. Manter esse contexto à mão, a cada projeto, é o trabalho braçal que o Open Design elimina.

Projetando com o Pi dentro do Open Design

O Open Design é a camada de design open source que o fluxo acima fica pedindo o tempo todo. Ele trata o Pi como um adaptador de primeira linha e o envolve em uma biblioteca curada de skill e design system, um pipeline de renderização estruturado e uma UI desktop local — para que o contexto de design que torna o Pi bom esteja presente desde a primeira execução, e não montado à mão a cada vez. Ambos são open source e local-first, o que torna a dupla uma combinação natural.

1. Instale o Open Design e selecione o Pi como seu agente.
2. Autentique-se com sua própria chave de API de provedor (BYOK) ou um login de assinatura — as credenciais ficam na sua máquina em ~/.pi/agent/auth.json e nunca passam por nós como intermediários.
3. Escolha um design system e uma skill e, em seguida, gere decks, protótipos e landing pages com bom gosto consistente.
4. Cada artefato e arquivo DESIGN.md vive no seu próprio repositório, não em uma nuvem hospedada.

O mesmo agente Pi, as mesmas chaves, a mesma liberdade de trocar de modelo — além de um fluxo de design real, portátil e open source ao redor dele. É local-first e MIT, então nada sobre seu trabalho ou suas credenciais sai da sua máquina.

Perguntas frequentes

1. 01 O Pi consegue mesmo fazer trabalho de design? +

   Sim — com uma skill estética, um design system e imagens de referência reais em contexto, o Pi produz UI responsiva e de qualidade de produção, e você pode roteá-lo para um modelo multimodal forte para verificar a saída em relação às referências. Sem esse contexto, ele tende a recorrer a um visual genérico, que é a lacuna que o Open Design preenche.

2. 02 Preciso pagar para projetar com o Pi? +

   O Pi em si é gratuito e open source (MIT). Você paga apenas pelo modelo subjacente — traga sua própria chave de API de provedor (BYOK), ou use uma assinatura Claude Pro/Max, ChatGPT Plus/Pro ou GitHub Copilot via /login. O Open Design também nunca atua como intermediário das suas credenciais.

3. 03 O que torna o Pi bom especificamente para design? +

   Ele é agnóstico de provedor: você traz suas próprias chaves e roteia para qualquer um de mais de 20 provedores, escolhendo o modelo cujos pontos fortes combinam com a tarefa e trocando no meio da sessão. Mas o bom gosto ainda vem do design system, da skill e das referências que você fornece, não do modelo.

4. 04 Qual modelo devo usar com o Pi para design de frontend? +

   O Pi roteia para muitos provedores, então escolha por tarefa — um modelo multimodal forte lê bem screenshots de referência, enquanto outros podem ser melhores para refatorar. A vantagem do Pi é que você pode trocar sem mudar seu fluxo. O Open Design permite manter o mesmo contexto de design qualquer que seja o modelo escolhido.

5. 05 Como conecto o Pi ao Figma? +

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

6. 06 O Open Design tem vínculo com o Pi? +

   Não. O Pi é um projeto open source independente da earendil-works; o Open Design é um projeto open source independente e separado que suporta o Pi como adaptador de primeira linha.

7. 07 Meus arquivos e credenciais estão seguros? +

   Sim — o Open Design é local-first e open source. Seus arquivos, artefatos e o DESIGN.md permanecem no seu próprio repositório, e suas chaves de provedor são usadas diretamente pelo Pi (armazenadas localmente em ~/.pi/agent/auth.json), nunca roteadas pelos servidores do Open Design.