SKILL.md — Générateur de page d'atterrissage Agent MAGNE
Objectif
Générer des pages d'atterrissage de produits MAGNE dans le style Web Terminal natif pour agents MAGNE — inspiré de l'esthétique d'économie d'agents de nara.build, mais adapté au récit spécifique de MAGNE : des rails de paiement pour agents IA sur M Hash L2.
Utilisez cette compétence lorsqu'on vous demande de :
- Créer une page d'atterrissage pour un produit MAGNE
- Construire un site Web natif pour agent MAGNE
- Refactoriser / reconstruire des pages liées à magne-ai ou MAGNE
- Générer des pages de démonstration destinées aux développeurs
1. Style visuel — Web Terminal natif pour agents MAGNE
Nom du style : Web Terminal natif pour agents MAGNE
Mots-clés visuels
sombre, natif terminal, économie d'agents, tableau de bord de protocole,
police mono, cartes de données denses, lignes de grille, lueur de terminal,
minimalisme néon, scanline optionnel, blocs CLI
Arrière-plan
- Base :
#050810ou#070910(presque noir, pas noir pur) - Dégradé radial : lueur centrale subtile, très sombre
- Grille : lignes fines
1pxà faible opacité (rgba(88,166,255,0.04)) - Optionnel : superposition scanline à pas de
2px, opacité 3% - À éviter : dégradés SaaS brillants, UI à bulles arrondies, verre dépoli style Apple
Typographie
| Élément | Police | Style |
|---|---|---|
| Titre principal | Space Grotesk ou Inter, fallback system-ui | Gras, 4-6rem, contraste élevé, interlignage serré |
| Corps de texte | Inter ou system-ui | Poids 400-500, net et concis |
| Étiquettes techniques | JetBrains Mono ou monospace | Majuscules, espacement des lettres : 0.1em, petit |
| Blocs terminal/code | JetBrains Mono ou Consolas | Monospace, fond de carte sombre |
| Valeurs de données | JetBrains Mono | Contraste élevé, accent néon |
Palette de couleurs
Arrière-plan : #070910 (presque noir)
Surface : #0d1520 (fond des cartes)
Bordure : #1a2a3a (subtile)
Texte Principal : #e6edf3
Texte Secondaire :#8b949e
Accent Cyan : #39d0d6 (accent principal MAGNE)
Accent Violet : #a371f7
Accent Vert : #3fb950 (succès/vérifié)
Accent Jaune : #d29922 (avertissement/en attente)
Accent Rouge : #f85149 (erreur)
Lueur Néon : rgba(57,208,214,0.2) (pour les effets de lueur de terminal)
Modèles de composants
- Cartes de données denses : petits remplissages, bordures serrées, valeurs monospace
- Blocs de terminal : fond noir (
#010108), texte cyan/vert, pas de coins arrondis ou très minimes (2px) - Indicateurs d'état : petit point ou préfixe
✓/✕/⏳ - Disposition en grille : CSS Grid en priorité, pas de Flexbox lourd
- Pas d'images principales : privilégier les sorties de terminal, blocs de code, données
2. Structure narrative
Récit principal MAGNE
Ne copiez pas nara.build directement. Mappez ses concepts :
Modèle NARA :
"Les prochains acteurs économiques ne sont pas humains"
→ Identité / Aapps / Monnaie
→ CLI : inspect / call / settle / watch
Modèle MAGNE (rails de paiement pour agents IA) :
"Les agents peuvent penser. Ils ne peuvent toujours pas payer en toute sécurité."
→ Pas d'autorisation sécurisée
→ Pas de paiements pour agents
→ Pas de reçus vérifiables
→ MAGNE Agent Pay résout ce problème
Blocs narratifs principaux MAGNE
PROBLÈME :
Les agents IA peuvent exécuter des tâches.
Ils ne peuvent pas recevoir de paiement fiable.
Les API traditionnelles renvoient 401.
Les paiements traditionnels manquent d'auditabilité.
SOLUTION :
MAGNE Agent Pay = flux de paiement compatible x402
+ règlement M Hash L2
+ Reçu de tâche IA on-chain
+ MAGNE Phone comme couche d'autorisation
FLUX :
Agent crée tâche → API renvoie 402 avec métadonnées de paiement
→ L'utilisateur autorise dans MAGNE Phone / Wallet
→ Transfert de mMHA ou d'un actif pris en charge
→ Le facilitateur vérifie sur M Hash L2
→ Reçu de tâche IA enregistré on-chain
→ Immuable, vérifiable par toute partie
Récit par section
| Section | Énergie du titre | Sous-texte |
|---|---|---|
| Hero | Une phrase, percutante, centrée sur l'agent | Une ligne expliquant la valeur fondamentale |
| Grille de problèmes | Trois problèmes, nets | Pas encore de solution — juste la douleur |
| Flux de solution | Montrer le cycle complet | Pas à pas, sans jargon |
| Démo en direct | CLI comme sortie réelle | Interaction de style terminal réelle |
| Couche de reçus | Pourquoi les reçus comptent | Confiance, audit, conformité |
| Autorisation téléphonique | Pourquoi c'est important | Prémisse d'autorisation sécurisée |
| SDK Développeur | Court, technique | SKILL.md est le produit |
| Statut de vérification | Honnête, dense | Testnet/local vs production |
| Roadmap + CTA | Court, clair | Quelle est la prochaine étape, ce qui est bloqué |
3. Règles des modules de page — 9 sections obligatoires
Chaque page d'atterrissage MAGNE générée par cette compétence doit inclure ces 9 modules :
01 — Hero
- Un titre percutant (10 mots max)
- Un sous-titre (20 mots max)
- Pas de photos libres de droits, pas d'illustrations
- Optionnel : fond de grille animé subtil
- CTA : "Voir la démo" ou "Lire SKILL.md"
02 — Grille de problèmes
- Grille de 3 colonnes ou 3 lignes
- Chaque problème : icône (style terminal) + étiquette en gras + description d'une ligne
- Problèmes :
- Pas d'autorisation sécurisée
- Pas de flux de paiement pour agents
- Pas de reçus vérifiables
- Net, pas encore de solution dans cette section
03 — Flux Agent Pay
- Diagramme visuel ou organigramme de style ASCII
- 5 étapes : Tâche → 402 → Autorisation → Règlement → Reçu
- Chaque étape : numéro + étiquette + description d'une ligne
- Style : terminal/grille, pas de diagramme à bulles
04 — Terminal de démo en direct
- C'est le module le plus important
- Imiter une sortie CLI réelle dans un bloc de terminal
- Exemple de contenu :
$ magne agent task create "analyser le risque du portefeuille"
✓ tâche créée — task_20260520_001
$ magne api call wallet-risk --wallet 0x742d...
✕ 402 Paiement requis
montant : 0,01 mMHA
destinataire : 0xf39...2266
chaîne : mhash-l2-testnet (20250827)
$ magne pay settle --tx 0x130b...701e --network mhash-l2
✓ paiement vérifié
statut : vérifié
bloc : 4
$ magne receipt create --task task_20260520_001
✓ Reçu de tâche IA créé
receiptId : 0x428d...fe91
explorateur : https://l2-explorer.testnet.magicalhash.com/tx/0x7d42...
- Utilisez des hashs de transaction et des adresses réelles issues de la vérification d'exécution lorsqu'ils sont disponibles
05 — Couche de reçus
- Expliquez pourquoi les reçus on-chain sont importants
- Détail technique : événement
AITaskReceiptCreated(receiptId, taskId, user, provider, amount, token, paymentTxHash, timestamp) - Affichez les champs réels de l'événement
- Insistez sur : immuable, programmable, vérifiable
06 — Autorisation téléphonique sécurisée
- Section brève sur MAGNE Phone en tant que couche d'autorisation
- "MAGNE transforme les téléphones sécurisés en terminaux de paiement pour agents IA"
- Pas détaillé — teaser, pas de spécification complète
07 — SDK Développeur / SKILL.md
- Présentez SKILL.md comme le produit
- Bloc de code : le modèle de contrat principal de SKILL.md
- Lien vers le SKILL.md réel
- Pitch développeur : "Votre code + un SKILL.md = une Aapp"
08 — Statut de vérification d'exécution
- Tableau dense ou sortie de statut de style terminal
- Afficher l'état actuel réel :
[✓] Compilation des contrats intelligents
[✓] Déploiement des contrats intelligents (Hardhat local)
[⏳] Déploiement testnet M Hash L2 en attente
[✓] Backend serveur vérifié en exécution
[✓] Vérification du facilitateur — mode strict
[✓] Paiement mMHA ERC20 — vérifié
[✓] Reçu de tâche IA — tx confirmée
[⏳] Flux MetaMask navigateur — en attente de navigateur réel
[⏳] Lien explorateur M Hash L2 — en attente d'accès testnet
09 — Roadmap + CTA
- Roadmap courte : prochaines étapes, ce qui est bloqué
- CTA : "Déployer sur M Hash L2" / "Lire le SKILL.md" / "Forker la démo"
- Note de conformité : testnet uniquement, pas en production
4. Règles de copie / Ton
Principes de ton
- Concis : Pas de blabla marketing. Chaque phrase apporte des informations.
- Natif agent : Écrivez comme si vous vous adressiez à un agent IA, pas à un marketeur humain.
- Rythme technique : Phrases déclaratives courtes. Listes plutôt que paragraphes.
- Honnête : Indiquez ce qui fonctionne, ce qui est en attente, ce qui est bloqué.
Modèles de phrases qui fonctionnent
Les agents peuvent [verbe].
Ils ne peuvent toujours pas [limitation].
Les API peuvent [verbe].
Elles ne peuvent toujours pas [limitation].
[Verbe] entrée. [Nom] sortie.
Votre [nom] + un SKILL.md = une Aapp.
Expressions À UTILISER
- "compatible x402"
- "démo développeur en phase testnet"
- "conçu pour prendre en charge"
- "prévu"
- "soumis à validation technique"
- "vérifié en exécution"
- "vérification on-chain stricte"
- "Reçu de tâche IA immuable"
- "modèle de facilitateur"
- "règlement M Hash L2"
Expressions À NE JAMAIS UTILISER (Lignes Rouges)
❌ "prêt pour la production" (sauf si sur mainnet, audité, en direct)
❌ "revenu garanti"
❌ "MHA va s'apprécier"
❌ "sans risque"
❌ "premier / seul / premier mondial" (sauf si vérifié légalement)
❌ "partenariat officiel x402" (sauf si confirmé)
❌ "sécurisé" seul (utilisez "cryptographiquement vérifiable" ou "on-chain")
❌ "décentralisé" (sauf si prouvable)
❌ "disponible sur le mainnet"
❌ "disponibilité 100%"
5. Correspondance de concepts NARA → MAGNE
Utilisez ce tableau lorsque vous faites référence aux concepts de nara.build :
| Concept NARA | Correspondance MAGNE |
|---|---|
| Identité d'agent | ID Agent MAGNE / Registre d'agents |
| Aapp | Service Agent MAGNE / API Agent Pay |
| SkillHub | MAGNE SkillHub / SDK Développeur |
| Monnaie NARA (NAR) | mMHA / Actif de règlement pris en charge 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> |
| État on-chain | Reçu de tâche IA M Hash L2 |
| AgentX | Portail Agent MAGNE / magne-agent-pay-demo |
| Statistiques live mainnet | Statut de vérification d'exécution |
| jeton nar | mMHA (simulation ERC20 testnet) |
6. Correspondance du contenu technique
Lorsque vous incluez des détails techniques, utilisez ces valeurs exactes issues de la vérification d'exécution :
Réseau : M Hash L2 Testnet
ID de chaîne : 20250827
RPC : https://l2-rpc.testnet.magicalhash.com
Explorateur : https://l2-explorer.testnet.magicalhash.com
MockMHA : 0x5FbDB2315678afecb367f032d93F642f64180aa3 (local vérifié)
AITaskReceipt : 0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512 (local vérifié)
Tx paiement : 0x130ba003e19e8a6edc2a7ae6147e1f7ff9411cb78b0dc875b9d5084df4b4701e
Tx reçu : 0x7d423e93ed4ecd7b488394a71a9c711f8b30b7b1515e34a537030abce785a705
ID reçu : 0x428d5f6dc07adf8f473793dcdc01c8041d979a521084759ca2e10dcb7152fe91
Bloc (local) : 4
7. Règles de format des livrables
Chaque sortie générée avec cette compétence doit inclure :
Structure de fichiers
magne-agent-landing/
├── index.html # Page unique, toutes les sections en ligne
├── style.css # Style Terminal natif pour agents MAGNE
├── app.js # JS minimal pour l'animation du terminal
├── README.md # Lien vers SKILL.md + notes de déploiement
└── SKILL.md # Copie de référence de cette compétence
Exigences HTML
<!DOCTYPE html>,<html lang="fr">- Disposition CSS Grid principale
- Responsive jusqu'à 375px de largeur
- Pas de dépendances JS externes sauf :
https://cdn.jsdelivr.net/npm/[email protected]/dist/ethers.umd.min.js(lorsque l'intégration de portefeuille est nécessaire)
- Le bloc de terminal doit utiliser
<pre><code>avec un échappement approprié - Tous les ID de section :
hero,problems,flow,demo,receipts,phone,sdk,status,roadmap
Exigences CSS
- Propriétés personnalisées CSS pour toutes les couleurs (
:root) - Pas de Tailwind (sauf demande explicite)
- Mobile-first avec points d'arrêt
min-widthà 768px et 1200px - Lueur de terminal :
box-shadow: 0 0 20px rgba(57,208,214,0.15)
Exigences de copie
- Titres : 10 mots max
- Sous-titres : 20 mots max
- Paragraphes de corps : 2 phrases max chacun
- Pas de lorem ipsum
- Toutes les affirmations de statut doivent correspondre à l'état d'exécution réel
Liste de contrôle de conformité
- Pas de "prêt pour la production" sauf si sur mainnet vérifié
- Badge Testnet sur le hero
- Avertissement de risque dans le pied de page
- Les liens ID de chaîne / RPC / Explorateur pointent vers
magicalhash.com - Pas de revendications sur le prix du jeton
- Pas de langage de revenu garanti
- Tous les hashs de transaction sont réels (issus de la vérification d'exécution, pas de placeholder)
Liste de contrôle de démarrage rapide
Lors de la génération d'une page d'atterrissage MAGNE :
- Lisez ce SKILL.md
- Mappez les concepts NARA → concepts MAGNE (Section 5)
- Utilisez les données d'exécution réelles (Section 6) — n'utilisez pas de hashs de placeholder
- Construisez les 9 sections (Section 3) dans l'ordre
- Appliquez le style Terminal natif pour agents MAGNE (Section 1)
- Exécutez la liste de contrôle de conformité (Section 7)
- Vérifiez : la page se charge, la démo du terminal s'affiche, tous les liens pointent vers magicalhash.com
Liens de référence
- Source SKILL.md :
~/.openclaw/workspace-main/skills/magne-agent-landing/SKILL.md - Démo 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 (inspiration) :
https://nara.build