Over dit prototype | Plug n' Play

Het UX-plan is een React-app, geen Webflow-site. Toch is alles wat je erin ziet één-op-één in Webflow te bouwen — dat is de hele opzet.

Componenten: Uitsluitend Relume-componenten, opgehaald via de Relume MCP. Geen enkele sectie is zelf ontworpen; enkel de inhoud is ingevuld.
Relume ↔ Webflow: Relume levert dezelfde bibliotheek in twee vormen: React-componenten (waarmee dit prototype gebouwd is) en Webflow-componenten (die je in de Designer plakt). Een sectie hier is dus een sectie die in Webflow bestaat — daarom is de mockup betrouwbaar als voorstel en niet enkel als plaatje.
Techniek: React 19 + TypeScript, gebundeld met Vite. Routing via React Router, styling met Tailwind CSS op de Relume-preset, animatie met Motion en enkele Radix UI-primitives (tabs, dropdown, checkbox, accordeon) die onder de Relume-componenten zitten.
Inhoud: Beelden en de bestaande teksten komen van de huidige site (crawl 08/2026); namen, zoekwoorden, titels en omschrijvingen komen uit het zoekwoordonderzoek. Alles staat in één datalaag: 4 clusters, 12 expertises, 172 realisaties en 60 omleidingen.
Naar Webflow: Uit diezelfde datalaag rolt de CMS-export: twee collecties — Expertises en Cases — met 184 items als CSV-import, plus de omleidingslijst. Wat er niet in kan zitten is de opbouw van de pagina's: Webflow leest geen structuur uit een configbestand, dus die kant gebeurt in de Designer door Relume-componenten te plakken.
Filteren en sorteren: Het overzicht van de realisaties filtert op cluster en op expertise. In Webflow doet Finsweet Attributes dat met attributen op de collection list — een gratis extern script, maar wel een afhankelijkheid buiten Webflow zelf.
Hosting: Cloudflare Pages, met noindex op het prototype, dit portaal en de technische analyse — het gaat over de site van een klant.
Niet in Webflow: De balk onderaan elke prototypepagina en de noindex-instelling horen bij dit voorstel, niet bij de site zelf. Die gaan niet mee naar de Designer.