Google's vibe-coded widgets zijn hier: zo bouw jij je eigen met Claude Code

Google zegt het hardop: vibe coding is mainstream

Gisteren kondigde Google bij de Android Show officieel 'vibe-coded widgets' aan voor Android 17. Kleine UI-blokjes die je bouwt door te beschrijven wat je wilt, in plaats van ze te programmeren. Google geeft er een naam aan die wij al maanden kennen: vibe coding. Het is nu geen niche-begrip meer, het zit in het persbericht van het grootste techbedrijf ter wereld.

Voor jou als maker betekent dit: de manier waarop jij werkt met Claude Code is precies de richting waar de hele industrie naartoe beweegt. Goed moment om die workflow te scherpen.

Wat betekent dit voor jouw project?

Als je een SaaS bouwt, heb je vrijwel zeker een dashboard nodig. Statistieken, statusindicatoren, KPI-blokjes, een kleine grafiek. Die widgets zijn precies het soort componenten waar vibe coding het sterkst is: klein genoeg om in één keer te beschrijven, maar specifiek genoeg dat je er uren aan kwijt kunt als je het handmatig probeert.

Vanavond ga je met Claude Code één herbruikbaar dashboard-widget bouwen. Niet iets generieks, maar eentje die past bij jouw product.

Hoe pak je het aan met Claude Code?

Stap 1: Beschrijf je widget in gewone taal

Voordat je Claude Code opent, schrijf je eerst op wat je widget moet laten zien. Wees concreet. Slechte omschrijving: "een statistiekblokje". Goede omschrijving:

Ik wil een React component die één getal groot toont (bv. aantal actieve klanten), een label eronder heeft, een kleine pijl omhoog of omlaag laat zien afhankelijk van of het getal gestegen of gedaald is ten opzichte van vorige week, en een subtiele achtergrondkleur heeft die groen is bij stijging en rood bij daling. De component heet StatCard en accepteert props: label, value, previousValue.

Dit is de kern van vibe coding: je beschrijft het eindresultaat, niet de implementatie.

Stap 2: Laat Claude Code de component genereren

Open Claude Code in je projectmap en geef deze prompt:

Maak een herbruikbare React component in TypeScript in het bestand components/StatCard.tsx.

De component heet StatCard en toont:
- Een groot getal (prop: value, type number)
- Een label eronder (prop: label, type string)
- Een pijl-icoon omhoog of omlaag op basis van vergelijking met vorige waarde (prop: previousValue, type number)
- De achtergrond is lichtgroen (#f0fdf4) als value > previousValue, lichtoranje (#fff7ed) als value < previousValue, en lichtgrijs (#f9fafb) als ze gelijk zijn
- Gebruik Tailwind CSS voor styling
- Voeg onderaan het bestand een kleine gebruiksvoorbeeld toe als commentaar

Gebruik geen externe libraries buiten React en Tailwind.

Stap 3: Voeg een lege state toe

Elke goede widget heeft een lege state: wat zie je als er nog geen data is? Vraag Claude Code dat direct erbij te maken:

Voeg aan de StatCard component een optionele prop toe: isLoading (boolean, default false).
Als isLoading true is, toon dan een skeleton-animatie in plaats van de waarde en het label.
Gebruik alleen Tailwind animate-pulse voor de skeleton, geen extra dependencies.

Stap 4: Maak het herbruikbaar voor je hele dashboard

Eén widget is mooi, maar je wilt er meerdere naast elkaar. Laat Claude Code een wrapper maken:

Maak een bestand components/StatCardGrid.tsx.
Dit is een wrapper component die StatCard-componenten in een responsive grid plaatst:
- Op mobile: 1 kolom
- Op tablet: 2 kolommen
- Op desktop: 4 kolommen
De component accepteert een children prop en gebruikt Tailwind grid utilities.
Voeg ook een voorbeeldgebruik toe in een commentaar onderaan, met vier StatCards met nep-data.

Stap 5: Koppel echte data

Als je Supabase gebruikt voor je backend, vraag dan meteen de koppeling:

// Geef Claude Code ook deze context mee:
// Ik heb een Supabase tabel 'subscriptions' met kolommen: id, created_at, status (active/cancelled)
// Schrijf een custom hook useSubscriptionStats() in hooks/useSubscriptionStats.ts
// die het totaal actieve subscriptions ophaalt voor deze week en vorige week
// en die data teruggeeft als { currentWeek: number, previousWeek: number, isLoading: boolean }
// Gebruik de Supabase JS client die al geconfigureerd is in lib/supabase.ts

Daarna koppel je de hook aan je StatCard:

import { useSubscriptionStats } from '@/hooks/useSubscriptionStats'
import { StatCard } from '@/components/StatCard'

export function SubscriptionWidget() {
  const { currentWeek, previousWeek, isLoading } = useSubscriptionStats()

  return (
    <StatCard
      label="Actieve abonnementen"
      value={currentWeek}
      previousValue={previousWeek}
      isLoading={isLoading}
    />
  )
}

Wat te checken na afloop

• Rendert de StatCard zonder errors in je browser?
• Wisselt de achtergrondkleur correct als je de value en previousValue props aanpast in de code?
• Zie je de skeleton-animatie als je isLoading={true} meegeeft?
• Staan er vier widgets netjes naast elkaar op desktop via de StatCardGrid?
• Als je de Supabase-hook hebt gemaakt: returned hij data in de browser console zonder errors?

Als dit allemaal werkt, heb je in één avond een volledig herbruikbaar widget-systeem gebouwd. Precies wat Google gisteren aankondigde als de toekomst van software bouwen, maar dan voor jouw eigen SaaS.