🛠 Claude Design getest: marketing pages, slides en brand kits met je eigen design system

Hoofdonderwerpen

• Claude Design (Anthropic's nieuwe web-based design tool) — prototypes, slides en video's met je eigen design system als first-class citizen
• Design system import — de killer feature: upload HTML, logo's, fonts of koppel GitHub, en Claude bouwt een gestructureerd design system (UI kit, typography, kleuren, components, brand marks)
• Google's design.md standaard — net gelanceerd, probeert een universele manier te worden om design systems aan AI-tools te beschrijven (vergelijkbaar met agents.md of skills.md)
• GPT Image 2 — nieuwe OpenAI image model met thinking, veel beter in tekst, typografie en layout. Goed voor brand kits en infographics
• Figma is niet dood — korte feedback loops winnen het nog steeds van LLM-calls van 5-10 minuten

Key insights

• De grootste klacht bij tools als v0/Lovable/Bolt is dat ze je brand nooit echt matchen. Claude Design lost dat op door het design system structureel als input te behandelen.
• Zelfs als je Claude Design niet gebruikt: het idee van je design system opsplitsen in UI kit / typography / colors / components / brand marks is een goede manier om élke AI-tool je brand te laten snappen.
• Claude Design's Tweaks panel (drie varianten per prompt, daarna knopjes voor headline-stijl, hero layout, CTA text) is superieur aan eindeloos prompten — mensen weten vaak niet wát ze willen veranderen, wél wat ze mooi vinden.
• Claude Design schrijft verrassend goede copy als je het los laat (zonder design system constraints).
• Slides = code achter de schermen. Dat opent de deur voor fun design-elementen (zoals een nep-terminal met knipperende cursor in een howto-deck).
• Langzaam (5-10 min per iteratie) en duur (credits lopen snel op, $200 top-up tijdens de opname). Voor snel itereren blijft Figma beter.

What to Build

1. Stooker design system importeren in Claude Design

Wat het is: Een herbruikbaar Claude Design profiel waarmee elke nieuwe landingpage, pitch deck of campagne-asset automatisch in Stooker's huisstijl wordt gerenderd.

Hoe zij het bouwen (uit de episode):

• Ga naar claude.ai/design → org settings
• Upload: gesaved HTML van je homepage, logo, key images, fonts
• Of (beter): koppel je GitHub repo direct — dan pakt Claude exacte componenten
• Laat 5 minuten runnen, review het resulterende design system (UI kit / typography / colors / components / brand marks)
• Tweak handmatig waar nodig (Claire moest bv. de header-font aanpassen van serif naar sans-serif)

Web research:

• Officiële setup: https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design
• Awesome Claude Design repo (met DESIGN.md templates): https://github.com/VoltAgent/awesome-claude-design
• Full walkthrough: https://marketingagent.blog/2026/04/12/tutorial-getting-started-with-claude-design/
• Claude gebruikt ~20-25% van je weekly quota per design system build

Analyse — wat beter kan:

• Onno, jij hebt waarschijnlijk geen aparte design system repo. Wat je wel hebt: je Stooker website + je verpakkingen + je Instagram feed. Dat is goud voor een image-heavy brand als specialty coffee.
• Voeg bewust fysieke brand assets toe: foto's van je koffiezakken, interieur, cup designs. Claude snapt mood verrassend goed via reference images (zie Jamie Gannon's opmerking over reference styles).
• Voor jou is de slides use-case waarschijnlijk waardevoller dan landing pages — denk: B Corp rapport, wholesale pitch deck, training materiaal voor baristas.

Stappenplan:

