VibeKit

About VibeKit

VibeKit is a theme-design toolkit that lets you craft and share UI tokens — colors, typography, and spacing — with a live preview and a shareable CSS endpoint you can drop into any frontend. The app includes a Google Fonts picker, contrast checker (WCAG), and a public preview page.

Inspiration

Explore these helpful color design tools that complement VibeKit's functionality:

• Coolors Visualizer - Visualize color palettes in real UI components
• Coolors Contrast Checker - Test color combinations for WCAG compliance
• Mobile Palette Generator - Generate mobile-optimized color schemes
• Adobe Color Wheel - Explore color relationships and harmonies

Project Origins

VibeKit emerged from the Girls Develop It: Fearless UX: Unleash Your Creative Potential workshop, where I applied the "vibe-coding" methodology I had learned from Piyush Acharya at Git Merge 2025.

Built in collaboration with Krystina Bradley, who contributed invaluable user-empathy research, journey mapping, and prototyping expertise. The technical implementation was developed using ChatGPT and GitHub Copilot as coding companions, showcasing modern AI-assisted development workflows.

Design Documentation

🎨 Figma Design Files

• VibeKit Design System - Complete UI/UX designs, component library, and interactive prototypes

📋 UX Research & Documentation

• Empathy Map - User research insights and emotional journey mapping to understand target user needs and pain points
• User Journey Map - End-to-end user experience flow from discovery to theme implementation and sharing
• UX Features Analysis - Detailed feature specifications, user stories, and interaction design documentation
• Prototype Documentation - Design iteration process, wireframe evolution, and prototype testing results

Features & Components

🎨 Color System

• HEX-only format for consistency and performance across all color tokens
• 10 semantic colors: Neutral (Light/Mid/Dark), Primary, Secondary, Tertiary, Danger, Warning, Caution, Success
• Automatic color naming via The Color API integration for human-readable color identification
• Palette Generator: Triadic/analogous/complementary suggestions from seed colors with one-click application
• Contrast Checker: WCAG AA/AAA compliance validation with real-time accessibility scoring

🔄 Border Radius Control

• Interactive slider (0-25px) with instant preview on chips, buttons, and containers
• CSS variable integration (--border-radius) with live theme updates
• Logo preservation - brand assets unaffected by border radius theming

🔤 Typography Management

• Google Fonts integration with separate Header/Paragraph font selection
• Advanced controls: Weight, style, line height, and letter spacing options
• Optional full catalog search via VITE_GF_API_KEY environment variable

🖼️ Brand Assets

• Multi-format support: PNG, SVG, JPEG, WebP uploads stored in Cloudflare R2
• Reliable hosting with automatic fallback placeholders and error handling

💾 Theme Management

• Full CRUD operations with D1 database persistence and theme duplication
• Shareable exports: /themes/{id}.css (cached) and /themes/{id}/preview demo pages
• Development-friendly: Dynamic API detection for local vs production environments

⚡ Live Preview System

• Real-time updates using direct theme values without CSS injection dependencies
• CSS Variables Panel with organized grouping and copy-to-clipboard functionality
• Instant feedback across all UI components and preview elements

🛠️ Tech Stack & Tools

🌐 Frontend

• ⚡ Vite — Lightning-fast dev server
• ⚛️ React 18 — Modern UI framework + TypeScript
• 🐜 Ant Design — Enterprise-class UI components
• 🎨 CSS Variables — Dynamic theming engine

☁️ Backend

• 🔧 Cloudflare Workers — Serverless edge compute
• 💾 D1 Database — Global SQLite at the edge
• 📦 R2 Storage — Object storage for assets

👨‍💻 Development

• 📘 TypeScript — Type-safe development
• 🔍 ESLint — Code quality & formatting
• 🔨 Wrangler — Cloudflare dev toolkit

🎨 Design & UX

• ✏️ Sketched Wireframes — Concept & user flows
• 🎯 Canva — Journey & empathy mapping
• 🔷 Figma — UI/UX design & prototyping

🌐 External APIs

• 🎨 The Color API — Human-readable color names & identification
• 🔤 Google Fonts API — Web font catalog & font loading

🤖 AI-Powered Development

• 💬 ChatGPT — Code generation & problem solving
• 🧠 GitHub Copilot — AI pair programming & suggestions

Future Opportunities

• Figma integration — export downloadable styles/tokens file
• Comments — per-theme threaded notes visible to collaborators
• Custom fonts — allow user-uploaded fonts in addition to Google Fonts
• Import from CSS tokens / Design Tokens JSON

Architecture

flowchart TB
  subgraph Frontend["Frontend (Vite + React + TS + Ant Design)"]
    A1[Font Picker]
    A2[Color Controls - HEX Only]
    A3[Border Radius Control]
    A4[Contrast Checker]
    A5[Brand Logo Upload]
    A6[Saved Themes]
    A7[Live Preview]
    A8[CSS Variables Panel]
  end

  subgraph API["Cloudflare Worker API"]
    B1[GET /themes]
    B2[POST /themes]
    B3[GET /themes/:id]
    B4[DELETE /themes/:id]
    B5[GET /themes/:id/css]
    B6[GET /themes/:id/preview]
    B7[POST /uploads/logo]
    B8[GET /uploads/:id]
  end

  subgraph Storage["Cloudflare Storage"]
    C1[(D1 Database<br/>themes table)]
    C2[(D1 Database<br/>uploads table)]
    C3[R2 Bucket<br/>vibekit-logos]
  end

  Frontend -.->|Fetch API| API
  B1 --> C1
  B2 --> C1
  B3 --> C1
  B4 --> C1
  B5 --> C1
  B6 --> C1
  B7 --> C2
  B7 -.->|Store files| C3
  B8 --> C2

Loading

License

This project is licensed under a View-Only License — see the LICENSE file for details.