Frontend Design: bouw UI's die er niet als AI uit zien
Wat deze skill doet

AI-gegenereerde interfaces hebben een herkenbare look. Zachte paarse gradiënten, zwevende glows, dezelfde Tailwind-gebaseerde kaart op elke pagina. Zoals Ethan Mollick het omschreef: "de tirannie van paarse gradiënten en Arial." Anthropic's frontend-design plugin probeert daar een einde aan te maken.
De plugin, gemaakt door Boris Cherny en gelanceerd rond november 2025, dwingt Claude om éérst een stijl-richting te kiezen voordat er ook maar één regel code wordt geschreven. Welke typografie past bij deze doelgroep? Welk kleurenpalet past bij de boodschap? Pas na die keuze schrijft Claude de code. Hij staat in de officiële directory anthropics/claude-plugins-official en werkt met React, Vue, Svelte, of plain HTML.
Hoe het werkt
De skill activeert automatisch zodra Claude aan frontend-werk begint. Het effect is klein maar merkbaar: in plaats van direct "ik maak een landingspagina met hero, features-grid en CTA" krijg je eerst een paragraaf waarin Claude kiest voor bijvoorbeeld "editorial serif typography, warm kraftpapier-achtige achtergrond, één accent-kleur, geen shadows." Daarna pas komt de code.
Wat zeggen gebruikers?
Ethan Mollick (X, november 2025): "The new Claude Code front-end design Skill is a big improvement, ends the purple gradient and Arial font tyranny and actually considers audience."
Paddo (paddo.dev, 'Breaking the AI Slop Aesthetic'): "LLMs gravitate toward the median of every Tailwind tutorial scraped from GitHub between 2019 and 2024. And that median is purple." Na activering: "It looked like something, not like everything."
Justin Wetch (justinwetch.com, kritisch): "Telling it not to 'converge across generations' is like telling someone not to repeat what they said in their sleep. They have no access to that information." Hij noemt de interne skill-instructies "murky and sometimes contradictory."
HN user k2so (op thread 46699260): "Even I received the same warm-cream tones for different projects."
Tips die vaak terugkomen
- Gebruik plan-mode (Shift+Tab) zodat je de gekozen stijl-richting kunt beoordelen voordat code wordt geschreven
- Noem een extreem in je prompt: "brutalistisch", "editorial", "retro-futuristisch". "Maak het mooi" levert nog steeds standaardwerk
- Combineer met een design-system skill (UI-stack, Interface-Design of Shadcnblocks-Skill) voor consistentie over meerdere pagina's — frontend-design is afgesteld op één pagina van karakter, niet op multi-page coherence
- Bel expliciet dat hij geen Inter of Space Grotesk moet gebruiken, anders lekken die alsnog door
Valkuilen en kritiek
- Warme cream-tonen komen terug op verschillende projecten. De skill heeft geen geheugen tussen sessies, dus zegt "niet converge across generations" zonder dat Claude kan zien wat vorige generaties deden
- Bias naar bold en maximalistisch. Voor corporate intranets of admin-tools waar je juist niet wilt opvallen is het overkill
- Breekt op iteratie. Vraag je om één component aan te passen, dan regenereert Claude vaak de hele lay-out
- Instructies zijn soms tegenstrijdig ("kies een extreem" vs "intentionaliteit, geen intensiteit"), wat verklaart waarom de uitkomst niet altijd consistent is
Populariteit
277.000+ installs sinds de lancering in november 2025. De discussie is opvallend beperkt: drie HN-submissies gaven alle drie minder dan 2 punten. Geen megathreads op Reddit. De beste inhoudelijke reviews komen van individuele blog-auteurs (Paddo, Justin Wetch, Nathan Onn) en Mollick op X. Dat patroon past bij een tool die werkt zonder dat mensen er lang over hoeven te praten: installeer, activeer, klaar.
Wanneer je hem inzet
- Landingspagina's die niet op elke andere SaaS-site lijken
- Vibe-gecodeerde apps die je nu écht aan een specifieke doelgroep wilt koppelen (Mollick gebruikt het zo)
- Dashboards met eigen stijl in plaats van de standaard metric-kaartjes
- Marketing-pagina's met een duidelijk thema (retro, editorial, brutalist)
- Redesigns waar je juist wég wilt van het "door AI gemaakt"-gevoel
Prompt template
# Installeren /plugin install frontend-design@claude-plugins-official # Gebruiken, skill activeert automatisch bij frontend-werk "Maak een dashboard voor een muziek-streaming app" "Bouw een landing page voor een AI-security startup" "Ontwerp een settings panel met dark mode"
Voorbeeld
Input
Bouw een landing page voor een nieuw tekstediting-product gericht op wetenschappelijke auteurs. Moet premium voelen, niet generiek-SaaS.
Output
Claude begint niet direct met code. Eerst komt een duidelijke aesthetic direction:
"Voor wetenschappelijke auteurs wil ik een rustige, typografisch-gestuurde look. Serif-headers (Source Serif 4), met een zachte warme achtergrond (#fafaf7). Eén accent-kleur: ink-blauw (#15304a). Alle interacties onderstreept i.p.v. gevulde knoppen. Minimale iconografie."
Pas daarna volgt productie-klare code met een opgebouwde spacing-ramp, eigen lettergrootte-systeem en overwogen hover-states. Geen gegenereerde gradient-hero, geen zwevende blobs, geen placeholder-emoji's.