Ik gaf Astra en Fable exact dezelfde vier opdrachten.

# ROL

Je bent een combinatie van:

- Senior conversion strategist
- Direct-response copywriter
- Senior UX/UI designer
- CRO-specialist
- Brand designer
- Senior front-end developer
- Creative director

Je opdracht is niet om alleen een concept of wireframe te bedenken. Je moet een volledig uitgewerkte, hoogwaardige marketingfunnel ontwerpen en, wanneer je omgeving dit ondersteunt, daadwerkelijk bouwen.

Het eindresultaat moet voelen alsof een top-tier digital agency, conversion specialist en Apple-level product designer hier gezamenlijk aan hebben gewerkt.

---

# HOOFDDOEL

Ontwikkel een complete marketingfunnel voor Ai-Revolution bestaande uit drie pagina's:

1. Opt-in landingspagina
2. Video sales pagina
3. Bedankpagina na het inplannen van een gesprek

De funnel moet bezoekers stap voor stap van nieuwsgierigheid naar conversie begeleiden.

De primaire conversies zijn:

**Stap 1:** Naam + e-mailadres achterlaten om toegang te krijgen tot de video.

**Stap 2:** De video bekijken en een gesprek inplannen.

**Stap 3:** Na het inplannen enthousiasme, vertrouwen en autoriteit verder vergroten via de bedankpagina.

---

# BELANGRIJK: BEGIN MET DE BESCHIKBARE BESTANDEN

Voordat je iets ontwerpt of bouwt:

1. Inspecteer alle beschikbare bestanden, mappen en assets die bij dit project horen.
2. Zoek specifiek naar:
   - Design system
   - README-bestanden
   - Brand guidelines
   - Logo's
   - Kleuren
   - Typografie
   - Gradients
   - Icons
   - Foto's
   - Screenshots
   - Video thumbnails
   - Testimonials
   - Klantlogo's
   - Afbeeldingen van oprichter/team
   - Bestaande website-elementen
3. Gebruik het design system als primaire bron van waarheid.
4. Gebruik bestaande assets waar mogelijk in plaats van zelf willekeurige alternatieven te verzinnen.
5. Respecteer bestaande spacing, kleuren, border-radius, shadows, gradients, buttons, fonts en overige design tokens.
6. Gebruik klantlogo's op een stijlvolle manier als social proof.
7. Wanneer een asset ontbreekt, gebruik dan een duidelijke placeholder die eenvoudig vervangen kan worden.

Verzin GEEN nieuw design system als er al één aanwezig is.

Als verschillende bestanden elkaar tegenspreken, geef prioriteit aan het meest actuele design-systembestand.

---

# CREATIEVE RICHTING

De gehele funnel moet:

- Premium voelen
- Modern zijn
- Veel visuele diepte hebben
- Zeer professioneel ogen
- High-end SaaS / Apple-achtige kwaliteit hebben
- Niet voelen als een standaard marketingtemplate
- Niet voelen als een goedkope funnelbuilder
- Sterke typografische hiërarchie gebruiken
- Zeer veel aandacht besteden aan micro-interacties
- Rust, vertrouwen en autoriteit uitstralen
- Conversion-focused zijn zonder schreeuwerig te worden

Denk qua ontwerpprincipes aan:

- Apple
- Linear
- Stripe
- Framer
- High-end AI/SaaS websites

Gebruik deze merken alleen als kwaliteitsreferentie. Kopieer hun ontwerpen niet.

Het ontwerp moet uniek blijven en volledig aansluiten op het aangeleverde merk.

---

# ONDERWERP VAN DE FUNNEL

Wanneer er geen specifiek aanbod of onderwerp is meegegeven, gebruik dan tijdelijk dit concept:

## "Ontdek hoe je AI inzet als een digitale collega in plaats van een chatbot"

Doelgroep:

Ondernemers, directeuren en managers van MKB-bedrijven met een team.

Belofte:

Laat in een korte exclusieve video zien hoe bedrijven AI kunnen laten meewerken in dagelijkse processen, waardoor medewerkers sneller werken, repetitieve werkzaamheden verminderen en AI daadwerkelijk onderdeel wordt van de organisatie.

Schrijf dit aantrekkelijker wanneer je betere copy kunt bedenken.

Gebruik niet letterlijk alle bovenstaande tekst. Dit is strategische context.

---

# COPYWRITING PRINCIPES

Schrijf alle daadwerkelijke funnelcopy.

Gebruik GEEN lorem ipsum.

Schrijf:

- Kort
- Concreet
- Zelfverzekerd
- Nieuwsgierigheid opwekkend
- Resultaatgericht
- Zonder overdreven marketingclaims
- Zonder cliché AI-jargon
- Zonder ellenlange paragrafen

De bezoeker moet binnen enkele seconden begrijpen:

1. Dit gaat over mij.
2. Dit klinkt interessant.
3. Dit probleem herken ik.
4. Ik wil zien wat er in die video staat.

Vermijd generieke uitspraken zoals:

- "Transformeer je bedrijf met AI"
- "Ontgrendel de kracht van AI"
- "Revolutioneer je workflow"
- "De toekomst is nu"

Schrijf menselijker, specifieker en geloofwaardiger.

---

# PAGINA 1: OPT-IN LANDINGSPAGINA

## Hoofddoel

Slechts één doel:

De bezoeker overtuigen om zijn/haar naam en e-mailadres achter te laten om toegang tot de video te krijgen.

Gebruik op deze pagina nergens de term:

"VSL"

Voor de bezoeker is het simpelweg:

- Een gratis video
- Een exclusieve video
- Een korte presentatie
- Een training
- Een kijkje achter de schermen

Kies de meest overtuigende positionering.

---

## Boven de vouw

Maak een zeer sterke hero.

Deze moet minimaal bevatten:

### Eyebrow

Een korte zin boven de headline die context of nieuwsgierigheid creëert.

### Headline

Een krachtige headline die het resultaat of nieuwe inzicht communiceert.

Maak hem specifiek genoeg dat de doelgroep onmiddellijk geïnteresseerd raakt.

### Subheadline

Maximaal ongeveer twee of drie regels.

Leg uit wat iemand gaat ontdekken en waarom het relevant is.

### Primaire CTA

Bijvoorbeeld:

"Bekijk de video"

of een sterkere variant.

Laat de CTA niet direct naar een andere pagina gaan.

Bij klikken moet een opt-in modal/pop-up openen.

---

# VISUEEL CENTRAAL ELEMENT PAGINA 1

Creëer een premium visueel element rond de video.

Bijvoorbeeld:

- Een high-end laptop mock-up
- Een zwevend scherm
- Een browservenster
- Een video thumbnail in een device
- Een subtiele 3D-compositie

Toon op het scherm een afbeelding/foto van de persoon achter het merk wanneer deze als asset aanwezig is.

Plaats een duidelijke play-button over de afbeelding.

Maak het geheel interactief.

Bij klikken op:

- de play-button
- het videoscherm
- de CTA

moet dezelfde opt-in pop-up verschijnen.

Laat het visueel voelen alsof er waardevolle content achter zit die iemand direct wil openen.

---

# OPT-IN POP-UP

Maak een premium modal.

Inhoud:

### Titel

Een korte motiverende headline.

### Korte tekst

Leg in maximaal twee regels uit dat iemand direct toegang krijgt.

### Velden

- Voornaam
- E-mailadres

### CTA

Bijvoorbeeld:

"Geef mij toegang"

Kies zelf eventueel betere copy.

### Microcopy

Maak duidelijk dat gegevens netjes worden behandeld.

Geen overdreven juridische teksten.

Na succesvolle submit:

Navigeer naar pagina 2.

De daadwerkelijke formulierintegratie hoeft niet te functioneren wanneer daar geen externe backend voor beschikbaar is.

De gebruikersflow moet visueel en functioneel wel volledig worden gebouwd.

---

# AANVULLENDE SECTIES PAGINA 1

Houd deze pagina relatief kort.

De pagina mag bijvoorbeeld bevatten:

- Hero
- Vertrouwensindicator
- Rij met klantlogo's
- 3 korte inzichten die in de video behandeld worden
- Eventueel een subtiel credibility-element
- Finale CTA

Maar:

Geef niet zoveel informatie weg dat bezoekers geen reden meer hebben om de video te bekijken.

Nieuwsgierigheid is belangrijk.

---

# PAGINA 2: VIDEO SALES PAGINA

Deze pagina wordt geopend nadat iemand zijn gegevens heeft achtergelaten.

De focus verandert hier volledig.

Primaire doel:

**Video bekijken.**

Secundaire doel:

**Gesprek inplannen.**

---

# HERO PAGINA 2

Maak deze pagina rustiger dan pagina 1.

Bovenaan bijvoorbeeld:

"Je video staat klaar."

Daaronder eventueel een korte regel die vertelt wat ze gaan leren.

Het grootste visuele element moet de video zijn.

---

# VIDEO PLAYER

Maak een grote premium video container.

Geen laptopmock-up nodig.

Gebruik bijvoorbeeld:

