Telex: o tema moderno oficial do WordPress com um clique!

O Telex é uma ferramenta experimental de programação e desenvolvimento de IA desenvolvida pela Automattic, a empresa controladora do WordPress, projetada especificamente para ajudar os desenvolvedores e criadores de sites a gerar blocos personalizados do Gutenberg. Os usuários simplesmente digitam prompts diários de linguagem natural descrevendo a estrutura de bloco, o estilo e o comportamento de interação desejados, e o Telex escreve automaticamente o código em dezenas de segundos usando um grande modelo de linguagem para gerar componentes de bloco do WordPress totalmente funcionais.

A ferramenta está profundamente integrada ao WordPress baseado no WebAssembly. Playground O ambiente de sandbox sem servidor permite que os usuários visualizem o efeito de front-end e testem o back-end do editor diretamente no navegador, sem implantar nenhum ambiente de desenvolvimento local após a geração do código. O Telex oferece iteração contínua de diálogo, permitindo que os usuários ajustem o código em várias rodadas com o assistente de IA. Os blocos finalizados podem ser empacotados e exportados para o padrão .zip O arquivo de plug-in de formato pode ser perfeitamente instalado em qualquer site do WordPress auto-hospedado ao vivo para ser chamado diretamente, reduzindo significativamente o limite do desenvolvimento de módulos funcionais.

Lista de funções

• geração de códigos em linguagem naturalSuporte para prompts de texto simples que descrevem a lógica e a aparência do componente desejado, que a IA traduz em código de bloco nativo do WordPress Gutenberg.
• Pré-visualização do Playground Sandbox incorporadoIntegração perfeita do WordPress Playground na camada inferior, ambiente virtualizado do WordPress em execução no lado do navegador, com suporte à visualização em tempo real do efeito de renderização do bloco no front-end da página da Web e do status de execução do painel de configuração de parâmetros do back-end.
• Interação contínua do diálogoAssistente de IA na barra lateral: Um assistente de IA na barra lateral está disponível e permite que os usuários emitam comandos de alteração específicos (por exemplo, alterar cores, ajustar o espaçamento, adicionar novas interações) para blocos gerados na primeira versão, e a IA entende automaticamente o contexto e atualiza apenas o código alterado.
• Plug-in de exportação de embalagens em um cliqueSuporte para concatenar blocos depurados com código dependente (React/JSX, CSS, PHP),block.json etc.) em um arquivo de plug-in padrão do WordPress (.zip) com um clique.
• Arquitetura de compatibilidade nativaO código gerado segue as especificações e práticas recomendadas oficiais de desenvolvimento do editor de blocos, garantindo a compatibilidade com vários temas.
• Visualização e revisão de códigoIsso não apenas fornece uma visualização gráfica, mas também permite que os desenvolvedores com formação técnica visualizem diretamente o código-fonte subjacente escrito pela IA, garantindo que a lógica seja transparente e facilitando o desenvolvimento manual secundário em um estágio posterior.
• Análise de diagramas de referência visual (abertura progressiva)Suporte aos usuários para carregar materiais visuais, como capturas de tela da interface ou wireframes, combinados com palavras-chave para orientar o modelo grande a restaurar com mais precisão o layout do rascunho do projeto.

Usando a Ajuda

Bem-vindo ao Telex, a plataforma de programação de IA da Automattic que transforma suas ideias textuais diretamente em blocos nativos do WordPress totalmente funcionais. Para ajudá-lo a tirar o máximo proveito da produtividade da plataforma, aqui está um guia extremamente detalhado.

dica especialComo a Telex está atualmente na fase experimental, para oferecer uma experiência completa de geração de código, renderização de sandbox e interação de interface.No momento, o sistema é obrigatório para ser executado em um navegador na área de trabalho (desktop ou laptop)O espaço de trabalho principal não será carregado quando acessado usando um dispositivo móvel, como um telefone ou tablet.

I. Registro de conta e acesso ao espaço de trabalho

1. Plataformas de acessoAbra um navegador moderno em seu desktop (recomenda-se o Google Chrome ou o Microsoft Edge para obter o desempenho ideal do contêiner do WebAssembly) e acesse o site oficial em https://telex.automattic.ai/。
2. Autorização de login da contaA Telex conta com o ecossistema oficial e usa principalmente o sistema de contas do WordPress.com para Single Sign-On (SSO). Se você já tiver uma conta, poderá autorizá-la diretamente; se não tiver uma conta, registre uma conta básica gratuita com seu endereço de e-mail.
3. Acesso ao consoleApós fazer login, você verá uma janela de diálogo de prompt minimalista com uma interface semelhante à de um chatbot de IA comum, que é o ponto de partida para a geração de código.

II. processos operacionais principais: de prompts a plug-ins disponíveis

