Eerste stappen. Geavanceerde AI.
Gepubliceerde gidsBijgewerkt
Hoofdstuk 8 van 20Plannen
Schrijf je websitebrief
Vertel Codex voor wie je website is, wat die moet doen en wat in de eerste versie hoort.
Begin klein: wie komt er op bezoek en wat heeft die nodig?
Volg de afbeeldingen
Voorbeelden ter illustratie. Jouw app kan er anders uitzien. Tik op een afbeelding om deze te vergroten. De illustraties gebruiken Engelse voorbeeldlabels. De stappen en uitleg zijn vertaald.
-
Noem je bedrijf en doelgroep
Gebruik het briefvoorbeeld. Schrijf wie je helpt en wat je bedrijf biedt.
Voorbeeld ter illustratie - Schrijf
- Bedrijf → Doelgroep → Wat je biedt
Let op: Eén zin die je bedrijf en de mensen die je helpt beschrijft.
Meer hulp bij deze actie
Begin met het voorbeeld van een websitebrief. Beschrijf in één zin je bedrijf, de primaire doelgroep en het probleem waarmee je site hen moet helpen.
Stap voor stap
- Open een gewone tekstnotitie of laat Codex een notitie van jouw woorden maken.
- Schrijf één zin over je bedrijf, de mensen die je helpt en het probleem dat je helpt oplossen.
- Gebruik Fieldnotes Studio alleen als oefenvoorbeeld; vervang het voor een echte site door je eigen gegevens.
Dit zou je nu moeten zien: Eén zin die je bedrijf en de mensen die je helpt beschrijft.
-
Kies de hoofdactie voor bezoekers
Kies één hoofdactie voor bezoekers, bijvoorbeeld jou mailen over een project.
Voorbeeld ter illustratie - Kies
- Bezoekersvraag → Bruikbaar antwoord → Contact
Let op: Een duidelijke stap die bezoekers na het lezen kunnen zetten.
Meer hulp bij deze actie
Gebruik de planningsvragen voor je eerste website om één hoofdactie te kiezen. Voor Fieldnotes Studio is dat mailen over een project; noteer wat bezoekers eerst moeten weten.
Stap voor stap
- Stel je iemand voor die voor het eerst op je site komt.
- Schrijf wat die moet weten vóór het eerste contact: wat je biedt, wie je helpt en hoe die een vraag stelt.
- Kies voor deze oefensite een aanvraag per e-mail als hoofdactie.
Dit zou je nu moeten zien: Een duidelijke stap die bezoekers na het lezen kunnen zetten.
-
Kies vier pagina’s
Zet Home, About, Services en Contact in het briefsjabloon. Zet extra functies onder Later.
Voorbeeld ter illustratie - Plan
- Home · About · Services · Contact → Latere ideeën
Let op: Vier paginanamen met elk één taak; extra functies bewaard voor later.
Meer hulp bij deze actie
Gebruik het briefsjabloon voor Home, About, Services en Contact. Geef elke pagina één doel en zet extra ideeën onder Later.
Stap voor stap
- Laat Home je aanbod introduceren, About de mensen erachter, Services de beschikbare hulp en Contact de manier om een aanvraag te doen.
- Zet boekingen, betalingen, accounts en AI-chat onder Later.
- Houd de eerste versie klein genoeg om elke pagina te lezen en te testen.
Dit zou je nu moeten zien: Vier paginanamen met elk één taak; extra functies bewaard voor later.
-
Bepaal je grenzen
Voeg taal, inhoud, beelden, planning en je eigen budget toe aan het briefsjabloon. Noem wie de site onderhoudt.
Voorbeeld ter illustratie - Schrijf
- Taal → Inhoud → Budget en planning → Eigenaar
Let op: Je eigen bestedingsgrens en een genoemde website-eigenaar.
Meer hulp bij deze actie
Voeg taal, inhoud, beelden, bestedingsvoorkeur, planning en onderhoudseigenaar toe aan het briefsjabloon. Kies je eigen budget in plaats van een bedrag van de agent te accepteren.
Stap voor stap
- Voeg je gewenste taal toe en de teksten en toegestane beelden die je al hebt.
- Bepaal je eigen budget en streefdatum; laat de agent geen bestedingsruimte verzinnen.
- Noem wie de site bijwerkt en geef een echte inbox die je beheert en kunt testen.
Dit zou je nu moeten zien: Je eigen bestedingsgrens en een genoemde website-eigenaar.
-
Laat Codex de brief schrijven
Kopieer de briefprompt, vervang de voorbeeldnotities en verstuur hem. Vraag Codex om docs/website-brief.md op te slaan.
Voorbeeld ter illustratie - Codex
- Prompt kopiëren → Notities toevoegen → Versturen → docs/website-brief.md
Let op: Een brief met jouw notities, zichtbare aannames en gemarkeerde ontbrekende inhoud.
Meer hulp bij deze actie
Kopieer de projectbriefprompt, vervang de voorbeeldnotities en verstuur hem. Vraag vóór de bouw om docs/website-brief.md met aannames en ontbrekende inhoud.
Stap voor stap
- Open de gekoppelde prompt en gebruik de knop om de prompt te kopiëren.
- Vervang de laatste voorbeeldnotities door de notities uit de vorige acties.
- Plak de prompt in de fieldnotes-studio-chat en verstuur hem. De taak maakt docs/website-brief.md; bouwen volgt later.
Dit zou je nu moeten zien: Een brief met jouw notities, zichtbare aannames en gemarkeerde ontbrekende inhoud.
-
Controleer en bewaar de brief
Lees de brief, verbeter feiten en keur de afbakening goed. Vraag Codex een Git-commit op te slaan.
Voorbeeld ter illustratie - Controleer
- Brief openen → Feiten verbeteren → Afbakening goedkeuren → Commit
Let op: Een opgeslagen brief waar je achter staat, zonder verzonnen claims of functies.
Meer hulp bij deze actie
Lees de gemaakte brief, controleer feiten, beantwoord noodzakelijke vragen en verwijder ongewenste functies. Bewaar de beoordeelde brief als commit om je planningsbesluiten vast te leggen.
Stap voor stap
- Lees docs/website-brief.md helemaal.
- Verbeter bedrijfsgegevens, beantwoord noodzakelijke vragen en verwijder verzonnen prijzen, kwalificaties, citaten of ongewenste functies.
- Vraag Codex de wijzigingen te tonen en de beoordeelde brief als Git-commit op te slaan.
Dit zou je nu moeten zien: Een opgeslagen brief waar je achter staat, zonder verzonnen claims of functies.
Waarom deze stap belangrijk is
Je hoeft niet elke regel code te beschrijven. Je moet wel uitleggen voor wie de website is, wat die bezoekers nodig hebben en welke stap je wilt dat ze zetten. ‘Maak het mooi’ laat de agent gokken; ‘help een ondernemer mijn diensten te begrijpen en contact op te nemen’ geeft een bruikbare richting.
Fieldnotes Studio is ons fictieve voorbeeld: een kleine ontwerpstudio die aanvragen wil ontvangen. De eerste versie heeft vier pagina’s en een echt contactadres. Accounts, betalingen, een boekingssysteem en een AI-chatbot zijn toekomstige functies met eigen eisen. Een kleine, complete website is makkelijker te controleren en te onderhouden.
De basis uitgelegd
Brief
Een korte schriftelijke afspraak over het doel, de doelgroep, de afbakening en de beperkingen van de website.
Afbakening (scope)
De pagina’s en functies die horen bij de versie die je bouwt.
Oproep tot actie (call to action)
Een duidelijke uitnodiging om iets te doen, zoals ‘Bespreek je project’ of ‘Mail de studio’.
Aanname
Iets wat de agent voor waar houdt zonder het te controleren. Maak aannames zichtbaar zodat je ze kunt beoordelen.
Vraag het je agent
PromptMaak je projectbrief
Zet mijn notities om in docs/website-brief.md. Beschrijf doel, primaire doelgroep, bezoekersbehoeften, hoofdactie, doelen van de vier pagina’s, functies voor de eerste versie, latere functies, ontbrekende inhoud en beperkingen. Gebruik Fieldnotes Studio als oefenvoorbeeld tenzij ik mijn eigen bedrijf opgeef. Stel maximaal drie noodzakelijke vragen; markeer overige aannames. Verzin geen klantcitaten, kwalificaties, prijzen of bedrijfsclaims. Bouw de website nog niet. Mijn notities: [vervang deze zin door je notities].Bestanden & opdrachten
textEen brief om aan te passen
Project: Fieldnotes Studio, een fictieve ontwerpstudio
Doelgroep: Ondernemers die ontwerphulp overwegen
Doel: Bezoekers onze diensten laten begrijpen en ons laten mailen
Pagina’s: Home / About / Services / Contact
Eerste versie: Statische pagina’s, mobiel menu, echte e-maillink
Later: Boekingen, betalingen, accounts, AI-functies
Inhoud: Goedgekeurde teksten en beelden die we mogen gebruiken
Stijl: Rustig, helder, redactioneel, goed leesbaar
Budget en planning: Voeg je eigen grenzen toe
Contactadres: Geef een inbox die je beheert en kunt testenAls er iets misgaat
- De brief groeit uit tot een ingewikkelde app.
- Ga terug naar de ene hoofdactie. Zet functies die de eerste vier pagina’s niet ondersteunen onder ‘Later’ en laat Codex de brief bijwerken.
- Je weet niet goed wat de doelgroep nodig heeft.
- Vraag iemand uit die doelgroep wat die wil weten voordat die contact opneemt. Voeg de antwoorden toe aan de brief in plaats van een bezoekersprofiel te verzinnen.
Officiële links & verder lezen
Persoonlijke notities
Noteer vragen, besluiten of ideeën voor je website. Waar mogelijk opgeslagen in deze browser; exporteer je notities om een kopie te bewaren. Vul nooit geheimen in.
Downloads & opgeslagen voortgangGids, notities en persoonlijke controles
Download de volledige gids of exporteer je notities uit alle hoofdstukken. Instructies voor het laatst gecontroleerd: .
Controles en notities blijven in deze browser, apart per taal. Exporteer je notities om ze te bewaren. Vul hier nooit API-sleutels of andere geheimen in.
NotitiesNotities als Markdown
Het klembord is niet beschikbaar. Kopieer de zichtbare, geselecteerde tekst hieronder met je toetsenbord of het browsermenu.
0 van 65 controles in de gids aangevinkt
Dit zijn jouw opgeslagen vinkjes. Ze voeren geen tests uit en controleren de beveiliging niet. Ze staan los van de balk met je leespositie hierboven.
StartbestandenWerkinstructies en vier skills
Deze sjablonen geven je agent een eerste set werkinstructies. Lees ze, pas ze aan je website aan en sla elk bestand op het getoonde pad op, gerekend vanaf je projectmap.
Een gedownloade skill is een instructiebestand. Het installeert geen testprogramma, voert geen beveiligingsscan uit en bewijst niet dat je site veilig is. De gids laat zien hoe je dat werk opzet en controleert.
Download de instructiebestanden in de taal van deze gids. Houd de technische bestandsnamen en paden gelijk aan de voorbeelden.
Download alle startbestandenBestandAGENTS.md
# Werkafspraken voor de website
Dit project volgt de websitebrief en acceptatiecriteria die met de eigenaar zijn afgesproken. Gebruik de bestaande technische keuzes, tenzij een concrete eis om een wijziging vraagt.
## Werkwijze
- Leg bij een grote functie vóór de bouw de voorgestelde wijzigingen en het controleplan uit. Rond toegestaan lokaal werk af in kleine stappen die de eigenaar kan beoordelen.
- Lees de bestanden die bij de taak horen. Houd andere pagina’s en instellingen intact.
- Leg nieuwe technische termen in gewone taal uit wanneer je aan de eigenaar rapporteert.
- Gebruik de skills website-design, clean-code, website-testing en website-security uit de repository wanneer hun werkwijzen van toepassing zijn.
- Leg belangrijke beslissingen en ontbrekende inhoud vast in de projectnotities. Verzin geen bedrijfsfeiten, aanbevelingen of publicatierechten.
## Controle
- Bekijk package.json om de echte commando’s voor bouwen, typecontrole en tests te vinden. Verzin geen geslaagde controle en maak geen betekenisloze test alleen om een commando te laten slagen.
- Voer controles uit die bij de wijziging passen. Lokale tests gebruiken tijdelijke testgegevens en hebben geen toegang tot productie; voer ze uit en herstel fouten door de gevraagde wijziging zonder bij elke stap toestemming te vragen.
- Controleer bezoekersinteracties in een browser wanneer browserhulpmiddelen beschikbaar zijn. Meld controles die onbeschikbaar of onvolledig blijven.
- Toon de eigenaar een werkende lokale preview en vat veranderd gedrag, bewijs en resterende beperkingen samen.
## Toegangsgegevens en publicatie
- Houd API-sleutels en andere geheimen buiten browsercode, prompts, logboeken en Git. Bewaar lokale geheimen in genegeerde bestanden of de gekozen beveiligde opslag.
- Lokaal bouwen en testen is toegestaan. De site publiceren, een echt bericht versturen, een betaling verwerken of productiegegevens wijzigen vereist toestemming van de eigenaar voor die handeling.
- Bewaar vóór publicatie een herstelbare werkende versie. Beschrijf hoe je die terugzet.
Dit zijn basisafspraken voor een nieuw oefenproject. Pas ze aan de echte eisen en al gegeven toestemming van de eigenaar aan.
Bestand.agents/skills/website-design/SKILL.md
---
name: website-design
description: Ontwikkel of verfijn de visuele richting en responsive interface van een website vanuit de brief, inhoud en het bestaande ontwerp. Gebruik voor paginaontwerp of visuele bouw.
---
Lees de websitebrief en bestaande ontwerpnotities voor de gevraagde pagina. Werk binnen de merkkeuzes, inhoud en technische keuzes van de gebruiker.
Stel bij een nieuwe richting letterkeuzes, een klein kleurenpalet, vaste afstanden en een voorbeeldpagina voor. Leg uit hoe deze keuzes de doelgroep en de hoofdactie van bezoekers ondersteunen. Gebruik echte inhoud om de volgorde van aandacht en regellengtes te beoordelen.
Maak herbruikbare onderdelen voor navigatie, koppen, knoppen en herhaalde inhoud. Geef hoofdacties een duidelijke visuele nadruk. Behoud zichtbare toetsenbordfocus, leesbaar contrast en bruikbare labels. Ontwerp smalle schermen naast desktopschermen; controleer lange koppen, navigatie en aanraakvlakken in een browser.
Gebruik betekenisvolle HTML voordat je aangepaste interactie toevoegt. Maak beweging optioneel en respecteer de voorkeur voor minder beweging. Gebruik materiaal waarvoor publicatierechten bekend zijn en noteer de bronnen. Verzin geen klantbeoordelingen, prestaties of bedrijfsfeiten.
Toon vóór uitbreiding naar alle pagina’s de eerste complete pagina op desktop- en telefoonbreedte. Beschrijf de belangrijkste ontwerpkeuzes en ontbrekende inhoud. Is een browserhulpmiddel onbeschikbaar? Meld dan dat visuele controle nog moet gebeuren.
Bestand.agents/skills/clean-code/SKILL.md
---
name: clean-code
description: Bouw of herstructureer websitecode tot begrijpelijke onderdelen met de bestaande techniek en afspraken van het project. Gebruik voor websitebouw of onderhoudbaarheid.
---
Lees de relevante bestanden en pakketscripts voordat je een aanpak kiest. Behoud werkend gedrag buiten de gevraagde wijziging. Gebruik bij voorkeur de bestaande techniek en pakketten als die aan de behoefte voldoen.
Houd pagina-inhoud apart van herhaalde opmaak wanneer dat bewerken makkelijker maakt. Geef onderdelen, variabelen en functies namen die hun doel beschrijven. Gebruik gedeelde onderdelen voor herhaalde navigatie en pagina-elementen; maak geen abstractie voor één eenvoudig gebruik.
Verwerk lege, ongeldige, ladende en fouttoestanden bij interacties die dat nodig hebben. Gebruik standaard browserbediening en betekenisvolle HTML wanneer die de interactie ondersteunen. Vermijd nep-formulierverzending, nagebootste succesmeldingen en dode links.
Gebruik typecontrole en de opmaak- of lintregels van het project waar die zijn ingesteld. Leg bij een nieuw pakket het doel en nieuwe onderhouds- of gebruikseisen uit. Houd gegenereerde bouwbestanden, geïnstalleerde pakketten en lokale omgevingsbestanden buiten versiebeheer.
Voer bestaande controles uit die bij de wijziging passen, inclusief een productiebuild wanneer het resultaat kan veranderen. Vat veranderd gedrag, controleresultaten en resterende beperkingen samen. Leg de belangrijkste bestanden in gewone taal uit, zodat een beginner de inhoud kan vinden en aanpassen.
Bestand.agents/skills/website-testing/SKILL.md
---
name: website-testing
description: Controleer websitewijzigingen met bezoekersroutes, passende automatische tests en browsercontroles. Gebruik bij websitetests, onderzoek naar fouten of voorbereiding op publicatie.
---
Begin met de brief en zichtbare acceptatiecriteria. Bekijk bestaande test- en bouwcommando’s; neem niet aan dat een script bestaat. Kies controles op basis van veranderd gedrag en de gevolgen van een fout.
Doorloop de hoofdroute voor bezoekers en betrokken links, navigatie en formulieren. Neem ongeldige invoer en relevante fouttoestanden mee. Controleer bij een contactformulier echte bezorging op de afgesproken testbestemming voordat je meldt dat het werkt. Leg bij een e-maillink uit dat die het ingestelde mailprogramma van de bezoeker opent en niet automatisch een bericht verstuurt.
Controleer smalle en brede schermen in een browser. Neem toetsenbordnavigatie, zichtbare focus, toegankelijke namen, zoom en horizontaal overlopen mee. Automatische toegankelijkheidsresultaten vullen deze handmatige controles aan en bewijzen geen volledige toegankelijkheidsnaleving.
Voeg automatische tests toe voor belangrijk gedrag of aangetoonde terugkerende fouten. Test zichtbare resultaten en betekenisvolle foutgevallen; vermijd tests die alleen de geschreven code herhalen of toevallige formuleringen vergelijken. Gebruik tijdelijke testgegevens en lokale testbestanden. Verstuur nooit echte berichten, voer geen betalingen uit en wijzig geen productiegegevens zonder toestemming van de gebruiker.
Reproduceer een fout, herstel de oorzaak en voer betrokken controles opnieuw uit. Meld uitgevoerde commando’s, resultaten, browsercontroles en alles wat niet is gecontroleerd. Een geslaagde build toont dat de site kan worden gemaakt; controleer bezoekersgedrag apart. Meld nooit dat een controle geslaagd is als die is overgeslagen of onbeschikbaar was.
Bestand.agents/skills/website-security/SKILL.md
---
name: website-security
description: Controleer geheimen, pakketten, invoer, toegang en publicatie-instellingen van een website en herstel bevindingen binnen de afgesproken taak. Gebruik voor gevraagde beveiligingscontrole of voorbereiding op publicatie.
---
Breng de relevante onderdelen van de site in kaart: statische pagina’s, formulieren, backend-routes, aanmelding, scripts van derden en opgeslagen gegevens. Beperk de controle tot de echte technische opzet en de toegestane omgeving.
Houd toegangsgegevens buiten browsercode, logboeken, prompts en Git. Maak onderscheid tussen openbare instellingen tijdens de build en servergeheimen. Is een sleutel als commit opgeslagen of blootgesteld? Gebruik hem niet meer, leg uit dat het bestand verwijderen de sleutel niet intrekt en laat de eigenaar hem vóór verder gebruik intrekken of vervangen. Toon de toegangsgegevens niet in je verslag.
Bekijk relevante beveiligingswaarschuwingen voor pakketten en beoordeel of het betrokken pakket en het kwetsbare gedrag worden gebruikt. Herstel binnen compatibele versies en voer de betrokken controles opnieuw uit. Vermijd automatische geforceerde upgrades die de website kunnen breken.
Controleer bij backend-interacties de invoer op de server, geef uitvoer passend gecodeerd weer en controleer aanmelding en toegangsrechten afzonderlijk. Overweeg misbruikbeperking voor openbare formulieren of AI-toegangspunten. Een OpenAI API-sleutel hoort op de server; een statische site publiceren biedt geen geheime serveromgeving.
Controleer HTTPS en relevante beveiligingsheaders bij de echte hosting. Verzamel alleen gegevens die de functie nodig heeft en leg hun bestemming en bewaartermijn uit. Claim geen wettelijke naleving op basis van een codescan.
Meld elke bevinding met locatie, aannemelijke impact, herstel en controle. Beschrijf de reikwijdte, gebruikte hulpmiddelen, openstaande bevindingen en ontoegankelijke onderdelen. Een schone scan is bewijs binnen het bereik van die scan, geen garantie dat de website geen kwetsbaarheden heeft. Scan geen systemen van derden en publiceer geen wijzigingen buiten de toegestane taak.