- 16:9 verhouding
- Mooie afgeronde hoeken
- Subtiele glow
- Premium border
- Play-button
- Thumbnail/foto van de spreker indien beschikbaar

Indien geen echte video beschikbaar is:

Bouw een realistische videoplayer-placeholder.

---

# CTA ONDER VIDEO

Direct onder de video moet een duidelijke CTA komen.

Bijvoorbeeld:

"Plan een vrijblijvend gesprek"

of:

"Plan je gesprek"

Kies de tekst die het beste aansluit bij het aanbod.

Zet rondom deze CTA genoeg context zodat iemand weet waarom hij/zij het gesprek zou inplannen.

Bijvoorbeeld:

"In 30 minuten kijken we waar AI binnen jouw organisatie nu de meeste impact kan maken."

Gebruik alleen een tijdsduur wanneer die context aanwezig is. Anders laat je de exacte tijd weg.

---

# KALENDER POP-UP

Bij klikken op de CTA opent een grote modal met een kalenderinterface.

De kalender hoeft niet gekoppeld te worden met Calendly, Cal.com of een ander systeem tenzij daar al een integratie voor aanwezig is.

Maak wel een realistische kalender-embed/mock-up.

Bijvoorbeeld:

Stap 1:\
Selecteer datum

Stap 2:\
Selecteer tijd

Stap 3:\
Bevestigen

Houd de interface volledig in dezelfde huisstijl.

Na bevestiging gaat de gebruiker naar pagina 3.

---

# PAGINA 3: BEDANKPAGINA

Deze pagina moet VEEL meer zijn dan:

"Bedankt, afspraak is ingepland."

Zie deze pagina als een:

## Trust + Authority + Content Hub

De bezoeker heeft al een afspraak geboekt.

Dat betekent dat de commerciële conversie al heeft plaatsgevonden.

Vanaf dit moment moet de pagina vooral:

- Vertrouwen versterken
- Verwachtingen managen
- Expertise tonen
- Persoonlijke connectie creëren
- Content laten consumeren
- Bezwaar vooraf wegnemen
- Bevestigen dat de bezoeker de juiste keuze heeft gemaakt

---

# BOVENSTE SECTIE BEDANKPAGINA

Maak een duidelijke bevestiging.

Bijvoorbeeld:

"Top. Je gesprek staat gepland."

Schrijf vervolgens kort wat er gaat gebeuren.

Maak het persoonlijk.

Gebruik vervolgens een tweede video van de oprichter / consultant.

Bijvoorbeeld een welkomstvideo waarin ongeveer de volgende boodschap wordt gegeven:

"Leuk dat je een gesprek hebt ingepland. Ik kijk ernaar uit om kennis te maken. Tijdens het gesprek kijken we vooral naar jullie organisatie, waar jullie momenteel tegenaan lopen en waar AI concreet kan helpen. Je hoeft niets voor te bereiden."

Dit is alleen inhoudelijke richting.

Schrijf zelf een betere variant.

Gebruik een videoplayer-placeholder wanneer geen video beschikbaar is.

---

# WAT KUN JE VERWACHTEN?

Voeg een korte sectie toe met bijvoorbeeld drie stappen.

Bijvoorbeeld:

01\
Waar staan jullie nu?

02\
Waar zit het grootste AI-potentieel?

03\
Wat is een logische volgende stap?

Maak het concreet en laagdrempelig.

---

# SOCIAL PROOF

Gebruik aanwezige klantlogo's.

Presenteer ze premium.

Geen simpele rij logo's als dit visueel beter kan.

Denk aan:

- Logo wall
- Subtiele marquee
- Logo cards
- Cases
- Metrics
- Testimonials

Wanneer daadwerkelijke testimonials aanwezig zijn in bestanden:

Gebruik deze.

Wanneer ze NIET aanwezig zijn:

Verzin geen testimonials alsof het echte quotes zijn.

Gebruik dan duidelijk gemarkeerde placeholders.

---

# TESTIMONIALS

Maak een high-end testimonialsectie.

Gebruik bijvoorbeeld:

- Grote featured testimonial
- Kleinere cards
- Foto's wanneer aanwezig
- Bedrijfsnaam
- Functie
- Logo

Houd vormgeving rustig en geloofwaardig.

---

# RESULTATEN / AUTORITEIT

Gebruik beschikbare concrete bewijsvoering, bijvoorbeeld:

- Aantal getrainde organisaties
- Aantal deelnemers
- Cases
- Klantlogo's
- Behaalde resultaten
- Ervaring
- Media
- YouTube bereik
- Andere beschikbare credibility signals

Gebruik alleen feitelijke cijfers wanneer die daadwerkelijk uit aangeleverde informatie of assets blijken.

Verzin geen bedrijfsresultaten.

---

# CONTENT LIBRARY

Dit is een belangrijk onderdeel.

Maak op de bedankpagina een visueel zeer sterke:

## "Bekijk ondertussen..."

of vergelijkbare contentsectie.

Deze moet voelen als:

Netflix × Apple TV × premium knowledge hub.

Gebruik aanwezige YouTube-video's, thumbnails of content wanneer beschikbaar.

Anders mogen placeholders worden gebruikt.

Maak bijvoorbeeld:

### Featured video

Grote kaart.

### Populaire video's

Horizontale rij cards.

### Meer leren over AI

Tweede rij.

Cards bevatten bijvoorbeeld:

- Thumbnail
- Titel
- Korte categorie
- Speelduur wanneer bekend
- Subtiele hover-interactie

Geen zware dashboardlook.

Het moet editorial en premium aanvoelen.

---

# EVENTUELE EXTRA SECTIES BEDANKPAGINA

Voeg alleen onderdelen toe wanneer ze daadwerkelijk waarde toevoegen, bijvoorbeeld:

- Frequently Asked Questions
- "Maak kennis met..."
- Cases
- Artikelen
- Podcast/video content
- Mini resource library
- Klantverhalen
- "Dit bespreken we tijdens het gesprek"
- "Zo helpen we organisaties"

Gebruik creativiteit.

De bedankpagina mag aanzienlijk uitgebreider zijn dan pagina 1 en 2.

---

# APPLE-LIKE DESIGN PRINCIPES

Gebruik waar passend:

- Veel whitespace
- Grote typografie
- Sterke contrasten
- Premium gradients
- Zeer subtiele glows
- Layered cards
- Blur/glass alleen wanneer passend bij het design system
- Scroll reveal animations
- Parallax met mate
- Smooth hover effects
- Mouse interactions
- Kleine scale transitions
- Subtiele content entrances
- Sticky elementen wanneer functioneel
- Mooie page transitions

Animaties moeten de ervaring versterken.

Niet elke tekst of kaart hoeft te bewegen.

Vermijd overdreven effects.

Premium design is gecontroleerd.

---

# MICRO-INTERACTIES

Besteed expliciet aandacht aan:

- Button hover
- Button press
- Card hover
- Modal transitions
- Play-button hover
- Form focus states
- Input validation
- Success states
- Kalenderselectie
- Video cards
- Logo hover waar toepasselijk
- Page transition

Alle animaties moeten smooth en modern voelen.

---

# RESPONSIVE DESIGN

Ontwerp en bouw voor:

- Desktop
- Laptop
- Tablet
- Mobiel

Mobile is geen verkleinde desktopvariant.

Pas op mobiel waar nodig aan:

- Font sizes
- Grid
- Card stacking
- Modal layout
- Video dimensions
- CTA placement
- Navigation
- Padding
- Hero visual
- Calendar interface

Zorg dat alle belangrijke CTA's met één duim te bedienen zijn.

---

# CONVERSION PRINCIPES

Optimaliseer continu voor de volgende vraag:

"Wat moet deze bezoeker NU doen?"

Pagina 1:\
Gegevens achterlaten.

Pagina 2:\
Video bekijken en gesprek plannen.

Pagina 3:\
Vertrouwen vergroten en meer relevante content consumeren.

Voorkom concurrerende CTA's.

---

# NAVIGATIE

Gebruik zo weinig mogelijk navigatie op pagina 1 en 2.

Geen uitgebreide websiteheader waardoor bezoekers kunnen ontsnappen uit de funnel.

Logo mag aanwezig zijn.

Een minimalistische header heeft de voorkeur.

Op pagina 3 mag eventueel iets meer navigatie/content discovery aanwezig zijn.

---

# TECHNISCHE UX

Bouw waar relevant:

- Smooth scrolling
- Modals
- Escape-to-close
- Click-outside-to-close
- Keyboard navigation
- Focus states
- Form validation
- Loading states
- Success states
- Responsive layouts
- Reduced-motion ondersteuning

Gebruik semantische HTML en zorg voor goede toegankelijkheid.

---

# PERFORMANCE

Optimaliseer voor:

- Snelle eerste render
- Geen onnodig zware dependencies
- Lazy-loading van content onder de fold
- Geoptimaliseerde afbeeldingen
- Goede Core Web Vitals
- Geen overdreven JavaScript voor simpele animaties

---

# SEO

Hoewel dit primair een funnel is:

Voeg correcte:

- Page titles
- Meta descriptions
- Open Graph metadata
- Favicon wanneer beschikbaar
- Semantische heading structure

