LEITURAS ADICIONAIS
Leituras Adicionais para Pi
Tutoriais, documentação e passo a passos para projetar com Pi, conforme listado no guia publicado.
Pi 
OpenDesign Projetar com
Pi no
OpenDesign.
Como projetar interfaces com o Pi no OpenDesign: skills portáteis, o modelo e a chave que você escolhe, uma tarefa de comparação de planos do briefing ao arquivo revisado, e os limites que você precisa conhecer antes de começar.
Do briefing à interface01 / Pi
VOCÊ TRAZ A IDEIA↗
“Comparação de planos com um
skill portátil, qualquer modelo.”
TRÊS CAMINHOS PARA ESTE GUIA DO PI
Escolha Por Onde Começar Com o Pi
ESTE GUIA · DESIGN DE UI
Construa Uma Interface de Produto Com o Pi
Este guia: briefing, referências, regras de design e um resultado em HTML revisado.
Ler este guia CONFIGURAÇÃOConfigure o Pi Do Zero
Aqui está o caminho completo, de uma máquina limpa a um Pi capaz de construir e verificar UI.
Ir para a configuração COMPARAÇÃOCompare o Pi Com Outros Agentes
Como o Pi difere do Codex, do Claude Code, do Cursor para trabalho de design, e quando escolher outro workflow.
Ver a comparaçãoNesta página Exemplo
Uma Tarefa de Design Completa Com o Pi
Uma Tarefa de Design no Pi, Do Briefing à Interface
Uma única tarefa, mostrada de ponta a ponta: o briefing e as restrições que você entrega, o artefato que retorna, e as verificações que você ainda executa antes de considerá-la concluída. A interface abaixo é um exemplo ilustrativo criado para esta página, não uma execução do Pi registrada.
1Briefing de Design e Restrições
BriefingProjete uma página de comparação de planos para um aplicativo de notas: planos gratuito, pessoal e equipe, uma comparação de recursos e um breve FAQ. Desktop e celular.
- Sistema de designTela de papel da OpenDesign: Albert Sans, um destaque em verde
- Breakpoints1440px desktop e 390px mobile, sem rolagem horizontal
- InteraçõesAlternador de cobrança, CTAs de plano, expansão de linha de comparação
- SaídaUm único arquivo HTML autocontido com pontos de referência estáveis
data-od-id
2Divisão de Trabalho: Você, o Pi e o OpenDesign
- Você
Escreva o briefing, selecione o sistema de design e defina os critérios de aceitação.
- Pi
Planeja o layout, escreve o HTML, CSS e JavaScript e revisa a pedido.
- OpenDesign
Fornece o sistema de design e o skill, renderiza a pré-visualização e armazena cada versão como um arquivo no projeto.
- Revisão
A hierarquia visual, o espaçamento na grade de 8px, ambos os breakpoints e cada interação são verificados antes da entrega.
3Artefato Pi: a Página de Comparação de Planos em 1440px e 390px
4Revisar Antes da Entrega
Layout
Grade e Espaçamento
Os três planos e a comparação compartilham a grade de 8px; as linhas de recursos se alinham entre as colunas.
Hierarquia
Hierarquia Visual
Preço e nome do plano em primeiro lugar; o destaque marca o selo mais escolhido e seu botão.
Responsivo
Layout Mobile
Plano pessoal primeiro, depois o gratuito, depois o de equipe; o alternador permanece no topo.
Interação
Verificações de Interação
Acione o alternador, navegue pelos CTAs com Tab, expanda uma linha de comparação.
Adequação
Quando o Pi É Adequado à Tarefa, e Quando Não É
O Pi É Adequado Quando
- Qualquer modelo, suas chaves. Direcione para Anthropic, OpenAI, Google e outros com suas próprias chaves; escolha um modelo multimodal robusto para screenshot-to-UI e alterne com /model.
- Skills portáteis. Codifique suas convenções de design como Skills no padrão Agent-Skills que funcionam em agentes compatíveis, não só no Pi.
- MCP + Extensions. Traga contexto real de design por meio de um servidor MCP do Figma e automatize o ciclo de verificação com Extensions em TypeScript.
- Aberto e BYOK. Licenciado em MIT e local-first; você paga apenas pelo modelo subjacente e suas credenciais permanecem na sua máquina.
Escolha Outro Workflow Quando
- Você precisa de arquivos vetoriais editáveis. O artefato é HTML, não um documento de design editável. Verifique um workflow vetorial separado para o formato de arquivo necessário.
- Você não tem referência nem restrições. Sem um design system ou exemplos, o resultado tende a um visual genérico; escreva o briefing primeiro.
- Você não tem a credencial que este agente precisa. Necessário: sua própria chave de API de provedor (traga sua própria chave) ou login por assinatura via /login. A OpenDesign não fornece nem faz proxy de credenciais.
- Sua equipe trabalha no Aider ou no OpenCode. Esses agentes têm páginas próprias; o workspace é o mesmo, a configuração é diferente. Veja agentes relacionados.
Compatibilidade
Requisitos do Pi antes de começar
Este guia aborda o Pi conforme conectado através do aplicativo desktop OpenDesign. Referências publicadas verificadas em 6 de setembro de 2026.
Escopo da ferramentaPi, pela comunidade
Pi é um agente de código de IA de terminal open-source (MIT) da earendil-works. Ele lê seu codebase, edita arquivos e executa comandos a partir de um núcleo pequeno de quatro ferramentas — read, write, edit, bash. Esta página trata de projetar interfaces com o Pi através do OpenDesign, não da interface do próprio Pi. As notas de configuração do OpenDesign listam os agentes disponíveis.
Contas e autenticaçãoSua própria chave de API do provedor (BYOK) ou
Sua própria chave de API do provedor (BYOK) ou login por assinatura via /login. Autentique-se com sua própria chave de API do provedor (BYOK) ou um login por assinatura — as credenciais permanecem na sua máquina. Esta página não promete uma cota ou preço.
Sistema e VersõesApp de desktop ou código-fonte
Verifique a página de download para builds desktop. Os requisitos de Node.js e pnpm no quickstart de origem se aplicam à execução a partir do código-fonte, não à instalação de um pacote desktop. Versão mínima compatível do Pi: não verificada aqui.
Verificação de ConexãoO sinal de sucesso
Siga as instruções de conexão exibidas pela sua versão instalada e, em seguida, execute uma pequena tarefa. Confirme que o Pi a processou e que o artifact abre. Um download isolado não estabelece uma conexão funcional.
Comece com o app de desktop
Configuração do Pi em três passos
Baixe primeiro, complete a configuração do Pi para sua versão instalada e depois verifique um pequeno resultado. Você não precisa compilar o OpenDesign a partir do código-fonte para seguir este caminho.
- 1
Baixe o App de Desktop da OpenDesign
Escolha o pacote para seu computador, instale-o e abra o app.
Baixar o OpenDesignPONTO DE VERIFICAÇÃOO aplicativo desktop abre. Já instalado? Avance para a próxima etapa; não é necessário baixar novamente. - 2
Prepare sua conexão com o Pi
Siga as instruções do Pi na sua versão instalada. Autentique-se com sua própria chave de API do provedor (BYOK) ou um login por assinatura — as credenciais permanecem na sua máquina.
Documentação de provedores e autenticação do Pi# 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)Das notas de configuração do Pi no guia publicado; verifique a documentação do fornecedor para o comando atual.
PONTO DE VERIFICAÇÃOConfirme o agente e a conta pretendidos. Se não estiver disponível, verifique a compatibilidade antes de tentar uma tarefa maior. - 3
Execute uma pequena tarefa no Pi
Use um briefing pequeno para que você possa avaliar todo o ciclo, incluindo uma revisão.
Briefing inicialConstrua uma tela de configurações com um formulário de perfil e uma confirmação de salvamento. Use minhas regras de design. Verifique em larguras de desktop e mobile.
PONTO DE VERIFICAÇÃOAbra o resultado, teste o estado salvo e solicite uma alteração específica. Um arquivo gerado é o começo da revisão, não o fim.
Para executar o OpenDesign a partir do código-fonte, siga o guia técnico de início rápido.
O workflow de design do Pi
O workflow de design do Pi em cinco passos
A mesma tarefa de página de comparação de planos, do briefing ao arquivo verificado. Cada etapa lista o que você fornece, o que o Pi faz, o que a OpenDesign contribui e o que você verifica.
- 1
Briefing de Design
Linguagem simples, de três a seis linhas. Indique o público, a função da tela e as plataformas.
- VocêEscreva o briefing; anexe uma captura de tela de referência, se tiver uma.
- PiLê o briefing e o arquivo de instruções do projeto; pergunta quando algo é ambíguo.
- OpenDesignFornece o projeto, a superfície do prompt e a skill para o tipo de artefato.
- VerificarConfirme que o briefing define os critérios de aceitação. Adicioná-los agora é mais barato do que depois da geração.
- 2
Restrições de Design
Um design system e algumas regras rígidas. É isso que diferencia um resultado alinhado à marca de um visual genérico.
- VocêEscolha um design system; defina os breakpoints e quaisquer componentes de uso obrigatório.
- PiCarrega os tokens do DESIGN.md e as regras de postura no contexto antes de escrever uma linha.
- OpenDesignDisponibiliza a biblioteca de design systems e vincula a escolhida ao template da skill.
- VerificarOs tokens correspondem à sua marca. Um único destaque, as fontes certas, o raio certo.
- 3
Gerar a Interface
Pi escreve um arquivo HTML autocontido: layout, estilos, interações e hooks estáveis.
- VocêAguarde ou responda a uma pergunta de esclarecimento. Nada a configurar.
- PiPlaneja as seções, escreve o HTML, CSS e JavaScript, executa o arquivo e corrige o que falhar.
- OpenDesignSalva o artefato na pasta do projeto e o indexa para pré-visualização.
- VerificarNada ainda. Avalie o arquivo depois de renderizado, não a partir do código-fonte.
- 4
Pré-visualização
O arquivo é renderizado dentro do OpenDesign nas larguras que você solicitou. É aqui que o design é avaliado.
- VocêAlterna larguras, clica pelas interações, deixa comentários nos elementos.
- PiLê seus comentários na prévia e prepara a próxima revisão.
- OpenDesignRenderiza o preview, expõe alvos
data-od-idpara comentários e edições. - CheckHierarquia, contraste, overflow em 390px, estados de foco e se o destaque é usado com moderação.
- 5
Revisar e Verificar
Solicite alterações apontando para elementos no preview. Cada revisão é um novo arquivo; nada é sobrescrito silenciosamente.
- VocêTransforma comentários em solicitações; decide quando a tarefa está concluída.
- PiAplica as alterações no local e executa o arquivo novamente.
- OpenDesignMantém as versões lado a lado; exporta uma imagem ou o HTML quando você terminar.
- CheckReverifica apenas a área que mudou, depois a página inteira uma vez em cada breakpoint.
Recursos
Recursos de Design para Pi
Skills Explore skills Sistemas de design Explore sistemas Templates Explorar modelos
Skills de Design
Os tipos de artifact que Pi pode produzir no OpenDesign, um skill por tipo.
Sistemas de Design
Tokens de marca e componentes a vincular antes que Pi gere qualquer coisa.
Templates
Pontos de partida para apresentações, landing pages e telas de produto.
Limitações
Limitações do Pi, Verificações Manuais e Alternativas
- AlcanceÉ independente de provedor: normaliza entre Anthropic, OpenAI, Google e mais de 20 provedores, então você usa suas próprias chaves e troca de modelo no meio da sessão. Esta página aborda o Pi como um agente conectado ao OpenDesign, não todas as funcionalidades do Pi.
- Limites de UsoOs limites de uso e o custo seguem a credencial que você usa (sua própria chave de API do provedor ou login por assinatura via /login). Esta página não faz nenhuma afirmação sobre cotas gratuitas.
- RedeArquivos de projeto locais não significam inferência offline. Revise as configurações de provedor e as políticas de dados do seu agente antes de compartilhar dados sensíveis.
- A Saída É HTMLOs artefatos são arquivos HTML, não arquivos de design vetoriais.
- Revisão ManualAcessibilidade, conteúdo real, adequação à marca e correção das interações são revisados por você na pré-visualização. Trate qualquer autoverificação do agente como uma primeira passagem.
- AlternativaSe o agente estiver indisponível ou uma tarefa falhar, verifique as instruções de conexão e a autenticação da versão instalada. Preserve o erro e o último artefato funcional antes de alterar a configuração.
Perguntas Frequentes
Perguntas Frequentes Sobre Pi e OpenDesign
O Pi Realmente Consegue Fazer Trabalho de Design?
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.
Preciso Pagar para Projetar com o Pi?
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.
O Que Torna o Pi Bom para Design Especificamente?
É 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.
Qual Modelo Devo Usar com o Pi para Design de Frontend?
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.
Como Conecto o Pi ao Figma?
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.
Inicie uma Primeira Tarefa de Design Com o Pi
Comece com uma tarefa pequena, avalie o ciclo completo e só então traga o briefing real. Escolha a opção que corresponde à sua configuração; a página não a detecta automaticamente.