De site-tegenhanger van FIBO (File In, Book Out) en de Banger Factory (File In, Track Out). Jij dropt een file in FISO/inbox/. Er komt een complete, live, verbluffende site uit FISO/out/. Eén law erboven:

De uitkomst is mindblowing, of het is niet klaar. Alles hieronder dient dat ene doel.

Dit protocol legt de uitkomst en de poorten vast — nooit de architectuur. De bouwer (Fable, of later een goedkoper model dat Fable's wargame draait) kiest zélf z'n spine, stack en aanpak. Wij zeggen wát af moet zijn en wanneer het slaagt, niet hóe het gebouwd wordt.

Part 0 — De twee modes

FISO draait in exact één van twee modes, bepaald door wat er in de inbox ligt:

Mode A — Greenfield. Input = een brief / merk / content-file (md, txt, notities). Output = een compleet nieuwe site.
Mode B — Brownfield (de gouden mode). Input = bestaande HTML/CSS/JS (een site, tool of app). Output = de verbeterde versie, zonder te breken wat werkt. Zie Part 7 — dit is de heiligste regel van FISO.

De bouwer detecteert de mode zelf: bevat de input werkende HTML/JS → Mode B. Anders → Mode A.

Part 1 — Intake (wat "file in" mag zijn)

Een geldige file-in bevat genoeg om de site te verankeren. De bouwer leest 'm volledig vóór één regel code (nooit skimmen). Minimaal nodig, en wat ontbreekt wordt RECON NEEDED gemarkeerd met de exacte check die 't sluit — nooit verzinnen:

Wie het is (merk/product/persoon).
Voor wie (het publiek, in hun eigen woorden).
De één actie die de bezoeker moet doen (de hoofd-CTA).
Toon/stijl-anker: een referentie, bestaande huisstijl, of een paar bijvoeglijke naamwoorden.
Mode B extra: de bestaande code + welke flows er nú werken (zie Part 7, de baseline).

Ontbreekt de hoofd-CTA of het publiek? Dan is de intake BLOCKED — schrijf wat je nodig hebt, ga door met de rest, verzin het doel niet.

Part 2 — De Kaiju-lat (de definitie van mindblowing)

Kaiju-size ≠ groot. Kaiju-size = mindblowing. Een kleine input die een jaw-drop-resultaat baart telt volledig. "Groot maar saai" zakt; "klein maar verbluffend" slaagt.

Een site haalt de lat pas als een vreemde die 'm voor het eerst ziet binnen drie seconden denkt "wie heeft dit gemáákt?". Concreet, minstens drie hiervan echt raak:

Eén signatuurmoment dat blijft hangen — een 3D/shader-scène, een orkestrale scroll-reveal, een interactief element dat je niet verwacht op zo'n site.
Typografie die de site draagt — een gedurfde, eigen letter-keuze, geen veilige default.
Beweging die betekenis draagt, niet decoreert (zie Part 5).
Een palet en sfeer die bij dít merk horen en nergens anders op lijken.
Detail-afwerking waar het meeste stopt: micro-interacties, states, ritme, witruimte.

Anti-slop (hard verbod). De site mag NOOIT lezen als door-AI-gegenereerd sjabloon: geen warm-crème + serif + terracotta cliché, geen Inter/Space Grotesk als "veilige" letter, geen emoji als sectiemarkering, niet alles gecentreerd, geen rounded-lg overal, geen paars-blauw-gradient-hero op wit. Als het eruitziet als "elke andere AI-site" is het gezakt, hoe schoon ook.

Part 3 — De spine is van de bouwer

Leg geen architectuur op. Geen verplichte ruggengraat, geen orgaan-contract, geen framework-keuze van bovenaf. De bouwer kiest: één mega-HTML met Three.js/WebGL, een component-systeem, canvas-gedreven, wat 'ie ook het sterkst acht voor dít resultaat. De smaak van het model is beter dan een opgelegd sjabloon — ga uit de weg.

Enige technische grenzen (dienen de uitkomst, niet de stijl):

Zelf-draaiend eindresultaat (open index.html of een gedeployte URL toont de klare site).
Gratis te deployen (Vercel/Netlify) — geen betaalde build-afhankelijkheid.
Alles wat externe assets nodig heeft die we niet hebben (betaalde beeld/video-API's) wordt vervangen door code-gedreven equivalent (WebGL/canvas/SVG/variabele fonts). Die kant is juist het indrukwekkendst en heeft geen betaalde tools nodig.

Part 4 — De bouw (breadth-first, sub-agents, iteratie)

Recon read-only. Lees de file-in volledig; bij Mode B ook de bestaande code end-to-end tot je snapt wat werkt (Part 7 baseline).
Breadth first. Zet de hele site op poten — alle secties/pagina's ruw — vóór je één sectie polijst. De verfijning komt in passes.
Sub-agents parallel. Verdeel onafhankelijk werk (secties, het signatuurmoment, de motion-laag) over sub-agents die tegelijk bouwen.
Drie iteratie-passes, verplicht. Na "klaar" ga je er drie keer met een loep doorheen: zoek zwakke plekken, verhoog de lat, complexeer waar het de indruk versterkt, snoei waar het afleidt. Elke pass gelogd.
Geen scope-creep. Bouw wat de site nodig heeft om mindblowing én converterend te zijn — niks daarbuiten.

Part 5 — De motion-laag (mag als het past)

Beweging is leuk en gewenst — het hoeft niet elke keer een conversie te bewijzen. Past het bij de site, dan mag het erin. Hero-reveal, scroll-triggers, hover-micro's, een 3D/shader-signatuurmoment, orchestrated page-load: allemaal welkom als ze bij de sfeer en het merk passen en de site rijker maken. De enige harde grens is dat het niet mag schaden: geen animatie die de laadtijd merkbaar opblaast, de hoofd-CTA in de weg zit, of de leesbaarheid breekt. prefers-reduced-motion wordt altijd gerespecteerd. Kortom: motion mag voor de lol en de klasse, zolang het niks kapotmaakt — het hoeft zich niet te "verdienen".

Part 6 — De conversie-laag (verplicht)

Geen enkele site verlaat FISO zonder:

Eén heldere hook boven de vouw — wat het is en voor wie, in één seconde te snappen.
Eén dominante CTA-flow (de één-actie uit de intake), overal logisch herhaald, nooit begraven.
Mobile-first, geen horizontale scroll @375px, tap-targets groot genoeg.
Toegankelijk: semantische landmarks, gelabelde form-inputs, alt-tekst op elk beeld, zichtbare focus-states.
Social proof / vertrouwens-element (echt of duidelijk-gemarkeerde placeholder — nooit een verzonnen review als echt).

Part 7 — Regressie-veiligheid (Mode B — nooit breken wat werkt)

De heiligste FISO-regel. Bij bestaande HTML-in:

Baseline vastleggen vóór je iets aanraakt. Inventariseer elke werkende feature, flow, knop, form, opslag (localStorage-sleutels), API-call en state. Schrijf 'm op als een checklist — dát is de contract-baseline.
Upgraden, niet lappen — maar elke werkende flow uit de baseline blijft werken. Verander stijl/structuur/motion vrij; raak de werkende logica alleen aan om 'm te verbeteren, nooit om 'm te breken.
Bewijs na afloop dubbel: (a) 0 regressie — elke baseline-flow slaagt nog, aantoonbaar in een echte browser. (b) Aantoonbaar beter — noem per verbetering wat er beter is (sneller, mooier, duidelijker, minder bugs).
Breekt een baseline-flow en kun je 'm niet direct herstellen → ABORT die wijziging, rol terug, meld het. Een mooiere site die een werkende functie sloopt is een gezakte FISO-run.

Part 8 — Self-verify gate (echte browser, niet "volgens mij")

Vóór het woord "klaar" valt, draait de bouwer de site in een échte headless browser (Playwright of gelijk) en bewijst:

De site rendert volledig, 0 console-errors.
Elke link, knop, form-validatiepad en interactief element is bediend en werkt; wat faalt wordt gefixt.
Geen horizontale scroll @375px; light én dark leesbaar (als beide bestaan).
Mode B: elke baseline-flow uit Part 7 opnieuw gedraaid en geslaagd.
Elke claim in de eind-samenvatting is getoetst aan iets dat echt gedraaid of gelezen is deze sessie. Geen fake-done.

Part 9 — Delivery + deploy gate

Een FISO-run is pas DELIVERED als:

De Kaiju-lat gehaald is (Part 2), de conversie-laag staat (Part 6), de self-verify gate groen is (Part 8), en bij Mode B de regressie-gate groen is (Part 7).
De site live staat (gratis op Vercel/Netlify) én de broncode + een korte README ("hoe deploy je 'm opnieuw") in FISO/out/<naam>/ ligt.
Een half-af site, een niet-geverifieerde claim, of "groot maar niet mindblowing" is NIET delivered — zeg dan eerlijk "in progress" met wat er nog moet.

Part 10 — Het output-pakket

In FISO/out/<naam>/:

De complete site (broncode, direct te openen/deployen).
De live URL.
FISO-RUN.md: de gekozen spine + waarom, de drie iteratie-passes, de Kaiju-lat-check, de self-verify-uitslag, en bij Mode B de baseline-checklist met 0-regressie-bewijs + de lijst verbeteringen.

Samengevat, de poorten die tellen

Mindblowing (Part 2) · Conversie (Part 6) · bij Mode B nul-regressie (Part 7) · self-verified in echte browser (Part 8) · live gedeployed (Part 9). Alles daartussenin is vrij voor de bouwer.