toe.

Pagina 2 en 3 hoeven niet noodzakelijk geïndexeerd te worden wanneer dit een echte gated funnel betreft.

Gebruik dan waar passend:

noindex, nofollow.

---

# GEEN VERZONNEN INFORMATIE

Cruciaal:

Verzin geen:

- Testimonials
- Klantresultaten
- Klantnamen
- Omzetresultaten
- Besparingspercentages
- Awards
- Partnerships
- Media-aandacht
- YouTube-statistieken
- Aantal klanten
- Bedrijfsstatistieken

Wanneer informatie ontbreekt, gebruik:

"[Placeholder: testimonial]"

of een nette visuele placeholder.

Voor algemene marketingcopy mag je uiteraard creatieve teksten schrijven.

---

# CONTENT EN DESIGN MOETEN SAMENWERKEN

Ontwerp niet eerst een willekeurige website en vul daarna tekst in.

Bepaal per section:

1. Wat moet iemand hier begrijpen?
2. Wat moet iemand voelen?
3. Welk bezwaar lossen we op?
4. Welke actie moet hierna logisch voelen?
5. Welke visuele compositie ondersteunt dat het beste?

Maak vervolgens pas het component.

---

# GEEN TEMPLATE-GEVOEL

Vermijd een voorspelbare structuur zoals:

Hero\
3 cards\
Logo bar\
3 cards\
FAQ\
Footer

Varieer composities.

Gebruik editorial layouts.

Gebruik asymmetrie waar passend.

Laat grote visuals soms over de grid heen lopen.

Speel met schaal.

Laat belangrijke sections een eigen visuele identiteit hebben terwijl alles onderdeel blijft van één design system.

---

# FUNNEL FLOW

De flow moet daadwerkelijk werken:

## PAGE 1

CTA / video klikken

↓

Opt-in modal

↓

Naam + e-mail invullen

↓

Submit

↓

PAGE 2

---

## PAGE 2

Video bekijken

↓

CTA gesprek plannen

↓

Calendar modal

↓

Datum/tijd kiezen

↓

Bevestigen

↓

PAGE 3

---

## PAGE 3

Afspraak bevestigd

↓

Welkomstvideo

↓

Wat kun je verwachten

↓

Social proof

↓

Testimonials/cases

↓

Content library

↓

Meer relevante content

---

# ALS JE CODE KUNT SCHRIJVEN

Wanneer je omgeving websites kan bouwen:

STOP NIET na het leveren van een ontwerpomschrijving.

Bouw de funnel daadwerkelijk.

Gebruik een moderne en onderhoudbare componentstructuur.

Werk bestaande code zoveel mogelijk verder uit wanneer dit een bestaand project is.

Gebruik het framework dat al binnen het project aanwezig is.

Als er nog geen framework bestaat, kies een moderne en passende stack.

Maak herbruikbare componenten voor bijvoorbeeld:

- Buttons
- Modals
- Video player
- Logo wall
- Testimonial cards
- Content cards
- Calendar UI
- Input fields

Gebruik design tokens in plaats van overal losse stylingwaarden te hardcoden.

---

# ALS JE GEEN WEBSITE KUNT BOUWEN

Wanneer je omgeving alleen tekst kan produceren:

Lever dan een implementation-ready specification met:

- Complete copy per pagina
- Volledige sectionvolgorde
- Wireframebeschrijving
- Desktop layout
- Mobile layout
- Interacties
- Animaties
- Componenten
- Design tokens uit het design system
- Modal states
- Formulierstates
- Kalenderflow
- Asset mapping
- Developer instructions

Het resultaat moet gedetailleerd genoeg zijn dat een developer het zonder aanvullende creatieve beslissingen kan bouwen.

---

# VERPLICHTE KWALITEITSCONTROLE

Controleer vóór oplevering de complete funnel alsof je:

1. Een CRO-specialist bent
2. Een senior designer bent
3. Een potentiële klant bent
4. Een front-end developer bent

Controleer vervolgens:

### Conversion

- Is per pagina één primaire actie duidelijk?
- Is de CTA zichtbaar genoeg?
- Is er voldoende reden om door te gaan?
- Zitten er onnodige afleidingen in?

### Copy

- Is de headline specifiek?
- Is de taal natuurlijk?
- Is er genoeg nieuwsgierigheid?
- Zijn er clichés?

### Design

- Voelt dit premium?
- Is er genoeg whitespace?
- Is de hiërarchie goed?
- Is alles consistent met het design system?

### UX

- Werken de modals?
- Is duidelijk wat er na elke actie gebeurt?
- Werkt mobiel goed?
- Zijn states afgehandeld?

### Trust

- Worden claims ondersteund?
- Worden geen testimonials verzonnen?
- Worden beschikbare logo's en bewijsvoering optimaal gebruikt?

### Technical

- Zijn componenten herbruikbaar?
- Is de pagina performant?
- Zijn accessibility basics aanwezig?
- Zijn responsive states volledig?

Verbeter zelfstandig alle zwakke onderdelen die je tijdens deze review ontdekt.

---

# BELANGRIJKE WERKWIJZE

Vraag mij niet voor ieder klein detail om toestemming.

Wanneer iets niet expliciet is beschreven:

Gebruik zelfstandig professioneel oordeel.

Maak redelijke aannames.

Prioriteer:

1. Conversie
2. Merkconsistentie
3. UX
4. Visuele kwaliteit
5. Performance

Stel alleen een vraag wanneer informatie absoluut noodzakelijk is om verder te kunnen.

Anders:

Ga door en bouw de best mogelijke versie.

---

# EINDRESULTAAT

Ik wil uiteindelijk een funnel die eruitziet alsof er serieus budget aan is besteed.

Niet:

"Dit is een prima AI-gegenereerde landingspagina."

Maar:

"Dit is een merk met autoriteit."

De volledige ervaring van eerste advertentieklik tot na het boeken van het gesprek moet als één bewust ontworpen customer journey voelen.

Begin nu met het inspecteren van het design system, de beschikbare bestanden, logo's en assets. Werk daarna de funnel volledig uit.

# ROL

Je bent een combinatie van:

- Senior SaaS Product Designer
- Senior UX/UI Designer
- Business Intelligence Expert
- CFO / financieel strateeg
- Head of Sales
- Head of Marketing
- Senior Full-Stack Developer

Je opdracht is om een professioneel, modern en extreem gebruiksvriendelijk **CEO Dashboard** te ontwerpen en, wanneer je omgeving dit ondersteunt, volledig werkend te bouwen.

Het dashboard moet aanvoelen als software waarvoor een bedrijf serieus zou betalen.

De belangrijkste ontwerpfilosofie:

**Simplicity over complexity.**

Een CEO moet binnen maximaal 10 seconden kunnen begrijpen:

1. Hoe staat het bedrijf ervoor?
2. Gaan we vooruit of achteruit?
3. Waar zit het grootste probleem?
4. Waar zit de grootste kans?
5. Waar moet ik vandaag aandacht aan geven?

Bouw daarom geen traditioneel BI-dashboard vol grafieken en tientallen KPI's.

Maak een rustige, premium interface waarin alleen informatie staat die daadwerkelijk helpt bij het nemen van beslissingen.

---

# DOEL

Ontwikkel een centraal CEO Dashboard waarin de belangrijkste bedrijfsinformatie samenkomt.

Het dashboard moet data kunnen combineren vanuit verschillende bedrijfssystemen, zoals:

- CRM
- Sales
- Marketing
- Finance / boekhouding
- Projectmanagement
- Operations

Gebruik voorlopig realistische **dummy data**.

Zorg ervoor dat op een subtiele maar duidelijke manier zichtbaar is:

**Demo data**

of:

**Dit dashboard bevat momenteel dummy data. Koppel je systemen om live bedrijfsdata te bekijken.**

De gebruiker moet direct begrijpen dat de data later vervangen kan worden door echte integraties.

---

# BELANGRIJKSTE UX-PRINCIPE

Voorkom dat je alles laat zien wat technisch mogelijk is.

Laat alleen zien wat voor een CEO relevant is.

Gebruik progressive disclosure:

- Op het hoofdscherm alleen de belangrijkste informatie.
- Meer details pas wanneer iemand doorklikt.
- Geen lange tabellen op het hoofdscherm.
- Geen 20 KPI-cards naast elkaar.
- Geen overmatige hoeveelheid grafieken.
- Geen dashboard dat eruitziet als Excel met een mooi jasje.

De interface moet kalm en overzichtelijk voelen.

---

# DASHBOARDSTRUCTUUR

Gebruik maximaal ongeveer 5 primaire onderdelen.

Aanbevolen navigatiestructuur:

1. Overzicht
2. Sales
3. Marketing
4. Finance
5. Operations

Voeg alleen extra onderdelen toe wanneer ze aantoonbaar waarde toevoegen.

---

# 1. OVERZICHT

Dit is het belangrijkste scherm.

Een CEO moet hier vrijwel alles kunnen zien wat nodig is om de huidige gezondheid van het bedrijf te begrijpen.

