SKILL.md — Generador de Páginas de Aterrizaje de Agentes MAGNE
Propósito
Generar páginas de aterrizaje de productos MAGNE en el Estilo Web Terminal Nativo para Agentes de MAGNE — inspirado en la estética de economía de agentes de nara.build, pero adaptado a la narrativa específica de MAGNE: rieles de pago para agentes de IA en M Hash L2.
Usa esta habilidad cuando se te pida:
- Crear una página de aterrizaje de producto MAGNE
- Construir un sitio web nativo para agentes MAGNE
- Refactorizar/reconstruir páginas de magne-ai o relacionadas con MAGNE
- Generar páginas de demostración para desarrolladores de MAGNE
1. Estilo Visual — Estilo Web Terminal Nativo para Agentes de MAGNE
Nombre del estilo: Estilo Web Terminal Nativo para Agentes de MAGNE
Palabras Clave Visuales
oscuro, terminal nativo, economía de agentes, tablero de protocolo,
fonte mono, tarjetas de datos densas, líneas de cuadrícula, resplandor de terminal,
minimalismo neón, línea de escaneo opcional, bloques CLI
Fondo
- Base:
#050810o#070910(casi negro, no negro puro) - Gradiente radial: sutil resplandor central, muy oscuro
- Cuadrícula: líneas finas de
1pxa baja opacidad (rgba(88,166,255,0.04)) - Opcional: superposición de líneas de escaneo a paso
2px, opacidad 3% - Evitar: degradados brillantes de SaaS, UI de burbujas redondeadas, vidrio esmerilado estilo Apple
Tipografía
| Elemento | Fuente | Estilo |
|---|---|---|
| Título principal | Space Grotesk o Inter, fallback system-ui | Negrita, 4-6rem, alto contraste, interlineado ajustado |
| Cuerpo | Inter o system-ui | Peso 400-500, nítido y conciso |
| Etiquetas técnicas | JetBrains Mono o monospace | Mayúsculas, interletraje: 0.1em, pequeño |
| Bloques de terminal/código | JetBrains Mono o Consolas | Monospace, fondo de tarjeta oscuro |
| Valores de datos | JetBrains Mono | Alto contraste, acento neón |
Paleta de Colores
Fondo: #070910 (casi negro)
Superficie: #0d1520 (fondos de tarjetas)
Borde: #1a2a3a (sutil)
Texto Principal: #e6edf3
Texto Secundario:#8b949e
Acento Cian: #39d0d6 (acento principal de MAGNE)
Acento Púrpura: #a371f7
Acento Verde: #3fb950 (éxito/verificado)
Acento Amarillo: #d29922 (advertencia/pendiente)
Acento Rojo: #f85149 (error)
Resplandor Neón: rgba(57,208,214,0.2) (para efectos de resplandor de terminal)
Patrones de Componentes
- Tarjetas de datos densas: relleno pequeño, bordes ajustados, valores en monospace
- Bloques de terminal: fondo negro (
#010108), texto cian/verde, sin bordes redondeados o mínimos (2px) - Indicadores de estado: punto pequeño o prefijo
✓/✕/⏳ - Diseño de cuadrícula: CSS Grid principal, no centrado en Flexbox
- Sin imágenes de héroe: prefiere salida de terminal, bloques de código, datos
2. Estructura Narrativa
Narrativa del Héroe de MAGNE
NO copies nara.build directamente. Mapea sus conceptos:
Patrón NARA:
"Los próximos actores económicos no son humanos"
→ Identidad / Aapps / Moneda
→ CLI: inspeccionar / llamar / liquidar / observar
Patrón MAGNE (rieles de pago para agentes de IA):
"Los agentes pueden pensar. Aún no pueden pagar de forma segura."
→ Sin autorización segura
→ Sin pagos de agente
→ Sin recibos verificables
→ MAGNE Agent Pay lo resuelve
Bloques Narrativos Centrales de MAGNE
PROBLEMA:
Los agentes de IA pueden ejecutar tareas.
No pueden recibir pagos confiables.
Las API tradicionales devuelven 401.
Los pagos tradicionales carecen de auditabilidad.
SOLUCIÓN:
MAGNE Agent Pay = flujo de pago compatible con x402
+ Liquidación en M Hash L2
+ Recibo de Tarea de IA en cadena
+ MAGNE Phone como capa de autorización
FLUJO:
El agente crea tarea → La API devuelve 402 con metadatos de pago
→ El usuario autoriza en MAGNE Phone / Wallet
→ Se transfieren mMHA o activos compatibles
→ El Facilitador verifica en M Hash L2
→ El Recibo de Tarea de IA se registra en cadena
→ Inmutable, auditable por cualquier parte
Narrativa por Sección
| Sección | Energía del Título | Subtítulo |
|---|---|---|
| Héroe | Una oración, contundente, centrada en el agente | Una línea explicando el valor central |
| Cuadrícula de Problemas | Tres problemas, contundentes | Aún no hay solución, solo dolor |
| Flujo de Solución | Muestra el ciclo completo | Paso a paso, sin jerga |
| Demo en Vivo | CLI como salida real | Interacción de estilo terminal real |
| Capa de Recibos | Por qué los recibos importan | Confianza, auditoría, cumplimiento |
| Autorización Telefónica | Por qué importa | Premisa de autorización segura |
| SDK para Desarrolladores | Breve, técnico | SKILL.md es el producto |
| Estado de Verificación | Honesto, denso | Testnet/local vs producción |
| Hoja de Ruta + CTA | Corto, claro | Qué sigue, qué está bloqueado |
3. Reglas del Módulo de Página — 9 Secciones Requeridas
Cada página de aterrizaje de MAGNE generada por esta habilidad debe incluir estos 9 módulos:
01 — Héroe
- Un título contundente (máx. 10 palabras)
- Un subtítulo (máx. 20 palabras)
- Sin fotos de stock, sin ilustraciones
- Opcional: sutil fondo de cuadrícula animado
- CTA: "Ver Demo" o "Leer SKILL.md"
02 — Cuadrícula de Problemas
- Cuadrícula de 3 columnas o 3 filas
- Cada problema: icono (estilo terminal) + etiqueta en negrita + descripción de 1 línea
- Problemas:
- Sin Autorización Segura
- Sin Flujo de Pago de Agente
- Sin Recibos Verificables
- Contundente, sin solución aún en esta sección
03 — Flujo de Agent Pay
- Diagrama visual o diagrama de flujo en estilo ASCII
- 5 pasos: Tarea → 402 → Autorización → Liquidación → Recibo
- Cada paso: número + etiqueta + descripción de 1 línea
- Estilo: terminal/cuadrícula, no diagrama de burbujas
04 — Terminal de Demo en Vivo
- Este es el módulo más importante
- Imita la salida real de CLI en un bloque de terminal
- Contenido de ejemplo:
$ magne agent task create "analyze wallet risk"
✓ task created — 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
✓ payment verified
status: verified
block: 4
$ magne receipt create --task task_20260520_001
✓ AI Task Receipt created
receiptId: 0x428d...fe91
explorer: https://l2-explorer.testnet.magicalhash.com/tx/0x7d42...
- Usa hashes de transacción y direcciones reales de la verificación en tiempo de ejecución cuando estén disponibles
05 — Capa de Recibos
- Explica por qué los recibos en cadena importan
- Detalle técnico: evento
AITaskReceiptCreated(receiptId, taskId, user, provider, amount, token, paymentTxHash, timestamp) - Muestra los campos reales del evento
- Enfatiza: inmutable, programable, verificable
06 — Autorización Telefónica Segura
- Sección breve sobre MAGNE Phone como capa de autorización
- "MAGNE convierte teléfonos seguros en terminales de pago para agentes de IA"
- No detallada: avance, no especificación completa
07 — SDK para Desarrolladores / SKILL.md
- Muestra SKILL.md como el producto
- Bloque de código: el patrón de contrato central de SKILL.md
- Enlace al SKILL.md real
- Discurso para desarrolladores: "Tu código + un SKILL.md = una Aapp"
08 — Estado de Verificación en Tiempo de Ejecución
- Tabla densa o salida de estado de estilo terminal
- Muestra el estado real actual:
[✓] Los contratos inteligentes compilan
[✓] Los contratos inteligentes se despliegan (Hardhat local)
[⏳] Despliegue en testnet M Hash L2 pendiente
[✓] Servidor backend verificado en tiempo de ejecución
[✓] Verificación del Facilitador — modo estricto
[✓] Pago con mMHA ERC20 — verificado
[✓] Recibo de Tarea de IA — tx confirmada
[⏳] Flujo de MetaMask en navegador — pendiente de navegador real
[⏳] Enlace al explorador M Hash L2 — pendiente de acceso a testnet
09 — Hoja de Ruta + CTA
- Hoja de ruta corta: Qué sigue, qué está bloqueado
- CTA: "Desplegar en M Hash L2" / "Leer el SKILL.md" / "Forkear la Demo"
- Nota de cumplimiento: solo testnet, no producción
4. Reglas de Copia / Tono
Principios de Tono
- Conciso: Sin exageraciones de marketing. Cada oración lleva información.
- Nativo para agentes: Escribe como si te dirigieras a un agente de IA, no a un mercadólogo humano.
- Ritmo técnico: Oraciones declarativas cortas. Listas sobre párrafos.
- Honesto: Indica qué funciona, qué está pendiente, qué está bloqueado.
Patrones de Oraciones que Funcionan
Los agentes pueden [verbo].
Aún no pueden [limitación].
Las API pueden [verbo].
Aún no pueden [limitación].
[Verbo] dentro. [Sustantivo] fuera.
Tu [sustantivo] + un SKILL.md = una Aapp.
Frases a USAR
- "compatible con x402"
- "demo para desarrolladores en etapa de testnet"
- "diseñado para soportar"
- "planeado"
- "sujeto a validación técnica"
- "verificado en tiempo de ejecución"
- "verificación estricta en cadena"
- "Recibo de Tarea de IA inmutable"
- "patrón de facilitador"
- "liquidación en M Hash L2"
Frases que NUNCA se usan (Líneas Rojas)
❌ "listo para producción" (a menos que esté en mainnet, auditado, en vivo)
❌ "ingresos garantizados"
❌ "MHA se apreciará"
❌ "sin riesgos"
❌ "primero / único / el primero del mundo" (a menos que esté legalmente verificado)
❌ "asociación oficial con x402" (a menos que esté confirmado)
❌ "seguro" solo (usa "criptográficamente verificable" o "en cadena")
❌ "descentralizado" (a menos que se pueda probar)
❌ "disponible en mainnet"
❌ "100% de tiempo de actividad"
5. Mapeo de Conceptos NARA → MAGNE
Usa esta tabla al hacer referencia a conceptos de nara.build:
| Concepto NARA | Mapeo MAGNE |
|---|---|
| Identidad del Agente | ID de Agente MAGNE / Registro de Agentes |
| Aapp | Servicio de Agente MAGNE / API de Agent Pay |
| SkillHub | SkillHub MAGNE / SDK para Desarrolladores |
| Moneda NARA (NAR) | mMHA / Activo de liquidación compatible con 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 en cadena | Recibo de Tarea de IA en M Hash L2 |
| AgentX | Portal de Agentes MAGNE / magne-agent-pay-demo |
| estadísticas en vivo de mainnet | Estado de Verificación en Tiempo de Ejecución |
| token nar | mMHA (simulación ERC20 de testnet) |
6. Mapeo de Contenido Técnico
Al incluir detalles técnicos, usa estos valores exactos de la verificación en tiempo de ejecución:
Red: Testnet M Hash L2
ID de Cadena: 20250827
RPC: https://l2-rpc.testnet.magicalhash.com
Explorador: https://l2-explorer.testnet.magicalhash.com
MockMHA: 0x5FbDB2315678afecb367f032d93F642f64180aa3 (verificado localmente)
AITaskReceipt: 0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512 (verificado localmente)
Tx de pago: 0x130ba003e19e8a6edc2a7ae6147e1f7ff9411cb78b0dc875b9d5084df4b4701e
Tx de recibo: 0x7d423e93ed4ecd7b488394a71a9c711f8b30b7b1515e34a537030abce785a705
ID de Recibo: 0x428d5f6dc07adf8f473793dcdc01c8041d979a521084759ca2e10dcb7152fe91
Bloque (local): 4
7. Reglas de Formato del Entregable
Cada salida generada con esta habilidad debe incluir:
Estructura de Archivos
magne-agent-landing/
├── index.html # Una sola página, todas las secciones en línea
├── style.css # Estilo Terminal Nativo para Agentes de MAGNE
├── app.js # JS mínimo para animación del terminal
├── README.md # Enlace a SKILL.md + notas de despliegue
└── SKILL.md # Copia de referencia de esta habilidad
Requisitos HTML
<!DOCTYPE html>,<html lang="en">- Diseño principal con CSS Grid
- Responsivo hasta 375px de ancho
- Sin dependencias JS externas excepto:
https://cdn.jsdelivr.net/npm/[email protected]/dist/ethers.umd.min.js(cuando se necesite integración con wallet)
- El bloque de terminal debe usar
<pre><code>con escape apropiado - IDs de todas las secciones:
hero,problems,flow,demo,receipts,phone,sdk,status,roadmap
Requisitos CSS
- Propiedades personalizadas CSS para todos los colores (
:root) - Sin Tailwind (a menos que se solicite explícitamente)
- Mobile-first con puntos de interrupción
min-widthen 768px y 1200px - Resplandor de terminal:
box-shadow: 0 0 20px rgba(57,208,214,0.15)
Requisitos de Copia
- Títulos: máx. 10 palabras
- Subtítulos: máx. 20 palabras
- Párrafos del cuerpo: máx. 2 oraciones cada uno
- Sin lorem ipsum
- Todas las afirmaciones de estado deben coincidir con el estado real del tiempo de ejecución
Lista de Verificación de Cumplimiento
- Sin "listo para producción" a menos que esté en mainnet verificado
- Insignia de testnet en el héroe
- Advertencia de riesgo en el pie de página
- Los enlaces a ID de Cadena / RPC / Explorador apuntan a
magicalhash.com - Sin afirmaciones sobre el precio del token
- Sin lenguaje de ingresos garantizados
- Todos los hashes de transacción son reales (de verificación en tiempo de ejecución, no de marcador de posición)
Lista de Verificación de Inicio Rápido
Al generar una página de aterrizaje de MAGNE:
- Lee este SKILL.md
- Mapea conceptos NARA → conceptos MAGNE (Sección 5)
- Usa datos reales del tiempo de ejecución (Sección 6) — no uses hashes de marcador de posición
- Construye 9 secciones (Sección 3) en orden
- Aplica el Estilo Terminal Nativo para Agentes de MAGNE (Sección 1)
- Ejecuta la lista de verificación de cumplimiento (Sección 7)
- Verifica: la página se carga, la demo del terminal se renderiza, todos los enlaces apuntan a magicalhash.com
Enlaces de Referencia
- Fuente de SKILL.md:
~/.openclaw/workspace-main/skills/magne-agent-landing/SKILL.md - Demo de 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 (inspiración):
https://nara.build