MonkeyUI-dev/vibe-to-ui

vibe-to-ui

让 AI 生成的 UI 真正看起来像是经过设计的。
将千篇一律的 AI 生成页面转化为有意图的设计方向——布局、字体、动效、图像，以及将它们统一在一起的规则。

安装并试用 ·
示例 ·
工作原理 ·
高级工作流 ·
常见问题

看得见的差异，而非更漂亮的提示词

同一个 AI 生成的落地页，可以显得千篇一律，也可以显得刻意为之。vibe-to-ui 帮助你的智能体在接触生产代码之前，将参考素材和品味转化为连贯的 UI 方向。

带来一张截图、一个 URL、一张图片、一段音乐片段，或一句意图描述。获得一个你可以看到、比较和选择的设计方向——然后在合适的时候应用它。

安装并试用

npx skills add MonkeyUI-dev/vibe-to-ui#v0.6.0

然后给你的智能体一条提示词：

This landing page looks like generic AI UI. Use vibe-to-ui's bundled visual-reference starter set,
first identify its page type, then give me 3 visual directions that feel designed. For each
direction, generate a preview and use the available image-generation tool to create a small set of
original visual reference assets (hero, illustration, or texture as appropriate) that fit its
design system. Do not change my project until I choose one.

适用于 Claude Code、Cursor、Codex、Gemini CLI、Kimi Code，以及任何支持 npx 的智能体。

手动安装

Claude Code → ~/.claude/skills/

mkdir -p ~/.claude/skills
git clone https://github.com/MonkeyUI-dev/vibe-to-ui.git ~/.claude/skills/vibe-to-ui

其他智能体 → ~/.agents/skills/

mkdir -p ~/.agents/skills
git clone https://github.com/MonkeyUI-dev/vibe-to-ui.git ~/.agents/skills/vibe-to-ui

示例

Lumen Audio

使用： 设计探索 · 字体探索 · 动效系统

Noctis Candles

使用： 页面类型识别 · 设计探索 · 动效系统

Aurora

使用： 空间氛围 · 字体探索 · 动效系统

Aperture

使用： 页面类型识别 · 空间氛围 · 字体探索

工作原理

参考或意图 → 3 个方向 → 预览 → 你来选择 → 应用

1. 带来一个信号 —— 一个 URL、截图、图片、音乐片段或一句话。
2. 查看三个方向 —— 每个方向都基于你的产品和页面类型，而非随机的主题替换。
3. 在确定前进行比较 —— 独立的概念预览和情绪板让选择变得具体。
4. 仅在准备好时应用 —— 在你明确确认某个方向之前，探索始终停留在你的项目之外。

你的智能体永远不需要猜测“让它感觉高级”是指新的配色方案、不同的布局，还是更克制的动效系统。vibe-to-ui 将这种判断转化为一个共享的、可审阅的方向。

高级工作流

恢复或分析现有 UI

使用 URL 或截图提取设计系统、动效 DNA 和可审阅的预览，然后再应用任何内容。

Analyze https://example.com and give me the design tokens and motion system.

完整方法论请参阅 设计系统、动效系统 和 空间氛围。

保留本地设计上下文

将品牌配置持久化保存在技能包之外，这样重新安装技能时永远不会重置你的视觉语言。

node bin/vibe-to-ui.js context --profile my-brand --init
node bin/vibe-to-ui.js context --profile my-brand --target web
node bin/vibe-to-ui.js context --profile my-brand --target print-brochure

配置文件位于 ~/.vibe-to-ui 下；媒介目标是开放式的。可选的 Git 同步可以通过你的私有仓库在设备之间共享配置文件和灵感。

阅读设计上下文指南 →

构建灵感库

在全局档案中收集真实的产品页面和截图，将其全滚动视觉分析与品牌规则分开保存，然后仅在你决定时才链接或应用产品级设计种子。

node bin/vibe-to-ui.js inspiration add https://example.com --product example --page home
node bin/vibe-to-ui.js inspiration link example --profile my-brand
node bin/vibe-to-ui.js inspiration apply example --project . --confirm

阅读灵感库指南 →

常见问题

我需要是设计师吗？
不需要。带来产品上下文和品味信号；vibe-to-ui 会与你一起构建视觉决策。

它会立即重写我的项目吗？
不。探索会生成独立的预览。只有在您明确要求应用已确认的方向后，您的项目才会发生变化。

我可以使用截图而不是 URL 吗？
可以。截图、URL、照片、音乐片段或书面意图都可以作为有用的起点。

它适用于 React、Vue 还是纯 CSS？
都适用。方向与令牌与框架无关；应用方式遵循您项目的约定。

它是否包含图像生成 API 或需要 API 密钥？
不包含。视觉资产默认使用您的代理宿主提供的图像工具。当 MiniMax 可用且适合该资产时，您可以明确选择使用它；其凭据保留在项目之外。请参阅 视觉资产生成。

设计那个你被告知要放下的梦想。

许可证

MIT — 请参阅 LICENSE。

由 MonkeyUI-dev 用 ❤️ 构建。