🚧 VividKit Desktop App Coming Soon! Join our early access waiting list to be notified when we launch.
VividKit transforms AI coding commands into an intuitive GUI, making ClaudeKit accessible to developers of all skill levels. While our Desktop App is in development, explore our comprehensive guides on using ClaudeKit effectively with Claude Code CLI.
Visual Intelligence Layer for ClaudeKit CLI
VividKit Desktop transforms the ClaudeKit CLI experience with persistent visual dashboards and GUI-driven interactions.
- Browse all agents, skills, and commands in a visual interface
- No more digging through markdown files
- Searchable, filterable capability explorer
- Live execution monitoring with graphs and timelines
- Token usage visualization across runs
- Agent performance metrics and trends
- Progress tracking that persists after terminal closes
- Archive of all past agent executions
- Side-by-side run comparisons
- Pattern recognition across multiple sessions
- Execution timeline visualization
- GUI-driven agent launching (no command memorization)
- Visual parameter configuration
- Point-and-click workflow building
- Stakeholder-friendly interface for PMs/designers
- Read-only views for team members
- Visual summaries of agent capabilities and results
- Automatic sync with latest ClaudeKit updates
- No manual
update/initcommands required daily - Background updates with changelog notifications
- Built-in CCS (Claude Code Switcher) integration
- Switch between Claude, Gemini, Codex & custom AI profiles instantly
- Multi-account management with visual profile selector
- One-click task delegation to save Claude API costs
"ClaudeKit's power, now with eyes."
While waiting for VividKit Desktop, master ClaudeKit through our comprehensive documentation:
| Guide | Description |
|---|---|
| CLI Guide | Installation and setup |
| Commands | All 60+ commands reference |
| Workflows | Best practices and patterns |
| CCS | Claude Code Switcher for multi-model delegation |
| UI/UX | Design skills and styling |
| Resume | Session recovery and continuation |
| Permissions | Permissions settings |
| Fix Logs | Debugging strategies |
- Framework: Astro 5.x with Static Site Generation (SSG)
- Styling: Tailwind CSS v4 with custom glassmorphism design system
- Type Safety: TypeScript with strict mode and comprehensive path aliasing
- Interactivity: Alpine.js 3.15.2 for lightweight client-side interactions
- i18n: Built-in Astro i18n with English (default) and Vietnamese support
- Deployment: Vercel with integrated analytics
- Performance: Sharp for image optimization, LightningCSS for CSS minification
- Design System: Custom glassmorphism UI with three-font typography system
| Command | Action |
|---|---|
npm install |
Install dependencies |
npm run dev |
Start local dev server at localhost:4321 |
npm run build |
Build production site to ./dist/ |
npm run preview |
Preview build locally |
vividkit-web/
├── src/ # Source code
│ ├── components/ # Astro components (UI, sections, layouts, guides)
│ ├── layouts/ # Page layouts (MainLayout, GuidesLayout)
│ ├── pages/ # File-based routing (English + Vietnamese)
│ ├── data/ # Content data (guides, features, navigation)
│ ├── i18n/ # Translation utilities (en, vi)
│ ├── scripts/ # JavaScript utilities
│ ├── styles/ # Global styles and design system
│ └── types/ # TypeScript type definitions
├── docs/ # Documentation files
├── public/ # Static assets
└── dist/ # Build output
- VividKit Website - Join the waiting list
- ClaudeKit CLI - Source repository
- Claude Code - Anthropic's official CLI
VividKit - Making AI coding crystal clear