Een CMS voor sites die AI heeft gebouwd

Open je nu een site in CMS[this], dan bewerk je wat er staat: teksten en beelden. Een pagina toevoegen of het menu herordenen kan niet. Dat besluit viel halverwege ons traject. Een tabel uit de eigen bureaupraktijk gaf zeven veelgestelde klantwensen een ja of een nee. Nieuwe pagina's, herordenen, verbergen, dupliceren en menubeheer kregen allemaal nee.

Dat ene nee schrapte meer dan een functie. Het syncmodel had inmiddels drie lagen: ontwerp, structuur en inhoud. De middelste bestond alleen omdat de klant structuur mocht wijzigen. Met twee lagen verdween het moeilijkste deel van het product: de botsingsvraag per pagina, de merktekens voor wat jij had verplaatst en het hele scherm voor structuuroverschrijvingen. Ontwerp en structuur komen nu uit de bron, en inhoud leeft in het systeem.

Waar de editor nee zegt, zie je waar die mogelijkheid wél leeft. Eronder staat een ingevulde prompt voor Claude of Codex om te kopiëren, en de weg terug via een nieuwe synchronisatie. Dat patroon hergebruikten we het vaakst: zes grenzen, één component. Alleen publicaties inplannen kreeg het niet, want die functie bestaat in de bron nog niet. Met hetzelfde component erbij zou de gebruiker leren dat de bron iets kan wat hij niet kan.

De bouwer schrijft een tekst in Claude. Een redacteur past hem aan in CMS[this]. Dan wijzigt de bouwer dezelfde tekst opnieuw in zijn bron en synchroniseert. Wie wint?

Wint de bron altijd, dan kan één synchronisatie een middag redactiewerk stilletjes wissen, en dan is de belofte van het product stuk. Wint het systeem altijd, dan kan de bouwer zijn eigen typefout nooit meer verbeteren: hij past aan, synchroniseert en er gebeurt niets. Dus wint geen van beide. Een veld dat niemand aanraakte, volgt de bron. Bewerkt iemand een veld in CMS[this], dan is het van het systeem tot iemand het expliciet terugzet.

Daaruit volgden regels die niet vanzelf spraken. Bij een collectie komt het schema uit de bron, welke velden er zijn en dat het een lijst is, en zijn de items inhoud. Bedrijfsgegevens verhuizen in hun geheel. Zo kan het nooit gebeuren dat het telefoonnummer op de contactpagina van de klant is en in de voettekst nog van de bron. En het scherm voor overschrijvingen dat we net hadden begraven, kwam terug in het klein: alleen inhoud, met per regel een knop terug naar de bron.

Drie visuele richtingen vergelijk je niet eerlijk zonder één bron per waarde in de code. Dus telden we eerst. De bestaande build had 1.369 hardgecodeerde hexwaarden, kleurcodes die letterlijk in de code staan. Daarvan waren er 137 verschillend, en één kleur kwam 189 keer voor. Daarnaast stonden er 175 losse rgba-waarden die nooit met een thema meebewogen, en dertig z-indexgetallen zonder ladder.

Vanaf dat punt telden we met grep, een zoekopdracht door de hele code. Die telling bepaalde of een wijziging één prompt kon zijn of in fases moest. Elke visuele wijziging werd een tweetrapsprompt. Eerst ging de tokenlaag erin zonder één pixel te veranderen: “het scherm moet er na afloop pixel-identiek uitzien; als er iets zichtbaar verandert, is er een fout gemaakt”. Pas daarna wisselden de waarden.

Een latere ronde bracht ook schaduwen, transities, z-index en witruimte onder tokens. Dat ging in negen losse stappen, die je één voor één draait. Gaat er iets stuk in een run van zes wijzigingen, dan weet je niet welke het deed.

Naast de bestaande richting zetten we er twee: een warme, lichte en een die eruitziet als gereedschap. Die laatste was in de eerste build, in de woorden van de opdrachtgever, “gewoon een dark mode versie” van wat er al stond. De correctie werd de grootste visuele iteratie van het project, en hij kwam uit een telling.

We analyseerden negentien schermen van een Hasselblad-camera op kleur. Over de hele reeks zijn er maar twee dominante kleuren, samen zestig tot tachtig procent van elk beeld. Bij geen enkel scherm staat een grijstint in de top vijf. Een apparaat maakt bijzaken kleiner, het web maakt ze grijzer. Een camera kent geen grijsladder: tekst is wit, of hij is er niet.

Daaruit volgden omkeringen die met elkaar moesten kloppen. Hoeken gingen naar nul, behalve bij avatars. Letters komen nooit boven twaalf pixels, behalve één groot getal per scherm. En het accent werd een kleur voor een toestand in plaats van een actie: nooit meer een gevuld vlak groter dan een markering.

Voor de lichte richting bekeken we het product waar iedereen naar wees als “modern en donker”. Zijn themakleur bleek #fcfbf8, bijna wit, en de moderne indruk kwam van het kleurveld en de beweging. Na vier revisies is in die richting het meubilair grijs, en het enige verzadigde in beeld is het model. Het verloop werd letterlijk een noorderlicht, van groen via blauw naar magenta. Het betekent één ding: hier werkt de machine.