VibeKit

Landing Page
Landing Page - URL
Extracted Brand-Kit
Brand-Kit Expansion
Palette Suggestions

Purpose and Scope Today, over 70% of businesses, marketers, and designers struggle to quickly gather brand references, such as fonts, colors, logos, and visual language, when starting a new project. Manually assembling brand assets from websites takes hours and disrupts creative flow.

Our Brand Kit Suggester Add-On for Adobe Express solves this problem:

🖥️ Users simply enter a website URL or describe their inspiration in a prompt.

🎨 The Add-On automatically extracts the brand’s key elements, color palette, fonts, sample quotes, and focus keywords.

🚀 The generated Brand Kit appears directly inside Adobe Express, ready for immediate use.

Goals Instantly extract brand assets from any website or prompt.

Reduce manual work of researching fonts, colors, and messaging styles.

Boost creativity by suggesting 3 alternative brand kit variations based on the brand's style.

Enable drag-and-drop functionality to add extracted assets into Adobe Express documents easily.

Target Audience Small businesses and startups creating marketing material.

Marketers designing landing pages, ads, and social media content.

Designers working on branding and rebranding projects.

Students and freelancers developing quick brand mockups and portfolios.

Tech Stack Frontend:

Adobe Express Add-On SDK (UI for input fields, mood selectors, asset displays).

Drag-and-drop support for inserting elements into designs.

Backend Services:

Web Scraping Module (to fetch brand colors, fonts, logos, and metadata).

AI Variant Generator (to suggest 3 brand kit alternatives using GPT-4/Claude).

APIs/Tools:

Fonts and Color Detection Libraries (e.g., ColorThief, WhatFont backend APIs).

OpenAI GPT API (for generating brand-aligned quotes and keywords).

Hosting:

Lightweight backend server using AWS Lambda, Render, or similar.

Security:

HTTPS-secured API calls.

CORS handling and rate limiting for safe access.

Problems We Faced 🌐 CORS issues when scraping live websites.

🧩 Parsing challenges: Fonts and color extraction varies across different web architectures.

📦 Packaging large assets into a lightweight, fast add-on.

🔐 Ensuring security while fetching and handling third-party site data.

What We Learned How to build a full-stack Adobe Express Add-On that feels native and fast.

Real-world challenges in web scraping, font detection, and dynamic UI generation.

The importance of giving users creative freedom while providing smart AI suggestions behind the scenes.

Keeping user privacy and speed in mind when handling external URLs and API requests.

💡 The Brand Kit Suggester bridges the gap between inspiration and creation, empowering anyone to build professional brand kits instantly inside Adobe Express!