SoulClaw Website Design

EN

Live Demo

CN

Role: Product Designer & Frontend Architect
Duration: 2026.03

OpenClaw is an open-source AI character framework, but users faced three critical friction points: soul templates buried in GitHub repos, personalities impossible to preview without local deployment, and customization requiring terminal gymnastics. I architected SoulClaw as a zero-backend, browser-native atelier where digital souls become tangible, testable, and exportable within 3 seconds.

The Challenge

SoulClaw transforms static SOUL.md files into living digital entities through a three-layer immersive experience:

Perception Layer (Aura Design System): Engineered a cinematic dark-tech interface using Three.js custom GLSL shaders—featuring breathing soul orbs, procedural claw-mark light sweeps, and mouse-responsive particle fields. Implemented the "AURA-grade" visual language: deep space black (#030407), micro-transparent glassmorphism (rgba 0.02-0.1), and electric orange (#FF6B00) accents. Designed 12 premium anime-style portraits with realistic proportions (non-chibi) for professional character representation.

Creation Layer (The Studio): Built a split-view Monaco Editor environment (VS Code core) supporting SOUL.md/IDENTITY.md tab switching, paired with real-time Markdown preview using Shiki syntax highlighting. Implemented personality quick-tuning via AST manipulation—one-click modifiers for tone shifts (More Sarcastic / Gentler / More Efficient) that rewrite system prompts intelligently.

Deployment Layer (Zero-Backend Architecture): Engineered client-side ZIP generation using JSZip—bundling workspace templates, avatar assets, and OpenClaw-compatible configs directly in browser memory, eliminating server costs while maintaining full functionality.

The Solution

  • Framework: Next.js 15 App Router with static export to Vercel; achieved zero server costs with full interactivity preserved

  • Graphics: Custom fragment shaders for organic soul orb animations with Perlin noise and parallax scrolling; implemented 48px rounded card design system with hover-lift micro-interactions (2px translate + 40px orange glow)

  • Performance: Optimized LCP < 1.8s through aggressive code-splitting, dynamic shader lazy-loading, and Next.js image optimization; mobile-first vertical scrolling with touch-optimized gesture handling

  • Internationalization: Complete bilingual deployment (EN/CN) with natural localization—not translation. Adapted UX patterns for Chinese users including vertical rhythm adjustments and culturally resonant character naming (e.g., "毒舌码农" Toxic Coder, "温柔陪伴者" Gentle Companion).

Technical Highlights

  1. 3-Second Try-On: Real-time chat simulator with persona switching—test character responses against different user profiles before deployment

  2. Live Markdown Atelier: Monaco-powered editing with instant preview and syntax-aware highlighting

  3. Aura Shader Background: WebGL-powered immersive environment with mouse-follow interactions

  4. One-Click ZIP Export: Client-side workspace packaging with automatic dependency resolution

  5. Masonry Gallery: CSS Grid-based soul browser with horizontal scroll on desktop, vertical flow on mobile

Key Features

Impact

  • Cost Efficiency: 100% static architecture = $0 server costs at scale

  • Accessibility: Reduced OpenClaw onboarding from 30 minutes (CLI setup) to 3 seconds (browser-based)

  • Engagement: "Try-before-you-fork" model increases template discovery and community contributions

Get In Touch

If you're interested in working with us, complete the form with a few details about your project. We'll review your message and get back to you within 48 hours.