## Header

Toon bijvoorbeeld:

**Goedemorgen, [Naam]**

Daaronder:

**Zo staat je bedrijf er vandaag voor.**

Voeg rechtsboven een periodefilter toe:

- Deze maand
- Vorige maand
- Dit kwartaal
- Dit jaar
- Custom

---

## Bedrijfsstatus

Maak bovenaan een compacte samenvatting van de algemene bedrijfsprestaties.

Bijvoorbeeld:

**Business Health**

86 / 100

Status:

**Gezond**

Of:

**Aandacht nodig**

Bereken deze score fictief op basis van bijvoorbeeld:

- omzetontwikkeling
- winstgevendheid
- sales pipeline
- marketingperformance
- cashflow
- operationele prestaties

Maak duidelijk dat dit bij dummy data een demonstratiescore is.

---

## Belangrijkste KPI's

Toon maximaal ongeveer 4 tot 6 KPI's.

Bijvoorbeeld:

### Omzet
€284.500

+12,4% versus vorige periode

### Nettowinst
€61.300

21,5% marge

### Nieuwe klanten
18

+4 versus vorige maand

### Sales pipeline
€412.000

3,2x maandtarget

### Cashpositie
€368.000

4,8 maanden runway

Gebruik duidelijke stijgingen en dalingen.

Gebruik geen ingewikkelde financiële terminologie wanneer eenvoudige taal volstaat.

---

# CEO INSIGHTS

Dit moet een van de belangrijkste onderdelen van het dashboard worden.

Maak een sectie:

**Wat vraagt je aandacht?**

Analyseer de dummy data en genereer automatisch 3 tot maximaal 5 inzichten.

Bijvoorbeeld:

### Salescyclus loopt op

De gemiddelde tijd tussen eerste gesprek en gewonnen deal is gestegen van 24 naar 31 dagen.

**Mogelijke impact:** tragere omzetgroei.

CTA:

**Bekijk Sales**

---

### Marketing presteert efficiënter

De cost per lead is deze maand met 18% gedaald terwijl het aantal leads met 22% steeg.

CTA:

**Bekijk Marketing**

---

### Debiteuren lopen op

€42.800 aan facturen staat momenteel langer dan 30 dagen open.

CTA:

**Bekijk Finance**

De inzichten moeten geen generieke AI-zinnen zijn.

Gebruik altijd:

**Observatie → betekenis → eventueel aanbevolen actie**

---

# TRENDOVERZICHT

Voeg één belangrijke grafiek toe waarin bijvoorbeeld omzet, kosten en winst over tijd zichtbaar zijn.

Maak hem interactief maar visueel rustig.

Filters:

- Omzet
- Winst
- Kosten

Of combineer ze indien dat visueel overzichtelijk blijft.

Geen onnodige legenda's, assen of technische elementen.

---

# DOELSTELLINGEN

Voeg een compacte sectie toe:

**Targets**

Bijvoorbeeld:

Omzetdoel:
€284.500 / €325.000

87%

Nieuwe klanten:
18 / 25

72%

Jaaromzet:
€2.380.000 / €3.000.000

79%

Gebruik progress bars of een vergelijkbaar rustig visueel element.

---

# SYSTEMEN KOPPELEN

Dit onderdeel moet duidelijk zichtbaar zijn op het hoofdscherm.

Maak bijvoorbeeld een card:

## Maak je dashboard live

**Koppel je bedrijfssystemen en vervang de demo-data automatisch door actuele cijfers.**

Knop:

**Systemen koppelen**

Toon enkele herkenbare voorbeelden.

### CRM / Sales

- HubSpot
- Pipedrive
- Salesforce
- Monday.com
- ClickUp

### Finance

- Moneybird
- Exact Online
- AFAS
- Xero
- QuickBooks

### Marketing

- Google Ads
- Meta Ads
- LinkedIn Ads
- Google Analytics

### Operations

- Monday.com
- ClickUp
- Asana
- Jira

Toon bijvoorbeeld statussen:

Connected

Not connected

Coming soon

Het hoeft niet daadwerkelijk gekoppeld te worden wanneer API-integraties niet beschikbaar zijn.

Bouw dan wel de UX alsof dit een echte SaaS-integratiepagina is.

---

# 2. SALES

Maak een Sales-dashboard waarin alleen metrics staan waarmee management daadwerkelijk iets kan.

Bovenaan maximaal ongeveer 5 KPI's:

- Pipeline value
- Gewonnen omzet
- Nieuwe opportunities
- Win rate
- Gemiddelde dealwaarde

Toon trends versus de vorige periode.

---

## Sales funnel

Visualiseer:

Lead

→ Qualified

→ Proposal

→ Won

Toon per fase:

- aantal deals
- waarde
- conversiepercentage

Maak visueel duidelijk waar de grootste drop-off zit.

---

## Pipeline

Toon bijvoorbeeld:

Totale pipeline:
€412.000

Weighted pipeline:
€238.000

Target:
€300.000

Coverage:
1,37x

---

## Forecast

Maak een simpele forecast:

Target:
€300.000

Commit:
€245.000

Best case:
€328.000

Gebruik een duidelijke visualization.

---

## Sales Insights

Laat het systeem automatisch inzichten genereren.

Bijvoorbeeld:

**Proposal → Won conversie daalde van 41% naar 32%.**

of:

**€96.000 aan pipeline heeft langer dan 30 dagen geen activiteit gehad.**

Maak dit actiegericht.

---

# 3. MARKETING

Toon alleen metrics die uiteindelijk aan businessresultaten gekoppeld kunnen worden.

KPI's:

- Marketing spend
- Leads
- Cost per lead
- Marketing qualified leads
- Customer acquisition cost
- Marketing attributed revenue
- ROAS of marketing ROI

Gebruik dummy data.

---

## Funnel

Bijvoorbeeld:

Website visitors

→ Leads

→ Qualified leads

→ Opportunities

→ Customers

Laat conversie tussen iedere stap zien.

---

## Kanaalperformance

Maak een overzicht van bijvoorbeeld:

Google Ads

Meta Ads

LinkedIn Ads

Organic

Email

Referral

Toon:

- spend
- leads
- CPL
- klanten
- omzet

Markeer automatisch het beste en slechtste kanaal.

---

## Marketing Insights

Bijvoorbeeld:

**LinkedIn Ads genereert de duurste leads, maar heeft momenteel de hoogste lead-to-customer conversie.**

of:

**Google Ads levert 42% van alle nieuwe klanten tegen 27% van het marketingbudget.**

---

# 4. FINANCE

Maak dit begrijpelijk voor iemand die geen accountant is.

Belangrijkste KPI's:

- Omzet
- Brutomarge
- Operationele kosten
- Nettowinst
- Cashpositie
- Openstaande facturen

---

## Revenue versus Expenses

Maak één eenvoudige grafiek:

Omzet
Kosten
Winst

over bijvoorbeeld de afgelopen 12 maanden.

---

## Kostenverdeling

Maak categorieën zoals:

- Salarissen
- Marketing
- Software
- Huisvesting
- Freelancers
- Overige kosten

Toon de grootste kostenposten zonder twintig categorieën te introduceren.

---

## Cashflow

Toon:

Cash in

Cash out

Net cashflow

Huidige cashpositie

Gebruik eventueel:

**Runway: 4,8 maanden**

alleen indien relevant voor het type bedrijf.

---

## Openstaande facturen

Bijvoorbeeld:

Totaal openstaand:
€74.300

0-30 dagen:
€31.500

30-60 dagen:
€26.800

60+ dagen:
€16.000

Markeer alleen bedragen die aandacht nodig hebben.

---

# 5. OPERATIONS

Houd dit tabblad compact.

Mogelijke KPI's:

- Actieve projecten
- Projecten on track
- Projecten met risico
- Capaciteitsbenutting
- Declarabele uren
- Gemiddelde projectmarge

Pas deze metrics logisch aan wanneer het dashboard voor een ander bedrijfsmodel wordt gebruikt.

---

## Project Health

Maak bijvoorbeeld:

12 actieve projecten

8 On track

3 Attention

1 At risk

Laat alleen probleemprojecten direct zien.

---

## Team Capacity

Bijvoorbeeld:

Gemiddelde capaciteit:
82%

Sales:
74%

Delivery:
91%

Marketing:
68%

Voorkom medewerker-surveillance.

Focus op operationele capaciteit op teamniveau.

---

# CROSS-DASHBOARD INTELLIGENCE

Een belangrijk onderdeel van het dashboard is dat verschillende databronnen met elkaar gecombineerd worden.

Gebruik daarom niet alleen losse metrics.

Vind verbanden.

Bijvoorbeeld:

Marketing spend stijgt

→ Leads stijgen

→ Sales conversie daalt

→ CAC stijgt uiteindelijk toch

Het dashboard kan dan melden:

**Meer marketingbudget zorgt momenteel niet voor evenredige omzetgroei. Leadvolume steeg 28%, maar sales conversie daalde van 24% naar 17%.**

Een ander voorbeeld:

