/variate: Open-Source Design Skill for Generating UI Variations

X postHassanAnnouncement

Hassan has announced /variate, an open-source design skill that generates multiple UI design variations for rapid iteration within Claude Code, Codex, and OpenCode.

Key points

  1. /variate creates multiple design variations to facilitate fast iteration on user interfaces.
  2. The tool is fully open source and installed using "npx skills add nutlope/variate".
  3. It supports agentic development tools including Claude Code, Codex, and OpenCode.

Why it matters

Iterating on interfaces one prompt at a time can be tedious in AI coding tools. Generating several design variations simultaneously streamlines visual comparison and UI refinement.

Analysis

Hassan demonstrates the skill using an example of iterating on a navigation bar. The release reflects the broader pattern of extending CLI-based coding agents via reusable skills designed for specific workflows like frontend exploration.

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

1.1k likes28 replies1.5k bookmarks63.4k views

View on X
More posts in the 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?
Selected replies (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

Mentioned links

Links and tools from this entry

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:Nutlope/variate

    Variate: CLI and Agent Skill for UI Design Iteration

    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.

    188starsJavaScript

    AI & LLMs· Tool

  • Link:cuellarfr

    Design Skills: Curated UI and UX Skills for AI Coding Agents

    cuellarfr/design-skills provides ten structured skill packages for developer agents including Claude Code, Cursor, Codex, and OpenCode. The library covers areas ranging from UX research and accessibility to design systems and UX writing.

    AI & LLMs· Resource

  • X post:Adham Dannaway

    Design Skills for AI Agents: Equipping Coding Agents with UX and UI Knowledge

    Adham Dannaway highlights 'Design Skills for AI Agents', an open collection developed by Carlos Cuéllar. The repository provides structured design heuristics, WCAG 2.2 accessibility rules, and design system frameworks for tools such as Claude Code, Cursor, and Codex.

    100bookmarks5.2kviews

    AI & LLMs· Resource

  • 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

  • X post:0xMarioNawfal

    Open-source repositories to upgrade UI design in AI coding agents

    An X post highlights open-source repositories designed to equip AI coding tools like Claude Code, Cursor, and Codex with design systems, MCP integrations, and anti-template guardrails.

    6.5kbookmarks264.2kviews

    AI & LLMs· Resource

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.