Klink V3
Klink is a contact center where human agents and AI agents work side by side across voice, chat and messaging. I have designed it from the very first screen through the V3 rebuild.
- Role
- Lead Product Designer
- Product
- AI-native omnichannel contact center
- Platform
- Web app (B2B SaaS)
- Status
- Live, in active development
The challenge
Support teams handle many channels at once, and now AI agents answer customers too. The product had to stay fast and calm for agents, while giving supervisors clear control over what the AI is doing.
What I designed
- Channel integrations: listing and detail pages
- Ticket table with a flexible filter and saved-view system
- Kanban board for ticket workflows
- QA evaluation with AI scoring
- CX logs detail page
- Monitoring screen for supervising AI agents
- Avatar fallback system with generated avatars
- Settings cleanup and channel page redesign
How I worked
I set up Claude Code with Figma MCP, wrote skill files and CLAUDE.md rules for the Klink design system, and built screens directly in code. The same system is now a real-world example in my Figma Design Systems course.
Highlights
0→1 to V3, designed from the first screen
Voice, chat and AI agents in one product
A design system that AI can build with
Tools
FigmaFigma MCPClaude Codeshadcn/uiNext.js