**Omzet ligt 14% boven target, maar operationele kosten groeien momenteel sneller dan de omzet. Hierdoor daalt de nettomarge.**

Dit soort inzichten zijn waardevoller dan losse grafieken.

---

# AI CEO ASSISTANT

Voeg eventueel een subtiele AI-functionaliteit toe.

Geen grote chatbot die de hele interface domineert.

Maak bijvoorbeeld een knop:

**Vraag je dashboard**

Bij openen verschijnt een kleine zijbalk.

Voorbeeldvragen:

- Waarom is onze winst deze maand gedaald?
- Welk marketingkanaal presteert het beste?
- Gaan we ons kwartaaldoel halen?
- Waar verliezen we de meeste sales opportunities?
- Welke kosten stijgen het snelst?

Gebruik voor de demo antwoorden gebaseerd op de dummy data.

---

# NOTIFICATIES EN SIGNALEN

Gebruik intelligente alerts alleen wanneer iets daadwerkelijk aandacht nodig heeft.

Bijvoorbeeld:

**3 aandachtspunten**

Niet:

**27 notificaties**

Voorbeelden:

- Grote factuur langer dan 60 dagen open
- Pipeline onder target
- CAC plotseling sterk gestegen
- Project over budget
- Omzetforecast onder kwartaaldoel

Maak alerts rustig en niet alarmistisch.

---

# DUMMY DATA

Maak een realistische fictieve onderneming als demo.

Bijvoorbeeld een bedrijf met:

- 40-80 medewerkers
- €2-5 miljoen jaaromzet
- Sales team
- Marketingbudget
- Verschillende actieve klanten
- Projecten of dienstverlening

Gebruik consistente dummy data door het hele dashboard.

Wanneer omzet op het overzicht bijvoorbeeld €284.500 is, moet dezelfde periode binnen Finance dezelfde omzet tonen.

Alle berekeningen moeten logisch op elkaar aansluiten.

Dummy data mag niet willekeurig zijn.

Genereer eerst intern één consistente dataset en bouw daar alle onderdelen op.

---

# RESPONSIVE DESIGN

Optimaliseer voor:

1. Desktop
2. Laptop
3. Tablet
4. Mobiel

Desktop is de primaire ervaring.

Gebruik op mobiel geen uitgeklede onbruikbare versie.

Pas de informatiehiërarchie slim aan.

---

# DESIGN

Maak de applicatie premium, modern en rustig.

Denk qua kwaliteit aan moderne SaaS-producten zoals:

- Linear
- Stripe
- Vercel
- Notion
- Attio
- moderne fintech dashboards

Gebruik deze alleen als kwaliteitsreferentie.

Kopieer geen specifieke interface.

---

# VISUELE RICHTLIJNEN

Gebruik:

- veel whitespace
- duidelijke typografische hiërarchie
- hoogwaardige cards
- subtiele borders
- zachte shadows indien passend
- consistente spacing
- moderne iconografie
- duidelijke hover states
- subtiele micro-interacties
- animaties alleen wanneer ze functioneel bijdragen

Gebruik kleur functioneel.

Bijvoorbeeld:

Groen:
positieve ontwikkeling

Rood:
probleem of verslechtering

Oranje:
aandacht

Neutrale kleuren:
standaardinformatie

Gebruik deze signaalkleuren spaarzaam.

Het dashboard moet niet veranderen in een verzameling rode en groene cijfers.

---

# DATA VISUALISATIE

Gebruik alleen een grafiek wanneer een grafiek informatie sneller begrijpelijk maakt.

Voorkeur voor:

- line charts
- area charts
- simpele bar charts
- progress bars
- funnel visualisations
- sparklines

Vermijd tenzij echt noodzakelijk:

- ingewikkelde pie charts
- 3D-grafieken
- gauges
- heatmaps zonder duidelijke reden
- grafieken met meer dan vijf datasets
- datavisualisaties puur als decoratie

---

# INTERACTIES

Maak de interface waar mogelijk functioneel.

Bijvoorbeeld:

- periodefilters veranderen data
- tabs werken
- cards zijn aanklikbaar
- tooltips werken
- systeemintegraties kunnen worden geopend
- AI assistant kan worden geopend
- funnelonderdelen kunnen worden bekeken
- filters hebben zichtbare impact
- navigatie werkt

Gebruik dummy functionaliteit wanneer echte backend-integraties niet beschikbaar zijn.

---

# INTEGRATIEPAGINA

Wanneer iemand op "Systemen koppelen" klikt, open een overzichtelijke integratiepagina.

Gebruik categorieën:

CRM

Finance

Marketing

Projectmanagement

Analytics

Toon integratiecards met logo, naam en status.

Bijvoorbeeld:

Pipedrive  
CRM  
Connect

Moneybird  
Finance  
Connect

Exact Online  
Finance  
Connect

Monday.com  
CRM / Operations  
Connect

Google Ads  
Marketing  
Connect

Meta Ads  
Marketing  
Connect

Laat eventueel zien:

**Laatst gesynchroniseerd: 4 minuten geleden**

voor gekoppelde systemen.

---

# INSTELLINGEN

Voeg alleen noodzakelijke instellingen toe.

Bijvoorbeeld:

Company

Targets

Integrations

Users

Notifications

Geen enorme settings-omgeving bouwen.

---

# TARGETS

Geef gebruikers de mogelijkheid bedrijfsdoelstellingen vast te leggen.

Bijvoorbeeld:

Maandomzet target

Jaaromzet target

Nieuwe klanten target

Marketing CAC target

Winstmarge target

Het dashboard moet actuele prestaties vervolgens automatisch tegen deze targets afzetten.

---

# CEO-FIRST BESLISREGEL

Gebruik bij iedere component deze vraag:

**Helpt dit een CEO sneller begrijpen wat er gebeurt of een betere beslissing nemen?**

Zo niet:

verwijderen.

Wanneer twee widgets vrijwel dezelfde informatie vertellen:

combineer ze.

Wanneer informatie pas relevant wordt na interesse:

verplaats deze naar detailniveau.

---

# BELANGRIJKE VERBODEN

Bouw NIET:

- een dashboard met 30 KPI-cards
- een spreadsheet-interface
- een klassiek Power BI-dashboard
- tientallen menu-items
- enorme datatabellen op het hoofdscherm
- grafieken puur om lege ruimte te vullen
- overdreven gradients
- overdreven glassmorphism
- futuristische AI-clichés
- onnodige chatbots
- een interface waarin elke beschikbare metric zichtbaar is

Het product moet voelen als:

**"Ik zie precies wat ik moet weten."**

Niet:

**"Ik kan hier ontzettend veel informatie vinden."**

---

# BUSINESS MODEL ADAPTATION

Maak het dashboard generiek genoeg om voor verschillende organisaties te werken.

Detecteer indien bedrijfscontext beschikbaar is het bedrijfsmodel.

Bijvoorbeeld:

- SaaS
- zakelijke dienstverlening
- agency
- consultancy
- e-commerce
- productie
- recruitment
- installatiebedrijf
- bouw
- groothandel

Pas secundaire KPI's hierop aan.

Behoud altijd dezelfde eenvoudige hoofdstructuur.

Voor SaaS kan bijvoorbeeld MRR relevant zijn.

Voor consultancy kunnen declarabiliteit en projectmarge relevanter zijn.

Voor e-commerce kunnen AOV en repeat purchase rate relevant zijn.

Toon alleen metrics die daadwerkelijk relevant zijn voor dat bedrijfsmodel.

---

# TECHNISCHE UITVOERING

Wanneer je in een coding-omgeving werkt:

Bouw een echte werkende applicatie.

Gebruik een moderne en stabiele technische stack die geschikt is voor de beschikbare omgeving.

Werk component-based.

Zorg voor:

- responsive layout
- herbruikbare componenten
- consistente spacing
- nette data-architectuur
- centrale dummy dataset
- duidelijke states
- werkende filters
- goede loading states indien relevant
- goede empty states
- foutafhandeling
- toegankelijkheid
- snelle performance

Gebruik indien mogelijk moderne charting libraries en icon libraries.

Maak geen onnodige technische complexiteit.

---

# DATA-ARCHITECTUUR

Zorg dat het later eenvoudig wordt echte API-data aan het dashboard te koppelen.

Scheid daarom:

1. UI
2. business logic
3. data layer

Gebruik één consistente datastructuur voor de demo.

Simuleer connectors alsof gegevens bijvoorbeeld binnenkomen vanuit:

CRM:
Pipedrive / HubSpot / Monday

Finance:
Moneybird / Exact

Marketing:
Google Ads / Meta / LinkedIn

Operations:
Monday / ClickUp / Asana

Het vervangen van dummy data door API-data moet later mogelijk zijn zonder de volledige interface opnieuw te bouwen.

---

# FINALE KWALITEITSCHECK

Controleer voor afronding:

### Begrijpelijkheid
Kan een CEO binnen 10 seconden begrijpen hoe het bedrijf ervoor staat?

### Simplicity
Kan minimaal 20% van de interface nog verwijderd worden zonder informatiewaarde te verliezen?

Zo ja, vereenvoudig verder.