Etapa 1: Escreva um prompt estruturado de alta qualidade (Prompt)

A precisão da geração de código depende inteiramente dos detalhes das instruções que você insere. Em vez de fornecer termos vagos, é recomendável escrever na estrutura de “definição de função + configuração de back-end + estilo visual + efeito de interação”.

• Exemplos de requisitos: Você deseja criar um bloco “Team Member Introductions” (Apresentações dos membros da equipe).
• Prompts recomendados para escrever: “Por favor, ajude-me a gerar um bloco do Gutenberg para ‘Exibição de membros da equipe'. Ele suporta a exibição de três membros em uma linha.Configuração de back-endPermite que eu carregue o avatar de cada pessoa, preencha o nome, o cargo e uma sinopse de uma frase separadamente no editor do WordPress.Estilo visualEstilo minimalista: o avatar foi projetado como um círculo quadrado com sombreamento cinza claro.efeito interativoQuando se passa o mouse sobre o cartão de um membro, o cartão precisa ter uma pequena animação que flutua 5px para cima e exibe os links dos ícones do LinkedIn e do Twitter.”
• apresentar (um relatório etc.)Depois de confirmar que a descrição está correta, pressione a tecla Enter ou clique no ícone Send (Enviar) para iniciar o mecanismo de geração.

Etapa 2: Escrita de código automatizada e validação de exibição dupla de sandbox

• VisualizaçãoApós o envio do comando, o sistema exibe um indicador de progresso para a geração de código, para que você possa visualizar a estrutura do arquivo e o número de linhas de código geradas pela IA, o que normalmente leva de 30 segundos a 1 minuto para ser computado.
• Carregamento do WordPress PlaygroundO Telex é um software de teste de WordPress sem servidor: Depois que o código é escrito, o Telex inicia instantaneamente uma sandbox do WordPress sem servidor na memória do navegador. Não há necessidade de comprar um servidor ou configurar um banco de dados para testar diretamente.
• Alternância perfeita entre dois pontos de vista：
  • Visualização do editor (Editor)Visualização padrão: Esta é a visualização padrão, que simula a interface de edição no backend do WordPress. Você pode selecionar o bloco que acabou de gerar aqui e testar se o painel de propriedades à direita gera com êxito a caixa de entrada que pode ser modificada (por exemplo, substituir imagem, modificar texto).
  • Visualização do front-end (Front-end)Clique no botão “Frontend” na interface para alternar para a perspectiva do visitante e verificar se o layout visual do bloco na página oficial da Web é razoável e se as animações CSS, como passar o mouse, são acionadas corretamente.

Etapa 3: Diálogo com o Assistente de IA para Iteração Local

As primeiras versões geradas por IA geralmente exigem o ajuste fino dos detalhes. Não há necessidade de começar do zero, pois a Telex oferece uma função de memória de estado.

• Assistente de saída (Assistente)No painel direito da interface, clique na guia “Assistant” (Assistente) para entrar no modo de diálogo contínuo do bloco atual.
• Enviar comando de modificaçãoApontar diretamente o problema em linguagem simples. Por exemplo, “escureça as sombras nos cartões de membro”, “altere os três membros por linha para quatro membros por linha” ou “adicione uma caixa de entrada de título principal centralizada ‘Our core Equipe” centralizada na parte superior de todo o bloco".
• Atualizações automáticas de aplicativosIA: a IA lerá a base de código anterior e reescreverá o código para as alterações somente para seus requisitos. A sandbox será atualizada automaticamente após a conclusão para mostrar o efeito mais recente das alterações.

Etapa 4: Exportação de pacotes com um clique e implantação de produção

Depois que o bloco é depurado com perfeição na área restrita, ele pode ser transferido para o site que você realmente executa.

1. Exportação de pacotes ZIPClique no botão “Download” ou “Export” no canto superior direito da interface. O sistema incluirá automaticamente block.json Arquivo de registro,index.js(lógica React),style.css(folha de estilo) e index.php Todas as dependências são compactadas em um pacote ZIP de plug-in padrão do WordPress.
2. Fazer upload para o site pessoalFaça login no sistema de gerenciamento de back-end do seu site WordPress ativo.
3. implementaçãoNavegue até o menu à esquerda 插件 -> 安装插件 -> 上传插件Selecione o arquivo ZIP que você acabou de baixar. Clique em “Install Now” (Instalar agora) e, em seguida, clique em “Enable Plugin” (Ativar plug-in).
4. chamada realClique no sinal “+” para adicionar um módulo e procure o nome do bloco na caixa de pesquisa para arrastá-lo e soltá-lo na página para uso.

III. uso avançado de habilidades e guia antipoço

