Alle Prompts

Maak een [TYPE PAGINA] pagina voor mijn website.

De pagina moet bevatten:
- [ELEMENT 1]
- [ELEMENT 2]
- [ELEMENT 3]

Stijl: [GEWENSTE STIJL]

Maak een bestand aan genaamd "mijn-persona.md" in de root van mijn project.

Schrijf op basis van onderstaande antwoorden een helder, samenhangend profiel van mij als ondernemer/professional. Dit profiel gebruik ik later als basis voor mijn website teksten.

Mijn antwoorden:

1. Wie ben ik?
[Wie ben je, wat doe je en wat is je achtergrond?]

2. Wat bied ik aan?
[Welke diensten of producten bied je aan?]

3. Voor wie doe ik dit?
[Wie is je doelgroep?]

4. Wat maakt mij uniek?
[Wat maakt jou uniek ten opzichte van anderen?]

5. Wat wil ik dat bezoekers voelen op mijn website?
[Welk gevoel wil je overbrengen?]

Mijn contactgegevens:
- Email: [Je emailadres]
- Telefoon: [Je telefoonnummer]
- Overige links: [LinkedIn, Instagram, Facebook, of andere platformen - laat leeg als niet van toepassing]

Structureer het bestand met:
- Een korte elevator pitch (2-3 zinnen)
- Het volledige profiel uitgeschreven
- 3 kernwaarden die mij typeren
- Mijn contactgegevens

Maak een bestand aan genaamd "ideale-klant.md" in de root van mijn project.

Schrijf op basis van onderstaande antwoorden een helder, samenhangend profiel van mijn ideale klant. Maak er een leesbaar verhaal van dat ik later kan gebruiken voor mijn website teksten.

Mijn antwoorden:

1. Wie is mijn ideale klant?
[Wat is hun leeftijd, beroep en situatie?]

2. Wat is hun grootste probleem?
[Waar liggen ze wakker van?]

3. Wat hebben ze al geprobeerd?
[Wat werkte niet?]

4. Wat willen ze bereiken?
[Wat is hun droom of doel?]

5. Waarom ben ik de juiste persoon om te helpen?
[Wat is jouw unieke achtergrond of aanpak?]

Structureer het bestand met:
- Een korte samenvatting bovenaan
- Het volledige profiel uitgeschreven
- 3 voorbeeldzinnen die ik op mijn website kan gebruiken

Maak een bestand aan genaamd "website-structuur.md" in de root van mijn project.

Dit wordt de structuur van mijn website. Maak een overzichtelijke sitemap op basis van mijn input.

Mijn pagina's:

1. Homepage
[Wat moeten bezoekers als eerste zien en voelen op je homepage?]

2. Over mij
[Welk verhaal wil je vertellen over jezelf?]

3. Aanbod
[Welke diensten of producten bied je aan?]

4. Contact
[Hoe kunnen mensen je het beste bereiken?]

5. Blog (optioneel)
[Wil je een blog? Ja of nee]

Maak een bestand aan genaamd "design.md" in de root van mijn project.

Gebruik mijn bestanden in de root folder:
- mijn-persona.md
- ideale-klant.md
- website-structuur.md

Analyseer deze bestanden en schrijf een compleet design document.

