SKILL.md — MAGNE 代理登陸頁面生成器

目的

為 MAGNE 產品生成登陸頁面，採用 MAGNE 代理原生終端網頁風格 — 靈感來自 nara.build 的代理經濟美學，但對應到 MAGNE 的獨特敘事：在 M Hash L2 上的 AI 代理支付軌道。

當被要求執行以下操作時使用此技能：

建立一個 MAGNE 產品登陸頁面
建立一個 MAGNE 代理原生網站
重構/重建 magne-ai 或與 MAGNE 相關的頁面
生成面向開發者的 MAGNE 示範頁面

1. 視覺風格 — MAGNE 代理原生終端網頁

風格名稱： MAGNE 代理原生終端網頁

視覺關鍵字

dark, terminal-native, agent economy, protocol dashboard,
mono font, dense data cards, grid lines, terminal glow,
neon minimalism, scanline optional, CLI blocks

背景

底色：#050810 或 #070910（接近黑色，非純黑）
徑向漸層：微妙的中心發光，非常暗
網格：低透明度（rgba(88,166,255,0.04)）的 1px 細線
可選：2px 間距、3% 透明度的掃描線疊加
避免：光澤 SaaS 漸層、圓角氣泡 UI、Apple 風格的毛玻璃

字體排印

元素	字型	樣式
英雄標題	`Space Grotesk` 或 `Inter`，後備 `system-ui`	粗體，4-6rem，高對比度，緊湊行距
內文	`Inter` 或 `system-ui`	400-500 字重，銳利簡潔
技術標籤	`JetBrains Mono` 或 `monospace`	大寫，字元間距：0.1em，小型
終端/代碼區塊	`JetBrains Mono` 或 `Consolas`	等寬字體，深色卡片背景
資料值	`JetBrains Mono`	高對比度，霓虹強調色

色盤

Background:    #070910 (near-black)
Surface:       #0d1520 (card backgrounds)
Border:        #1a2a3a (subtle)
Text Primary:  #e6edf3
Text Secondary:#8b949e
Accent Cyan:   #39d0d6 (MAGNE primary accent)
Accent Purple: #a371f7
Accent Green:  #3fb950 (success/verified)
Accent Yellow: #d29922 (warning/pending)
Accent Red:    #f85149 (error)
Neon Glow:     rgba(57,208,214,0.2) (for terminal glow effects)

元件模式

密集資料卡片：小內距，緊湊邊框，等寬字體數值
終端區塊：黑色背景（#010108），青色/綠色文字，無圓角或極小（2px）
狀態指示器：小圓點或 ✓/✕/⏳ 前綴
網格佈局：主要使用 CSS Grid，非 Flexbox
無英雄圖像：偏好終端輸出、程式碼區塊、資料

2. 敘事結構

MAGNE 英雄敘事

請勿直接複製 nara.build。映射其概念：

NARA 模式：

"Next economic actors aren't human"
→ Identity / Aapps / Currency
→ CLI: inspect / call / settle / watch

MAGNE 模式（AI 代理支付軌道）：

"Agents can think. They still cannot safely pay."
→ No secure authorization
→ No agent payments
→ No verifiable receipts
→ MAGNE Agent Pay solves this

MAGNE 核心敘事區塊

PROBLEM:
AI agents can execute tasks.
They cannot receive reliable payment.
Traditional APIs return 401.
Traditional payments lack auditability.

SOLUTION:
MAGNE Agent Pay = x402-compatible payment flow
+ M Hash L2 settlement
+ AI Task Receipt on-chain
+ MAGNE Phone as authorization layer

FLOW:
Agent creates task → API returns 402 with payment metadata
→ User authorizes in MAGNE Phone / Wallet
→ mMHA or supported asset transfers
→ Facilitator verifies on M Hash L2
→ AI Task Receipt recorded on-chain
→ Immutable, auditable by any party

各區塊敘事

