Guia completo para construir um site de agência profissional usando…

INEMA

Schema

Token

Endpoint

📊 📦 Plano Hobby (Free Forever)⌗

O plano gratuito do Hygraph é chamado Hobby — e ele é gratuito para sempre, ideal para projetos pessoais, provas de conceito e sites como o seu.

✅ O que você ganha grátis⌗

📍 Conteúdo e usuários

3 usuários (quem pode logar no CMS)
2 localidades (“locales”) (ex.: pt-BR e en-US)
2 funções padrão de membros (roles)
10 componentes de conteúdo (para schemas reutilizáveis)

📁 Conteúdo

Até 1.000 entradas por projeto (ex.: posts + estudos de caso – combinado) — limite total de items no CMS

Esse limite é suficiente para a maioria dos sites de agência com blog e cases.

📸 Imagens e arquivos

Armazenamento ilimitado de assets (uploads/ imagens/ vídeos)
Tamanho máximo por arquivo: 50 MB

📡 API

500 000 chamadas de API por mês no plano gratuito

Isso dá bastante margem para sites estáticos e conteúdo dinâmico para centenas ou milhares de visitantes mensais.

🛠️ Outras coisas úteis do plano free⌗

Live preview — ver conteúdo antes de publicar
Comentar e atribuir tarefas no conteúdo
Entradas em dois ambientes (“draft” e “published”)

🧠 Observações⌗

❗ Taxa de requisições⌗

Há limites técnicos de taxa (por segundo / simultâneos) no plano gratuito se a API for muito solicitada e não estiver em cache. Por exemplo (valores típicos):

~5 requisições GraphQL por segundo no Hobby
~10 queries concorrentes Se for estourar isso, geralmente aparece erro 429 Too Many Requests.

Isso não costuma impactar projetos pequenos, mas é bom saber.

💡 Em resumo⌗

O plano gratuito do Hygraph é bastante generoso para sites de agência:

✅ Sem custo para sempre
✅ Gráfico e APIs robustas
✅ Sem limite de armazenamento de imagens
✅ Permite blog + cases + páginas dinâmicas
🚫 Limita número de entradas e usuários, mas suficiente para MVP ou agência pequena.

👉 Em muitos casos ele dá até 1 milhão de requisições/mês e até 100 GB de tráfego de assets/mês em algumas estimativas de uso real.

🧠 O que é o Hygraph?⌗

Hygraph é um CMS Headless baseado em GraphQL.

Traduzindo isso de forma simples:

👉 É uma ferramenta onde você cria e gerencia conteúdo
👉 Mas esse conteúdo não fica preso a um site específico
👉 Ele entrega os dados via API (GraphQL) para qualquer frontend

📦 O que é um CMS?⌗

CMS = Content Management System

Exemplos:

WordPress
Webflow CMS
Shopify

Eles permitem:

Criar posts
Criar páginas
Gerenciar imagens
Editar conteúdo

🔌 O que significa “Headless”?⌗

Headless = sem frontend acoplado

Diferente do WordPress tradicional:

WordPress:

CMS + Template + Site tudo junto

Hygraph:

CMS (só conteúdo) ↓ API ↓ React / Next / App / Mobile / etc

Ele só entrega dados.

Quem monta o site é o React.

🔄 E o que é GraphQL?⌗

GraphQL é o jeito que você pede os dados.

Exemplo:

Você não pede: “Me manda tudo do banco de dados”

Você pede:

Me manda: - título - slug - resumo dos últimos 3 posts

Isso deixa:

Mais rápido
Mais eficiente
Mais moderno

🏗️ No seu projeto ele serve para:⌗

No seu site de agência:

Você usa o Hygraph para:

Blog posts
Case studies
Portfólio
Conteúdo dinâmico

E o React apenas exibe.

🎯 Por que usar Hygraph nesse sistema?⌗

Porque ele:

✔️ É gratuito ✔️ É moderno ✔️ Funciona muito bem com IA ✔️ É GraphQL nativo ✔️ É usado em projetos profissionais

🧠 Visualmente o fluxo fica assim:⌗

Você cria conteúdo no Hygraph ↓ Hygraph salva no banco ↓ React faz uma requisição GraphQL ↓ Os dados aparecem no site

🔥 Em uma frase:⌗

Hygraph é o “painel administrativo invisível” que alimenta seu site React com conteúdo dinâmico.

Esta Parte do 9 pode ser mais Complexa então vou detalhar.

🔹 9️⃣ Criar Hygraph (Criar o projeto no CMS)⌗

Passo a passo:⌗