### Consistentie
Klopt alle dummy data door het hele dashboard?

### Visueel
Voelt dit als professionele commerciële SaaS-software?

### Besluitvorming
Geeft het dashboard inzichten in plaats van alleen data?

### Hiërarchie
Zijn problemen en kansen sneller zichtbaar dan irrelevante details?

### Integraties
Is direct duidelijk dat echte bedrijfssystemen gekoppeld kunnen worden?

### Functionaliteit
Werken navigatie, filters en belangrijke interacties?

---

# EINDRESULTAAT

Lever een CEO Dashboard dat een gebruiker het gevoel geeft:

**"Eindelijk hoef ik niet meer vijf verschillende systemen te openen om te begrijpen hoe mijn bedrijf ervoor staat."**

De interface moet:

- professioneel zijn
- premium aanvoelen
- extreem overzichtelijk zijn
- eenvoudig te begrijpen zijn
- visueel aantrekkelijk zijn
- relevante inzichten geven
- geschikt zijn voor echte bedrijfsdata
- technisch voorbereid zijn op integraties
- direct demonstrabel zijn met consistente dummy data

De kracht van het product moet niet zitten in hoeveel informatie erin past.

De kracht moet zitten in hoeveel complexiteit het voor de CEO wegneemt.

# Universele Prompt: Ultra-Realistische Luxury Real-Estate Walkthrough Video

## ROLE

You are a world-class architectural visualization director, cinematic 3D artist, luxury real-estate filmmaker and photorealistic rendering specialist.

Your task is to transform the provided reference image or reference images into an exceptionally realistic cinematic architectural walkthrough video.

The final result must look like footage of a REAL luxury property captured by a professional real-estate film crew.

It must NOT look like:
- an AI-generated video
- a videogame
- an architectural concept animation
- CGI
- an Unreal Engine showcase
- a 3D model
- a virtual tour

It should be virtually indistinguishable from footage recorded with a high-end cinema camera inside an existing property.

## REFERENCE IMAGES

Carefully study ALL provided reference images before generating anything.

Treat all reference images as different views of the SAME property.

First mentally reconstruct the property as one coherent 3D environment.

Infer:
- architectural layout
- room connections
- floor levels
- terrace positioning
- windows and sliding doors
- ceiling heights
- furniture placement
- kitchen location
- dining area
- living room
- bedrooms
- exterior spaces
- pool location
- mountain surroundings
- lake orientation
- direction of the sunset

Preserve these relationships throughout the entire video.

Do not randomly redesign the house between scenes.

## PRIMARY OBJECTIVE

Create an ultra-photorealistic cinematic first-person walkthrough through the property.

The viewer should feel as if a professional camera operator is physically walking through the house.

The camera itself must NEVER be visible.

No hands.  
No camera equipment.  
No person.  
No reflection of the camera operator.

The viewer simply experiences the property from the camera's perspective.

## PROPERTY STYLE

The property shown in the reference material is a premium contemporary mountain villa.

Preserve its specific visual language:

- monumental mountain setting
- elevated position above a lake or valley
- dramatic panoramic views
- contemporary architecture
- natural stacked stone
- warm architectural timber
- large floor-to-ceiling glazing
- minimal dark metal window frames
- luxurious natural stone floors
- warm indirect architectural lighting
- premium neutral furniture
- cream, beige, taupe and warm-grey fabrics
- dark natural stone accents
- subtle black detailing
- sophisticated but understated luxury

Do not replace this design language with a generic luxury villa.

## VISUAL REALISM

Absolute photorealism is the highest priority.

Every surface must contain realistic physical detail.

Include believable:

- stone texture variation
- timber grain
- fabric texture
- stitching
- wrinkles in cushions
- natural bedding folds
- subtle imperfections
- fingerprints or minute reflections where physically appropriate
- glass reflections
- realistic refraction
- realistic shadows
- contact shadows
- ambient occlusion
- micro-surface detail
- roughness differences
- realistic metals
- realistic plants
- believable fire
- physically accurate water
- natural exposure transitions

Avoid surfaces that look too clean, plastic, smooth or synthetic.

## LIGHTING

Match the lighting conditions of the reference images.

Use a warm late-afternoon / golden-hour sunset.

Exterior:  
warm sunlight coming through the mountain landscape.

Interior:  
subtle warm architectural lighting.

The combination should create a luxurious cinematic atmosphere without looking artificially orange.

Sunlight should naturally enter through large windows and create realistic highlights and soft shadows.

Maintain consistent sun direction throughout the property.

Do not change the time of day between rooms.

## CAMERA STYLE

Use the visual language of premium architectural films from high-end international real-estate agencies.

Camera height:  
approximately human eye level, around 1.55 to 1.70 meters.

Lens:  
approximately 24-35mm full-frame equivalent.

Never use extreme wide-angle distortion.

Maintain straight architectural vertical lines whenever possible.

Movement must be extremely smooth.

Imagine:  
a skilled camera operator using a professional stabilized cinema rig or very slow Steadicam.

## CAMERA MOVEMENT

The camera should move slowly and deliberately.

Use:
- slow forward movement
- subtle lateral movement
- gentle arcs
- controlled turns
- subtle reveals
- gradual parallax
- occasional slow push-ins
- very subtle natural camera inertia

Do NOT use:
- rapid camera movements
- sudden turns
- whip pans
- aggressive zooms
- drone-like indoor flying
- impossible camera paths
- large floating movements
- excessive stabilization
- noticeable handheld shaking

The camera must feel grounded.

It should appear that someone could physically walk the exact route.

## WALKTHROUGH STRUCTURE

Create a coherent journey through the villa.

### SHOT 1 - ESTABLISHING EXTERIOR

Begin outside the property.

Reveal the villa positioned dramatically against the mountains and lake.

Move slowly toward the property.

Show the stone, timber, glazing and terraces.

Allow the viewer to understand the architecture and spectacular location.

### SHOT 2 - ARRIVAL

Approach one of the main terraces or entrances.

Move toward the floor-to-ceiling glass doors.

The transition from exterior to interior must feel physically believable.

### SHOT 3 - LIVING ROOM REVEAL

Slowly enter the main living area.

Reveal:
- large sectional sofa
- lounge chairs
- stone coffee table
- fireplace
- warm indirect lighting
- panoramic glazing
- mountain and lake views

Do not immediately show everything.

Use architectural elements to gradually reveal the room.

### SHOT 4 - LIVING ROOM DETAIL

Move gently around the seating area.

Create natural parallax between:
foreground furniture,  
interior architecture,  
and distant mountain landscape.

Keep the view outside visible where possible.

### SHOT 5 - DINING AREA

Continue naturally toward the dining table.

Reveal the large dining space and sculptural pendant lighting.

Show how the dining area connects visually to both the kitchen and the exterior.

### SHOT 6 - KITCHEN

Move toward the kitchen island.

Show:
- premium dark stone island
- wooden cabinetry
- integrated appliances
- warm under-cabinet lighting
- bar stools
- subtle decorative objects

The kitchen must look genuinely usable and lived-in, not staged like a sterile showroom.

### SHOT 7 - TERRACE TRANSITION

Move naturally from the interior toward the outdoor lounge terrace.

Pass through the open or partially open glass doors.

### SHOT 8 - OUTDOOR LOUNGE

Slowly reveal the terrace furniture and fire feature.

Allow the mountain panorama to become the hero of the shot.

Use foreground plants or furniture for natural cinematic depth.

### SHOT 9 - PANORAMIC VIEW

Move gently toward the glass balustrade.

The valley, lake and mountains should gradually fill the frame.

Do not move unrealistically close to the edge.

Hold the shot long enough for the viewer to experience the location.

### SHOT 10 - BEDROOM

Transition naturally toward the master bedroom.

Reveal:
- premium upholstered bed
- layered bedding
- warm headboard lighting
- natural timber
- floor-to-ceiling glazing
- panoramic mountain views

The bedroom should feel calm, expensive and architecturally consistent with the living areas.

### SHOT 11 - DETAIL / BATHROOM GLIMPSE

Optionally reveal part of the adjoining bathroom or dressing area.

Keep the design language consistent:
stone,  
wood,  
warm lighting,  
minimal detailing.

### SHOT 12 - FINAL HERO SHOT

Finish with one unforgettable luxury real-estate shot.

Preferably:  
slowly moving from the interior or terrace toward the sunset view over the mountains and lake.

End with a few seconds of slow movement or an almost-static cinematic composition.

## SCENE CONTINUITY

This is extremely important.

Objects must maintain spatial consistency.

If a sofa is positioned in one location, it remains there.

If the kitchen is behind the dining room, preserve that relationship.

Windows must show the correct landscape orientation.

Architecture must not morph.

Furniture must not:
- move
- disappear
- duplicate
- change shape
- change material

Doors, columns, stairs, fireplaces and walls must remain structurally consistent.

Create the impression that one complete real villa exists behind all shots.

## ENVIRONMENTAL MOTION

Keep motion subtle and realistic.

Examples:
- small flames moving naturally
- very slight curtain movement
- occasional subtle tree movement outside
- gentle reflections changing as the camera moves
- realistic water movement in the pool
- small changes in sunlight reflection