• Modelo de revisão de códigoSe você for um desenvolvedor, poderá clicar na guia Code View para ver o código-fonte subjacente. Se a IA relatar um erro ao implementar uma lógica complexa (por exemplo, uma solicitação de dados de API externa), você poderá instruí-la diretamente na caixa de diálogo usando a terminologia de desenvolvimento (por exemplo, “Please change to the useEffect Os ganchos manipulam a extração de dados e adicionam try-catch Mecanismo de captura de erros”).
• Adote o princípio da modularidadeO Telex foi projetado para gerar “blocos de funções” separados em vez de “temas de sites inteiros” completos. Recomenda-se que grandes projetos sejam divididos em vários blocos de função única (por exemplo, bloco de tabela de preços, bloco de acordeão de perguntas frequentes, bloco de contagem regressiva dinâmica), gerados separadamente e depois combinados no WordPress para obter a maior taxa de sucesso e qualidade de código.
• Resposta a falhas de geraçãoComo uma ferramenta experimental, falhas ocasionais de renderização são normais. Se a sandbox continuar a relatar erros, recomendamos que você clique em Regenerate ou simplifique a funcionalidade no prompt para eliminar dependências de bibliotecas de terceiros excessivamente complexas.

cenário do aplicativo

1. Prototipagem rápida e apresentação visual
   Quando um web designer ou gerente de produto está conceituando uma nova interação de página, em vez de esperar a intervenção de um engenheiro de front-end, ele pode usar o Telex para transformar suas ideias textuais em componentes de página acionáveis e, em seguida, mostrá-las rapidamente à equipe ou aos clientes em uma reunião.
2. Desenvolvimento de componentes de campanha personalizados
   As equipes de comércio eletrônico e de operações precisam desenvolver elementos exclusivos para a Web (por exemplo, sinais de contagem regressiva com estilos visuais específicos, listas de preços promocionais dinâmicas) para vendas específicas de feriados. Com a Telex, os plug-ins de blocos proprietários podem ser gerados em minutos, eliminando o custo e o tempo de aquisição de plug-ins comerciais.
3. Ajudando os desenvolvedores do WordPress a aumentar a eficiência
   Os desenvolvedores profissionais de plugins do WordPress podem usar o Telex como um copiloto de código. A IA é responsável pelo tedioso registro dos arquivos de base do Gutenberg, dos andaimes do React e da escrita básica de CSS, enquanto o desenvolvedor faz o download do código-fonte e se concentra no desenvolvimento secundário da lógica de negócios principal, o que reduz bastante o ciclo de desenvolvimento.
4. Expansão de limite funcional para construtores sem código
   Para os autoconstrutores que não têm experiência em programação, quando um tema existente ou um construtor de páginas de terceiros não consegue atender a uma função específica de cauda longa, a Telex pode romper as limitações das ferramentas sem código “personalizando” os componentes com linguagem natural.

QA

1. O Telex é uma ferramenta paga?
   R: Atualmente, o Telex, como um projeto experimental da Automattic, é totalmente gratuito para todos os usuários conectados, e não há limite para o número de vezes que ele pode ser usado por enquanto. Como a camada subjacente consome muitos recursos do modelo computacional de IA, um plano de assinatura ou cobrança poderá ser lançado no futuro após a conversão.
2. Os blocos que eu gero podem ser instalados diretamente em qualquer site do WordPress?
   R: Sim, você pode. Desde que seu site seja um ambiente WordPress (WordPress.org) auto-hospedado que ofereça suporte à instalação de plug-ins ou um plano hospedado que ofereça suporte a plug-ins premium, é possível exportar o Telex diretamente para o .zip é carregado e ativado como um plug-in normal.
3. A Telex pode gerar um tema WordPress completo para mim?
   R: Não. A Telex foi arquitectada e concebida para se concentrar inteiramente na geração de “Blocos Gutenberg”. Ele é especializado em componentes de página única ou combinada e não é responsável pela geração de Temas que envolvam roteamento global de páginas, subestrutura de banco de dados ou hierarquias de arquivos em todo o site.
4. Por que não consigo abrir a interface da Telex no navegador do meu celular?
   R: Para garantir a operação estável e as necessidades tipográficas do complexo processo de geração de código, do editor de código de visualização dupla e da sandbox integrada do WordPress Playground, os dispositivos de acesso foram oficialmente e forçosamente restringidos. Certifique-se de usar o navegador de seu computador desktop para fazer isso.
5. E se o bloco gerado estiver com erros ou não funcionar como esperado?
   R: Não é necessário conhecer o código para corrigi-lo. Abra o painel AI Assistant no lado direito da interface e descreva o erro ou a insatisfação para a IA em linguagem simples. A IA investigará e modificará automaticamente o código e, em seguida, mostrará a versão corrigida na área restrita. Se você conhece código, também pode alternar diretamente para a visualização do código para revisá-lo e, em seguida, orientar a IA para corrigi-lo em jargão.