Acesse: 👉 https://hygraph.com
Clique em Start for Free
Crie sua conta (Google ou email)
Clique em Create Project
Dê um nome (ex: agency-website)
Escolha:

Região mais próxima
Plano gratuito

Clique em Create

✔ Agora você tem um projeto CMS vazio.

🔹 10️⃣ Integrar CMS (conectar React ↔ Hygraph)⌗

Agora vamos conectar seu projeto React ao CMS.

10.1 – Pegar o Endpoint da API⌗

No painel do Hygraph:

Vá em Project Settings
Clique em API Access
Copie o Content API Endpoint

Ele vai parecer com algo assim:

https://api-eu-west-2.hygraph.com/v2/xxxxx/master

Guarde isso.

10.2 – Criar um Token Permanente⌗

Ainda em API Access:

Vá em Permanent Auth Tokens
Clique em Create Token
Dê um nome (ex: react-site-token)
Marque permissões de leitura (Query)
Clique em Generate

⚠️ Copie o token. Ele aparece só uma vez.

10.3 – Criar arquivo `.env` no React⌗

Na raiz do projeto:

.env

Se for Vite:

VITE_HYGRAPH_ENDPOINT=cole_seu_endpoint_aqui VITE_HYGRAPH_TOKEN=cole_seu_token_aqui

Depois:

⚠️ Reinicie o servidor (npm run dev)

🔹 11️⃣ Criar Schemas no Hygraph⌗

Agora vamos estruturar os dados.

11.1 Criar Model BlogPost⌗

No Hygraph:

Vá em Schema
Clique em Add Model
Nome: BlogPost

Adicionar campos:

title (Single Line Text)
slug (Slug)
excerpt (Multi Line Text)
content (Rich Text)
coverImage (Asset)
publishedAt (Date)

Clique em Save

11.2 Criar Model CaseStudy⌗

Add Model
Nome: CaseStudy

Campos:

title
slug
summary
results
gallery (Asset – multiple)
featured (Boolean)

Salvar.

🔹 12️⃣ Migrar Conteúdo (tirar hardcoded e puxar do CMS)⌗

Agora você substitui os arrays fixos do React por uma query GraphQL.

12.1 Exemplo Query Blog⌗

No React:

const query = ` query { blogPosts { title slug excerpt } } `;

Fetch:

fetch(import.meta.env.VITE_HYGRAPH_ENDPOINT, { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${import.meta.env.VITE_HYGRAPH_TOKEN}`, }, body: JSON.stringify({ query }), })

12.2 Ajustar componente⌗

Substituir:

const posts = [ ...hardcoded ]

Por:

const [posts, setPosts] = useState([]);

E usar useEffect para buscar dados.

✔ Agora o site está dinâmico.

🔹 13️⃣ Deploy⌗

Agora vamos publicar.

Opção simples:⌗

Acesse: 👉 https://netlify.com
Clique em Add new site
Escolha Deploy manually
Arraste a pasta dist

Importante:⌗

Depois de deployar:

Vá em Site Settings
Environment Variables
Adicione:

VITE_HYGRAPH_ENDPOINT VITE_HYGRAPH_TOKEN

Faça novo deploy.

🚀 PASSO A PASSO COMPLETO (COM ANTIGRAVITY + HYGRAPH)⌗

🔹 FASE 1 — Preparação⌗

1️⃣ Criar a pasta do projeto⌗

Criar nova pasta
Abrir no VS Code (ou IDE)

2️⃣ Abrir o Build Guide⌗

Copiar o Boilerplate Prompt (Prompt 1)

Esse prompt cria:

Estrutura React
Rotas
Hero
Placeholders
Estrutura profissional

🔹 FASE 2 — Criar a Base com IA⌗

3️⃣ Colar o Prompt 1 no Antigravity⌗

Abrir Antigravity
Colar o Boilerplate Prompt
Enviar

A IA vai:

Mostrar plano de implementação
Gerar estrutura completa

⚠️ Antes de confirmar…

4️⃣ Instalar os “Agent Skills”⌗

Esse passo é importante.

Ir no repositório das skills
Copiar o link
Voltar no Antigravity
Pedir:

Install the agent skills for Gemini and Claude using this repository:

Colar o link

Aguardar 1–2 minutos.

✔ Isso dá melhores práticas para o agente.

5️⃣ Confirmar construção do Boilerplate⌗

Depois que as skills forem instaladas:

Dar o “go ahead”
Deixar a IA finalizar o boilerplate

6️⃣ Rodar o projeto localmente⌗

No terminal:

npm run dev

Abrir o link local.

✔ Agora você tem a base funcionando.

🔹 FASE 3 — Criar as Páginas⌗

7️⃣ Pedir para gerar páginas faltantes⌗

Pedir ao Antigravity:

Work
Process
Case Studies
FAQ

Ele cria:

Componentes
Rotas
Estrutura

Sem código manual.

🔹 FASE 4 — Gerar Assets⌗

8️⃣ Copiar o Asset Generation Prompt⌗

Colar no Antigravity.

Ele vai gerar:

Logos
Hero images
Serviços
Blog images
Ícones
Elementos decorativos

Aguardar alguns minutos.

9️⃣ Revisar e Polir⌗

Verificar:

Espaçamento
Imagens faltando
Ajustes visuais

Pedir:

Polish the layout and improve visual balance

Ele ajusta automaticamente.

🔹 FASE 5 — Integrar CMS (Hygraph)⌗

🔟 Criar conta no Hygraph⌗

Criar novo projeto

11️⃣ Pegar API URL + Token⌗

Em:

Project Settings
Endpoints
Content API

⚠️ Criar token permanente.

12️⃣ Pedir para integrar CMS⌗

No Antigravity:

Help me set up Hygraph as a headless CMS for blog and case studies.

Ele cria plano.

⚠️ Não cole a chave direto. Espere ele criar .env.

Depois coloque a API key no .env.

13️⃣ Criar Schemas no Hygraph⌗

Criar:

BlogPost
CaseStudy

Seguir exatamente a estrutura que o Antigravity sugeriu.

14️⃣ Migrar conteúdo hardcoded⌗

Pedir:

Migrate hardcoded blog and client content to Hygraph.

Ele conecta tudo.

✔ Agora o conteúdo é dinâmico.

🔹 FASE 6 — Deploy⌗

15️⃣ Publicar no Netlify⌗

Opção 1:

Upload direto da pasta

Opção 2 (melhor):

Criar GitHub
Subir repositório
Conectar no Netlify

Deploy.

🔥 RESULTADO FINAL⌗

Você terá:

Frontend React rápido
CMS GraphQL funcionando
Animações
Formulário funcional
Site profissional
Zero código manual

🧠 RESUMO DA ORDEM CORRETA⌗

Criar pasta
Copiar Prompt 1
Instalar skills
Gerar boilerplate
Rodar local
Criar páginas
Gerar assets
Polir layout
Criar Hygraph
Integrar CMS
Criar schemas
Migrar conteúdo
Deploy

3. DESIGN PROMPT⌗

Estética⌗

Vibrante
Moderna
Energética
Profissional mas divertida

Typography⌗

Display: Clash Display / Space Grotesk
Body: Cabinet Grotesk / General Sans
Optional Accent: Instrument Serif

PAGE STRUCTURE⌗

HOME⌗

Hero⌗

Headline:

Elevate Your Brand with Our Creative Magic

Tagline:

Crafting Experiences that Inspire

Description:

We amplify brands by crafting unique and compelling identities that leave a lasting impact.

Services Cards⌗

Market Research
Ads Production
Branding Strategies
Digital Design

Clients Section⌗

Logos grayscale
Color on hover

CTA⌗

Headline:

READY TO CREATE YOUR NARRATIVE BRAND!

DESIGN SERVICES PAGE⌗

Includes:

Detailed service breakdown
Deliverables lists
Timeline process:
Discovery
Strategy
Design
Development
Launch

BLOG PAGE⌗

Headline:

Insights & Ideas

6 posts predefinidos com datas e categorias.

CONTACT PAGE⌗

Form Fields:

Name
Email
Company
Project Type
Budget
Description
Referral source

Contact Info:

Email
Phone
Address
Hours

Animations⌗

Fade-in
Scroll reveal
Hover lift
Star rotation
Smooth transitions

Breakpoints⌗

640px
768px
1024px
1280px
1536px

Recommended Workflow⌗

Run Boilerplate Prompt
Run Asset Generation Prompt
Run Design Prompt

2. ASSET GENERATION PROMPT⌗

Objetivo⌗

Gerar TODOS os assets visuais para preencher os placeholders.

A. Logo & Brand Assets⌗

logo-primary.svg
logo-icon.svg
favicon.ico / favicon.svg

B. Hero Assets⌗

hero-product-left.png
5 imagens de collage
3 SVG stars (lime, yellow, purple)
hero-avatar.png

C. Services Section⌗

Imagens:

market-research
ads-production
branding
digital-design

D. Client Logos⌗

6–8 logos fictícios em SVG

E. Blog Assets⌗

4 imagens featured (800x450)

F. Team Assets⌗

3–5 fotos quadradas 400x400

G. Decorative & UI Assets⌗

noise-texture.png
grid-pattern.svg
gradient-blob.svg
Icons set (SVG)
CTA badge

Color Palette⌗

Nome	Cor
Lime	#BFFF00
Purple	#7C3AED
Yellow	#FFE600
Dark	#1A1A1A
Cream	#F5F5F0

Agency Website Build Guide⌗

1. BOILERPLATE PROMPT⌗

Prompt⌗

Create a React boilerplate for a creative agency website called "[AGENCY_NAME]". The website should have a multi-page structure with the following pages:

Home
Design Services
Blog
Contact Us

Hero Section Structure (Home Page)⌗

O hero deve seguir exatamente esta estrutura com componentes placeholder:

Navbar
Floating image left
Product collage right
Decorative stars
Avatar badge
Location badge
Headline principal
Description
Scroll indicator

Placeholder Components to Create⌗

1. ImagePlaceholder⌗

Props:

id
aspectRatio
label
className

2. DecorativePlaceholder⌗

Props:

type ("star" | "badge" | "icon")
position
size

3. AvatarPlaceholder⌗

4. LogoPlaceholder⌗

Page Structure⌗

/src /components /placeholders ImagePlaceholder.jsx DecorativePlaceholder.jsx AvatarPlaceholder.jsx LogoPlaceholder.jsx /layout Navbar.jsx Footer.jsx /sections HeroSection.jsx ExpertiseSection.jsx ClientsSection.jsx CTASection.jsx BlogPreviewSection.jsx /pages HomePage.jsx ServicesPage.jsx BlogPage.jsx ContactPage.jsx /styles globals.css variables.css App.jsx

Styling Requirements⌗

CSS variables
Primary background: #F5F5F0
Dark sections: #1A1A1A
Accent colors:
Lime: #BFFF00
Purple: #7C3AED
Placeholders com borda tracejada

🎯 Objetivo⌗

Mostrar como criar um site profissional de agência com CMS headless, usando React + Hygraph + Antigravity (IA), sem precisar programar e totalmente gratuito.

🚀 Problema do Método Antigo⌗

Antes, criar um site headless exigia:

Ler documentação complexa de CMS
Configurar e conectar APIs manualmente
Trabalhar com GraphQL
Resolver bugs de backend
Ter equipe técnica ou alto orçamento

Isso dificultava para quem não era desenvolvedor.

💡 Nova Abordagem (Com IA)⌗

Ferramentas utilizadas:

React → Performance rápida
Hygraph → CMS headless baseado em GraphQL
Antigravity (IA) → Atua como engenheiro frontend
Google AI tools → Apoio no design

A IA cuida da parte técnica (backend, integrações, estrutura).

🏗️ Etapas do Projeto⌗

1️⃣ Criar a Base do Projeto⌗

Criar pasta no IDE
Usar um prompt-base (boilerplate)
IA gera estrutura React profissional
Instalar “skills” do Antigravity para melhores práticas
Rodar servidor local (npm run dev)

2️⃣ Criar Estrutura do Site⌗

IA gera páginas:

Work
Process
Case Studies
FAQ

Configuração automática de:

Rotas
Componentes
Navegação

3️⃣ Adicionar Design e Polimento⌗

IA gera:

Conteúdo de exemplo
Layouts
Tags
Projetos fictícios

Depois são feitos ajustes visuais:

Cursor glow
Melhorias no hero
Logos refinados
Formulário de contato animado

Resultado: site profissional multipágina pronto para CMS.

4️⃣ Integrar CMS Headless (Hygraph)⌗

Passos:

Criar projeto no Hygraph
Gerar API URL e token
Criar schemas (Blog Post e Case Studies)
Migrar conteúdo estático para o CMS
Proteger API usando arquivo .env

Agora o conteúdo é dinâmico.

5️⃣ Publicação (Deploy)⌗

Usar Netlify
Upload direto da pasta ou via GitHub
Site publicado e acessível online

✅ Resultado Final⌗

Site completo com:

Frontend React rápido
CMS GraphQL funcionando
Conteúdo dinâmico
Animações suaves
Formulário de contato
Tudo feito gratuitamente
Sem escrever código manualmente

🔑 Principal Aprendizado⌗

O diferencial não é só a IA, React ou Hygraph.

É o sistema integrado: Design + CMS + Deploy + IA trabalhando juntos.

Isso permite que você:

Construa como uma equipe
Entregue projetos profissionais
Venda como serviço de agência
Ganhe dinheiro com IA

Construa um Site de Agência Headless (Sem Necessidade de Código) 🏗️

A forma antiga de construir sites headless era complicada — ler documentações, conectar APIs e depurar GraphQL.

A forma nova? Você atua como arquiteto, e a IA atua como engenheira.

Um guia para construir um Site Profissional de Agência usando Hygraph e Antigravity. Não é apenas uma demo — é um sistema completo com uma seção hero elegante, estudos de caso dinâmicos e um backend funcional.

O que você vai aprender:

Como combinar a performance do React com a flexibilidade de um CMS.
Como deixar a IA cuidar das conexões complexas do backend.
Como construir uma vez e entregar para clientes.

Se você quer parar de construir como um fundador solo e começar a construir como um time, assista a isso.

Site de Agente com CMS

chatgpt.com ↗

Guia completo para construir um site de agência profissional usando…

📊 📦 Plano Hobby (Free Forever)⌗

✅ O que você ganha grátis⌗

🛠️ Outras coisas úteis do plano free⌗

🧠 Observações⌗

❗ Taxa de requisições⌗

💡 Em resumo⌗

🧠 O que é o Hygraph?⌗

📦 O que é um CMS?⌗

🔌 O que significa “Headless”?⌗

🔄 E o que é GraphQL?⌗

🏗️ No seu projeto ele serve para:⌗

🎯 Por que usar Hygraph nesse sistema?⌗

🧠 Visualmente o fluxo fica assim:⌗

🔥 Em uma frase:⌗

🔹 9️⃣ Criar Hygraph (Criar o projeto no CMS)⌗

Passo a passo:⌗

🔹 10️⃣ Integrar CMS (conectar React ↔ Hygraph)⌗

10.1 – Pegar o Endpoint da API⌗

10.2 – Criar um Token Permanente⌗

10.3 – Criar arquivo .env no React⌗

🔹 11️⃣ Criar Schemas no Hygraph⌗

11.1 Criar Model BlogPost⌗

11.2 Criar Model CaseStudy⌗

🔹 12️⃣ Migrar Conteúdo (tirar hardcoded e puxar do CMS)⌗

12.1 Exemplo Query Blog⌗

12.2 Ajustar componente⌗

🔹 13️⃣ Deploy⌗

Opção simples:⌗

Importante:⌗

🚀 PASSO A PASSO COMPLETO (COM ANTIGRAVITY + HYGRAPH)⌗

🔹 FASE 1 — Preparação⌗

1️⃣ Criar a pasta do projeto⌗

2️⃣ Abrir o Build Guide⌗

🔹 FASE 2 — Criar a Base com IA⌗

3️⃣ Colar o Prompt 1 no Antigravity⌗

4️⃣ Instalar os “Agent Skills”⌗

5️⃣ Confirmar construção do Boilerplate⌗

6️⃣ Rodar o projeto localmente⌗

🔹 FASE 3 — Criar as Páginas⌗

7️⃣ Pedir para gerar páginas faltantes⌗

🔹 FASE 4 — Gerar Assets⌗

8️⃣ Copiar o Asset Generation Prompt⌗

9️⃣ Revisar e Polir⌗

🔹 FASE 5 — Integrar CMS (Hygraph)⌗

🔟 Criar conta no Hygraph⌗

11️⃣ Pegar API URL + Token⌗

12️⃣ Pedir para integrar CMS⌗

13️⃣ Criar Schemas no Hygraph⌗

14️⃣ Migrar conteúdo hardcoded⌗

🔹 FASE 6 — Deploy⌗

15️⃣ Publicar no Netlify⌗

🔥 RESULTADO FINAL⌗

🧠 RESUMO DA ORDEM CORRETA⌗

3. DESIGN PROMPT⌗

Estética⌗

Typography⌗

PAGE STRUCTURE⌗

HOME⌗

Hero⌗

Services Cards⌗

Clients Section⌗

CTA⌗

DESIGN SERVICES PAGE⌗

BLOG PAGE⌗

CONTACT PAGE⌗

Animations⌗

Breakpoints⌗

Recommended Workflow⌗

2. ASSET GENERATION PROMPT⌗

Objetivo⌗

A. Logo & Brand Assets⌗

B. Hero Assets⌗

C. Services Section⌗

D. Client Logos⌗

E. Blog Assets⌗

F. Team Assets⌗

G. Decorative & UI Assets⌗

Color Palette⌗

Agency Website Build Guide⌗

10.3 – Criar arquivo `.env` no React⌗