Do not introduce unnecessary moving objects.

No people are required.

The property itself is the subject.

## MATERIAL QUALITY

Render materials at luxury architectural-visualization quality.

Stone:  
individually readable texture, variation and roughness.

Wood:  
visible natural grain, realistic color variation and subtle imperfections.

Fabric:  
high-resolution woven texture with realistic folds.

Glass:  
physically correct reflections and transparency.

Metal:  
subtle realistic highlights, never mirror-like unless appropriate.

Water:  
physically plausible reflection, refraction and small surface movement.

Fire:  
realistic flames, glow and surrounding light interaction.

## DEPTH

Strong visual depth is essential.

Every shot should contain multiple visual layers where appropriate:

foreground,  
midground,  
background,  
distant landscape.

Use furniture, architecture, columns, vegetation and window frames to create parallax during movement.

Avoid flat compositions.

## REAL-ESTATE PRESENTATION

The purpose of this video is to impress a luxury real-estate professional.

Every shot should communicate:

"This is what high-end real-estate visualization could look like before the property is even professionally filmed."

Focus on:
- architecture
- spatial experience
- lifestyle
- materials
- views
- scale
- emotion
- premium presentation

Do not turn it into an artistic experimental film.

The property must remain easy to understand.

## EDITING STYLE

Use elegant cinematic pacing.

Each shot should generally last long enough for the viewer to understand the space.

Avoid excessive cutting.

Prefer approximately:
4-8 seconds per shot.

Use subtle transitions where necessary.

Whenever possible, connect shots through logical architectural movement rather than obvious effects.

## QUALITY TARGET

Target the visual quality of:
- premium luxury real-estate cinematography
- international architectural films
- high-budget hotel advertising
- high-end interior design campaigns

Use:
maximum available resolution,  
maximum temporal consistency,  
maximum reference-image fidelity,  
maximum texture quality,  
maximum architectural consistency.

## STRICT NEGATIVE CONSTRAINTS

Avoid all of the following:

AI artifacts  
warped furniture  
morphing architecture  
changing room layouts  
floating objects  
duplicated furniture  
melting textures  
distorted geometry  
incorrect perspective  
fisheye distortion  
excessive depth of field  
fake miniature look  
oversaturated colors  
excessive HDR  
unnatural sharpening  
plastic materials  
cartoonish fire  
fake-looking plants  
unnatural reflections  
incorrect shadows  
random lens flares  
fast camera movement  
camera shake  
time-lapse motion  
visible humans  
visible camera operator  
visible recording equipment  
text  
logos  
watermarks  
UI elements

Do not invent visually dominant architectural features that contradict the reference material.

## FINAL CHECK

Before rendering, verify internally:

1. Does this look like one real property?
2. Is the architecture consistent between scenes?
3. Are the mountains, lake and sunset direction consistent?
4. Does the camera move like a real camera operator?
5. Are materials physically realistic?
6. Does any furniture morph or move?
7. Does the lighting remain consistent?
8. Would an experienced real-estate agent initially believe this was professionally filmed footage?

If the answer to any of these is no, correct it before producing the final output.

The final result should make the viewer think:

"Wait... this isn't a real video of the property?"

---

# IMPORTANT REFERENCE RULE

The provided images are not merely visual inspiration.

They are authoritative visual evidence of the same property.

Use them to reconstruct one unified three-dimensional environment.

When information is visible in a reference image, preserve it rather than creatively replacing it.

When information is not visible, infer the most architecturally logical continuation based on the existing design language.

Never create a completely different room merely because that area is not visible in the references.

Je bent een senior game developer, gameplay engineer, technical artist en 3D environment designer.

Je taak is om een volledig speelbare first-person zombie survival game te ontwikkelen die qua sfeer en gameplay duidelijk geïnspireerd is op klassieke round-based zombie survival shooters, maar met een eigen originele wereld, eigen assets, eigen personages, eigen map en eigen visuele identiteit.

De game moet niet aanvoelen als een simpele browserdemo. Het doel is dat de speler bij het openen direct het gevoel krijgt naar gameplaybeelden van een moderne console- of AAA-game te kijken.

## HOOFDDOEL

Bouw een interactieve first-person survival shooter waarin de speler:

- Vrij kan rondlopen in een 3D-omgeving
- Vanuit first-person perspectief een realistisch wapen in beeld ziet
- Kan richten
- Kan schieten
- Munitie verbruikt
- Kan reloaden
- Zombies kan uitschakelen
- Nieuwe zombies ziet verschijnen
- Schade kan oplopen
- Punten verdient
- Meerdere waves of rondes kan overleven

De nadruk ligt extreem sterk op:

1. Realistische graphics
2. First-person gunplay
3. Animatiekwaliteit
4. Belichting
5. Zombiegedrag
6. Atmosfeer
7. Het gevoel van echte gameplay

## VISUELE KWALITEIT

Graphics zijn de hoogste prioriteit.

Maak de game visueel zo realistisch en cinematografisch mogelijk binnen de beschikbare technische omgeving.

Streef naar de uitstraling van een moderne high-end console survival shooter.

Gebruik waar mogelijk:

- Physically Based Rendering
- Realistische materialen
- Hoge texturekwaliteit
- Normal maps
- Roughness maps
- Metallic maps
- Ambient occlusion
- Realistische schaduwen
- Dynamic lighting
- Volumetric lighting
- Fog
- Depth of field waar passend
- Subtiele bloom
- Color grading
- Screen-space effecten
- Partikeleffecten
- Realistische reflecties
- Water shaders
- Vegetatie
- Dirt, mud, moss en slijtage
- Decals op muren en oppervlakken
- Dynamische muzzle flashes
- Smoke effects
- Impact particles
- Shell casings indien technisch haalbaar

Vermijd absoluut een cartoony, low-poly, voxelachtige of simpele arcade-uitstraling.

Alles moet volwassen, donker, filmisch en geloofwaardig ogen.

## OMGEVING

Maak een donkere, verlaten landelijke omgeving tijdens schemering of nacht.

De map bevat bijvoorbeeld:

- Een vervallen boerderij
- Een modderige weg
- Een sloot
- Hoog gras
- Dode bomen
- Oude houten hekken
- Een verlaten schuur
- Een klein huis of gebouw dat toegankelijk is
- Kapotte voertuigen
- Mist
- Regen of vochtige atmosfeer
- Plassen waarin licht wordt gereflecteerd
- Enkele lampen die flikkeren

Een belangrijk gameplaypunt is de sloot.

Zombies moeten regelmatig vanuit de sloot omhoogkomen.

Laat ze bijvoorbeeld:

- Uit het water komen
- Tegen de modderige kant omhoog klimmen
- Eerst gedeeltelijk zichtbaar zijn
- Vervolgens volledig uit de sloot kruipen
- Daarna richting de speler bewegen

Dit moet geanimeerd zijn. Zombies mogen niet simpelweg plotseling verschijnen.

## FIRST-PERSON CAMERA

Gebruik een echte first-person gameplaycamera.

De speler ziet geen extern personage.

Alleen onderdelen die logisch zichtbaar zijn vanuit first-person perspectief, waaronder:

- Handen
- Armen
- Het wapen
- Reload-animaties

Maak de camera natuurlijk.

Voeg subtiele:

- Head bob
- Weapon sway
- Breathing motion
- Camera inertia
- Recoil
- Landing movement
- Sprint movement

toe.

Overdrijf deze effecten niet.

## WAPENSYSTEEM

Start de speler bijvoorbeeld met een realistische semi-automatische handgun.

Maak daarnaast minimaal één extra vuurwapen beschikbaar, bijvoorbeeld een assault rifle of ander fictief geweer.

Gebruik geen bestaande merknamen als dat niet nodig is.

Het wapen moet daadwerkelijk onderdeel zijn van het first-person model.

Maak geen simpele zwevende rechthoek onderaan het scherm.

Het wapen moet beschikken over:

- Gedetailleerd 3D-model
- Materiaalverschillen tussen metaal, kunststof en rubber
- Realistische handen
- Correcte grip
- Idle animation
- Walk animation
- Sprint animation
- Fire animation
- Reload animation
- Aim-down-sights animation
- Recoil
- Muzzle flash
- Gunshot audio
- Reload audio
- Empty magazine feedback

## AIM DOWN SIGHTS

De speler moet kunnen richten via Aim Down Sights.

Bij ADS:

- Komt het wapen centraal voor de camera
- Lijnt het vizier correct uit
- Wordt de FOV iets kleiner
- Verandert de mouse sensitivity indien nodig
- Wordt weapon sway kleiner
- Is schieten nauwkeuriger

Wanneer de speler stopt met richten, keert het wapen soepel terug naar hip-fire positie.

## SCHIETEN

Schieten moet direct en responsief voelen.

Gebruik:

- Hitscan of snelle projectielen
- Bullet spread afhankelijk van bewegen en richten
- Recoil
- Muzzle flash
- Impact effect
- Hit feedback
- Damage systeem

Laat kogels zichtbaar reageren op de omgeving.