1. Verzamel: Stooker logo (SVG), 3-5 hero images (koffiezakken, cafe shots, productfoto's), font files, primaire kleuren als HEX
2. Save je stooker.nl homepage als HTML (Ctrl+S in browser → Webpage Complete)
3. Claude Pro ($20) of Max ($100-200) account → claude.ai/design → org settings → Create Design System
4. Upload alles, laat 5-10 min lopen
5. Review de output, tweak de typography/kleuren als het ernaast zit
6. Test met een throwaway prompt: "maak een landingpage voor onze Kerst blend" — kijk of het voelt als Stooker
7. Als het matcht: zet als default voor je org

2. Wholesale/B2B pitch deck generator uit bestaande content

Wat het is: Gooi een bestaand artikel, whitepaper of LinkedIn-post in Claude Design en krijg een merkconform deck terug.

Hoe zij het bouwen: Claire uploadde haar "Open Claude" newsletter artikel als PDF, koos een design system, en Claude bouwde een volledig getrainde deck — inclusief een fake-terminal-component voor command-line snippets uit het artikel.

Web research:

• Workflow guide: https://app.trupeer.ai/view/LOAIcg0Sq/claude-design-complete-user-guide
• Export opties: PPTX, PDF, Canva, HTML
• Beperking: geen native PPT — export naar Canva/PPTX voor finishing

Analyse:

• Voor Stooker: perfect voor wholesale pitches ("waarom Stooker als koffieleverancier voor je hotel/kantoor") — gooi je sustainability story + B Corp report erin, krijg een deck terug in huisstijl.
• Ook voor intern: onboarding deck voor nieuwe baristas uit je SOP-documenten.

Stappenplan:

1. Maak design system eerst (stap 1 hierboven)
2. Verzamel 2-3 bron-PDFs: B Corp rapport, je koffie-sourcing story, technische specs
3. Prompt: "Maak een 10-slide wholesale pitch deck voor horeca op basis van deze documenten, voor een audience van food & beverage managers"
4. Gebruik Q&A mode: laat Claude vragen stellen over audience/tone/length
5. Export naar PPTX of Canva voor finishing
6. Alternatief als je in Cowork/Next.js wil blijven: je kunt dit ook zelf bouwen met Claude API + een simpele React-based slide renderer (bv. Reveal.js). Maar voor deze use case is Claude Design sneller.

3. Seasonal campagne landing page met 3 varianten

Wat het is: Voor elke seizoensblend of beperkte release — een aparte landingpage in 3 varianten, kiezen welke je live zet.

Hoe zij het bouwen: Prompt + design system + "3 variations" toggle. Daarna het Tweaks panel: headline style (operator/blunt/question), hero layout (centered/side), CTA tekst, background kleur.

Web research:

• Landing page playbook met anti-slop rules: https://roast.page/blog/claude-design-landing-pages-guide
• Upload referenties (Stripe, Dribbble) om de "wet cardboard" default te vermijden
• Animated hero met Seedance 2.0 video backgrounds: https://marketingagent.blog/2026/04/13/tutorial-animate-landing-pages-with-claude-design/

Analyse:

• Voor Stooker: snelle A/B test voor bv. een holiday gift bundle of abonnementspagina.
• Maar: als je al een Next.js + Supabase stack hebt met Cowork, is Claude Design's export (HTML) niet 1-op-1 bruikbaar. Je wil de output gebruiken als design reference die je daarna opnieuw bouwt in je eigen stack — of Claude Code pakken om het in jouw Next.js componenten te implementeren.

Stappenplan:

1. Design system van Stooker staat al klaar (stap 1)
2. Upload 2-3 reference landing pages die je mooi vindt (bv. Partners Coffee, Drop Coffee, April Coffee)
3. Prompt: "Landing page voor [product], doelgroep [x], primary CTA = [abonneer/bestel], vraag me 5 vragen voordat je begint"
4. Kies 3 variations, gebruik Tweaks om te fine-tunen
5. Export als HTML voor dev handoff, OF: screenshot → Claude Code → "bouw dit in mijn Next.js + Supabase + Tailwind stack, gebruik bestaande componenten uit /components"
6. Push naar Cowork/je repo

4. Personal color analysis als customer-gift experiment (speelser idee)

Wat het is: Gratis color-analysis tool voor klanten die een Stooker abonnement afnemen — upload een foto, krijg een poster met jouw kleuren én matchende koffie-blends (warme bonen voor warme ondertonen, etc).

Hoe zij het bouwen: Claire liet GPT Image 2 een color analysis poster maken van haar foto. GPT extraheert huid/haar/ogen HEX codes, bepaalt kleurseizoen, maakt een poster met palette + styling suggesties.

Web research:

• ELLE tutorial: https://www.elle.be/nl/374743-hack-gratis-persoonlijke-kleuranalyse-kleding.html
• Best practices voor GPT image prompts: https://www.skool.com/evyai/chatgpt-image-generator-best-practices-optimal-image-types-and-example-prompts
• Workflow: foto → HEX extractie (kan met Python OpenCV of gewoon in Photoshop) → ChatGPT prompt met HEX codes → poster generatie

Analyse:

• Gimmicky maar potentieel viraal. Je marketinghoek: "Jouw koffie matcht jouw kleurenpalet" — warme tonen = chocolate/caramel flavor notes, koele = bright/floral.
• Technisch eenvoudig te vibe-coden als side project in een avondje.

Stappenplan:

1. Next.js page met upload component (Supabase Storage voor de foto)
2. Server action die de foto naar OpenAI Vision stuurt met prompt: "analyseer huid/haar/oog HEX codes en bepaal color season (spring/summer/autumn/winter)"
3. Tweede call naar GPT Image 2 met de HEX codes + Stooker brand system → genereert poster met palette + matchende blend suggesties
4. Return image URL, sla op in Supabase
5. Optioneel: deel-knop voor Instagram

Takeaways voor Onno

• Design system als API-input is de echte shift. Niet één-off prompts, maar een gestructureerde beschrijving van je brand die elke AI-tool kan lezen. Begin met een DESIGN.md of een folder met je assets, ongeacht welke tool je kiest. Werkt voor Claude Design, v0, Cursor, Claude Code — overal.
• Voor vibe coding in je Next.js stack: Claude Design is NIET je productie-tool. Het is je design exploration tool. Gebruik het voor mockups en referenties, implementeer daarna in je eigen codebase met Claude Code. Anders creëer je een parallel systeem dat je niet kunt onderhouden.
• Slides-als-code is de toekomst. Voor een ~10-man team betekent dit: stop met worstelen in PowerPoint/Keynote. Maak een paar templates via Claude Design, hergebruik voor elke wholesale pitch, B Corp rapportage, team all-hands.
• GPT Image 2 >>> voorgangers voor brand werk. Als je marketing assets genereert (Instagram posts, nieuwsbrief headers, product shots met tekst), upgrade meteen. Typography is eindelijk niet meer AI-slop.
• Budget reality check: deze tools zijn duur (Claire top-upte $200 mid-opname). Voor regelmatig gebruik: Claude Max plan. Voor incidenteel: Pro is prima maar reken op wachttijden.
• Figma blijft relevant voor snel itereren (geen model in de loop = directe feedback). Voor jou als geen-designer misschien niet relevant — maar als je een freelance designer inhuurt, ontsla hem niet op basis van deze aflevering.