SKILL.md — Gerador de Landing Page do Agente MAGNE
Propósito
Gerar páginas de destino do produto MAGNE no estilo MAGNE Agent-Native Terminal Web — inspirado na estética de economia de agentes do nara.build, mas mapeado para a narrativa específica da MAGNE: trilhos de pagamento para agentes de IA na M Hash L2.
Use esta skill quando solicitado a:
- Criar uma landing page do produto MAGNE
- Construir um site MAGNE nativo para agentes
- Refatorar/recriar páginas magne-ai ou relacionadas à MAGNE
- Gerar páginas de demonstração da MAGNE voltadas para desenvolvedores
1. Estilo Visual — MAGNE Agent-Native Terminal Web
Nome do Estilo: MAGNE Agent-Native Terminal Web
Palavras-chave Visuais
escuro, nativo de terminal, economia de agente, painel de protocolo,
fonte monoespaçada, cartões de dados densos, linhas de grade, brilho de terminal,
minimalismo neon, scanline opcional, blocos de CLI
Fundo
- Base:
#050810ou#070910(quase preto, não preto puro) - Gradiente radial: brilho central sutil, muito escuro
- Grade: linhas finas de
1pxem baixa opacidade (rgba(88,166,255,0.04)) - Opcional: sobreposição scanline com passo de
2px, 3% de opacidade - Evitar: gradientes brilhosos de SaaS, UI de bolha arredondada, vidro fosco estilo Apple
Tipografia
| Elemento | Fonte | Estilo |
|---|---|---|
| Título principal | Space Grotesk ou Inter, fallback system-ui | Negrito, 4-6rem, alto contraste, entrelinhamento apertado |
| Corpo | Inter ou system-ui | Peso 400-500, nítido e conciso |
| Rótulos técnicos | JetBrains Mono ou monospace | Maiúsculas, espaçamento entre letras: 0.1em, pequeno |
| Blocos de terminal/código | JetBrains Mono ou Consolas | Monoespaçada, fundo de cartão escuro |
| Valores de dados | JetBrains Mono | Alto contraste, destaque neon |
Paleta de Cores
Fundo: #070910 (quase preto)
Superfície: #0d1520 (fundos de cartão)
Borda: #1a2a3a (sutil)
Texto Principal: #e6edf3
Texto Secundário: #8b949e
Destaque Ciano: #39d0d6 (destaque principal da MAGNE)
Destaque Roxo: #a371f7
Destaque Verde: #3fb950 (sucesso/verificado)
Destaque Amarelo: #d29922 (aviso/pendente)
Destaque Vermelho: #f85149 (erro)
Brilho Neon: rgba(57,208,214,0.2) (para efeitos de brilho de terminal)
Padrões de Componentes
- Cartões de dados densos: padding pequeno, bordas apertadas, valores monoespaçados
- Blocos de terminal: fundo preto (
#010108), texto ciano/verde, sem cantos arredondados ou muito mínimos (2px) - Indicadores de status: ponto pequeno ou prefixo
✓/✕/⏳ - Layout de grade: CSS Grid principal, não pesado em Flexbox
- Sem imagens de herói: prefira saída de terminal, blocos de código, dados
2. Estrutura Narrativa
Narrativa do Herói MAGNE
NÃO copie o nara.build diretamente. Mapeie seus conceitos:
Padrão NARA:
"Os próximos atores econômicos não são humanos"
→ Identidade / Aapps / Moeda
→ CLI: inspecionar / chamar / liquidar / observar
Padrão MAGNE (trilhos de pagamento para agentes de IA):
"Agentes podem pensar. Eles ainda não podem pagar com segurança."
→ Sem autorização segura
→ Sem pagamentos para agentes
→ Sem recibos verificáveis
→ MAGNE Agent Pay resolve isso
Blocos Narrativos Principais da MAGNE
PROBLEMA:
Agentes de IA podem executar tarefas.
Eles não podem receber pagamento confiável.
APIs tradicionais retornam 401.
Pagamentos tradicionais carecem de auditabilidade.
SOLUÇÃO:
MAGNE Agent Pay = fluxo de pagamento compatível com x402
+ Liquidação M Hash L2
+ Recibo de Tarefa de IA na blockchain
+ MAGNE Phone como camada de autorização
FLUXO:
Agente cria tarefa → API retorna 402 com metadados de pagamento
→ Usuário autoriza no MAGNE Phone / Wallet
→ mMHA ou ativos suportados são transferidos
→ Facilitador verifica na M Hash L2
→ Recibo de Tarefa de IA registrado na blockchain
→ Imutável, auditável por qualquer parte
Narrativa por Seção
| Seção | Energia do Título | Subtítulo |
|---|---|---|
| Hero | Uma frase, impacto, centrada no agente | Uma linha explicando o valor principal |
| Grade de Problemas | Três problemas, diretos | Ainda sem solução — apenas a dor |
| Fluxo da Solução | Mostrar o ciclo completo | Passo a passo, sem jargão |
| Demonstração ao Vivo | CLI como saída real | Interação estilo terminal real |
| Camada de Recibo | Por que recibos importam | Confiança, auditoria, conformidade |
| Autorização por Telefone | Por que é importante | Premissa de autorização segura |
| SDK para Desenvolvedor | Breve, técnico | SKILL.md é o produto |
| Status de Verificação | Honesto, denso | Testnet/local vs produção |
| Roadmap + CTA | Curto, claro | O que vem a seguir, o que está bloqueado |
3. Regras dos Módulos da Página — 9 Seções Obrigatórias
Toda landing page MAGNE gerada por esta skill deve incluir estes 9 módulos:
01 — Hero
- Um título impactante (máx. 10 palavras)
- Um subtítulo (máx. 20 palavras)
- Sem fotos de banco de imagens, sem ilustrações
- Opcional: fundo de grade animada sutil
- CTA: "Ver Demonstração" ou "Ler SKILL.md"
02 — Grade de Problemas
- Grade de 3 colunas ou 3 linhas
- Cada problema: ícone (estilo terminal) + rótulo em negrito + descrição de 1 linha
- Problemas:
- Sem Autorização Segura
- Sem Fluxo de Pagamento para Agentes
- Sem Recibos Verificáveis
- Direto, sem solução ainda nesta seção
03 — Fluxo Agent Pay
- Diagrama visual ou fluxograma estilo ASCII
- 5 etapas: Tarefa → 402 → Autorização → Liquidação → Recibo
- Cada etapa: número + rótulo + descrição de 1 linha
- Estilo: terminal/grade, não diagrama de bolhas
04 — Terminal de Demonstração ao Vivo
- Este é o módulo mais importante
- Imitar saída real de CLI em bloco de terminal
- Exemplo de conteúdo:
$ magne agent task create "analisar risco de carteira"
✓ tarefa criada — task_20260520_001
$ magne api call wallet-risk --wallet 0x742d...
✕ 402 Payment Required
amount: 0,01 mMHA
recipient: 0xf39...2266
chain: mhash-l2-testnet (20250827)
$ magne pay settle --tx 0x130b...701e --network mhash-l2
✓ pagamento verificado
status: verificado
block: 4
$ magne receipt create --task task_20260520_001
✓ Recibo de Tarefa de IA criado
receiptId: 0x428d...fe91
explorer: https://l2-explorer.testnet.magicalhash.com/tx/0x7d42...
- Use hashes e endereços de transação reais da verificação em tempo de execução quando disponíveis
05 — Camada de Recibo
- Explique por que recibos na blockchain são importantes
- Detalhe técnico: evento
AITaskReceiptCreated(receiptId, taskId, user, provider, amount, token, paymentTxHash, timestamp) - Mostre os campos reais do evento
- Enfatize: imutável, programável, verificável
06 — Autorização Segura por Telefone
- Seção breve sobre o MAGNE Phone como camada de autorização
- "A MAGNE transforma telefones seguros em terminais de pagamento para agentes de IA"
- Não detalhado — teaser, não especificação completa
07 — SDK para Desenvolvedor / SKILL.md
- Mostre SKILL.md como o produto
- Bloco de código: o padrão de contrato principal da SKILL.md
- Link para a SKILL.md real
- Discurso para desenvolvedores: "Seu código + uma SKILL.md = um Aapp"
08 — Status de Verificação em Tempo de Execução
- Tabela densa ou saída de status estilo terminal
- Mostre o estado atual real:
[✓] Contratos inteligentes compilam
[✓] Contratos inteligentes implantam (Hardhat local)
[⏳] Implantação na testnet M Hash L2 pendente
[✓] Servidor backend verificado em tempo de execução
[✓] Facilitador verifica — modo estrito
[✓] Pagamento mMHA ERC20 — verificado
[✓] Recibo de Tarefa de IA — tx confirmada
[⏳] Fluxo MetaMask no navegador — pendente navegador real
[⏳] Link do explorador M Hash L2 — pendente acesso à testnet
09 — Roadmap + CTA
- Roadmap curto: O que vem a seguir, o que está bloqueado
- CTA: "Implantar na M Hash L2" / "Ler a SKILL.md" / "Forkar a Demonstração"
- Nota de conformidade: apenas testnet, não produção
4. Regras de Cópia / Tom
Princípios de Tom
- Conciso: Sem floreios de marketing. Cada frase carrega informação.
- Nativo para agente: Escreva como se estivesse se dirigindo a um agente de IA, não a um profissional de marketing.
- Ritmo técnico: Frases declarativas curtas. Listas em vez de parágrafos.
- Honesto: Declare o que está funcionando, o que está pendente, o que está bloqueado.
Padrões de Frases Que Funcionam
Agentes podem [verbo].
Eles ainda não podem [limitação].
APIs podem [verbo].
Eles ainda não podem [limitação].
[Verbo] para dentro. [Substantivo] para fora.
Seu [substantivo] + uma SKILL.md = um Aapp.
Frases PARA USAR
- "compatível com x402"
- "demonstração para desenvolvedor em estágio de testnet"
- "projetado para suportar"
- "planejado"
- "sujeito a validação técnica"
- "verificado em tempo de execução"
- "verificação estrita na blockchain"
- "Recibo de Tarefa de IA imutável"
- "padrão facilitador"
- "liquidação M Hash L2"
Frases NUNCA USAR (Linhas Vermelhas)
❌ "pronto para produção" (a menos que na mainnet, auditado, ativo)
❌ "receita garantida"
❌ "MHA valorizará"
❌ "sem risco"
❌ "primeiro / único / primeiro do mundo" (a menos que verificado legalmente)
❌ "parceria oficial x402" (a menos que confirmado)
❌ "seguro" sozinho (use "criptograficamente verificável" ou "na blockchain")
❌ "descentralizado" (a menos que comprovadamente)
❌ "mainnet disponível"
❌ "100% de uptime"
5. Mapeamento de Conceitos NARA → MAGNE
Use esta tabela ao referenciar conceitos do nara.build:
| Conceito NARA | Mapeamento MAGNE |
|---|---|
| Identidade do Agente | ID do Agente MAGNE / Registro de Agentes |
| Aapp | Serviço de Agente MAGNE / API Agent Pay |
| SkillHub | MAGNE SkillHub / SDK para Desenvolvedor |
| Moeda NARA (NAR) | mMHA / Ativo de liquidação suportado por MHA |
CLI: agent inspect | magne agent task create |
CLI: agent call | magne api call wallet-risk |
CLI: agent settle | magne pay settle --tx <hash> |
CLI: agent watch | magne receipt watch --task <id> |
| Estado on-chain | Recibo de Tarefa de IA M Hash L2 |
| AgentX | Portal do Agente MAGNE / magne-agent-pay-demo |
| Estatísticas ativas da mainnet | Status de Verificação em Tempo de Execução |
| token nar | mMHA (mock ERC20 de testnet) |
6. Mapeamento de Conteúdo Técnico
Ao incluir detalhes técnicos, use estes valores exatos da verificação em tempo de execução:
Rede: Testnet M Hash L2
ID da Chain: 20250827
RPC: https://l2-rpc.testnet.magicalhash.com
Explorador: https://l2-explorer.testnet.magicalhash.com
MockMHA: 0x5FbDB2315678afecb367f032d93F642f64180aa3 (local verificado)
AITaskReceipt: 0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512 (local verificado)
Tx de pagamento: 0x130ba003e19e8a6edc2a7ae6147e1f7ff9411cb78b0dc875b9d5084df4b4701e
Tx de recibo: 0x7d423e93ed4ecd7b488394a71a9c711f8b30b7b1515e34a537030abce785a705
ID do Recibo: 0x428d5f6dc07adf8f473793dcdc01c8041d979a521084759ca2e10dcb7152fe91
Bloco (local): 4
7. Regras de Formato do Entregável
Toda saída gerada com esta skill deve incluir:
Estrutura de Arquivos
magne-agent-landing/
├── index.html # Página única, todas as seções inline
├── style.css # Estilo MAGNE Agent-Native Terminal
├── app.js # JS mínimo para animação do terminal
├── README.md # Link para SKILL.md + notas de implantação
└── SKILL.md # Cópia de referência desta skill
Requisitos HTML
<!DOCTYPE html>,<html lang="pt">- Layout principal CSS Grid
- Responsivo até 375px de largura
- Sem dependências JS externas, exceto:
https://cdn.jsdelivr.net/npm/[email protected]/dist/ethers.umd.min.js(quando integração com carteira for necessária)
- Bloco de terminal deve usar
<pre><code>com escaping adequado - IDs de todas as seções:
hero,problems,flow,demo,receipts,phone,sdk,status,roadmap
Requisitos CSS
- Propriedades CSS personalizadas para todas as cores (
:root) - Sem Tailwind (a menos que explicitamente solicitado)
- Mobile-first com breakpoints
min-widthem 768px e 1200px - Brilho de terminal:
box-shadow: 0 0 20px rgba(57,208,214,0.15)
Requisitos de Cópia
- Títulos: máx. 10 palavras
- Subtítulos: máx. 20 palavras
- Parágrafos do corpo: máx. 2 frases cada
- Sem lorem ipsum
- Todas as declarações de status devem corresponder ao estado real do tempo de execução
Lista de Verificação de Conformidade
- Sem "pronto para produção" a menos que na mainnet verificada
- Selo de testnet no hero
- Aviso de risco no rodapé
- ID da Chain / RPC / links do Explorador apontam para
magicalhash.com - Sem alegações de preço de token
- Sem linguagem de receita garantida
- Todos os hashes de tx são reais (da verificação em tempo de execução, não placeholders)
Lista de Verificação de Início Rápido
Ao gerar uma landing page MAGNE:
- Leia esta SKILL.md
- Mapeie conceitos NARA → conceitos MAGNE (Seção 5)
- Use dados reais de tempo de execução (Seção 6) — não use hashes placeholders
- Construa 9 seções (Seção 3) em ordem
- Aplique o estilo MAGNE Agent-Native Terminal (Seção 1)
- Execute a lista de verificação de conformidade (Seção 7)
- Verifique: página carrega, demonstração do terminal renderiza, todos os links apontam para magicalhash.com
Links de Referência
- Fonte da SKILL.md:
~/.openclaw/workspace-main/skills/magne-agent-landing/SKILL.md - Demonstração MAGNE Agent Pay:
https://github.com/jerrysohigh-create/magne-agent-pay-demo - M Hash L2:
https://github.com/magne-ai/M-Hash-L2 - nara.build (inspiração):
https://nara.build