Variate Skill：让 AI 一次生成四版 UI，方向键实时切换对比

Skill超级捕获手 技术创作者 2026-08-28 11 阅读

让 AI 一次生成四版 UI，用方向键在本地实时切换对比——这就是 Variate 的核心思路。来自 Together AI 创始人 Nutlope 的这款开源设计 Skill，直击当下 AI 生成 UI”千篇一律”的痛点：与其让模型一次吐出一个方案，不如让它一次出四个真实可运行的变体，让开发者在真实开发环境中用方向键亲自挑选，选中哪个哪个就是代码。

功能与原则

Variate 的设计原则极为明确：聚焦视觉迭代，而非从零构建设计系统。它不负责画草图、不负责写规范文档，只做一件事——针对同一个文件，让 AI 写出四个不同的代码版本，开发者可以在自己的本地开发服务器上实时翻看对比。

核心约束同样清晰：不适用于”只有一个正确答案”的任务（如简单重构或单次调整），也不做全框架脚手架——它假设你已有一个运行中的项目，只想在现有基础上探索不同方向。

认可度

  • GitHub Star：153（截至 2026-08-28）
  • Twitter 热度：762+ likes，Nutlope 宣布推文引发广泛讨论
  • skilld.dev：入选 Weekly Trending Agent Skills 榜单
  • 开发者反响：被定位为设计迭代工具链中的关键一环，与 spec-driven design、Design.md 形成互补

链接

GitHub：https://github.com/nutlope/variate

原作者

Nutlope（Hassan El Mghari）—— Together AI 创始人，同时维护着 roomGPT（10.7k）、aicommits（9k）、llamacoder（6.9k）、llama-ocr（2.4k）等多个热门开源项目，是 AI 工具圈的高产开发者。

介绍

Variate 解决的是一个实际的设计工作流问题：当你想让 AI 帮你探索一个按钮、一个卡片或一整个 Hero 区段的不同设计方案时，传统的做法是你描述一次，它出一版，你再改描述再出一版——效率低，而且很难横向对比。

Variate 改变了这个范式。你发出指令后，AI 会在读取项目现有 tokens、组件和导入语句的基础上，一次生成四个真实代码版本。每一个版本都会写入独立文件，然后通过一个注入在你页面里的 vanilla JS 卡片（运行在 shadow root 中）展示出来。你用左/右方向键就可以在真实浏览器中切换翻看，选中哪个版本，保留哪个文件的代码。整个过程不需要切换工具、不需要导出、不需要截图对比。

技术实现上，Variate 完全零依赖——仅使用 Node.js 18 内置能力，不需要 package.json，不需要任何构建步骤。一个 127.0.0.1 的 sidecar 负责 serve 这个卡片页面并通过 SSE 同步状态，SKILL.md 和 AGENTS.md 作为 AI Agent 的契约文件，测试仅靠三个 shell 冒烟套件。

特点

  • 四个真实变体：不是设计建议，不是截图，是四个可运行的代码文件
  • 方向键实时切换：在你自己运行的开发服务器上翻看，无需额外工具或预览服务
  • 复用项目资产：AI 会读取现有 tokens、组件、工具类，确保变体与项目风格一致，不会凭空引入陌生依赖
  • 零依赖安装：仅 Node 18 内置能力，npx skills add nutlope/variate 即可装完
  • 多 Agent 通用：支持 Claude Code、Codex CLI、OpenCode，以及任何有 shell 访问权限的 AI 编码环境
  • 约束明确不越界：不处理单次修改、纯重构或非视觉任务，保持专注

使用方法

安装：

npx skills add nutlope/variate

典型调用（在 Claude Code / Codex CLI / OpenCode 中）：

Give me a few directions for the pricing page hero

Agent 会自动：
1. 读取目标文件及项目现有 tokens
2. 规划四个变体的设计方向（plan.json）
3. 依次写入四个文件，卡片页面随文件落地逐步扩展
4. 开发者用方向键在浏览器中切换，选定后保留该版本代码

空项目场景：同样适用，执行 add index.html --new --n 4 可在空白页面上生成四个全新方向的 HTML 变体。

使用场景与人群

  • 前端开发者：在已有项目中快速探索多个 UI 方向，无需手动编写多个版本
  • 设计师 + 开发者协作：设计师发出设计方向，开发者在真实代码中即时看到结果
  • AI 编码工具用户：使用 Claude Code、Codex 等工具，想把”生成后挑选”的工作流内置到 Agent 对话里
  • 不适合：单次微调、纯后端任务、已有明确唯一答案的重构

输入与输出案例

输入：

Give me a few directions for the pricing page hero

Agent 行为：
– 读取现有的 hero 组件、tailwind tokens 和项目结构
– 规划四个方向（例如：左图右文 / 居中大字 / 渐变背景 + 卡片叠加 / 全屏视频背景）
– 依次写入 v1.html、v2.html、v3.html、v4.html
– 在 localhost:3000 上展示可翻页的卡片

输出：
– 开发者用 ← → 方向键在四个真实运行中的页面之间切换
– 选定 v2，删除其他三个文件，代码直接进入项目

Variate 的价值在于把”AI 生成”从单次输出变成了批量化探索。如果你受够了每次让 AI 出一个方案然后再花大量时间反复修改，这款 Skill 值得加入你的工作流。

GitHub: https://github.com/nutlope/variate

评论区

0 条评论

登录后可评论。

Skill超级捕获手 11 阅读