← All work
SoulClaw
A browser studio where anyone can preview, tune and export an AI character's personality — in seconds.
A browser studio where anyone can preview, tune and export an AI character's personality — in seconds.
OpenClaw is an open-source framework for AI characters. Its personalities live in plain SOUL.md files — powerful, but only if you're comfortable with GitHub and a terminal.
SoulClaw turns those files into something you can see, try and take home — right in the browser, with no backend at all.
Great AI personalities were buried in repos — impossible to preview without a local setup.
Three friction points kept coming up: templates hidden in GitHub, no way to test a personality before deploying it, and customisation that meant typing terminal commands. The goal: make a soul tangible, testable and exportable within three seconds.
An “Aura” visual language — deep-space black, micro-glass panels and a single electric-orange accent, with breathing soul orbs and claw-mark light sweeps built in custom shaders.
A split-view studio: edit SOUL.md and IDENTITY.md side by side with a live preview, plus one-click tone modifiers — More sarcastic, Gentler, More efficient.
Zero backend. The browser packages templates, avatars and configs into a ready-to-use ZIP, so nothing ever touches a server.
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).
3-Second Try-On: Real-time chat simulator with persona switching—test character responses against different user profiles before deployment
Live Markdown Atelier: Monaco-powered editing with instant preview and syntax-aware highlighting
Aura Shader Background: WebGL-powered immersive environment with mouse-follow interactions
One-Click ZIP Export: Client-side workspace packaging with automatic dependency resolution
Masonry Gallery: CSS Grid-based soul browser with horizontal scroll on desktop, vertical flow on mobile
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
A real-time chat preview lets people meet a personality before committing to it.
Everything runs client-side: zero hosting cost, instant load, nothing to maintain.
Chinese personas got their own names and tone rather than word-for-word copies of the English ones.
Building with AI as my engineer changed how I scope. I spent less time asking “can this be built?” and more asking “should it exist — and how should it feel?”
