[{"data":1,"prerenderedAt":492},["ShallowReactive",2],{"navigation":3,"\u002Fnotes\u002F2026-11-12-headless-ui-agents":38,"\u002Fnotes\u002F2026-11-12-headless-ui-agents-surround":483},[4],{"title":5,"path":6,"stem":7,"children":8,"page":37},"Labs","\u002Flabs","labs",[9,13,17,21,25,29,33],{"title":10,"path":11,"stem":12},"Ein schlankes AI-Review-Setup für kleine Repos","\u002Flabs\u002F2026-10-30-ai-review-setup","labs\u002F2026-10-30-ai-review-setup",{"title":14,"path":15,"stem":16},"Letta Code lokal: Wenn der Agent sein Gedächtnis selbst pflegt","\u002Flabs\u002F2026-10-30-letta-code-memory","labs\u002F2026-10-30-letta-code-memory",{"title":18,"path":19,"stem":20},"Der Harness-Prozess: Warum 2026 das Jahr der kontrollierten KI-Autonomie ist","\u002Flabs\u002Fagentic-harness-2026","labs\u002Fagentic-harness-2026",{"title":22,"path":23,"stem":24},"AnythingLLM: Eigene Wissensbasis, eigenes Modell, null Cloud-Zwang","\u002Flabs\u002Fanythingllm-local-rag","labs\u002Fanythingllm-local-rag",{"title":26,"path":27,"stem":28},"Claude Code als Agentic Development Partner","\u002Flabs\u002Fclaude-agent","labs\u002Fclaude-agent",{"title":30,"path":31,"stem":32},"Hermes-Agent als persönlicher CTO","\u002Flabs\u002Fhermes-agent-cto","labs\u002Fhermes-agent-cto",{"title":34,"path":35,"stem":36},"Kimi K2.5 vs Minimax M2.7 beim Refactoring","\u002Flabs\u002Fkimi-vs-minimax-refactoring","labs\u002Fkimi-vs-minimax-refactoring",false,{"id":39,"title":40,"author":41,"body":43,"date":465,"description":466,"extension":467,"image":468,"meta":469,"minRead":468,"navigation":473,"path":474,"seo":475,"stem":476,"tags":477,"__hash__":482},"note\u002Fnotes\u002F2026-11-12-headless-ui-agents.md","Headless UI im Agenten-Zeitalter: Weniger Tokens sind ein Symptom, nicht das Auswahlkriterium",{"name":42},"Bernd D.H. Martin",{"type":44,"value":45,"toc":456},"minimark",[46,56,59,64,67,107,110,113,117,120,306,309,313,328,331,334,338,359,362,366],[47,48,49,50,55],"p",{},"Beim Web-Rewrite von x.com hat X die interne Bibliothek XDS auf Base UI und Tailwind gebaut. Das habe ich in der ",[51,52,54],"a",{"href":53},"\u002Fnotes\u002F2026-11-12-x-rewrite-agents","Note zum Rewrite"," festgehalten. Base UI hat mich dabei interessiert, und es hat eine ältere Frage wieder aufgeworfen.",[47,57,58],{},"In Firmenprojekten habe ich oft selbst UI-Komponenten gebaut, meist auf Material UI von Google. Es gab selten etwas Passendes von der Stange, und jede Firma wollte wiedererkennbar aussehen. Damals haben Vorlieben, Wartbarkeit und frei wählbares Styling die Wahl bestimmt. Meine These heute: Künftig wird entscheidender, welche Lösung weniger Tokens für Coding-Agenten braucht. Ergänzend sehe ich die Agent-Tauglichkeit als Kern – je einfacher, desto besser – und vermute, dass bessere Tauglichkeit mit weniger Tokens einhergeht. Das ist eine Hypothese, keine Messung.",[60,61,63],"h2",{"id":62},"weniger-tokens-sind-ein-symptom","Weniger Tokens sind ein Symptom",[47,65,66],{},"Token-Effizienz ist morgen ein relevantes Kriterium, aber nicht isoliert entscheidender als Wartbarkeit, Barrierefreiheit und eigenes Styling. Tokens sind oft die Folge davon, wie gut ein Agent mit einer Bibliothek zurechtkommt:",[68,69,70,78,84,95,101],"ul",{},[71,72,73,77],"li",{},[74,75,76],"strong",{},"Trainingsdaten:"," Bekannte Bibliotheken wie shadcn, Radix oder Tailwind kennt ein Modell typischerweise besser. Bei neuen oder seltenen Libs liest es nach oder halluziniert.",[71,79,80,83],{},[74,81,82],{},"Code im eigenen Repo gegen eine npm-Blackbox:"," Bei Copy-Paste-Ansätzen wie shadcn oder Spartan sieht der Agent den Quelltext. Das kann helfen, kostet aber Kontext.",[71,85,86,89,90,94],{},[74,87,88],{},"Maschinenlesbare Docs:"," Eine ",[91,92,93],"code",{},"llms.txt"," oder ein MCP-Server kann dem Agenten den Weg zeigen, ohne dass er die Codebasis durchsuchen muss.",[71,96,97,100],{},[74,98,99],{},"Explizite, lokal verständliche APIs,"," die sich aus dem Einsatzort erschließen.",[71,102,103,106],{},[74,104,105],{},"Tailwind"," im Markup ist tokenlastig, erspart aber den Sprung in CSS-Dateien. Ob das unterm Strich weniger Tokens bedeutet, habe ich nicht gemessen.",[47,108,109],{},"Wartbarkeit und Barrierefreiheit bleiben wichtig, weil Agenten Fehler dort schlecht merken.",[47,111,112],{},"Der naheliegende Gegenfall zu meiner Folgerung „je tauglicher, desto weniger Tokens“ sind gerade die Copy-Paste-Bibliotheken. Der Agent kann den Code lesen und kommt oft besser zurecht, braucht dafür aber mehr Kontext. Ob die Tokens pro erfolgreicher Komponente dann sinken oder steigen, ist offen.",[60,114,116],{"id":115},"die-landschaft-kompakt","Die Landschaft, kompakt",[47,118,119],{},"Ein unabhängiger Vergleich – dieselbe Komponente, mehrere UI-Bibliotheken, Tokens und Erfolg – liegt nicht vor. Die Übersicht ist deshalb eine Einordnung, kein Ranking. Sternzahlen und genaue Versionsnummern lasse ich weg, die ändern sich zu schnell.",[121,122,123,142],"table",{},[124,125,126],"thead",{},[127,128,129,133,136,139],"tr",{},[130,131,132],"th",{},"Bibliothek",[130,134,135],{},"Ökosystem",[130,137,138],{},"Ansatz",[130,140,141],{},"Für Agenten, soweit geprüft",[143,144,145,160,173,186,200,212,229,241,253,266,282],"tbody",{},[127,146,147,151,154,157],{},[148,149,150],"td",{},"Base UI",[148,152,153],{},"React",[148,155,156],{},"Headless und unstyled, von den Machern von Radix, Material UI und Floating UI",[148,158,159],{},"Grundlage für neue shadcn-Projekte",[127,161,162,165,167,170],{},[148,163,164],{},"Radix Primitives",[148,166,153],{},[148,168,169],{},"Headless, weiter gepflegt",[148,171,172],{},"Bei shadcn nicht abgekündigt und weiter unterstützt",[127,174,175,178,180,183],{},[148,176,177],{},"shadcn\u002Fui",[148,179,153],{},[148,181,182],{},"Die CLI kopiert den Code ins Repo. Seit Juli 2026 ist Base UI der Default, Radix bleibt eine Option",[148,184,185],{},"Eigene Migrations-Skill; shadcn nennt rund 10.000 Tokens pro Komponente und etwa 25 Minuten für einen vollen Lauf",[127,187,188,191,194,197],{},[148,189,190],{},"Angular CDK",[148,192,193],{},"Angular",[148,195,196],{},"Headless-Unterbau, etwa für Overlay, A11y oder Drag-and-Drop",[148,198,199],{},"–",[127,201,202,205,207,210],{},[148,203,204],{},"Angular Aria",[148,206,193],{},[148,208,209],{},"Headless-Direktiven für WAI-ARIA-Muster. Laut Ankündigung von Angular v22 (3.6.2026) production-ready; die Doku listet zwölf Muster",[148,211,199],{},[127,213,214,217,219,222],{},[148,215,216],{},"Spartan UI",[148,218,193],{},[148,220,221],{},"Überträgt das shadcn-Prinzip auf Angular",[148,223,224,225,228],{},"Offizielles MCP ",[91,226,227],{},"@spartan-ng\u002Fmcp"," mit 17 Werkzeugen",[127,230,231,234,236,239],{},[148,232,233],{},"ng-primitives",[148,235,193],{},[148,237,238],{},"Weitere headless Primitives",[148,240,199],{},[127,242,243,246,248,251],{},[148,244,245],{},"PrimeNG",[148,247,193],{},[148,249,250],{},"v22 ist die erste Veröffentlichung unter PrimeUI und wechselt auf ein duales Community-\u002FCommercial-Modell, also nicht mehr einfach MIT",[148,252,199],{},[127,254,255,258,261,264],{},[148,256,257],{},"Reka UI",[148,259,260],{},"Vue",[148,262,263],{},"Headless-Schicht; Nuxt UI baut laut eigener Doku darauf auf",[148,265,199],{},[127,267,268,271,273,276],{},[148,269,270],{},"shadcn-vue",[148,272,260],{},[148,274,275],{},"Copy-Paste-Ansatz im Vue-Umfeld",[148,277,278,279],{},"Offizielles MCP über ",[91,280,281],{},"npx shadcn-vue@latest mcp",[127,283,284,287,290,293],{},[148,285,286],{},"Nuxt UI",[148,288,289],{},"Vue \u002F Nuxt",[148,291,292],{},"Gestylte Bibliothek auf Reka UI und Tailwind, MIT",[148,294,295,296,299,300,302,303],{},"Offizielles MCP unter ",[91,297,298],{},"https:\u002F\u002Fui.nuxt.com\u002Fmcp"," sowie ",[91,301,93],{}," und ",[91,304,305],{},"llms-full.txt",[47,307,308],{},"Bei Angular Aria habe ich die zwölf Muster in der offiziellen Doku selbst gesehen. Die Live-Seite der v22-Ankündigung hat beim Abruf mit 403 geantwortet; den production-ready-Status übernehme ich aus dem Ankündigungstext vom 3.6.2026. Den von PrimeUI genannten MCP-Server habe ich nicht einzeln geprüft, deshalb steht er nicht in der Tabelle.",[60,310,312],{"id":311},"was-bisher-gemessen-wurde","Was bisher gemessen wurde",[47,314,315,316,322,323,327],{},"Nolan Lawson hat in „",[51,317,321],{"href":318,"rel":319},"https:\u002F\u002Fnolanlawson.com\u002F2026\u002F10\u002F28\u002Fthe-ai-cost-of-javascript-frameworks\u002F",[320],"nofollow","The AI cost of JavaScript frameworks","“ (28.10.2026) Tokens und Kosten über zwölf JS-Frameworks gemessen. Tailwind und Komponentenbibliotheken hat er ausdrücklich ausgenommen. Die Ausreißer erklärt er mit fehlenden Trainingsdaten und mit der Code-Menge, nicht mit einer UI-Lib. Außerdem nutzten seine Agenten vorhandene MCPs und Skills nur unregelmäßig; das Nuxt-MCP etwa kam in keinem Lauf vor. Die Einordnung seiner Zahlen steht in der ",[51,324,326],{"href":325},"\u002Fnotes\u002F2026-11-04-angular-ki-kosten","Note zu den Angular-Kosten",".",[47,329,330],{},"Näher an der Frage nach maschinenlesbaren Docs ist die Messung von EDL (8.9.2026). Eine Query-Oberfläche gegen eine undokumentierte Codebasis senkte bei Sonnet 5 die Tokens um 31 Prozent und die Schritte um 39 Prozent (Smarty-Design-System, zehn Aufgaben). Das ist ein Lauf pro Zelle, und die Varianz ist hoch: Dieselbe Aufgabe schwankte in einer Wiederholung zwischen 2,7 und 5,9 Millionen Tokens. EDL schreibt selbst, die Prozentwerte seien als Richtung zu lesen. Bei Haiku 4.5 lag der Nutzen eher in der Korrektheit als in den Kosten. Gemessen wurde hier nicht die Wahl einer UI-Bibliothek, sondern der Unterschied zwischen einer undokumentierten Basis und einer abfragbaren Schnittstelle.",[47,332,333],{},"Was fehlt, ist genau der Vergleich, den ich bräuchte: dieselbe Komponente, mehrere Bibliotheken, Tokens und Erfolg.",[60,335,337],{"id":336},"was-das-für-bmlinede-heißt","Was das für bmline.de heißt",[47,339,340,341,344,345,348,349,351,352,355,356,358],{},"bmline.de läuft auf Nuxt und nutzt bereits Nuxt UI: Das Paket ",[91,342,343],{},"@nuxt\u002Fui"," steht in der ",[91,346,347],{},"package.json",", das Modul ",[91,350,343],{}," in der ",[91,353,354],{},"nuxt.config.ts",". Dazu kommen offizielles MCP und ",[91,357,93],{},". Das ist eine gute Ausgangslage, aber keine Aussage darüber, ob ein Agent damit weniger Tokens braucht oder zuverlässiger landet als mit Reka UI oder shadcn-vue.",[47,360,361],{},"Eine mögliche Vertiefung wäre ein kleines Lab: dieselbe interaktive Komponente, etwa ein Dialog oder eine Combobox, mit demselben Agent-Setup einmal auf Reka UI, einmal auf shadcn-vue und einmal auf Nuxt UI bauen lassen, mit denselben harten Checks, und dann die Tokens pro erfolgreicher Komponente vergleichen. Das wäre auch der Ort, die Copy-Paste-Gegenhypothese zu prüfen. Geplant ist das, durchgeführt nicht. Ergebnisse gibt es deshalb keine.",[60,363,365],{"id":364},"quellen","Quellen",[68,367,368,377,384,392,406,414,422,429,440,447],{},[71,369,370,371,376],{},"Yagiz Nizipli: ",[51,372,375],{"href":373,"rel":374},"https:\u002F\u002Fblog.x.com\u002Fen\u002Fengineering\u002Frebuilding-the-global-town-square-from-scratch",[320],"Rebuilding the global town square from scratch",", 4.11.2026 (Anlass: XDS auf Base UI und Tailwind)",[71,378,379],{},[51,380,383],{"href":381,"rel":382},"https:\u002F\u002Fbase-ui.com\u002Freact\u002Foverview\u002Fabout",[320],"About Base UI",[71,385,386,387],{},"shadcn\u002Fui: ",[51,388,391],{"href":389,"rel":390},"https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Fchangelog\u002F2026-07-base-ui-default",[320],"July 2026 – Base UI as the Default",[71,393,394,395,302,400,405],{},"Angular: ",[51,396,399],{"href":397,"rel":398},"https:\u002F\u002Fangular.dev\u002Fguide\u002Faria\u002Foverview",[320],"Angular Aria – Overview",[51,401,404],{"href":402,"rel":403},"https:\u002F\u002Fblog.angular.dev\u002Fannouncing-angular-v22-c52bb83a4664",[320],"Announcing Angular v22",", 3.6.2026",[71,407,408,409],{},"Spartan: ",[51,410,413],{"href":411,"rel":412},"https:\u002F\u002Fwww.spartan.ng\u002Fdocumentation\u002Fmcp",[320],"MCP Server",[71,415,416,417],{},"PrimeNG: ",[51,418,421],{"href":419,"rel":420},"https:\u002F\u002Fprimeng.dev\u002Fmigration\u002Fv22",[320],"Migration to v22",[71,423,424],{},[51,425,428],{"href":426,"rel":427},"https:\u002F\u002Fshadcn-vue.com\u002Fdocs\u002Fmcp",[320],"shadcn-vue MCP Server",[71,430,431,432,302,436],{},"Nuxt UI: ",[51,433,413],{"href":434,"rel":435},"https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fgetting-started\u002Fai\u002Fmcp",[320],[51,437,93],{"href":438,"rel":439},"https:\u002F\u002Fui.nuxt.com\u002Fllms.txt",[320],[71,441,442,443,446],{},"Nolan Lawson: ",[51,444,321],{"href":318,"rel":445},[320],", 28.10.2026",[71,448,449,450,455],{},"Alessandro Longo \u002F EDL: ",[51,451,454],{"href":452,"rel":453},"https:\u002F\u002Fwww.edl.dk\u002Farticles\u002Fdesign-systems-and-ai",[320],"Benchmark: Do AI coding agents work better with a machine-readable design system?",", 8.9.2026",{"title":457,"searchDepth":458,"depth":458,"links":459},"",2,[460,461,462,463,464],{"id":62,"depth":458,"text":63},{"id":115,"depth":458,"text":116},{"id":311,"depth":458,"text":312},{"id":336,"depth":458,"text":337},{"id":364,"depth":458,"text":365},"2026-11-12","Warum ich den Tokenverbrauch bei UI-Bibliotheken für ein Symptom der Agent-Tauglichkeit halte und nicht für das eigentliche Auswahlkriterium, und was sich in der Landschaft aus React, Angular und Vue gerade zeigt.","md",null,{"type":470,"status":471,"source_id":472},"note","entwurf","res-027",true,"\u002Fnotes\u002F2026-11-12-headless-ui-agents",{"title":40,"description":466},"notes\u002F2026-11-12-headless-ui-agents",[478,479,480,481,286],"Headless UI","Agentic Coding","Tokenkosten","Design System","RY8ftBfJg0g9odbFK-owUj_7ha9c6b7oAsQzClQKhLE",[484,488],{"title":485,"path":325,"stem":486,"description":487,"children":-1},"Angular in Deutschland: Warum der Enterprise-Standard im KI-Zeitalter teurer wird","notes\u002F2026-11-04-angular-ki-kosten","Warum Angular in Deutschland so stark wurde, was Signals verändert haben und was Nolan Lawsons Messung über die Kosten von Coding-Agenten pro Framework zeigt.",{"title":489,"path":53,"stem":490,"description":491,"children":-1},"Was X beim Web-Rewrite für Coding-Agenten festgeschrieben hat","notes\u002F2026-11-12-x-rewrite-agents","Wie ein kleines Team die Web-App von x.com mit Coding-Agenten neu gebaut hat, und welche drei Vertrauensschichten dabei den Ausschlag gegeben haben: AGENTS.md, Skills und Lint.",1794489352295]