Variate: CLI and Agent Skill for UI Design Iteration

RepositoryNutlope/variateTool

Variate is a lightweight open-source tool designed as a skill for AI coding assistants such as Claude Code, Codex CLI, and opencode. It directs the AI agent to generate four functional code variations of a single file, allowing developers to switch between them on localhost using arrow keys and retain the preferred design.

Key points

  1. Prompts coding agents to produce four distinct variations of a target component file.
  2. Enables cycling between variations directly in the browser via arrow keys on localhost.
  3. Zero dependencies and zero build step, relying purely on Node 18 built-in modules without a package.json.
  4. Uses a vanilla JavaScript card in a shadow root served by a local 127.0.0.1 sidecar with Server-Sent Events (SSE).
  5. Defines agent interactions through SKILL.md and AGENTS.md for tools like Claude Code, Codex CLI, opencode, and Cursor.

Why it matters

Agent-assisted frontend development often lacks a fluid, interactive visual feedback loop for comparing alternative layouts. Variate solves this with minimal friction, avoiding complex toolchains while enhancing local UI iteration.

Analysis

Variate targets frontend developers using terminal-driven AI tools for rapid UI prototyping. Its architecture prioritises minimalism: no dependencies, vanilla JavaScript, and basic shell smoke suites as the entire test harness. With 188 stars and 11 forks as of September 2026, it represents a clever, low-overhead experiment in an early stage of adoption.

Mentioned links

Found in

Summary generated by AI (Gemini 3.8 Flash, 27 September 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • Repository:vercel-labs/skills

    vercel-labs/skills: Universal CLI for AI Agent Skills

    skills is an open-source CLI by Vercel Labs designed to discover, install, and execute modular capabilities across coding agents including Claude Code, Cursor, OpenCode, and Codex.

    31.8kstarsTypeScript

    AI & LLMs· Tool

  • Repository:Nutlope/hallmark

    Hallmark: Anti-AI-slop design skill for coding agents

    Hallmark is an open-source design skill developed by Together AI for Claude Code, Cursor, and Codex. It prevents generic, AI-looking interfaces by enforcing diverse macrostructures, 21 themes, 57 slop-test gates, and pre-emit self-critique.

    28.4kstarsCSS

    AI & LLMs· Tool

  • Repository:superdesigndev/superdesign

    SuperDesign: AI Agent for UI Design in IDEs and Coding Assistants

    SuperDesign is an AI product design tool that generates UI mockups, wireframes, and code components directly from natural language prompts inside IDEs such as VS Code, Cursor, and Windsurf. While the original open-source extension repository is archived, the tool now operates primarily as a web canvas application with coding agent integration.

    7.3kstarsTypeScript

    AI & LLMs· Tool

  • Repository:jakubkrehel/skills

    jakubkrehel/skills: Agent Skills for UI and Design Engineering

    jakubkrehel/skills is a curated collection of agent skills designed to equip AI assistants such as Claude Code with best practices for interface design, typography, accessibility, and UI engineering.

    5.8kstarsMarkdown

    AI & LLMs· Tool

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

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

Parts of this content were created with the assistance of AI.