https://github.com/ajkendal/vibekit
Create, preview, and share brand typography & color tokens with a friendly contrast checker. Vite/React + Cloudflare Worker/D1.
https://github.com/ajkendal/vibekit
chatgpt cloudflare contrast-checker css d1-database design-system eslint figma frontend github-actions github-copilot r2-storage reactjs typescript vite wrangler
Last synced: 2 months ago
JSON representation
Create, preview, and share brand typography & color tokens with a friendly contrast checker. Vite/React + Cloudflare Worker/D1.
- Host: GitHub
- URL: https://github.com/ajkendal/vibekit
- Owner: ajkendal
- License: other
- Created: 2025-10-04T20:05:07.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-12-24T22:59:27.000Z (6 months ago)
- Last Synced: 2025-12-26T11:15:57.115Z (6 months ago)
- Topics: chatgpt, cloudflare, contrast-checker, css, d1-database, design-system, eslint, figma, frontend, github-actions, github-copilot, r2-storage, reactjs, typescript, vite, wrangler
- Language: TypeScript
- Homepage: https://www.vibekit.studio
- Size: 832 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://coolors.co/visualizer/880d1e-dd2d4a-f26a8d-f49cbb-cbeef3)** - Visualize color palettes in real UI components
- **[Coolors Contrast Checker](https://coolors.co/contrast-checker/112a46-acc8e5)** - Test color combinations for WCAG compliance
- **[Mobile Palette Generator](https://mobilepalette.colorion.co/)** - Generate mobile-optimized color schemes
- **[Adobe Color Wheel](https://color.adobe.com/create/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**](https://github.com/VerisimilitudeX) at **Git Merge 2025**.
>
> Built in collaboration with [**Krystina Bradley**](https://github.com/kscott2016), 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](https://www.figma.com/design/wpXKuArJk5VSirui5fZzyi/VibeKit?node-id=0-1&t=6y1SZvfkssgYviG3-1)** - Complete UI/UX designs, component library, and interactive prototypes
### 📋 UX Research & Documentation
- **[Empathy Map](frontend/public/pdf/Empathy%20Map.pdf)** - User research insights and emotional journey mapping to understand target user needs and pain points
- **[User Journey Map](frontend/public/pdf/Journey%20Map.pdf)** - End-to-end user experience flow from discovery to theme implementation and sharing
- **[UX Features Analysis](frontend/public/pdf/UX%20Features.pdf)** - Detailed feature specifications, user stories, and interaction design documentation
- **[Prototype Documentation](frontend/public/pdf/Prototype.pdf)** - 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](https://www.thecolorapi.com/) 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](https://www.thecolorapi.com/)** — Human-readable color names & identification
- 🔤 **[Google Fonts API](https://developers.google.com/fonts)** — 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
```mermaid
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
themes table)]
C2[(D1 Database
uploads table)]
C3[R2 Bucket
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
```
## License
This project is licensed under a **View-Only License** — see the [LICENSE](./LICENSE) file for details.