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

X-PostHassanAnkü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

  1. /variate generiert mehrere Designvarianten für Benutzeroberflächen, um schnellere Design-Iterationen zu ermöglichen.
  2. Die Erweiterung ist vollständig Open Source und wird über den Befehl „npx skills add nutlope/variate“ installiert.
  3. 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)
  1. 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
  2. @FlorinIluta exactly!
  3. @rareniches it works in claude code but also codex and opencode! I honestly don't remember which of those I used for that one
  4. @0sprnova Thanks!
  5. @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

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.

Ähnliche Einträge

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

  • Repository:Nutlope/variate

    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

  • X-Post:bluedev

    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

  • Repository:Nutlope/hallmark

    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

  • X-Post:angel

    Anthropic Skill „Frontend Design“ gegen generische KI-Webdesigns

    Laut einem Beitrag von angel (@angeldot_) bietet Anthropic mit „Frontend Design“ einen Open-Source-Skill, der generischen Webdesigns durch LLMs entgegenwirken soll. Das Tool zwingt das Modell dazu, vor der Codegenerierung ein festes visuelles Konzept festzulegen.

    5776Lesezeichen413.040Aufrufe

    KI & AI· Tool

  • Repository:vercel-labs/skills

    vercel-labs/skills: Universelles CLI-Tool für AI-Agenten-Skills

    skills ist ein quelloffenes CLI-Werkzeug von Vercel Labs, mit dem modulare Fähigkeiten (Skills) für Coding-Agenten wie Claude Code, Cursor, OpenCode und Codex geladen, installiert und ausgeführt werden können.

    31.822SterneTypeScript

    KI & AI· Tool

  • Repository:elayadesign/ai-design-skills

    ai-design-skills: Markdown-Regeln für KI-gestütztes Webdesign

    Das GitHub-Repository elayadesign/ai-design-skills bündelt strukturierte Design-Anleitungen und Regelwerke im Markdown-Format für KI-gestützte Coding-Tools. Entwickler können diese Skills in Assistenten wie Claude Code, Cursor oder Windsurf einbinden, um konsistentere Landingpages und UI-Systeme zu generieren.

    1960Sterne

    KI & AI· Sammlung

Zurück zur Wissensbasis

Lassen Sie uns über Ihr Projekt sprechen

Kontakt aufnehmen

Standorte

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Wien
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Dieser Inhalt wurde teilweise mithilfe von KI erstellt.