Hoe maak je met Claude een website zonder AI-look?

Claude Code of claude.ai: wat heb je nodig?

Claude werkt op twee manieren, en voor een website maakt dat verschil.

• Op claude.ai, in de browser of de app, beschrijf je een pagina en toont Claude het resultaat naast het gesprek. Handig om een ontwerp te proberen of één pagina te maken. De code zet je daarna zelf ergens neer.
• Claude Code werkt in de map van je project: in de terminal, in de Claude-app op je computer of in je code-editor. Claude maakt daar zelf alle bestanden van je site, ook als die meerdere pagina’s heeft, en helpt je hem online te zetten. Claude Code vraagt een betaald Claude-abonnement.

Wil je een echte site op je eigen domein, kies dan Claude Code. Je hoeft de code niet te lezen: je beschrijft wat je wilt, bekijkt wat Claude laat zien en zegt wat er anders moet.

Waarom ziet een Claude-website er vaak hetzelfde uit?

Claude kiest wat het vaakst voorkomt als jij niets kiest. Vraag je om "een moderne website voor mijn bureau", dan krijg je het gemiddelde van miljoenen sites: een donker of paars verloop, een pilletje met een stip boven de kop, drie kaarten op een rij en één generiek lettertype. Dat is geen fout van Claude. Zo ziet een veilige keuze eruit als niemand een andere keuze maakte.

Je bezoekers herkennen die keuzes binnen een paar seconden, omdat ze ze op honderd andere sites zagen. De oplossing is geen langere wensenlijst met woorden als "premium" of "strak", maar vaste keuzes die Claude letterlijk kan toepassen.

Welke ontwerpkeuzes geef je Claude vooraf?

1. Kleuren met een taak, elk met een hexcode: een achtergrond, een kleur voor vlakken, een tekstkleur en één accent voor knoppen. Bijvoorbeeld het palet Graphite Ivory uit de galerij: #F3F0E8, #E8E1D5, #353634 en #9C532C.
2. Twee lettertypes: één voor koppen en één voor lopende tekst. Bijvoorbeeld Editorial Sans Precision: Sora voor koppen en Public Sans voor tekst.
3. De opbouw: welke secties de homepage heeft en in welke volgorde, zoals opening, diensten, werk, werkwijze en contact.
4. Twee of drie regels over de sfeer en over wat niet mag, zoals "veel witruimte, één blikvanger per scherm, geen verloop".

Werk je in Claude Code, zet deze keuzes dan in een bestand met de naam CLAUDE.md in de map van je project. Claude leest dat bestand aan het begin van elk gesprek, dus je hoeft het ontwerp niet steeds opnieuw uit te leggen.

Hoeveel dat uitmaakt, liet de blinde vergelijking van de Struq-skill zien. Drie opdrachten werden elk twee keer gebouwd door hetzelfde model, één keer zonder en één keer met vooraf gekozen ontwerp. De beoordelaar wist niet welke versie welke was, en telde zonder skill 22 kenmerken van een template en met de skill 8.

Hoe zet je je Claude-website online?

In Claude Code vraag je het gewoon: "Help me deze site online zetten met Vercel. Loop me stap voor stap door wat ik moet doen, één stap per keer." Claude maakt de bestanden klaar en vertelt per stap wat jij moet doen, zoals een account aanmaken en je project verbinden. Daarna koppel je je eigen domeinnaam.

Wat je op claude.ai maakt, staat in je gesprek. Voor een site op je eigen domein heb je de bestanden en een hostingdienst nodig, en dat laat je het makkelijkst Claude Code regelen.

Kan dit gratis?

• claude.ai heeft een gratis versie waarmee je een pagina kunt proberen.
• Claude Code vraagt een betaald Claude-abonnement.
• De Struq-skill is gratis en open source, en je hebt er geen account voor nodig. De paletten en lettercombinaties in de galerij zijn ook gratis.
• Hosting zoals Vercel heeft een gratis instap. Lees wel de voorwaarden als het om een site voor een bedrijf gaat. Een eigen domeinnaam betaal je apart.

Struq is een gratis skill en visuele bibliotheek uit Nederland. Je eigen AI ontwerpt er websites mee op studioniveau. De skill zet de ontwerpkeuzes uit deze gids voor je klaar: Claude kiest eerst een richting, lettertypes en kleuren, en bouwt pas na jouw akkoord.