SKILL.md — MAGNE Agent Landing Page Generator
목적
MAGNE 제품 랜딩 페이지를 MAGNE Agent-Native 터미널 웹 스타일로 생성합니다. nara.build의 에이전트 경제 미학에서 영감을 받았으며, M Hash L2 기반 AI 에이전트 결제 레일이라는 MAGNE 고유 내러티브에 맞게 매핑됩니다.
다음과 같은 요청이 있을 때 이 스킬을 사용하세요:
- MAGNE 제품 랜딩 페이지 생성
- MAGNE 에이전트 네이티브 웹사이트 구축
- magne-ai 또는 MAGNE 관련 페이지 리팩터링/재구축
- 개발자 대상 MAGNE 데모 페이지 생성
1. 시각적 스타일 — MAGNE Agent-Native 터미널 웹
스타일 이름: MAGNE Agent-Native 터미널 웹
시각적 키워드
다크, 터미널-네이티브, 에이전트 경제, 프로토콜 대시보드,
모노 폰트, 밀집 데이터 카드, 그리드 라인, 터미널 글로우,
네온 미니멀리즘, 선택적 스캔라인, CLI 블록
배경
- 기본 색상:
#050810또는#070910(순수 검정에 가깝지만 완전한 검정은 아님) - 방사형 그라데이션: 미묘한 중앙 글로우, 매우 어두움
- 그리드: 낮은 불투명도(
rgba(88,166,255,0.04))의 얇은1px선 - 선택 사항:
2px간격, 3% 불투명도의 스캔라인 오버레이 - 피해야 할 것: 광택 있는 SaaS 그라데이션, 둥근 모서리 버블 UI, Apple 스타일 프로스트 글래스
타이포그래피
| 요소 | 폰트 | 스타일 |
|---|---|---|
| 히어로 헤드라인 | Space Grotesk 또는 Inter, 대체 system-ui | Bold, 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 패턴:
"다음 경제 주체는 인간이 아니다"
→ Identity / Aapps / Currency
→ CLI: inspect / call / settle / watch
MAGNE 패턴 (AI 에이전트를 위한 결제 레일):
"에이전트는 생각할 수 있습니다. 하지만 안전하게 지불할 수는 없습니다."
→ 안전한 인증 없음
→ 에이전트 결제 없음
→ 검증 가능한 영수증 없음
→ MAGNE Agent Pay가 이를 해결합니다.
MAGNE 코어 내러티브 블록
문제:
AI 에이전트는 작업을 실행할 수 있습니다.
하지만 신뢰할 수 있는 결제를 받을 수 없습니다.
기존 API는 401을 반환합니다.
기존 결제에는 감사 기능이 없습니다.
해결책:
MAGNE Agent Pay = x402 호환 결제 흐름
+ M Hash L2 정산
+ 온체인 AI Task Receipt
+ 인증 계층으로서의 MAGNE Phone
흐름:
에이전트가 작업 생성 → API가 결제 메타데이터와 함께 402 반환
→ 사용자가 MAGNE Phone / 지갑에서 인증
→ mMHA 또는 지원 자산 전송
→ Facilitator가 M Hash L2에서 확인
→ AI Task Receipt가 온체인에 기록됨
→ 불변, 모든 당사자가 감사 가능
섹션별 내러티브
| 섹션 | 헤드라인 에너지 | 서브텍스트 |
|---|---|---|
| Hero | 한 문장, 강력함, 에이전트 중심 | 핵심 가치를 설명하는 한 줄 |
| Problem Grid | 세 가지 문제, 명확하게 | 아직 해결책 없음 — 고통만 있음 |
| Solution Flow | 전체 사이클 보여주기 | 단계별, 전문 용어 없음 |
| Live Demo | 실제 출력으로서의 CLI | 실제 터미널 스타일 상호작용 |
| Receipt Layer | 영수증이 중요한 이유 | 신뢰, 감사, 규정 준수 |
| Phone Auth | 중요한 이유 | 안전한 인증 전제 |
| Dev SDK | 간결하고 기술적 | SKILL.md가 제품입니다 |
| Verification Status | 정직하고 밀도 있음 | 테스트넷/로컬 vs 프로덕션 |
| Roadmap + CTA | 짧고 명확 | 다음 단계, 차단된 사항 |
3. 페이지 모듈 규칙 — 9개 필수 섹션
이 스킬로 생성되는 모든 MAGNE 랜딩 페이지에는 다음 9개 모듈이 포함되어야 합니다:
01 — Hero
- 하나의 날카로운 헤드라인 (최대 10단어)
- 하나의 서브헤드 (최대 20단어)
- 스톡 사진, 일러스트레이션 없음
- 선택 사항: 미묘한 애니메이션 그리드 배경
- CTA: "See Demo" 또는 "Read SKILL.md"
02 — Problem Grid
- 3열 또는 3행 그리드
- 각 문제: 아이콘 (터미널 스타일) + 굵은 레이블 + 1줄 설명
- 문제:
- 안전한 인증 없음
- 에이전트 결제 흐름 없음
- 검증 가능한 영수증 없음
- 명확하게, 이 섹션에는 아직 해결책을 제시하지 않음
03 — Agent Pay Flow
- 시각적 다이어그램 또는 ASCII 스타일 흐름 차트
- 5단계: Task → 402 → Authorization → Settlement → Receipt
- 각 단계: 번호 + 레이블 + 1줄 설명
- 스타일: 터미널/그리드, 버블 다이어그램 아님
04 — Live Demo Terminal
- 이것이 가장 중요한 모듈입니다
- 터미널 블록에서 실제 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...
- 가능한 경우 런타임 확인의 실제 tx 해시 및 주소 사용
05 — Receipt Layer
- 온체인 영수증이 중요한 이유 설명
- 기술 세부 정보: 이벤트
AITaskReceiptCreated(receiptId, taskId, user, provider, amount, token, paymentTxHash, timestamp) - 실제 이벤트 필드 표시
- 강조: 불변, 프로그래밍 가능, 검증 가능
06 — Secure Phone Authorization
- 인증 계층으로서의 MAGNE Phone에 대한 간략한 섹션
- "MAGNE은 안전한 휴대폰을 AI 에이전트 결제 단말기로 전환합니다"
- 자세하지 않음 — 티저, 전체 사양 아님
07 — Developer SDK / SKILL.md
- SKILL.md를 제품으로 표시
- 코드 블록: 핵심 SKILL.md 계약 패턴
- 실제 SKILL.md에 대한 링크
- 개발자 피치: "Your code + a SKILL.md = an Aapp"
08 — Runtime Verification Status
- 밀집된 표 또는 터미널 스타일 상태 출력
- 실제 현재 상태 표시:
[✓] 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 — Roadmap + CTA
- 짧은 로드맵: 다음 단계, 차단된 사항
- CTA: "Deploy to M Hash L2" / "Read the SKILL.md" / "Fork the Demo"
- 규정 준수 참고 사항: 테스트넷 전용, 프로덕션 아님
4. 카피 / 톤 규칙
톤 원칙
- 간결함: 마케팅 허풍 없음. 모든 문장은 정보를 전달합니다.
- 에이전트-네이티브: 인간 마케터가 아닌 AI 에이전트에게 말하는 것처럼 작성하세요.
- 기술적 리듬: 짧은 선언문. 문단보다 목록 선호.
- 정직함: 작동 중인 것, 대기 중인 것, 차단된 것을 명시하세요.
효과적인 문장 패턴
에이전트는 [동사]할 수 있습니다.
하지만 여전히 [한계]는 할 수 없습니다.
API는 [동사]할 수 있습니다.
하지만 여전히 [한계]는 할 수 없습니다.
[동사] 입력. [명사] 출력.
당신의 [명사] + SKILL.md = Aapp.
사용해야 할 표현
- "x402 호환"
- "테스트넷 단계 개발자 데모"
- "지원하도록 설계됨"
- "계획됨"
- "기술적 검증 대상"
- "런타임 확인됨"
- "엄격한 온체인 확인"
- "불변 AI Task Receipt"
- "facilitator 패턴"
- "M Hash L2 정산"
절대 사용하지 말아야 할 표현 (레드 라인)
❌ "프로덕션 준비 완료" (메인넷, 감사 완료, 라이브 상태가 아닌 경우)
❌ "보장된 수익"
❌ "MHA 가치 상승"
❌ "무위험"
❌ "최초 / 유일 / 세계 최초" (법적으로 확인되지 않은 경우)
❌ "공식 x402 파트너십" (확인되지 않은 경우)
❌ "안전한" 단독 사용 ("암호학적으로 검증 가능" 또는 "온체인" 사용)
❌ "탈중앙화" (증명 가능하지 않은 경우)
❌ "메인넷 사용 가능"
❌ "100% 가동 시간"
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 지원 정산 자산 |
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 |
| 메인넷 라이브 통계 | Runtime Verification Status |
| nar 토큰 | 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 (local verified)
AITaskReceipt: 0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512 (local verified)
Payment tx: 0x130ba003e19e8a6edc2a7ae6147e1f7ff9411cb78b0dc875b9d5084df4b4701e
Receipt tx: 0x7d423e93ed4ecd7b488394a71a9c711f8b30b7b1515e34a537030abce785a705
Receipt ID: 0x428d5f6dc07adf8f473793dcdc01c8041d979a521084759ca2e10dcb7152fe91
Block (local): 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 사용 금지 (명시적으로 요청되지 않은 경우)
- 768px 및 1200px에서
min-width중단점을 사용한 모바일 우선 - 터미널 글로우:
box-shadow: 0 0 20px rgba(57,208,214,0.15)
카피 요구 사항
- 헤드라인: 최대 10단어
- 서브헤드: 최대 20단어
- 본문 단락: 각각 최대 2문장
- 로렘 입숨 사용 금지
- 모든 상태 주장은 실제 런타임 상태와 일치해야 함
규정 준수 체크리스트
- 검증된 메인넷이 아닌 경우 "프로덕션 준비 완료" 사용 금지
- 히어로에 테스트넷 배지
- 바닥글에 위험 경고
- Chain ID / RPC / Explorer 링크가
magicalhash.com을 가리킴 - 토큰 가격 주장 없음
- 보장된 수익 언급 없음
- 모든 tx 해시는 실제 해시 (런타임 확인에서 가져온 것, 플레이스홀더 아님)
빠른 시작 체크리스트
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 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