SKILL.md — MAGNE エージェントランディングページジェネレーター
目的
MAGNE 製品ランディングページをMAGNE Agent-Native Terminal Web Styleで生成します。このスタイルは nara.build のエージェントエコノミー美学に触発されていますが、MAGNE 固有のナラティブ（M Hash L2 上の AI エージェント向け決済レール）にマッピングされています。
このスキルは以下の依頼があった場合に使用します:
- MAGNE 製品ランディングページの作成
- MAGNE エージェントネイティブ Web サイトの構築
- magne-ai または MAGNE 関連ページのリファクタリング/再構築
- 開発者向け MAGNE デモページの生成
1. ビジュアルスタイル — MAGNE Agent-Native Terminal Web
スタイル名: MAGNE Agent-Native Terminal Web
ビジュアルキーワード
dark, terminal-native, agent economy, protocol dashboard,
mono font, dense data cards, grid lines, terminal glow,
neon minimalism, scanline optional, CLI blocks
背景
- ベース:
#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 | 高コントラスト、ネオンアクセント |
カラーパレット
Background: #070910 (ほぼ黒)
Surface: #0d1520 (カード背景)
Border: #1a2a3a (微妙)
Text Primary: #e6edf3
Text Secondary:#8b949e
Accent Cyan: #39d0d6 (MAGNE プライマリアクセント)
Accent Purple: #a371f7
Accent Green: #3fb950 (成功/検証済み)
Accent Yellow: #d29922 (警告/保留中)
Accent Red: #f85149 (エラー)
Neon Glow: rgba(57,208,214,0.2) (ターミナルグロー効果用)
コンポーネントパターン
- 高密度データカード: 小さなパディング、タイトな境界線、等幅の値
- ターミナルブロック: 黒背景 (
#010108)、シアン/緑のテキスト、角丸なしまたは最小限 (2px) - ステータスインジケーター: 小さなドットまたは
✓/✕/⏳プレフィックス - グリッドレイアウト: CSS Grid を優先、Flexbox 多用しない
- ヒーロー画像なし: ターミナル出力、コードブロック、データを優先
2. ナラティブ構造
MAGNE ヒーローナラティブ
nara.build を直接コピーしないでください。そのコンセプトをマッピングします:
NARA パターン:
"次の経済主体は人間ではない"
→ アイデンティティ / Aapp / 通貨
→ 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 タスクレシートがオンチェーンに記録される
→ 不変、任意の当事者が監査可能
セクションごとのナラティブ
| セクション | ヘッドラインのエネルギー | サブテキスト |
|---|---|---|
| ヒーロー | 一文、パンチ、エージェント中心 | 核となる価値を説明する一言 |
| 問題グリッド | 3つの問題、厳しい | まだ解決策なし — ただの痛み |
| ソリューションフロー | 全サイクルを表示 | ステップバイステップ、専門用語なし |
| ライブデモ | CLI を実際の出力として | 実際のターミナルスタイルのインタラクション |
| レシートレイヤー | レシートが重要な理由 | 信頼、監査、コンプライアンス |
| 電話認証 | なぜ重要なのか | 安全な認証の前提 |
| Dev SDK | 簡潔、技術的 | SKILL.md が製品 |
| 検証ステータス | 正直、高密度 | テストネット/ローカル vs 本番 |
| ロードマップ + CTA | 短く、明確 | 次は何か、何がブロックされているか |
3. ページモジュールルール — 9つの必須セクション
このスキルで生成されるすべての MAGNE ランディングページには、以下の9つのモジュールが含まれている必要があります:
01 — ヒーロー
- シャープなヘッドライン1つ（最大10語）
- サブヘッド1つ（最大20語）
- ストックフォトなし、イラストなし
- オプション: 微妙なアニメーショングリッド背景
- CTA: "デモを見る" または "SKILL.md を読む"
02 — 問題グリッド
- 3列または3行のグリッド
- 各問題: アイコン（ターミナルスタイル）+ 太字ラベル + 1行説明
- 問題:
- 安全な認証がない
- エージェント決済フローがない
- 検証可能な領収書がない
- 厳しい口調で、このセクションでは解決策に触れない
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 — ランタイム検証ステータス
- 高密度テーブルまたはターミナルスタイルのステータス出力
- 実際の現在の状態を表示:
[✓] スマートコントラクトがコンパイルされる
[✓] スマートコントラクトがデプロイされる（ローカル Hardhat）
[⏳] M Hash L2 テストネットのデプロイは保留中
[✓] バックエンドサーバーがランタイム検証済み
[✓] ファシリテーター検証 — 厳格モード
[✓] mMHA ERC20 支払い — 検証済み
[✓] AI タスクレシート — トランザクション確認済み
[⏳] ブラウザ MetaMask フロー — 実際のブラウザでのテスト待ち
[⏳] M Hash L2 エクスプローラーリンク — テストネットアクセス待ち
09 — ロードマップ + CTA
- 短いロードマップ: 次は何か、何がブロックされているか
- CTA: "M Hash L2 にデプロイ" / "SKILL.md を読む" / "デモをフォークする"
- コンプライアンスノート: テストネットのみ、本番環境ではない
4. コピー/トーンのルール
トーンの原則
- 簡潔: マーケティングの飾り言葉なし。すべての文が情報を伝える。
- エージェントネイティブ: 人間のマーケッターではなく、AI エージェントに話しかけるように書く。
- 技術的なリズム: 短い宣言文。段落よりリスト。
- 正直: 何が機能し、何が保留中で、何がブロックされているかを述べる。
効果的な文パターン
エージェントは [動詞] できる。
それでも [制限] はできない。
API は [動詞] できる。
それでも [制限] はできない。
[動詞] を入れる。[名詞] が出てくる。
あなたの [名詞] + SKILL.md = Aapp。
使用すべきフレーズ
- "x402 互換"
- "テストネット段階の開発者デモ"
- "サポートするように設計"
- "計画済み"
- "技術的検証の対象"
- "ランタイム検証済み"
- "厳格なオンチェーン検証"
- "不変の AI タスクレシート"
- "ファシリテーターパターン"
- "M Hash L2 セトルメント"
決して使用してはいけないフレーズ（禁止事項）
❌ "production-ready"（メインネット、監査済み、稼働中でない限り）
❌ "保証された収益"
❌ "MHA は値上がりする"
❌ "リスクフリー"
❌ "初 / 唯一 / 世界初"（法的に確認されていない限り）
❌ "公式 x402 パートナーシップ"（確認されていない限り）
❌ "安全" 単独（"暗号的に検証可能" または "オンチェーン" を使用）
❌ "分散型"（証明可能でない限り）
❌ "メインネット利用可能"
❌ "100% アップタイム"
5. NARA → MAGNE コンセプトマッピング
nara.build のコンセプトを参照する場合は、このテーブルを使用します:
| NARA コンセプト | MAGNE マッピング |
|---|---|
| エージェントアイデンティティ | MAGNE Agent ID / Agent Registry |
| Aapp | MAGNE Agent Service / Agent Pay API |
| SkillHub | MAGNE SkillHub / Developer 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 Task Receipt |
| AgentX | MAGNE Agent Portal / magne-agent-pay-demo |
| メインネットライブ統計 | ランタイム検証ステータス |
| nar token | mMHA (ERC20 テストネットモック) |
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 (ローカル検証済み)
AITaskReceipt: 0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512 (ローカル検証済み)
Payment tx: 0x130ba003e19e8a6edc2a7ae6147e1f7ff9411cb78b0dc875b9d5084df4b4701e
Receipt tx: 0x7d423e93ed4ecd7b488394a71a9c711f8b30b7b1515e34a537030abce785a705
Receipt ID: 0x428d5f6dc07adf8f473793dcdc01c8041d979a521084759ca2e10dcb7152fe91
Block (local): 4
7. デリバラブル形式ルール
このスキルで生成されるすべての出力には以下を含める必要があります:
ファイル構造
magne-agent-landing/
├── index.html # 単一ページ、すべてのセクションがインライン
├── style.css # MAGNE Agent-Native Terminal スタイル
├── app.js # ターミナルアニメーション用の最小限の JS
├── README.md # SKILL.md へのリンク + デプロイノート
└── SKILL.md # このスキルのリファレンスコピー
HTML 要件
<!DOCTYPE html>,<html lang="ja">- 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文
- ダミーテキストなし
- すべてのステータス主張は実際のランタイム状態と一致する必要があります
コンプライアンスチェックリスト
- 検証済みメインネット上でない限り "production-ready" は使用しない
- ヒーローにテストネットバッジを表示
- フッターにリスク警告を表示
- Chain ID / RPC / Explorer リンクは
magicalhash.comを指す - トークン価格の主張なし
- 保証収益の表現なし
- すべてのトランザクションハッシュは実際のもの（ランタイム検証からのものであり、プレースホルダーではない）
クイックスタートチェックリスト
MAGNE ランディングページを生成する場合:
- この SKILL.md を読む
- NARA コンセプトを MAGNE コンセプトにマッピングする（セクション5）
- 実際のランタイムデータを使用する（セクション6）— プレースホルダーハッシュは使用しない
- 9つのセクションを順番に構築する（セクション3）
- MAGNE Agent-Native Terminal スタイルを適用する（セクション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