/variate: Open-Source-Design-Skill für UI-Varianten in Coding-Agenten

X-PostHassan20. August 2026Ankündigung

Hassan hat /variate vorgestellt, einen Open-Source-Skill zur automatischen Generierung mehrerer UI-Designvarianten in Coding-Agenten wie Claude Code, Codex und OpenCode.

Das Wichtigste

/variate generiert mehrere Designvarianten für Benutzeroberflächen, um schnellere Design-Iterationen zu ermöglichen.
Die Erweiterung ist vollständig Open Source und wird über den Befehl „npx skills add nutlope/variate“ installiert.
Das Tool unterstützt Entwicklungs- und Agentenumgebungen wie Claude Code, Codex und OpenCode.

Warum das relevant ist

Bei der agentenbasierten Frontend-Entwicklung ist die schrittweise Einzelabfrage oft zäh. Das simultane Erzeugen mehrerer UI-Alternativen beschleunigt den visuellen Vergleich und die Auswahl passender Komponenten.

Einordnung

Hassan demonstriert den Nutzen anhand der Iteration über eine Navigationsleiste. Der Ansatz zeigt den Trend, Coding-Agenten über standardisierte Skills-Schnittstellen um domänenspezifische Arbeitsabläufe wie UI-Exploration zu erweitern.

Original-Post

Hassan

@nutlope · 20. August 2026

Announcing /variate. An open source design skill to iterate on UIs by generating multiple design variations. Works in Claude Code, Codex, and OpenCode. npx skills add nutlope/variate t.co/Qx0SeYKHzm

1070 Likes28 Antworten1466 Lesezeichen63.385 Aufrufe

Auf X ansehen

Weitere Posts im Thread (5)

Here's an example of what iterating on a nav bar looks like. variate is also fully open source, check it out here: t.co/0fDYlNkzXd t.co/54mIqldnTL
@FlorinIluta exactly!
@rareniches it works in claude code but also codex and opencode! I honestly don't remember which of those I used for that one
@0sprnova Thanks!
@stets_v I've been meaning to check it out! do you like it?

Ausgewählte Antworten (5)

@stets_v @nutlope I used t.co/0XZbSScG3S, will try yours too
@FlorinIluta @nutlope I used /design recently and the output was actually good. The slow part was iterating one direction at a time. Four real versions you can flip through is a much better loop.
@rareniches @nutlope great ,did you use claude code for the 2,3
@ZedLass0 @nutlope The toolbar is such a smart idea.
@farhantawfeeq56 @nutlope i do this often but with a keyword in the agents.md file in my pi harness. i said this and this and gave it a keyword and it gives variants for particular UI components or in whole when i use that keyword

Erwähnte Links

Hassan on X: Announcement of /variatex.com/nutlope/status/2090476277190836710

Links und Tools aus diesem Beitrag

Zusammenfassung von KI erstellt (Gemini 3.8 Flash, 27. September 2026). Sie kann Fehler enthalten – maßgeblich ist die Originalquelle.

Inhaltlich ähnlich, ermittelt über die KI-Suche.

Repository:Nutlope/variate5. Sep. 2026
Variate: CLI- und Agent-Skill für UI-Design-Iterationen
Variate ist ein schlankes Open-Source-Tool, das als Skill für KI-Coding-Assistenten wie Claude Code, Codex CLI und opencode dient. Es lässt den Agenten vier funktionierende Code-Varianten einer einzelnen Komponentendatei erstellen. Entwickler können diese Varianten direkt im lokalen Browser per Pfeiltasten durchschalten und die gewünschte Version fest übernehmen.
188SterneJavaScript
KI & AI· Tool
Link:cuellarfr29. Sep. 2026
Design Skills: Kuratierte UI- und UX-Skills für KI-Agenten
cuellarfr/design-skills stellt zehn strukturierte Wissenspakete für Entwicklungsagenten wie Claude Code, Cursor, Codex und OpenCode bereit. Die Sammlung deckt Disziplinen von UX Research über Barrierefreiheit bis hin zu Design Systems und UX Writing ab.
KI & AI· Sammlung
X-Post:bluedev18. Sep. 2026
TasteCode: Open-Source-Entwicklungsumgebung für KI-gestütztes Frontend-Design
bluedev hat TasteCode vorgestellt, eine Open-Source-Entwicklungsumgebung mit Fokus auf Design und UX. Das Tool baut auf dem früheren Projekt TasteSkill auf und nutzt einen integrierten Design Agent, um produktionsreifes Webdesign zu generieren.
673Lesezeichen39.577Aufrufe
KI & AI· Ankündigung
X-Post:Adham Dannaway28. Sep. 2026
Design Skills for AI Agents: UX- und UI-Wissen für KI-Coding-Tools
Adham Dannaway empfiehlt eine von Carlos Cuéllar erstellte Sammlung strukturierter Design-Skills für Coding-Agents wie Claude Code, Cursor und Codex. Das Repository liefert fundierte Heuristiken, Accessibility-Regeln nach WCAG 2.2 und Designsystem-Standards direkt in den Arbeitskontext der KI.
100Lesezeichen5174Aufrufe
KI & AI· Sammlung
X-Post:Elaya24. Okt. 2026
ai-design-skills: Open-Source-Designregeln für Claude Code und Cursor
Designer Elaya hat eine Open-Source-Sammlung von Design-Skills für KI-Tools wie Claude Code, Cursor und Windsurf veröffentlicht. Die Markdown-Regeln leiten Sprachmodelle bei der Erstellung von Landing Pages und Animationen an.
18.584Lesezeichen742.255Aufrufe
KI & AI· Sammlung
Repository:Nutlope/hallmark11. Sep. 2026
Hallmark: Design-Skill gegen generische KI-Benutzeroberflächen
Hallmark ist ein von Together AI entwickeltes Open-Source-Skill für Claude Code, Cursor und Codex. Das Werkzeug verhindert typische, austauschbare KI-Designs («AI-Slop») durch Makrostrukturen, 21 Themes, 57 Testregeln und automatisierte Selbstkritik vor der Ausgabe.
28.417SterneCSS
KI & AI· Tool