Figma para
código
Transformar o layout aprovado em uma página responsiva, fiel ao design e pronta para publicar.
FigmaIAHTML
IA aplicada à produção de landing pages
DO DESIGN
AO SITE ONLINEDO DESIGNAO SITE ONLINE
Cinco processos padronizados para criar, medir, integrar, publicar e conectar landing pages com mais velocidade, segurança e apoio da inteligência artificial.
OBJETIVOTransformar tarefas técnicas em processos claros, replicáveis e guiados por IA.
Visão geral · Cinco processos
Uma operação mais rápida,
padronizada e replicável
A apresentação está organizada em cinco processos. Cada etapa mostra o papel da IA, o fluxo de execução e o resultado esperado até o site ficar publicado no domínio final.
Figma para
Instalação
do GTM
Adicionar os códigos corretos no head e no body sem quebrar o site ou alterar o layout.
CódigoValidaçãoGTM
Instalação
do webhook
Conectar o formulário à automação, validar o envio e manter o redirecionamento correto.
FormWebhookAutomação
Publicação
no Vercel
Subir o projeto corretamente no GitHub, importar o repositório e realizar o primeiro deploy.
GitHubVercelDeploy
Conexão
do domínio
Vincular o domínio ao projeto, configurar o DNS e validar o acesso seguro ao site publicado.
DomínioDNSOnline
Processo 01 · Design para desenvolvimento
IA COMO COPILOTO DE PRODUÇÃODo Figma para um site
fiel e responsivo
A IA interpreta o design, organiza os componentes e acelera a construção do HTML, CSS e JavaScript. A validação visual garante fidelidade antes da publicação.
A skill oficial deste processo já está disponível para download e orienta a conversão fiel do Figma para HTML responsivo.
SKILL DISPONÍVELFigma para HTML fiel
FLUXO PRELIMINAR
- 01Receber o link, exportação ou arquivo do Figma.
- 02Mapear tipografia, cores, grid, componentes e imagens.
- 03Gerar a primeira versão do código com apoio da IA.
- 04Comparar com o layout e corrigir diferenças visuais.
- 05Validar desktop, tablet e mobile antes do deploy.
Processo 02 · Mensuração
IA PARA LOCALIZAR, INSTALAR E VALIDARGTM instalado
no lugar correto
A IA identifica a estrutura do projeto, insere o script no topo do head e o noscript logo após a abertura do body, preservando o restante do código.
Copie o prompt e envie junto com os dois códigos oficiais do GTM.
FLUXO PRELIMINAR
- 01Receber os dois códigos oficiais do Google Tag Manager.
- 02Localizar o arquivo principal e as tags head e body.
- 03Instalar cada trecho na posição correta.
- 04Verificar duplicidade, sintaxe e carregamento.
- 05Entregar o site pronto para teste no Tag Assistant.
Processo 03 · Integração
IA PARA LOCALIZAR, INSTALAR E VALIDARWebhook conectado
sem perder leads
Para a IA instalar o webhook no formulário correto, envie os três materiais na mesma solicitação. O print orienta visualmente; o link define o destino dos dados; e o ZIP permite ler e editar a estrutura completa do site.
Print do formulárioLink do webhookZIP completo do site
SKILL DISPONÍVELImplementação automática de webhook
COMO SOLICITAR A INSTALAÇÃO4 passos simples
para uma entrega segura
para uma entrega segura
01Referência visual
Envie o print
Mostre a área exata do site onde está o formulário. O print ajuda a IA a localizar a página, os campos e o botão corretos.
02Destino dos dados
Cole o webhook
Informe a URL completa criada no Make, n8n, Zapier ou na plataforma que receberá os dados do formulário.
03Projeto completo
Anexe o ZIP
Envie a pasta compactada do site. A IA lê a estrutura, identifica o formulário e preserva a página de obrigado existente.
04Execução com a skill
Instalar e validar
A IA aplica a skill, configura o POST, trata erros, bloqueia duplicidades, testa sem gerar lead real e devolve o ZIP pronto.
Processo 04 · Publicação
GITHUB + VERCEL EM UM FLUXO PADRÃODo projeto pronto
ao site publicado
Com o projeto final validado, a publicação começa no GitHub. Os arquivos são enviados para um repositório conectado ao Vercel, que passa a controlar o deploy e as próximas atualizações do site.
Projeto finalGitHub conectadoConta Vercel
COMO PUBLICAR NO VERCEL5 passos claros
do GitHub ao deploy
do GitHub ao deploy
01Acesso
Acesse o GitHub
Entre na conta que já está conectada ao Vercel. Essa conexão permitirá importar o projeto sem configurar uma nova integração.
02Repositório
Crie o projeto
Crie um repositório com nome claro e envie os arquivos finais do site, preservando a estrutura de pastas e os caminhos dos assets.
03Upload correto
Revise os arquivos
Confirme que o arquivo principal está na raiz correta, que as pastas foram enviadas e que o commit contém a versão final aprovada.
04Conexão
Importe no Vercel
Crie um novo projeto no Vercel, selecione o repositório enviado ao GitHub e confirme as configurações de publicação.
05Deploy
Publique e valide
Inicie o deploy, abra a URL gerada pelo Vercel e revise páginas, imagens, links, formulários e responsividade antes de conectar o domínio.
Processo 05 · Domínio
VERCEL + DNS + VALIDAÇÃODomínio conectado
e site no ar
Depois do deploy, adicione o domínio ao projeto no Vercel. A plataforma mostrará exatamente quais registros devem ser criados no provedor do domínio. Quando o DNS for validado, o endereço passa a abrir o site publicado.
Projeto publicadoDomínio ou subdomínioAcesso ao DNS
REGRA PARA SUBDOMÍNIOS
TIPOCNAME
NOMESó o subdomínio
VALORCopiar do Vercel
Exemplo: para siteonline.francodesign.online, normalmente o campo Nome recebe apenas siteonline. O campo Valor deve ser copiado exatamente como o Vercel mostrar.
PASSO A PASSO VISUALDo projeto pronto
ao domínio validado
Passo 1 de 4ao domínio validado
01
Abra o projeto no Vercel
- Acesse o projeto já publicado dentro da Vercel.
- Na lateral de informações do deploy, localize a área Domains.
- Clique no ícone de mais (+) ao lado de Domains para iniciar a conexão do endereço.
- Esse clique abrirá a tela para adicionar o novo domínio ao projeto.
02
Adicione o domínio
- Digite o endereço completo, por exemplo: siteonline.francodesign.online.
- Mantenha Connect to an environment e selecione Production.
- Não altere o redirecionamento se a ideia for publicar o site nesse endereço.
- Clique em Add Domain para continuar.
03
Cadastre o CNAME
Enquanto aparecer Invalid Configuration, copie as informações mostradas pelo Vercel e crie o registro no painel DNS do provedor:
TIPOCNAME
NOMEO prefixo do subdomínioEx.: teste ou siteonline
VALORDestino exibido pelo VercelCopie o conteúdo completo
Valid ConfigurationDomínio conectado com sucesso
04
Confirme a validação
- Volte ao Vercel e clique em Refresh.
- Se ainda estiver inválido, aguarde a propagação do DNS e tente novamente.
- Quando aparecer Valid Configuration, o domínio estará conectado ao projeto.
- Abra o endereço final e teste páginas, imagens, links e HTTPS.
Apoio ao processo 05 · Gerenciadores DNS
ONDE OS APONTAMENTOS SÃO CONFIGURADOSO mesmo registro,
em painéis diferentes
O Vercel informa o tipo, o nome e o destino do registro. O que muda é apenas o painel em que esses dados serão cadastrados. Estes são os gerenciadores mais usados pela equipe.
REGRA QUE SE REPETE EM TODOS OS PAINÉIS
TIPOCNAME
NOMEPrefixo do subdomínio
DESTINOValor exibido pelo Vercel
PrincipalRegistro.br
- 01Acesse Domínios e selecione o endereço.
- 02Entre em Configurar zona DNS.
- 03Crie um novo registro do tipo CNAME.
- 04Informe Nome e Destino e salve.
hPanelHostinger
- 01Acesse Domínios no hPanel.
- 02Abra Gerenciar → DNS / Nameservers.
- 03No Editor de Zona DNS, adicione um CNAME.
- 04Preencha Nome e Destino e confirme.
DNS RecordsCloudflare
- 01Selecione o domínio no painel.
- 02Acesse DNS → Records.
- 03Clique em Add record e escolha CNAME.
- 04Informe Name e Target e salve.
Painel de domíniosUOL Host
- 01Entre em Domínios no painel.
- 02Abra Gerenciar domínio → Administrar DNS.
- 03Adicione uma entrada do tipo CNAME.
- 04Preencha o nome, o destino e salve.
Importante: copie sempre os dados exatamente como aparecem no Vercel. Depois de salvar, volte ao projeto e clique em Refresh para validar.
Processo padrão · Do design ao domínio
Um fluxo único para
colocar cada LP online
As cinco etapas formam uma sequência replicável. A IA acelera a produção e as configurações técnicas, enquanto a equipe valida cada entrega antes de avançar.
Suporte para implementação
PRECISOU DE AJUDA? FALE COMIGODÚVIDAS?
ME CHAMA
Dúvidas? me chama que eu te dou suporte.
Chamar no WhatsApp