Brand Hub: een levende stijlgids die AI-tools kunnen lezen
Een publieke brand-referentie die ik kan delen met Lovable, v0, Bolt en andere AI-tools. Kleuren, typografie, logo's, templates, tone of voice en live website-patronen op een URL.
Het probleem
Elke keer als ik een AI-tool gebruik om iets te bouwen (een landingspagina in Lovable, een component in v0, een prototype in Bolt), moet ik de huisstijl opnieuw uitleggen. "Gebruik coral #F36E59 voor accenten, Open Sans voor bodytekst, Cal Sans voor koppen." Dat is foutgevoelig en tijdrovend.
Wat ik gebouwd heb
Een publieke brand hub op mr-brand-hub.netlify.app met zeven secties:
/colors: het volledige kleurenpalet met hex-codes (coral, navy, sky-blue, warm grijs)
/typography: font-specimens van Open Sans en Cal Sans met grootte-voorbeelden
/logos: alle logovarianten op lichte en donkere achtergronden
/templates: design asset templates voor LinkedIn, slides, carousels en voorstellen
/assets: social content afbeeldingen, kant-en-klaar
/voice: stem- en toonrichtlijnen (direct, specifiek, geen afzwakkers)
/agent: een AI Brand Agent die vragen over de huisstijl beantwoordt
Hoe ik het gebruik
Als ik in Lovable een nieuwe pagina bouw, plak ik een regel in mijn prompt: "Volg de brand richtlijnen van Mission Relearn: https://mr-brand-hub.netlify.app". De AI-tool kan de pagina bezoeken en de juiste kleuren, fonts en stijl overnemen. Geen handmatig uitleggen meer.
Dezelfde aanpak werkt met v0, Bolt, Cursor en elke andere tool die URLs kan lezen.
Resultaat
Mijn projecten zijn visueel consistent, ongeacht welke tool ik gebruik om ze te bouwen. De brand hub is de single source of truth voor mijn huisstijl, toegankelijk voor zowel mensen als AI.