{"id":31654703,"url":"https://github.com/ajkendal/vibekit","last_synced_at":"2026-04-06T21:32:51.593Z","repository":{"id":318223725,"uuid":"1069881440","full_name":"ajkendal/vibekit","owner":"ajkendal","description":"Create, preview, and share brand typography \u0026 color tokens with a friendly contrast checker. Vite/React + Cloudflare Worker/D1.","archived":false,"fork":false,"pushed_at":"2025-12-24T22:59:27.000Z","size":852,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-26T11:15:57.115Z","etag":null,"topics":["chatgpt","cloudflare","contrast-checker","css","d1-database","design-system","eslint","figma","frontend","github-actions","github-copilot","r2-storage","reactjs","typescript","vite","wrangler"],"latest_commit_sha":null,"homepage":"https://www.vibekit.studio","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ajkendal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-04T20:05:07.000Z","updated_at":"2025-12-24T22:59:31.000Z","dependencies_parsed_at":"2025-10-05T23:28:50.549Z","dependency_job_id":"d7929946-d851-4821-8834-f5a1336f7934","html_url":"https://github.com/ajkendal/vibekit","commit_stats":null,"previous_names":["ajkendal/vibekit"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ajkendal/vibekit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajkendal%2Fvibekit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajkendal%2Fvibekit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajkendal%2Fvibekit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajkendal%2Fvibekit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ajkendal","download_url":"https://codeload.github.com/ajkendal/vibekit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajkendal%2Fvibekit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31491097,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-06T17:22:55.647Z","status":"ssl_error","status_checked_at":"2026-04-06T17:22:54.741Z","response_time":112,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chatgpt","cloudflare","contrast-checker","css","d1-database","design-system","eslint","figma","frontend","github-actions","github-copilot","r2-storage","reactjs","typescript","vite","wrangler"],"created_at":"2025-10-07T12:15:14.060Z","updated_at":"2026-04-06T21:32:51.586Z","avatar_url":"https://github.com/ajkendal.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"frontend/public/brand/VibeKit_Logo.svg\" alt=\"VibeKit Logo\" width=\"60\" align=\"left\" style=\"margin-right: 20px;\" /\u003e\n\n# VibeKit\n\n## About VibeKit\n\nVibeKit 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.\n\n## Inspiration\n\nExplore these helpful color design tools that complement VibeKit's functionality:\n\n- **[Coolors Visualizer](https://coolors.co/visualizer/880d1e-dd2d4a-f26a8d-f49cbb-cbeef3)** - Visualize color palettes in real UI components\n- **[Coolors Contrast Checker](https://coolors.co/contrast-checker/112a46-acc8e5)** - Test color combinations for WCAG compliance\n- **[Mobile Palette Generator](https://mobilepalette.colorion.co/)** - Generate mobile-optimized color schemes\n- **[Adobe Color Wheel](https://color.adobe.com/create/color-wheel)** - Explore color relationships and harmonies\n\n## Project Origins\n\n\u003e **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**.\n\u003e\n\u003e 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.\n\n## Design Documentation\n\n### 🎨 Figma Design Files\n\n- **[VibeKit Design System](https://www.figma.com/design/wpXKuArJk5VSirui5fZzyi/VibeKit?node-id=0-1\u0026t=6y1SZvfkssgYviG3-1)** - Complete UI/UX designs, component library, and interactive prototypes\n\n### 📋 UX Research \u0026 Documentation\n\n- **[Empathy Map](frontend/public/pdf/Empathy%20Map.pdf)** - User research insights and emotional journey mapping to understand target user needs and pain points\n- **[User Journey Map](frontend/public/pdf/Journey%20Map.pdf)** - End-to-end user experience flow from discovery to theme implementation and sharing\n- **[UX Features Analysis](frontend/public/pdf/UX%20Features.pdf)** - Detailed feature specifications, user stories, and interaction design documentation\n- **[Prototype Documentation](frontend/public/pdf/Prototype.pdf)** - Design iteration process, wireframe evolution, and prototype testing results\n\n### Features \u0026 Components\n\n**🎨 Color System**\n\n- **HEX-only format** for consistency and performance across all color tokens\n- **10 semantic colors:** Neutral (Light/Mid/Dark), Primary, Secondary, Tertiary, Danger, Warning, Caution, Success\n- **Automatic color naming** via [The Color API](https://www.thecolorapi.com/) integration for human-readable color identification\n- **Palette Generator:** Triadic/analogous/complementary suggestions from seed colors with one-click application\n- **Contrast Checker:** WCAG AA/AAA compliance validation with real-time accessibility scoring\n\n**🔄 Border Radius Control**\n\n- **Interactive slider (0-25px)** with instant preview on chips, buttons, and containers\n- **CSS variable integration** (`--border-radius`) with live theme updates\n- **Logo preservation** - brand assets unaffected by border radius theming\n\n**🔤 Typography Management**\n\n- **Google Fonts integration** with separate Header/Paragraph font selection\n- **Advanced controls:** Weight, style, line height, and letter spacing options\n- **Optional full catalog** search via `VITE_GF_API_KEY` environment variable\n\n**🖼️ Brand Assets**\n\n- **Multi-format support:** PNG, SVG, JPEG, WebP uploads stored in Cloudflare R2\n- **Reliable hosting** with automatic fallback placeholders and error handling\n\n**💾 Theme Management**\n\n- **Full CRUD operations** with D1 database persistence and theme duplication\n- **Shareable exports:** `/themes/{id}.css` (cached) and `/themes/{id}/preview` demo pages\n- **Development-friendly:** Dynamic API detection for local vs production environments\n\n**⚡ Live Preview System**\n\n- **Real-time updates** using direct theme values without CSS injection dependencies\n- **CSS Variables Panel** with organized grouping and copy-to-clipboard functionality\n- **Instant feedback** across all UI components and preview elements\n\n## 🛠️ Tech Stack \u0026 Tools\n\n### 🌐 Frontend\n\n- ⚡ **Vite** — Lightning-fast dev server\n- ⚛️ **React 18** — Modern UI framework + TypeScript\n- 🐜 **Ant Design** — Enterprise-class UI components\n- 🎨 **CSS Variables** — Dynamic theming engine\n\n### ☁️ Backend\n\n- 🔧 **Cloudflare Workers** — Serverless edge compute\n- 💾 **D1 Database** — Global SQLite at the edge\n- 📦 **R2 Storage** — Object storage for assets\n\n### 👨‍💻 Development\n\n- 📘 **TypeScript** — Type-safe development\n- 🔍 **ESLint** — Code quality \u0026 formatting\n- 🔨 **Wrangler** — Cloudflare dev toolkit\n\n### 🎨 Design \u0026 UX\n\n- ✏️ **Sketched Wireframes** — Concept \u0026 user flows\n- 🎯 **Canva** — Journey \u0026 empathy mapping\n- 🔷 **Figma** — UI/UX design \u0026 prototyping\n\n### 🌐 External APIs\n\n- 🎨 **[The Color API](https://www.thecolorapi.com/)** — Human-readable color names \u0026 identification\n- 🔤 **[Google Fonts API](https://developers.google.com/fonts)** — Web font catalog \u0026 font loading\n\n### 🤖 AI-Powered Development\n\n- 💬 **ChatGPT** — Code generation \u0026 problem solving\n- 🧠 **GitHub Copilot** — AI pair programming \u0026 suggestions\n\n### Future Opportunities\n\n- Figma integration — export downloadable styles/tokens file\n- Comments — per-theme threaded notes visible to collaborators\n- Custom fonts — allow user-uploaded fonts in addition to Google Fonts\n- Import from CSS tokens / Design Tokens JSON\n\n## Architecture\n\n```mermaid\nflowchart TB\n  subgraph Frontend[\"Frontend (Vite + React + TS + Ant Design)\"]\n    A1[Font Picker]\n    A2[Color Controls - HEX Only]\n    A3[Border Radius Control]\n    A4[Contrast Checker]\n    A5[Brand Logo Upload]\n    A6[Saved Themes]\n    A7[Live Preview]\n    A8[CSS Variables Panel]\n  end\n\n  subgraph API[\"Cloudflare Worker API\"]\n    B1[GET /themes]\n    B2[POST /themes]\n    B3[GET /themes/:id]\n    B4[DELETE /themes/:id]\n    B5[GET /themes/:id/css]\n    B6[GET /themes/:id/preview]\n    B7[POST /uploads/logo]\n    B8[GET /uploads/:id]\n  end\n\n  subgraph Storage[\"Cloudflare Storage\"]\n    C1[(D1 Database\u003cbr/\u003ethemes table)]\n    C2[(D1 Database\u003cbr/\u003euploads table)]\n    C3[R2 Bucket\u003cbr/\u003evibekit-logos]\n  end\n\n  Frontend -.-\u003e|Fetch API| API\n  B1 --\u003e C1\n  B2 --\u003e C1\n  B3 --\u003e C1\n  B4 --\u003e C1\n  B5 --\u003e C1\n  B6 --\u003e C1\n  B7 --\u003e C2\n  B7 -.-\u003e|Store files| C3\n  B8 --\u003e C2\n```\n\n## License\n\nThis project is licensed under a **View-Only License** — see the [LICENSE](./LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajkendal%2Fvibekit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fajkendal%2Fvibekit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajkendal%2Fvibekit/lists"}