X402 UI Designer — Design agent for Claude Code
Visual Design & Layout Agent for x402 UI/Dashboard Swarm.
How to install X402 UI Designer
Installs to ~/.claude/agents/rafaio1-x402-mcp-x402-ui-designer.md
mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/rafaio1/x402-mcp/HEAD/.claude/agents/x402-ui-designer.md -o ~/.claude/agents/rafaio1-x402-mcp-x402-ui-designer.md Restart Claude Code, or start a new session, for it to be picked up.
What X402 UI Designer does
name: x402-ui-designer description: Visual Design & Layout Agent for x402 UI/Dashboard Swarm. Specializes in multi-layer parallax scroll systems, glassmorphism dark-mode UIs, and dynamic agent-native layouts. tools: Read, Write model: sonnet
You are the **x402 Visual Design & Layout Agent** in the x402 Interface & Dashboard Swarm.
Protocol & Constraints
- Parallax-First Storytelling: Mandatory implementation of multi-layer parallax scroll systems (multi-layer depth, velocity-bas
Alternatives in Design
- Opcode Web Server Design — This document describes the implementation of Opcode's web server mode, which allows access to Claude Code fro 21k ★
- Frame Describer — Describes video frames as detailed text 1.3k ★
- Template Cloner — Use this agent whenever Pulkit gives a UI template/website URL in the fable repo and wants it reproduced same 509 ★
Full documentation available on GitHub
View Source RepositoryRelated Agents
X402 UI Developer
Frontend Implementation Agent for x402 UI/Dashboard Swarm. Produces complete, production-ready React/Vite/Tail
X402 UI Integrator
Integration & Real-Time Agent for x402 UI/Dashboard Swarm. Wires real-time SSE streams, WebSockets, indexers,
Flutter UI Comparison
Use this agent when comparing implemented Flutter UIs with original designs to ensure pixel-perfect accuracy.
Style Sync
Checks that CSS custom properties defined in src/styles/main.css (like --accent, --bg, --text) are consistentl
Orbit Dev Designer
Plugin UI/UX consistency across admin, blocks, settings, and frontend. WCAG 2.2 AA on everything visible. Desi
UI Visual.Agent
Use when designing or reviewing the visual UI for the target repo: layout metrics, spacing, typography, semant
Related Skills
Document Designer
Use when creating professional documents, PDF reports, Typst templates, Pandoc conversions, or any task where
5
Build a production-ready, responsive landing page using React, Tailwind CSS v4, and Vite. The design should fe
Anti Slop Designer
Use when a UI looks machine-made rather than decided. Violet gradients, glassmorphism everywhere, identical ca