區塊	標題能量	附註文字
英雄區塊	一句話，強而有力，以代理為中心	一行解釋核心價值
問題網格	三個問題，赤裸裸	暫無解決方案 — 僅有痛點
解決方案流程	展示完整循環	逐步，無術語
即時展示	CLI 作為真實輸出	實際終端風格互動
收據層	為何收據重要	信任、審計、合規
手機授權	為何重要	安全授權前提
開發者 SDK	簡潔，技術性	SKILL.md 即是產品
驗證狀態	誠實，密集	測試網/本機 vs 生產環境
路線圖 + CTA	簡短，清晰	下一步是什麼，什麼被阻擋

3. 頁面模組規則 — 9 個必要區塊

由此技能生成的每個 MAGNE 登陸頁面都必須包含以下 9 個模組：

01 — 英雄區塊

一個犀利的標題（最多 10 個字）
一個副標題（最多 20 個字）
無庫存照片，無插圖
可選：微妙的動畫網格背景
CTA：「查看示範」或「閱讀 SKILL.md」

02 — 問題網格

3 列或 3 行網格
每個問題：圖示（終端風格）+ 粗體標籤 + 1 行描述
問題：
1. 沒有安全授權
2. 沒有代理支付流程
3. 沒有可驗證的收據
此區塊中呈現赤裸裸的痛點，暫不提供解決方案

03 — 代理支付流程

視覺圖表或 ASCII 風格流程圖
5 個步驟：任務 → 402 → 授權 → 結算 → 收據
每個步驟：編號 + 標籤 + 1 行描述
風格：終端/網格，非泡泡圖

04 — 即時展示終端機

這是最重要的模組
在終端區塊中模仿真實的 CLI 輸出
範例內容：

$ 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...

當執行驗證數據可用時，使用真實的交易哈希和地址

05 — 收據層

解釋鏈上收據為何重要
技術細節：事件 AITaskReceiptCreated(receiptId, taskId, user, provider, amount, token, paymentTxHash, timestamp)
展示實際的事件欄位
強調：不可變、可程式化、可驗證

06 — 安全手機授權

關於 MAGNE Phone 作為授權層的簡要說明
「MAGNE 將安全手機變成 AI 代理支付終端」
不需詳細說明 — 僅為預告，非完整規格

07 — 開發者 SDK / SKILL.md

將 SKILL.md 展示為產品
程式碼區塊：核心的 SKILL.md 合約模式
連結到實際的 SKILL.md
開發者訴求：「你的程式碼 + 一個 SKILL.md = 一個 Aapp」

08 — 執行驗證狀態

密集表格或終端風格狀態輸出
展示實際的當前狀態：

[✓] Smart contracts compile
[✓] Smart contracts deploy (local Hardhat)
[⏳] M Hash L2 testnet deployment pending
[✓] Backend server runtime verified
[✓] Facilitator verify — strict mode
[✓] mMHA ERC20 payment — verified
[✓] AI Task Receipt — tx confirmed
[⏳] Browser MetaMask flow — pending real browser
[⏳] M Hash L2 explorer link — pending testnet access

09 — 路線圖 + CTA

簡短路線圖：下一步是什麼，什麼被阻擋
CTA：「部署到 M Hash L2」/「閱讀 SKILL.md」/「Fork 此示範」
合規性備註：僅限測試網，非生產環境

4. 文案 / 語氣規則

語氣原則

簡潔：無行銷廢話。每個句子都承載資訊。
代理原生：如同對 AI 代理說話，而非人類行銷人員。
技術節奏：簡短的陳述句。清單優於段落。
誠實：說明哪些有效、哪些待辦、哪些被阻擋。

有效的句式

Agents can [verb].
They still cannot [limitation].

APIs can [verb].
They still cannot [limitation].

[Verb] in. [Noun] out.

Your [noun] + a SKILL.md = an Aapp.

要使用的詞語

「x402-compatible」
「testnet-stage developer demo」
「designed to support」
「planned」
「subject to technical validation」
「runtime verified」
「strict on-chain verification」
「immutable AI Task Receipt」
「facilitator pattern」
「M Hash L2 settlement」

切勿使用的詞語（紅線）

