SKILL.md — MAGNE 代理登陆页生成器
目的
生成符合 MAGNE Agent-Native 终端网页风格 的 MAGNE 产品登陆页——灵感源自 nara.build 的代理经济体美学，但映射到 MAGNE 的特定叙事：基于 M Hash L2 的 AI 代理支付轨道。
在以下请求时使用此技能：
- 创建 MAGNE 产品登陆页
- 构建 MAGNE 代理原生网站
- 重构/重建 magne-ai 或 MAGNE 相关页面
- 生成面向开发者的 MAGNE 演示页面
1. 视觉风格 — MAGNE Agent-Native 终端网页
风格名称： MAGNE Agent-Native 终端网页
视觉关键词
深色，终端原生，代理经济，协议仪表盘，
等宽字体，密集数据卡片，网格线，终端发光，
霓虹极简主义，可选的扫描线，CLI 代码块
背景
- 基色:
#050810或#070910(接近黑色，非纯黑) - 径向渐变: 微妙的中心发光，非常暗
- 网格: 低透明度的薄
1px线 (rgba(88,166,255,0.04)) - 可选:
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 | 高对比度，霓虹色强调 |
调色板
背景: #070910 (接近黑色)
表面: #0d1520 (卡片背景)
边框: #1a2a3a (微妙)
文本主色: #e6edf3
文本次要: #8b949e
强调色-青色: #39d0d6 (MAGNE 主要强调色)
强调色-紫色: #a371f7
强调色-绿色: #3fb950 (成功/已验证)
强调色-黄色: #d29922 (警告/待定)
强调色-红色: #f85149 (错误)
霓虹发光: rgba(57,208,214,0.2) (用于终端发光效果)
组件模式
- 密集数据卡片: 小内边距，紧密边框，等宽值
- 终端块: 黑色背景 (
#010108)，青色/绿色文本，无圆角或极小圆角 (2px) - 状态指示器: 小圆点或
✓/✕/⏳前缀 - 网格布局: 主要使用 CSS Grid，而非过多 Flexbox
- 无英雄图片: 偏好终端输出、代码块、数据展示
2. 叙事结构
MAGNE 英雄叙事
请勿直接复制 nara.build。映射其概念：
NARA 模式：
"下一个经济行动者不是人类"
→ 身份 / Aapps / 货币
→ CLI: inspect / call / settle / watch
MAGNE 模式 (AI 代理支付轨道)：
"代理可以思考。但它们仍然无法安全支付。"
→ 没有安全授权
→ 没有代理支付
→ 没有可验证的凭证
→ MAGNE Agent Pay 解决了这个问题
MAGNE 核心叙事模块
问题:
AI 代理可以执行任务。
但它们无法可靠地接收付款。
传统 API 返回 401。
传统支付缺乏可审计性。
解决方案:
MAGNE Agent Pay = 兼容 x402 的支付流程
+ M Hash L2 结算
+ 链上 AI 任务凭证
+ MAGNE Phone 作为授权层
流程:
代理创建任务 → API 返回 402 并附带支付元数据
→ 用户在 MAGNE Phone / 钱包中授权
→ mMHA 或支持的资产转移
→ 验证者在 M Hash L2 上验证
→ 链上记录 AI 任务凭证
→ 不可变，任何一方均可审计
逐节叙事
| 节 | 标题能量 | 副文本 |
|---|---|---|
| 英雄区 | 一句话，有力，以代理为中心 | 用一句话解释核心价值 |
| 问题网格 | 三个问题，直白 | 此节尚无解决方案 — 仅展示痛点 |
| 解决方案流程 | 展示完整循环 | 逐步，无术语 |
| 现场演示 | CLI 作为真实输出 | 实际的终端风格交互 |
| 凭证层 | 为什么凭证重要 | 信任、审计、合规 |
| 手机授权 | 为什么重要 | 安全授权前提 |
| 开发者 SDK | 简短，技术性 | SKILL.md 即是产品 |
| 验证状态 | 诚实，密集 | 测试网/本地 vs 生产 |
| 路线图 + CTA | 简短，清晰 | 下一步是什么，有什么阻碍 |
3. 页面模块规则 — 9 个必需部分
此技能生成的每个 MAGNE 登陆页必须包含以下 9 个模块：
01 — 英雄区
- 一个锐利的标题 (最多 10 个词)
- 一个副标题 (最多 20 个词)
- 无库存照片，无插图
- 可选：微妙的动画网格背景
- CTA: "查看演示" 或 "阅读 SKILL.md"
02 — 问题网格
- 3 列或 3 行网格
- 每个问题：图标 (终端风格) + 粗体标签 + 1 行描述
- 问题：
- 无安全授权
- 无代理支付流程
- 无可验证凭证
- 直白，此节尚无解决方案
03 — 代理支付流程
- 可视化图表或 ASCII 风格流程图
- 5 个步骤：任务 → 402 → 授权 → 结算 → 凭证
- 每个步骤：编号 + 标签 + 1 行描述
- 风格：终端/网格，非气泡图
04 — 现场演示终端
- 这是最重要的模块
- 在终端块中模拟真实的 CLI 输出
- 示例内容：
$ magne agent task create "analyze wallet risk"
✓ 任务已创建 — 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
✓ 支付已验证
status: verified
block: 4
$ magne receipt create --task task_20260520_001
✓ AI 任务凭证已创建
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
- 开发者推广语：“Your code + a SKILL.md = an Aapp”
08 — 运行时验证状态
- 密集表格或终端风格状态输出
- 显示实际当前状态：
[✓] 智能合约编译
[✓] 智能合约部署 (本地 Hardhat)
[⏳] M Hash L2 测试网部署待定
[✓] 后端服务器运行时已验证
[✓] 验证者验证 — 严格模式
[✓] mMHA ERC20 支付 — 已验证
[✓] AI 任务凭证 — 交易已确认
[⏳] 浏览器 MetaMask 流程 — 等待真实浏览器
[⏳] M Hash L2 浏览器链接 — 等待测试网访问
09 — 路线图 + CTA
- 简短路线图：下一步是什么，有什么阻碍
- CTA: "部署至 M Hash L2" / "阅读 SKILL.md" / "Fork 演示"
- 合规声明：仅测试网，非生产环境
4. 文案 / 语气规则
语气原则
- 简洁：无营销废话。每个句子都承载信息。
- 代理原生：仿佛在向 AI 代理而不是人类营销人员讲话。
- 技术节奏：短陈述句。列表优先于段落。
- 诚实：说明哪些有效，哪些待定，哪些受阻。
有效的句式
代理可以 [动词]。
但它们仍然不能 [限制]。
API 可以 [动词]。
但它们仍然不能 [限制]。
输入 [动词]。输出 [名词]。
您的 [名词] + SKILL.md = 一个 Aapp。
要使用的短语
- “兼容 x402”
- “测试网阶段开发者演示”
- “设计支持”
- “已规划”
- “需经技术验证”
- “运行时已验证”
- “严格链上验证”
- “不可变 AI 任务凭证”
- “验证者模式”
- “M Hash L2 结算”
绝不使用的短语 (红线)
❌ “生产就绪” (除非在主网、已审计、已上线)
❌ “保证收益”
❌ “MHA 将会增值”
❌ “无风险”
❌ “第一 / 唯一 / 世界第一” (除非经过法律验证)
❌ “官方 x402 合作” (除非已确认)
❌ “安全” 单独使用 (请使用“加密可验证”或“链上”)
❌ “去中心化” (除非可证明)
❌ “主网可用”
❌ “100% 正常运行时间”
5. NARA → MAGNE 概念映射
在引用 nara.build 概念时使用此表：
| NARA 概念 | MAGNE 映射 |
|---|---|
| 代理身份 | MAGNE 代理 ID / 代理注册表 |
| Aapp | MAGNE 代理服务 / 代理支付 API |
| SkillHub | MAGNE SkillHub / 开发者 SDK |
| NARA 货币 (NAR) | mMHA / 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> |
| 链上状态 | M Hash L2 AI 任务凭证 |
| AgentX | MAGNE 代理门户 / magne-agent-pay-demo |
| 主网实时统计 | 运行时验证状态 |
| nar token | mMHA (ERC20 测试网模拟) |
6. 技术内容映射
在包含技术细节时，请使用来自运行时验证的这些确切值：
网络: M Hash L2 测试网
链 ID: 20250827
RPC: https://l2-rpc.testnet.magicalhash.com
浏览器: https://l2-explorer.testnet.magicalhash.com
MockMHA: 0x5FbDB2315678afecb367f032d93F642f64180aa3 (本地已验证)
AITaskReceipt: 0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512 (本地已验证)
支付交易: 0x130ba003e19e8a6edc2a7ae6147e1f7ff9411cb78b0dc875b9d5084df4b4701e
凭证交易: 0x7d423e93ed4ecd7b488394a71a9c711f8b30b7b1515e34a537030abce785a705
凭证 ID: 0x428d5f6dc07adf8f473793dcdc01c8041d979a521084759ca2e10dcb7152fe91
本地区块: 4
7. 交付物格式规则
使用此技能生成的每个输出必须包含：
文件结构
magne-agent-landing/
├── index.html # 单页，所有部分内联
├── style.css # MAGNE Agent-Native 终端风格
├── app.js # 用于终端动画的最小化 JS
├── README.md # 链接至 SKILL.md + 部署说明
└── SKILL.md # 此技能的引用副本
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 (除非明确要求)
- 移动优先，
min-width断点在 768px 和 1200px - 终端发光:
box-shadow: 0 0 20px rgba(57,208,214,0.15)
文案要求
- 标题：最多 10 个词
- 副标题：最多 20 个词
- 正文段落：每个最多 2 句话
- 无 lorem ipsum
- 所有状态声明必须与实际运行时状态匹配
合规清单
- 除非在已验证的主网上，否则不使用“生产就绪”
- 英雄区有测试网徽章
- 页脚有风险警告
- 链 ID / RPC / 浏览器链接指向
magicalhash.com - 无代币价格声明
- 无保证收益语言
- 所有交易哈希均为真实值 (来自运行时验证，非占位符)
快速启动清单
生成 MAGNE 登陆页时：
- 阅读本 SKILL.md
- 将 NARA 概念映射至 MAGNE 概念 (第 5 节)
- 使用真实运行时数据 (第 6 节) — 请勿使用占位符哈希
- 按顺序构建 9 个部分 (第 3 节)
- 应用 MAGNE Agent-Native 终端风格 (第 1 节)
- 执行合规检查清单 (第 7 节)
- 验证：页面加载、终端演示渲染、所有链接指向 magicalhash.com
参考链接
- SKILL.md 源文件:
~/.openclaw/workspace-main/skills/magne-agent-landing/SKILL.md - 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 (灵感来源):
https://nara.build