MIJN BESTAANDE KEUZES (vul in wat je al hebt, verwijder de regel als je een aanbeveling wilt):
- Primaire kleur: [jouw primaire kleur, bijv. #183451 of "teal"]
- Secundaire kleur: [jouw secundaire kleur]
- Font voor titels: [jouw font, bijv. Poppins]
- Font voor tekst: [jouw font, bijv. Inter]
- Stijlrichting: [modern/klassiek/speels/zakelijk]
- Hoeken: [afgerond/scherp]

Het document moet bevatten:
- Kleuren (primair, secundair, accent) met hex codes
- Fonts voor headings en body tekst
- Stijlrichting met uitleg waarom dit past
- Hoeken: afgerond of scherp
- Schaduwen: subtiel, geen, of uitgesproken
- Ruimte: compact of luchtig
- Tips voor afbeeldingen en visuele elementen

BELANGRIJK voor kleuren:
- Gebruik MAXIMAAL 3 kleuren: primair, secundair, en accent
- Kies per kleur slechts ÉÉN hex waarde - geen variaties of extra tinten van dezelfde kleur
- Voeg GEEN extra kleuren toe (zoals oranje naast groen) tenzij ik dit expliciet vraag
- Houd het simpel en consistent

Gebruik mijn ingevulde keuzes. Voor lege of verwijderde regels: doe een aanbeveling op basis van mijn persona en ideale klant.

Pas de stijl uit mijn design.md toe.

Lees design.md in de root folder en pas ALLEEN toe:

1. TAILWIND.CONFIG
- Zet de kleuren in tailwind.config (primary, secondary, accent)
- Voeg de fonts toe aan tailwind.config

2. HERBRUIKBARE COMPONENTS
- Pas de border-radius toe op knoppen, kaarten en inputs
- Pas de schaduwen toe waar nodig
- Zorg voor consistente spacing in componenten

BELANGRIJK: Pas GEEN pagina's aan. We doen nu alleen de configuratie en basis componenten. De pagina's zelf bouwen we met andere prompts.

Ik upload nu mijn logo.

Zet het logo in het midden van het scherm zodat ik kan zien hoe het eruitziet.

Gebruik dit logo ook als favicon voor de browser tab.

Maak een header met navigatie voor mijn website.

Gebruik mijn bestanden in de root folder:
- mijn-persona.md
- ideale-klant.md
- website-structuur.md
- design.md

De header moet:
- Mijn logo bevatten (linksboven)
- Een navigatie menu met links naar alle pagina's uit website-structuur.md
- Goed werken op mobiel (hamburger menu)
- De stijl uit design.md volgen
- In een layout component komen zodat hij op elke pagina zichtbaar is

Maak ook alvast lege pagina's aan voor alle menu items zodat de links werken.

Maak GEEN footer - die komt in een andere prompt.
Laat de homepage nog leeg - die vullen we in de volgende prompt.

Bouw de homepage voor mijn website.

Gebruik mijn bestanden in de root folder:
- mijn-persona.md
- ideale-klant.md
- website-structuur.md
- design.md

Ik voeg ook foto's bij die je kunt gebruiken.

Bouw de secties die in website-structuur.md staan voor de homepage.

BELANGRIJK: Maak van elke sectie een los component (bijv. HeroSection, AboutSection, ServicesSection). Zo kan ik later makkelijk aanpassingen maken per sectie.

Zorg dat alles goed werkt op mobiel.

Maak een footer voor mijn website.

Gebruik mijn bestanden in de root folder:
- mijn-persona.md
- ideale-klant.md
- website-structuur.md
- design.md

De footer moet:
- Mijn contactgegevens bevatten (uit mijn-persona.md)
- Links naar belangrijke pagina's (uit website-structuur.md)
- Copyright tekst met mijn naam
- De stijl uit design.md volgen
- In de layout component komen zodat hij op elke pagina zichtbaar is
- Goed werken op mobiel

Ik heb net een element geselecteerd.

Pas dit aan: [Wat wil je veranderen? Bijv. maak de tekst groter, verander de kleur, voeg meer ruimte toe]

Bouw de [Welke pagina? Bijv. Over mij, Aanbod, Contact] pagina voor mijn website.

Gebruik mijn bestanden in de root folder:
- mijn-persona.md
- ideale-klant.md
- website-structuur.md
- design.md

Volg de structuur uit website-structuur.md voor deze pagina.
Neem de stijl over van de andere pagina's.

Zorg dat de pagina goed werkt op mobiel.

Voeg fade-in animaties toe aan mijn website.

Doe dit voor alle bestaande pagina's.

Wat ik wil:
- Secties faden subtiel in wanneer ze in beeld komen bij scrollen
- Gebruik een library zoals framer-motion of AOS

BELANGRIJK:
- Verander NIETS aan buttons, links of hover effecten
- Alleen fade-in animaties op secties/componenten
- Houd het subtiel - niet te traag, niet te overdreven

Bouw de Contact pagina voor mijn website.

Gebruik mijn bestanden in de root folder:
- mijn-persona.md
- ideale-klant.md
- website-structuur.md
- design.md
- tailwind.config.ts (voor de kleuren en stijl)

De pagina moet bevatten:

1. CONTACTFORMULIER (met FormSubmit)
Het formulier stuurt naar: [jouw@email.nl]

Gebruik FormSubmit:
<form action="https://formsubmit.co/[jouw@email.nl]" method="POST">

Velden:
- Naam (verplicht)
- E-mail (verplicht)
- Telefoon (optioneel)
- Bericht (verplicht)
- Submit knop

Voeg deze hidden fields toe:
- _subject: "Nieuw bericht via website"
- _next: redirect naar bedankpagina
- _captcha: false

2. CONTACTGEGEVENS
- E-mail: [jouw@email.nl]
- Telefoon: [jouw telefoonnummer]
- Adres: [jouw adres]

3. GOOGLE MAPS
Embed mijn locatie met dit adres: [jouw volledige adres]

Neem de stijl over van de andere pagina's.
Zorg dat de pagina goed werkt op mobiel.

Maak een blog sectie voor mijn website.

Gebruik mijn bestanden in de root folder:
- mijn-persona.md
- ideale-klant.md
- website-structuur.md
- design.md
- tailwind.config.ts (voor de kleuren en stijl)

Ik heb nodig:
- Een blog overzichtspagina met artikelkaarten
- Een template voor individuele artikelen
- Navigatie naar de blog in het menu
- Schrijf ook 1 voorbeeldblog artikel die past bij mijn doelgroep (als normale pagina, niet als .md of data bestand)

Neem de stijl over van de andere pagina's.
Zorg dat de pagina goed werkt op mobiel.

Voeg SEO toe aan mijn website.

Gebruik mijn bestanden in de root folder:
- mijn-persona.md
- ideale-klant.md
- website-structuur.md
- design.md

Voeg voor elke pagina toe:
- Een unieke paginatitel (max 60 tekens)
- Een meta beschrijving (140-160 tekens)
- Een canonical tag die naar de eigen URL wijst

Voeg ook alt-teksten toe aan alle afbeeldingen. Alt-teksten:
- Beschrijven wat er op de afbeelding te zien is
- Zijn belangrijk voor toegankelijkheid
- Helpen met vindbaarheid in Google Afbeeldingen

Zorg dat elke pagina één H1 heeft en gebruik H2/H3 voor subsecties.

Maak een XML sitemap aan op /sitemap.xml met alle publieke pagina's van mijn website.

Voeg voor elke pagina toe:
- De volledige URL
- Een lastmod datum (vandaag)
- Priority: homepage 1.0, hoofdpagina's 0.8, overige 0.6

Maak ook een robots.txt bestand in /public/robots.txt met:
- Allow voor alle crawlers
- Een verwijzing naar de sitemap
- Allow voor GPTBot en PerplexityBot (voor AI-zoekmachines)

Voeg structured data (JSON-LD schema) toe aan mijn website.

Voeg Organization schema toe op de homepage met:
- Bedrijfsnaam
- Beschrijving
- Logo URL
- Website URL
- Social media links

Als ik een FAQ sectie heb, voeg dan ook FAQPage schema toe.

Plaats de JSON-LD in een <script type="application/ld+json"> tag.