services provided
AI Product Design
Design Systems
Prompt Engineering
ANALYTICS
bee's care is a Serbian natural cosmetics brand with 68,000 Instagram followers and a product line built on family recipes.
Their growth created a problem most brands would envy - too many customers asking for help. Dozens of DMs per week arrived on Instagram. "I have eczema on my hands, what do you recommend?" "My skin is dry and sensitive, where do I start?" Each message required a founder to personally read, think, and respond.
The knowledge existed. The products were right. The bottleneck was delivery. Tech stack used for the quick and efficient delivery.
claude ai
cursor
design systems
posthog
vercel
Three specific challenges defined the project:
First — the catalog is small but nuanced. 14 products, each targeting specific concerns, some requiring medical disclaimers. Any AI that recommended the wrong product, or failed to flag when a doctor was needed, would damage trust built over years.
Second — the audience is Serbian. Not bilingual, not tech-savvy. The product needed to feel native in both Serbian and English, with Serbian as the default, using Latin script throughout.
Third — online to offline. bee's care products are sold in 25+ physical locations across 7 Serbian cities. A recommendation without a "where to buy" path was incomplete.
I started where the design always starts - the system, not the screens.
Day 1 - Research and architecture
Instead of spending days on competitive research, I conducted AI-assisted research with Claude Sonnet 4.6 in a single session — analyzing skincare quiz UX from Dermalogica, Clinique, Three Ships and others, mapping the full bee's care product catalog, and defining the architecture for both features. What would have taken a week of desk research took hours.
From there I built the design system. Not a large one — exactly what was needed. Color primitives mapped to semantic tokens, a typography scale from display to label, spacing and radius tokens, and every UI component with full interactive states. Button with 5 variants. Input with focus and error states. Alert in 4 flavors. Quiz answer card with selected state. All of it token-based so Cursor could read it directly via Figma MCP and generate accurate code without guessing.
Day 2 — AI implementation with Claude and Cursor
This is where the build happened. Using Cursor with the Figma MCP connected, I built every component from frame links — the AI read exact spacing, colors, and typography from Figma rather than approximating from screenshots. No pixel-pushing. No back-and-forth describing what something should look like.
The intelligence layer required more care. Claude Sonnet powers the chat advisor and quiz results, but I separated what AI decides from what logic decides. The quiz uses a deterministic decision tree — 6 answers map to morning, evening, and weekly routines with zero ambiguity. Claude only writes the personalized intro paragraph. This means quiz results are always correct, even when the API is under load.
The system prompt took real engineering. The key was making Claude explain what each ingredient does for the user's specific concern rather than outputting generic product descriptions. The difference between "contains calendula" and "calendula directly reduces the inflammation causing your eczema" is the difference between a chatbot and an advisor.
Day 3 — Testing, deployment, and tracking
GitHub → Vercel → live URL. PostHog analytics wired throughout — quiz starts, question-by-question drop-off, product link clicks, city selections, geolocation requests. Every interaction tracked so the first two weeks of real user data tells a clear story.
The "Where to buy" feature went further than expected. Every recommendation now ends with a city dropdown showing 25 physical locations, plus a geolocation button that finds the 3 nearest stores and links directly to their Google My Business listing — directions included.
Complete token-based design system in Figma
9 production UI components with full interactive states
AI chat advisor powered by Claude Sonnet 4.6
6-question skincare quiz with decision tree logic
Bilingual SR/EN with localStorage language persistence
14-product catalog with ingredient-level AI reasoning
Medical disclaimer logic for clinical skin concerns
25 store locations with geolocation-based nearest store finder
PostHog analytics across all key user actions
Deployed on Vercel with CI/CD via GitHub
Manual Instagram DM time for product questions: reduced to zero
The advisor handles the full recommendation flow 24/7 — concern intake, product matching with ingredient reasoning, routine building, physical store navigation, and appropriate medical escalation. All in the brand's voice. All in the right language.
Early signals from PostHog will show quiz completion rate, product click-through, and offline store navigation intent. Those numbers go here in two weeks.
Tools used: Figma, Claude Sonnet 4.6 (Anthropic), Cursor, Next.js, Tailwind CSS, Vercel, PostHog, GitHub
claude ai
cursor
design systems
posthog
vercel
Ivana Soldatovic
CEO & Founder at bee’s care
