Variate: CLI- und Agent-Skill für UI-Design-Iterationen

RepositoryNutlope/variateTool

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.

Das Wichtigste

  1. Erzeugt vier reale Varianten einer Zieldatei über KI-Agenten.
  2. Ermöglicht das Umschalten zwischen den Designs per Tastatur direkt auf localhost.
  3. Nutzt ausschließlich Node 18 Built-ins ohne externe Abhängigkeiten, ohne Build-Schritt und ohne package.json.
  4. Setzt auf ein Vanilla-JS-Overlay via Shadow Root und einen lokalen Sidecar-Server (127.0.0.1) mit Server-Sent Events (SSE).
  5. Definiert Schnittstellen für Agenten über SKILL.md und AGENTS.md (unterstützt u. a. Claude Code, Codex CLI, opencode und Cursor).

Warum das relevant ist

Bei der agentenbasierten Frontend-Entwicklung fehlt oft ein schneller visueller Feedback-Loop, um UI-Varianten direkt vergleichen zu können. Variate löst dies ohne schwergewichtige Toolchains und integriert sich nahtlos in bestehende Workflows lokaler Entwicklungsumgebungen.

Einordnung

Das Projekt richtet sich an Frontend-Entwickler, die AI-Assistenten mit Terminalzugriff (wie Claude Code, Codex CLI oder Cursor) für UI-Design nutzen. Technisch zeichnet es sich durch extreme Leichtbauweise aus: keine Third-Party-Dependencies, reine Node.js-Boardmittel und minimale Shell-Smoke-Tests als Test-Harness. Mit Stand September 2026 befindet sich das Repository mit 188 Sternen und elf Forks in einem kompakten, aber noch relativ jungen Open-Source-Stadium.

Erwähnte Links

Gefunden in

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: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: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

  • Repository:jakubkrehel/skills

    jakubkrehel/skills: Agent-Skills für UI- und Design-Engineering

    jakubkrehel/skills ist eine kuratierte Sammlung modularer Agent-Skills, die KI-Assistenten wie Claude Code fundiertes Wissen über Interface-Design, Typografie, Barrierefreiheit und UI-Engineering bereitstellen.

    5773SterneMarkdown

    KI & AI· Tool

  • Repository:display-dev/visualize

    visualize: Markenkonforme HTML-Artefakte für KI-Coding-Agenten

    visualize ist ein Open-Source-Skill für KI-Coding-Assistenten wie Claude Code, Cursor oder Codex, um typische KI-Standard-Designs bei generierten HTML-Dokumenten durch markenkonforme Vorlagen und definierte Überarbeitungsbefehle zu ersetzen.

    67SterneHTML

    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.