SKILL.md — MAGNE Agent Landing Page Generator
Zweck
Erstelle MAGNE-Produkt-Landingpages im MAGNE Agent-Native Terminal Web Stil – inspiriert von nara.builds Agentenökonomie-Ästhetik, aber angepasst an MAGNEs spezifische Erzählung: KI-Agenten-Zahlungsschienen auf M Hash L2.
Verwende diesen Skill, wenn du gebeten wirst:
- Eine MAGNE-Produkt-Landingpage zu erstellen
- Eine MAGNE-Agenten-native Website zu bauen
- magne-ai oder MAGNE-bezogene Seiten zu überarbeiten/neuzubauen
- Entwicklerorientierte MAGNE-Demoseiten zu generieren
1. Visueller Stil — MAGNE Agent-Native Terminal Web
Stilname: MAGNE Agent-Native Terminal Web
Visuelle Schlagwörter
dunkel, terminal-nativ, Agentenökonomie, Protokoll-Dashboard,
Monospace-Schrift, dichte Datenkarten, Rasterlinien, Terminal-Leuchten,
neon-minimalistisch, Scanline optional, CLI-Blöcke
Hintergrund
- Basis:
#050810oder#070910(fast schwarz, nicht reines Schwarz) - Radialverlauf: subtiles zentrales Leuchten, sehr dunkel
- Gitter: dünne
1pxLinien mit niedriger Deckkraft (rgba(88,166,255,0.04)) - Optional: Scanline-Überlagerung mit
2pxAbstand, 3% Deckkraft - Vermeide: glänzende SaaS-Verläufe, abgerundete Bubble-UI, Apple-typisches Milchglas
Typografie
| Element | Schriftart | Stil |
|---|---|---|
| Hero-Überschrift | Space Grotesk oder Inter, Fallback system-ui | Fett, 4-6rem, hoher Kontrast, enger Zeilenabstand |
| Fließtext | Inter oder system-ui | 400-500 Stärke, scharf und prägnant |
| Technische Labels | JetBrains Mono oder monospace | Großbuchstaben, Buchstabenabstand: 0.1em, klein |
| Terminal-/Code-Blöcke | JetBrains Mono oder Consolas | Monospace, dunkler Kartenhintergrund |
| Datenwerte | JetBrains Mono | Hoher Kontrast, Neon-Akzent |
Farbpalette
Hintergrund: #070910 (fast schwarz)
Oberfläche: #0d1520 (Kartenhintergründe)
Rahmen: #1a2a3a (dezent)
Text Primär: #e6edf3
Text Sekundär: #8b949e
Akzent Cyan: #39d0d6 (MAGNE primärer Akzent)
Akzent Lila: #a371f7
Akzent Grün: #3fb950 (erfolg/verifiziert)
Akzent Gelb: #d29922 (warnung/ausstehend)
Akzent Rot: #f85149 (fehler)
Neon-Leuchten: rgba(57,208,214,0.2) (für Terminal-Leuchteffekte)
Komponenten-Muster
- Dichte Datenkarten: kleine Abstände, enge Rahmen, Monospace-Werte
- Terminal-Blöcke: schwarzer Hintergrund (
#010108), cyan/grüner Text, keine oder minimale abgerundete Ecken (2px) - Status-Indikatoren: kleiner Punkt oder
✓/✕/⏳-Präfix - Raster-Layout: primär CSS Grid, nicht Flexbox-lastig
- Keine Hero-Bilder: bevorzuge Terminal-Ausgaben, Code-Blöcke, Daten
2. Narrative Struktur
MAGNE Hero-Erzählung
Kopiere NICHT direkt nara.build. Bilde seine Konzepte ab:
NARA-Muster:
"Die nächsten wirtschaftlichen Akteure sind nicht menschlich"
→ Identität / Aapps / Währung
→ CLI: inspect / call / settle / watch
MAGNE-Muster (Zahlungsschienen für KI-Agenten):
"Agenten können denken. Sie können immer noch nicht sicher bezahlen."
→ Keine sichere Autorisierung
→ Keine Agentenzahlungen
→ Keine überprüfbaren Belege
→ MAGNE Agent Pay löst dieses Problem
MAGNE Kern-Narrative-Blöcke
PROBLEM:
KI-Agenten können Aufgaben ausführen.
Sie können keine zuverlässigen Zahlungen empfangen.
Traditionelle APIs geben 401 zurück.
Traditionelle Zahlungen mangelt es an Prüfbarkeit.
LÖSUNG:
MAGNE Agent Pay = x402-kompatibler Zahlungsablauf
+ M Hash L2 Abwicklung
+ KI-Aufgabenbeleg (AI Task Receipt) on-chain
+ MAGNE Phone als Autorisierungsschicht
ABLAUF:
Agent erstellt Aufgabe → API gibt 402 mit Zahlungsmetadaten zurück
→ Benutzer autorisiert in MAGNE Phone / Wallet
→ mMHA oder unterstützte Vermögenswerte werden übertragen
→ Facilitator verifiziert auf M Hash L2
→ KI-Aufgabenbeleg (AI Task Receipt) wird on-chain aufgezeichnet
→ Unveränderlich, von jeder Partei prüfbar
Narrative pro Abschnitt
| Abschnitt | Headline-Energie | Untertext |
|---|---|---|
| Hero | Ein Satz, prägnant, agentenzentriert | Einzeiler, der den Kernwert erklärt |
| Problem-Raster | Drei Probleme, klar | Noch keine Lösung — nur Schmerz |
| Lösungsablauf | Zeige den vollständigen Zyklus | Schritt für Schritt, ohne Fachjargon |
| Live-Demo | CLI als echte Ausgabe | Echte Terminal-ähnliche Interaktion |
| Belegschicht | Warum Belege wichtig sind | Vertrauen, Prüfung, Compliance |
| Telefon-Auth | Warum es wichtig ist | Voraussetzung für sichere Autorisierung |
| Entwickler-SDK | Kurz, technisch | SKILL.md ist das Produkt |
| Verifizierungsstatus | Ehrlich, dicht | Testnet/lokal vs. Produktion |
| Roadmap + CTA | Kurz, klar | Was als nächstes kommt, was blockiert ist |
3. Seitenmodul-Regeln — 9 erforderliche Abschnitte
Jede von diesem Skill generierte MAGNE-Landingpage muss diese 9 Module enthalten:
01 — Hero
- Eine scharfe Überschrift (max. 10 Wörter)
- Ein Untertitel (max. 20 Wörter)
- Keine Stockfotos, keine Illustrationen
- Optional: subtiler animierter Rasterhintergrund
- CTA: "Demo ansehen" oder "SKILL.md lesen"
02 — Problem-Raster
- 3-spaltiges oder 3-zeiliges Raster
- Jedes Problem: Symbol (Terminal-Stil) + fette Bezeichnung + 1-zeilige Beschreibung
- Probleme:
- Keine sichere Autorisierung
- Kein Agenten-Zahlungsablauf
- Keine überprüfbaren Belege
- Klar, noch keine Lösung in diesem Abschnitt
03 — Agent Pay Ablauf
- Visuelles Diagramm oder ASCII-ähnliches Ablaufdiagramm
- 5 Schritte: Aufgabe → 402 → Autorisierung → Abwicklung → Beleg
- Jeder Schritt: Nummer + Bezeichnung + 1-zeilige Beschreibung
- Stil: Terminal/Raster, kein Blasendiagramm
04 — Live-Demo-Terminal
- Dies ist das wichtigste Modul
- Imitiere echte CLI-Ausgabe in einem Terminal-Block
- Beispielinhalt:
$ magne agent task create "wallet risk analysieren"
✓ aufgabe erstellt — task_20260520_001
$ magne api call wallet-risk --wallet 0x742d...
✕ 402 Payment Required
betrag: 0.01 mMHA
empfänger: 0xf39...2266
kette: mhash-l2-testnet (20250827)
$ magne pay settle --tx 0x130b...701e --network mhash-l2
✓ zahlung verifiziert
status: verifiziert
block: 4
$ magne receipt create --task task_20260520_001
✓ KI-Aufgabenbeleg erstellt
receiptId: 0x428d...fe91
explorer: https://l2-explorer.testnet.magicalhash.com/tx/0x7d42...
- Verwende, wenn verfügbar, echte Transaktions-Hashes und Adressen aus der Laufzeitverifizierung
05 — Belegschicht
- Erkläre, warum On-Chain-Belege wichtig sind
- Technisches Detail: Ereignis
AITaskReceiptCreated(receiptId, taskId, user, provider, amount, token, paymentTxHash, timestamp) - Zeige die tatsächlichen Ereignisfelder
- Betone: unveränderlich, programmierbar, verifizierbar
06 — Sichere Telefon-Autorisierung
- Kurzer Abschnitt über MAGNE Phone als Autorisierungsschicht
- "MAGNE macht sichere Telefone zu Zahlungsterminals für KI-Agenten"
- Nicht detailliert — Teaser, kein vollständiges Lastenheft
07 — Entwickler-SDK / SKILL.md
- Zeige SKILL.md als das Produkt
- Code-Block: das Kern-SKILL.md-Vertragsmuster
- Link zur tatsächlichen SKILL.md
- Entwickler-Ansprache: "Dein Code + eine SKILL.md = eine Aapp"
08 — Laufzeit-Verifizierungsstatus
- Dichte Tabelle oder Terminal-Statusausgabe
- Zeige den tatsächlichen aktuellen Zustand:
[✓] Smart Contracts kompilieren
[✓] Smart Contracts bereitstellen (lokales Hardhat)
[⏳] M Hash L2 Testnet-Bereitstellung ausstehend
[✓] Backend-Server laufzeitverifiziert
[✓] Facilitator-Verifizierung — strikter Modus
[✓] mMHA ERC20-Zahlung — verifiziert
[✓] KI-Aufgabenbeleg (AI Task Receipt) — tx bestätigt
[⏳] Browser-MetaMask-Ablauf — echter Browser ausstehend
[⏳] M Hash L2 Explorer-Link — Testnet-Zugriff ausstehend
09 — Roadmap + CTA
- Kurze Roadmap: Was als nächstes kommt, was blockiert ist
- CTA: "Auf M Hash L2 bereitstellen" / "Lies die SKILL.md" / "Forke die Demo"
- Compliance-Hinweis: nur Testnet, nicht für die Produktion
4. Text-/Tonregeln
Grundsätze für den Ton
- Prägnant: Kein Marketing-Blabla. Jeder Satz trägt Informationen.
- Agenten-nativ: Schreibe, als ob du einen KI-Agenten ansprechen würdest, nicht einen menschlichen Vermarkter.
- Technischer Rhythmus: Kurze Aussagesätze. Aufzählungen statt Absätze.
- Ehrlich: Gib an, was funktioniert, was aussteht, was blockiert ist.
Satzmuster, die funktionieren
Agenten können [Verb].
Sie können immer noch nicht [Einschränkung].
APIs können [Verb].
Sie können immer noch nicht [Einschränkung].
[Verb] rein. [Nomen] raus.
Dein [Nomen] + eine SKILL.md = eine Aapp.
Zu verwendende Phrasen
- "x402-kompatibel"
- "Testnet-Entwickler-Demo"
- "entwickelt, um zu unterstützen"
- "geplant"
- "vorbehaltlich technischer Validierung"
- "laufzeitverifiziert"
- "strikte On-Chain-Verifizierung"
- "unveränderlicher KI-Aufgabenbeleg"
- "Facilitator-Muster"
- "M Hash L2 Abwicklung"
NIEMALS zu verwendende Phrasen (Rote Linien)
❌ "produktionsreif" (außer auf Mainnet, auditiert, live)
❌ "garantierte Einnahmen"
❌ "MHA wird im Wert steigen"
❌ "risikofrei"
❌ "erste / einzige / weltweit erste" (außer rechtlich verifiziert)
❌ "offizielle x402-Partnerschaft" (außer bestätigt)
❌ "sicher" allein (verwende "kryptographisch verifizierbar" oder "on-chain")
❌ "dezentralisiert" (außer beweisbar so)
❌ "mainnet verfügbar"
❌ "100% Betriebszeit"
5. NARA → MAGNE Konzeptabbildung
Verwende diese Tabelle, wenn du auf nara.build-Konzepte Bezug nimmst:
| NARA-Konzept | MAGNE-Abbildung |
|---|---|
| Agentenidentität | MAGNE Agent ID / Agentenregister |
| Aapp | MAGNE Agentendienst / Agent Pay API |
| SkillHub | MAGNE SkillHub / Entwickler-SDK |
| NARA-Währung (NAR) | mMHA / MHA-unterstützter Abwicklungs-Asset |
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> |
| On-Chain-Zustand | M Hash L2 KI-Aufgabenbeleg |
| AgentX | MAGNE Agent Portal / magne-agent-pay-demo |
| Mainnet-Live-Statistiken | Laufzeit-Verifizierungsstatus |
| nar token | mMHA (ERC20-Testnet-Mock) |
6. Technische Inhaltsabbildung
Wenn du technische Details einfügst, verwende diese genauen Werte aus der Laufzeitverifizierung:
Netzwerk: M Hash L2 Testnet
Chain-ID: 20250827
RPC: https://l2-rpc.testnet.magicalhash.com
Explorer: https://l2-explorer.testnet.magicalhash.com
MockMHA: 0x5FbDB2315678afecb367f032d93F642f64180aa3 (lokal verifiziert)
AITaskReceipt: 0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512 (lokal verifiziert)
Zahlungs-Tx: 0x130ba003e19e8a6edc2a7ae6147e1f7ff9411cb78b0dc875b9d5084df4b4701e
Beleg-Tx: 0x7d423e93ed4ecd7b488394a71a9c711f8b30b7b1515e34a537030abce785a705
Beleg-ID: 0x428d5f6dc07adf8f473793dcdc01c8041d979a521084759ca2e10dcb7152fe91
Block (lokal): 4
7. Lieferformat-Regeln
Jede mit diesem Skill generierte Ausgabe muss Folgendes enthalten:
Dateistruktur
magne-agent-landing/
├── index.html # Einzelne Seite, alle Abschnitte inline
├── style.css # MAGNE Agent-Native Terminal Stil
├── app.js # Minimales JS für Terminal-Animation
├── README.md # Link zu SKILL.md + Bereitstellungshinweise
└── SKILL.md # Referenzkopie dieses Skills
HTML-Anforderungen
<!DOCTYPE html>,<html lang="de">- Primäres CSS Grid-Layout
- Responsive bis 375px Breite
- Keine externen JS-Abhängigkeiten außer:
https://cdn.jsdelivr.net/npm/[email protected]/dist/ethers.umd.min.js(wenn Wallet-Integration benötigt wird)
- Terminal-Block muss
<pre><code>mit korrekter Maskierung verwenden - Alle Abschnitts-IDs:
hero,problems,flow,demo,receipts,phone,sdk,status,roadmap
CSS-Anforderungen
- CSS-Custom-Properties für alle Farben (
:root) - Kein Tailwind (außer ausdrücklich angefordert)
- Mobile-First mit
min-width-Breakpoints bei 768px und 1200px - Terminal-Leuchten:
box-shadow: 0 0 20px rgba(57,208,214,0.15)
Texterstellungsanforderungen
- Überschriften: max. 10 Wörter
- Untertitel: max. 20 Wörter
- Fließtext-Absätze: max. 2 Sätze pro Absatz
- Kein Lorem Ipsum
- Alle Statusangaben müssen dem tatsächlichen Laufzeitzustand entsprechen
Compliance-Checkliste
- Kein "produktionsreif" außer auf verifiziertem Mainnet
- Testnet-Abzeichen auf dem Hero
- Risikohinweis in der Fußzeile
- Chain-ID / RPC / Explorer-Links verweisen auf
magicalhash.com - Keine Token-Preis-Behauptungen
- Keine Sprache, die garantierte Einnahmen verspricht
- Alle Tx-Hashes sind echt (aus der Laufzeitverifizierung, keine Platzhalter)
Quickstart-Checkliste
Beim Generieren einer MAGNE-Landingpage:
- Diese SKILL.md lesen
- NARA-Konzepte → MAGNE-Konzepte abbilden (Abschnitt 5)
- Echte Laufzeitdaten verwenden (Abschnitt 6) — keine Platzhalter-Hashes
- 9 Abschnitte (Abschnitt 3) in der Reihenfolge erstellen
- MAGNE Agent-Native Terminal Stil anwenden (Abschnitt 1)
- Compliance-Checkliste durchgehen (Abschnitt 7)
- Überprüfen: Seite lädt, Terminal-Demo wird gerendert, alle Links verweisen auf magicalhash.com
Referenzlinks
- SKILL.md-Quelle:
~/.openclaw/workspace-main/skills/magne-agent-landing/SKILL.md - MAGNE Agent Pay Demo:
https://github.com/jerrysohigh-create/magne-agent-pay-demo - M Hash L2:
https://github.com/magne-ai/M-Hash-L2 - nara.build (Inspiration):
https://nara.build