| Type | Side project |
| Role | Designer & engineer |
| Stack | Base UI, Tailwind, Motion, WebGL, shadcn registry |
| Links | usejds.dev · GitHub |
JDS is my design system for AI agent and voice products. It covers the general UI primitives plus the surfaces most systems skip: voice orbs, agent side panels, prompt inputs, tool calls, approvals, reasoning and live transcripts.
It ships as source through a shadcn registry, so every component lands in your repo and stays yours to edit.
pnpm dlx shadcn@latest add @jds/style @jds/prompt-input
The docs site is the case study. Below are the main explorations.
Voice orb
Ten orb styles, from particle spheres to WebGL plasma, liquid and glass. Every variant takes the same states (idle, connecting, listening, thinking, speaking, error) and reacts to mic level. The studio previews each one in context: on stage, in a side panel, in a call and compact.
Agent side panel
The copilot pattern: docked or floating, left or right, card, page or glass surface, and slide, fade or spring entrances. Chat and voice live in the same panel, with voice reachable from the composer, the header, or both.
Prompt input
One composer, configured for chat, research, coding, copilot or workspace use: context header, scope picker, tools, model picker, dictation and send behaviour. Previewed in a new chat, a conversation and a side panel, across ready, submitted, streaming and error states.
Open the prompt input studio →
Recipes
Complete experiences composed from the components, installable as one block. The voice agent pairs the orb, captions and call controls with the agent's tool calls and transcript. Recipes that talk to a backend read a session interface, so a simulated session can be swapped for a real one without touching the UI.
