Pomelo - Brand DNA Analyzer
Facundo Cappella
Loading this content connects you to www.pomeloai.es.
www.pomeloai.es privacy informationPomelo — Brand Genetics Analyzer & AI Content Generator
Automating brand-consistent content creation using AI-driven visual analysis
🧩 The Problem
Maintaining a consistent brand identity across social media is expensive and time-consuming.
Small teams and startups often:
Lack dedicated designers
Struggle to replicate visual identity across posts
Produce inconsistent content that weakens brand perception
At the same time, AI content tools generate generic outputs that ignore brand identity entirely.
👉 The gap:
No simple way to extract a brand’s visual DNA and apply it to AI-generated content.
💡 The Solution
Pomelo analyzes a company’s website to extract its “brand genetics” (colors, typography, visual patterns) and uses that data to generate on-brand Instagram content automatically.
The system combines:
Web scraping to capture visual identity
AI agents to structure and interpret brand signals
Content generation aligned with the extracted style
🧠 My Role & Key Decisions
I designed and built the system end-to-end, focusing on AI orchestration and frontend architecture.
1. Structuring “Brand Genetics” as Data
Instead of treating design as unstructured input, I defined a typed model:
Colors (primary, secondary, contrast)
Typography patterns
Layout tendencies
Visual tone
This made it possible to:
Feed structured context into AI
Maintain consistency across generated outputs
2. Using LangChain for Agent Orchestration
I chose LangChain to separate responsibilities:
Scraper Agent → extracts raw visual signals
Generator Agent → produces Instagram content
This modular approach:
Improved maintainability
Allowed independent iteration on extraction vs generation
Reduced prompt complexity
3. Scraping vs APIs (Trade-off)
There’s no reliable API for brand identity, so I used Puppeteer.
Trade-offs:
✅ Full control over extracted data
❌ Higher latency and fragility
To mitigate:
Focused extraction on high-signal elements (CSS, images, fonts)
Avoided over-scraping to keep performance reasonable
4. Client-Side First Architecture
I intentionally used localStorage instead of a backend DB for early stages.
Why:
Faster iteration
No infrastructure overhead
Privacy-friendly by design
Trade-off:
Limited persistence and scalability (acceptable for MVP)
⚙️ Key Challenges
1. Extracting Meaningful Design Signals
Websites are inconsistent and noisy.
Challenge:
Translating raw HTML/CSS into usable “brand identity”
Solution:
Filtered for dominant styles instead of exhaustive extraction
Prioritized signal over completeness
2. Aligning AI Output with Brand Identity
LLMs tend to default to generic styles.
Solution:
Inject structured brand data into prompts
Constrain outputs using explicit style rules
3. Performance vs Accuracy
Puppeteer is powerful but slow.
Approach:
Limited scraping depth
Focused on above-the-fold and key assets
📊 Current Results & Validation
Successfully extracts brand attributes from real websites
Generates visually consistent Instagram post concepts
Supports multi-language output (English/Spanish)
Early validation shows:
Strong improvement over generic AI-generated content
Clear alignment with original brand styles
🧪 What I’d Improve Next * For premium users
Move from localStorage → backend persistence (e.g., Supabase).
Cache brand profiles to avoid repeated scraping
Introduce feedback loops to refine generated content
Replace parts of scraping with computer vision models
🧰 Tech Stack (Condensed)
Frontend: Next.js, TypeScript, Tailwind
State: Zustand
AI: LangChain + Google Gemini
Scraping: Puppeteer
Like this project
Posted Mar 29, 2026
Pomelo analyzes a company’s website to extract its brand (colors, typography, visual patterns) and uses that data to generate instagram content automatically.
Likes
1
Views
8