Bijvoorbeeld:

- Stof uit droge oppervlakken
- Vonken op metaal
- Houtsplinters
- Waterimpact
- Decals of bullet holes

## MUNITIE EN RELOAD

Gebruik een echt ammunition systeem.

HUD voorbeeld:

12 / 72

waarbij:

12 = kogels in huidig magazijn  
72 = resterende reserve ammunition

Wanneer het magazijn leeg is:

- Kan het wapen niet normaal verder schieten
- Krijgt de speler duidelijke feedback
- Moet worden herladen

Gebruik bijvoorbeeld de R-toets voor reload.

De reloadanimatie moet zichtbaar plaatsvinden vanuit first-person perspectief.

Voorbeelden:

Handgun:
- Magazine verwijderen
- Nieuw magazine plaatsen
- Slide of andere relevante actie indien nodig

Rifle:
- Magazine verwijderen
- Nieuw magazine plaatsen
- Bolt of charging handle indien passend

Synchroniseer ammo-aanpassing met de animatie.

## ZOMBIES

Maak originele zombiepersonages die visueel passen binnen een realistische moderne horror shooter.

Zombies moeten geloofwaardig ogen.

Denk aan:

- Beschadigde kleding
- Modder
- Bleke huid
- Wonden
- Onregelmatige beweging
- Natte kleding wanneer ze uit de sloot komen
- Verschillende lichaamsbouw
- Verschillende kleding
- Variatie tussen zombies

Gebruik meerdere zombievarianten zodat niet iedere vijand identiek is.

De zombies moeten niet komisch of overdreven cartoony zijn.

## ZOMBIE AI

Zombies moeten:

1. Spawnen op vooraf bepaalde locaties
2. Naar de speler zoeken
3. Om obstakels navigeren
4. De speler achtervolgen
5. Aanvallen wanneer ze dichtbij zijn
6. Schade oplopen
7. Doodgaan wanneer hun health op is

Gebruik pathfinding of navigation wanneer de technische omgeving dit ondersteunt.

Zombies moeten elkaar enigszins kunnen ontwijken.

Vermijd dat alle zombies exact dezelfde route en animatie gebruiken.

Voeg subtiele randomisatie toe aan:

- Loopsnelheid
- Animatiesnelheid
- Richting
- Geluiden
- Aanvalsmoment
- Spawnmoment

## HIT REACTIONS

Wanneer een zombie geraakt wordt:

- Speel passende impactreactie af
- Gebruik directional hit reaction indien mogelijk
- Laat het lichaam reageren op de positie van de impact

Voorbeelden:

Schot op linker schouder:
lichaam reageert kort naar links of achteren.

Schot op torso:
korte stagger.

Schot op been:
tijdelijke verstoring van beweging.

Schot op hoofd:
veel hogere damage.

Houd effecten geloofwaardig en functioneel. Het hoeft niet expliciet of overdreven bloederig te worden.

## DEATH SYSTEM

Wanneer een zombie doodgaat:

- Gebruik een passende death animation of physics-driven reactie
- Laat het lichaam op natuurlijke wijze op de grond terechtkomen
- Zorg dat het niet direct verdwijnt

Na enige tijd mogen lichamen worden verwijderd om performance te behouden.

## WAVES

Gebruik een klassiek round-based systeem.

Voorbeeld:

ROUND 1

Een klein aantal zombies verschijnt.

Wanneer alle zombies zijn uitgeschakeld:

- Korte pauze
- Nieuwe ronde
- Meer zombies
- Eventueel iets meer health of hogere snelheid

Voorbeeldprogressie:

Round 1: 5 zombies  
Round 2: 8 zombies  
Round 3: 12 zombies  
Round 4: 16 zombies

Maak aantallen dynamisch in plaats van deze cijfers hard te coderen als dat mogelijk is.

Toon de huidige ronde subtiel in de HUD.

## PUNTENSYSTEEM

De speler verdient punten voor acties.

Bijvoorbeeld:

Zombie hit: kleine hoeveelheid punten  
Zombie elimination: meer punten  
Headshot elimination: bonus

Toon de huidige score in de HUD.

## PLAYER HEALTH

Geef de speler health.

Bijvoorbeeld:

100 HP

Wanneer zombies de speler raken:

- Health neemt af
- Er verschijnt subtiele visuele schadefeedback
- Bijvoorbeeld donkere of rode vignette
- Licht camera-effect

Wanneer health 0 bereikt:

toon een duidelijke game-over state.

Geef daarna de optie:

RESTART

## HUD

Maak een professionele, minimale FPS HUD.

Toon alleen belangrijke informatie:

- Health
- Ammo
- Reserve ammo
- Score
- Huidige ronde
- Eventueel crosshair

Gebruik geen groot debugmenu of overmatige interface.

De HUD moet onderdeel lijken van een echte game.

## CONTROLS

Minimaal:

W = vooruit  
A = links  
S = achteruit  
D = rechts

Mouse = rondkijken

Left Mouse Button = schieten

Right Mouse Button = Aim Down Sights

R = reload

Shift = sprint

Space = springen indien ondersteund

Escape = pauze of cursor vrijgeven

## AUDIO

Audio is belangrijk voor de gamebeleving.

Gebruik of genereer waar mogelijk:

- Gunshots
- Reload sounds
- Bullet impacts
- Footsteps
- Zombie vocalizations
- Wind
- Water
- Environment ambience
- Subtiele horror ambience
- Distant environmental sounds

Gebruik 3D positional audio voor zombies indien technisch mogelijk.

Een zombie achter de speler moet ook auditief van achteren komen.

## LIGHTING EN ATMOSFEER

Gebruik cinematografische belichting.

Voorkeursstijl:

- Koude blauwe/grijze ambient lighting
- Warme lichtbronnen uit gebouwen of lampen
- Mist
- Volumetric light
- Hoog contrast tussen veilige en donkere gebieden
- Reflecties in natte grond

Laat sommige elementen bewegen:

- Gras door wind
- Takken
- Mist
- Regen
- Wateroppervlak
- Flikkerende lamp

De wereld moet levend aanvoelen.

## PERFORMANCE

Visuele kwaliteit is prioriteit, maar de game moet speelbaar blijven.

Optimaliseer daarom slim:

- Level of detail
- Object pooling
- Zombie pooling
- Texture management
- Occlusion
- Culling
- Beperkte actieve lights
- Effect pooling
- Cleanup van zombie corpses

Verminder eerst onzichtbare of secundaire effecten voordat belangrijke graphics worden versimpeld.

## GAME FEEL

Gunplay moet zwaar en responsief voelen.

Besteed extra aandacht aan:

- Recoil
- Animation timing
- Shooting responsiveness
- Camera shake
- Audio timing
- Muzzle flash
- Reload timing
- Hit reaction
- Movement acceleration

De combinatie hiervan is belangrijker dan één afzonderlijk effect.

## OPENINGSSITUATIE

Wanneer de game opent:

De speler staat op een modderige weg naast een verlaten boerderij.

Het is donker.

Links bevindt zich een brede sloot.

Mist hangt boven het water.

Een kapotte straatlamp flikkert.

De speler houdt een handgun vast.

De HUD toont:

ROUND 1

Na enkele seconden hoor je beweging vanuit het water.

Een zombie wordt zichtbaar in de sloot.

Hij klimt langzaam omhoog.

Een tweede zombie verschijnt verderop.

Daarna begint de daadwerkelijke survival gameplay.

Geen lange introvideo.

De speler moet snel controle krijgen.

## ONTWIKKELPRIORITEIT

Werk in deze volgorde:

1. First-person movement
2. Camera
3. First-person weapon
4. Shooting
5. ADS
6. Reload
7. Zombie spawning
8. Zombie AI
9. Damage en hit detection
10. Waves
11. HUD
12. Lighting
13. Materials
14. Environment details
15. VFX
16. Audio
17. Polish
18. Performance optimization

Zorg dat de basisgame altijd speelbaar blijft tijdens het ontwikkelen.

## BELANGRIJKE REGEL

Maak niet alleen een visuele mock-up van de game.

Ik wil daadwerkelijk een werkende interactieve gameplayervaring.

Alle belangrijke knoppen, mechanics en systemen moeten functioneel zijn.

Gebruik geen fake gameplayvideo als vervanging voor interactie.

Wanneer een feature technisch niet exact mogelijk is binnen de beschikbare omgeving, bouw dan de best mogelijke functionele variant en behoud vooral:

- First-person perspectief
- Beweging
- Wapen in beeld
- Schieten
- Zombies
- Reloaden
- Waves
- Sterke graphics

## DESIGNVRIJHEID

Neem zelfstandig beslissingen over details die ik niet heb gespecificeerd.

Vraag niet voor iedere kleine designkeuze om toestemming.

Kies steeds voor de oplossing die:

1. De game realistischer maakt
2. De graphics verbetert
3. Gunplay beter laat voelen
4. Meer AAA-uitstraling geeft
5. De gameplay stabiel houdt

Het eindresultaat moet voelen als een kleine maar zeer gepolijste vertical slice van een moderne first-person zombie survival game.