Plugin para Claude Code que cria landing pages de alto impacto visual com HTML/CSS/JS puro. Zero build step, zero dependências, hospedagem Netlify.
O Método Zero automatiza o processo completo de criação de landing pages com qualidade visual de nível awwwards. A filosofia central: o LLM nunca toma decisões criativas sozinho -- ele gera opções, renderiza no browser, e o usuário escolhe.
- HTML/CSS/JS puro -- sem frameworks, sem bundlers, sem npm install
- Pipeline interativa -- cada decisão criativa (paleta, tipografia, hero) é apresentada com 3 opções visuais no browser
- Biblioteca de 155 efeitos testados -- código real funcional, copiados literalmente para o projeto, nunca reescritos ou simplificados
- Do briefing ao deploy -- coleta de informações, copy, design, build, otimização, publicação
- Autonomia total -- o agente executa todos os comandos; o usuário nunca precisa abrir o terminal
No Claude Code, registre o marketplace:
/plugin marketplace add ogallotti/metodo-zero
Depois instale o plugin:
/plugin install metodo-zero@metodo-zero-marketplace
- Execute
/plugin - Vá em Discover
- Encontre metodo-zero
- Selecione o escopo de instalação (User, Project ou Local)
No Claude Code, execute:
/metodo-zero:criar-pipeline
O agente vai guiar você pelo processo completo: coletar briefing, gerar copy, apresentar opções visuais no browser, construir seção a seção, e publicar na Netlify.
O plugin tem 13 skills organizadas em 3 grupos.
| Skill | Descrição |
|---|---|
| criar-pipeline | Pipeline interativa: briefing ao deploy com escolhas visuais no browser |
| criar-agentes | Agent Team com 5 especialistas coordenados (Orquestrador, Copywriter, Diretor de Arte, Developer, QA) |
| Skill | Descrição |
|---|---|
| iniciar | Scaffold de projeto novo (pasta, templates, git init, Netlify Dev) |
| gerar-copy | Copy persuasiva com validação anti-IA via subagent Crítico de Copy |
| gerar-design | Identidade visual interativa: paleta, tipografia e hero escolhidos no browser |
| gerar-layout | Especificação exaustiva de todas as seções com efeitos da biblioteca |
| desenvolver | Build seção a seção com cópia literal de efeitos e checklist de hero |
| otimizar | Performance para PageSpeed 90+ com medição antes/depois via Lighthouse |
| publicar | Deploy para produção via GitHub + Netlify CI/CD |
| previsualizar | Deploy Preview via Pull Request para testar antes de ir ao ar |
| visualizar-local | Servidor de desenvolvimento local com Netlify Dev |
| Skill | Descrição |
|---|---|
| debug | Investigação sistemática: coletar info, hipóteses, testar, corrigir, prevenir |
| configurar-tracking | GTM + Meta Pixel: coleta IDs, instala snippets, configura eventos |
A criar-pipeline conduz o usuário por 12 etapas. Decisões criativas (marcadas com PAUSA) exigem escolha do usuário; etapas mecânicas avançam automaticamente.
Briefing
|
Scaffold (iniciar + Netlify Dev)
|
Copy (gerar-copy) .................. PAUSA: aprovar/ajustar
|
Direção Visual (3 paletas) ........ PAUSA: escolher 1, 2 ou 3
|
Tipografia (3 font pairings) ...... PAUSA: escolher 1, 2 ou 3
|
Hero (3 patterns no browser) ...... PAUSA: escolher 1, 2 ou 3
|
Design System (consolidação automática)
|
Layout (gerar-layout) ............. PAUSA: aprovar/ajustar seções
|
Build seção a seção ............... PAUSA: feedback por bloco
| Bloco 1: Hero + primeira seção
| Bloco 2: Seções do meio
| Bloco 3: Seções finais
|
Ajustes Finais .................... PAUSA: iterações livres
|
Otimizar (opcional)
|
Publicar (opcional)
155 efeitos visuais com código 100% original e funcional, organizados em 11 categorias. Inspirados em libs como Magic UI, Aceternity, Motion Primitives, Animate UI e React Bits — reescritos do zero em vanilla JS/CSS.
| Categoria | Qtd | Exemplos |
|---|---|---|
| Backgrounds | 44 | aurora, particles, gradient-mesh, beams, ballpit |
| Text Effects | 16 | typewriter, scramble, split, gradient, glitch |
| Cards | 11 | 3d-tilt, spotlight, glass, hover-reveal |
| Buttons | 8 | magnetic, ripple, shimmer, morphing |
| Borders | 8 | beam, trail, glow, animated |
| Scroll | 24 | parallax, pin-reveal, horizontal, sticky-cards |
| Transitions | 6 | clip-path, wave, curtain, morph |
| Decorative | 9 | cursor-trail, sparkles, meteors, confetti |
| Media | 8 | comparison, lens, parallax, gallery |
| Layout | 7 | bento-grid, masonry, marquee |
| Components | 14 | carousel, accordion, tabs, modal |
Cada efeito é uma pasta com demo.html (preview), style.css, script.js, meta.json (parâmetros/tags) e README.md. Todos com prefers-reduced-motion, IntersectionObserver para pausar fora da viewport, e CSS custom properties para personalização.
Playground interativo em references/effects/_playground/ — abre no browser para navegar, ajustar parâmetros ao vivo e copiar prompts formatados.
Regra fundamental: efeitos são copiados literalmente para o projeto. O agente substitui apenas variáveis CSS pelos tokens do design system. Nunca reescreve, nunca simplifica.
O diretório references/ contém 10 documentos técnicos consultados pelas skills:
| Documento | Conteúdo |
|---|---|
creative-reference.md |
70+ arquétipos de composição, 100+ constraints criativos, 35+ font pairings curados |
copy-rules.md |
Regras anti-IA para copy (tom, estrutura, validação) |
design-system-guide.md |
Guia completo para gerar design systems (escala tipográfica, paleta, sombras, tokens) |
hero-checklist.md |
Checklist obrigatório que bloqueia progresso se o hero falhar |
effects/ |
Biblioteca de 155 efeitos visuais com playground interativo (ver seção acima) |
forms.md |
Formulários Netlify + intl-tel-input |
tracking.md |
GTM + Meta Pixel (instalação, eventos, testes) |
deploy.md |
GitHub + Netlify CI/CD (primeiro deploy e atualizações) |
local-server.md |
Netlify Dev (configuração, troubleshooting) |
optimize.md |
Checklist de performance para PageSpeed 90+ |
- Claude Code com skills habilitadas
- Netlify CLI (
npm install -g netlify-cli) -- para servidor local e deploy - GitHub CLI (
gh) -- para criar repositório e deploy - Google Fonts -- acesso via internet para carregar tipografia
- Git -- versionamento de cada etapa
ogallotti/metodo-zero/
.claude-plugin/
marketplace.json -- Registro do marketplace
plugins/
metodo-zero/ -- O plugin em si (estrutura abaixo)
README.md
plugins/metodo-zero/
.claude-plugin/
plugin.json -- Metadata do plugin (nome, versão, autor)
SKILL.md -- Entry point do plugin (lista de skills)
rules.md -- Regras globais (comunicação, autonomia, padrões visuais)
skills/
criar-pipeline/ -- Pipeline interativa principal
criar-agentes/ -- Pipeline via Agent Team
iniciar/ -- Scaffold
gerar-copy/ -- Copy persuasiva
gerar-design/ -- Identidade visual interativa
gerar-layout/ -- Especificação de seções
desenvolver/ -- Build seção a seção
otimizar/ -- Performance
publicar/ -- Deploy produção
previsualizar/ -- Deploy Preview
visualizar-local/ -- Servidor local
debug/ -- Investigação de problemas
configurar-tracking/-- GTM + Meta Pixel
references/
creative-reference.md
copy-rules.md
design-system-guide.md
hero-checklist.md
effects/ -- 155 efeitos em 11 categorias + playground interativo
forms.md
tracking.md
deploy.md
local-server.md
optimize.md
templates/
index.html -- Template base com formulário Netlify
style.css -- CSS base com reset e variáveis
script.js -- JS base (AOS, intl-tel-input, scroll)
netlify.toml -- Configuração Netlify (redirects, image CDN)
O LLM não escolhe paleta, tipografia ou hero sozinho. Gera 3 opções, renderiza como HTML temporário, e o usuário vê no browser e decide. Isso elimina o problema de "outputs genéricos" que plagueiam geradores de IA.
Efeitos da biblioteca são copiados na íntegra. Se um efeito tem 200 linhas de JavaScript, as 200 linhas vão para o projeto. O agente substitui apenas tokens CSS. Isso garante que efeitos complexos (partículas, WebGL, scroll-triggered animations) funcionem exatamente como testados.
O checklist de hero não é uma sugestão -- é um gate que bloqueia progresso. Se qualquer item falhar (hero centralizado simples, animação de entrada, efeito simplificado), o hero é reescrito antes de continuar.
O subagent Crítico de Copy valida que o texto não soa como "IA genérica": sem bullet points previsíveis, sem superlativos vazios, sem estrutura mecânica. A copy deve soar como se um redator humano tivesse escrito.
Montserrat, Poppins, Roboto, Inter e outras fontes overused são explicitamente banidas. O creative-reference.md oferece 35+ font pairings curados organizados por categoria (Editorial, Brutalist, Agnostic, etc.).
Sem npm, sem bundler, sem transpilação. HTML/CSS/JS puros servidos diretamente. Isso simplifica o deploy, elimina dependências de build, e permite que qualquer pessoa edite o código depois.
MIT