❌ "production-ready" (unless on mainnet, audited, live)
❌ "guaranteed revenue"
❌ "MHA will appreciate"
❌ "risk-free"
❌ "first / only / world's first" (unless legally verified)
❌ "official x402 partnership" (unless confirmed)
❌ "secure" alone (use "cryptographically verifiable" or "on-chain")
❌ "decentralized" (unless provably so)
❌ "mainnet available"
❌ "100% uptime"

5. NARA → MAGNE 概念映射

在引用 nara.build 概念時使用此表：

NARA 概念	MAGNE 映射
Agent Identity	MAGNE Agent ID / Agent Registry
Aapp	MAGNE Agent Service / Agent Pay API
SkillHub	MAGNE SkillHub / Developer SDK
NARA Currency (NAR)	mMHA / MHA-supported settlement 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 state	M Hash L2 AI Task Receipt
AgentX	MAGNE Agent Portal / magne-agent-pay-demo
mainnet live stats	Runtime Verification Status
nar token	mMHA (ERC20 testnet mock)

6. 技術內容映射

在包含技術細節時，請使用來自執行驗證的這些確切值：

Network:       M Hash L2 Testnet
Chain ID:      20250827
RPC:           https://l2-rpc.testnet.magicalhash.com
Explorer:      https://l2-explorer.testnet.magicalhash.com
MockMHA:       0x5FbDB2315678afecb367f032d93F642f64180aa3 (local verified)
AITaskReceipt: 0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512 (local verified)
Payment tx:    0x130ba003e19e8a6edc2a7ae6147e1f7ff9411cb78b0dc875b9d5084df4b4701e
Receipt tx:    0x7d423e93ed4ecd7b488394a71a9c711f8b30b7b1515e34a537030abce785a705
Receipt ID:     0x428d5f6dc07adf8f473793dcdc01c8041d979a521084759ca2e10dcb7152fe91
Block (local): 4

7. 交付格式規則

每個使用此技能生成的輸出都必須包含：

檔案結構

magne-agent-landing/
├── index.html          # Single page, all sections inline
├── style.css           # MAGNE Agent-Native Terminal style
├── app.js              # Minimal JS for terminal animation
├── README.md           # Link to SKILL.md + deployment notes
└── SKILL.md           # Reference copy of this skill

HTML 需求

<!DOCTYPE html>，<html lang="en">
主要使用 CSS Grid 佈局
響應式，支援到 375px 寬度
無外部 JS 依賴，除非需要錢包整合時使用：
- https://cdn.jsdelivr.net/npm/[email protected]/dist/ethers.umd.min.js
終端區塊必須使用 <pre><code> 並正確跳脫
所有區塊 ID：hero，problems，flow，demo，receipts，phone，sdk，status，roadmap

CSS 需求

使用 CSS 自訂屬性定義所有顏色（:root）
不使用 Tailwind（除非明確要求）
行動優先，在 768px 和 1200px 設定 min-width 斷點
終端發光效果：box-shadow: 0 0 20px rgba(57,208,214,0.15)

文案需求

標題：最多 10 個字
副標題：最多 20 個字
內文段落：每個最多 2 個句子
不使用 Lorem Ipsum
所有狀態聲明必須與實際執行狀態相符

合規性檢查清單

除非在經過驗證的主網上，否則不使用「production-ready」
英雄區塊中設有測試網徽章
頁尾包含風險警告
Chain ID / RPC / 瀏覽器連結指向 magicalhash.com
無代幣價格聲明
無保證收益的語言
所有交易哈希均為真實（來自執行驗證，非佔位符）

快速入門檢查清單

生成 MAGNE 登陸頁面時：

閱讀此 SKILL.md
將 NARA 概念映射到 MAGNE 概念（第 5 節）
使用真實的執行階段數據（第 6 節）— 請勿使用佔位符哈希
依序建立 9 個區塊（第 3 節）
套用 MAGNE 代理原生終端風格（第 1 節）
執行合規性檢查清單（第 7 節）
驗證：頁面載入、終端示範渲染、所有連結指向 magicalhash.com

參考連結

SKILL.md 原始位置：~/.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（靈感來源）：https://nara.build

在你喜歡的 AI 中提問

說明文件