🎁 福利专区全网大模型免费应用 + 新用户福利 + 注册活动入口，低成本玩转 AI
去看看
DeepSeek Harness Hub
MCP兼容手册

界面设计方向 MonkeyUI-dev/vibe-to-ui

DeepSeek Harness
MonkeyUI-dev65 天前有提交已提供中文文档扫描：含敏感能力
在 GitHub 查看 ↗

让 AI 生成的 UI 真正像设计过的。

44.6/100
综合分
28
GitHub 星标
—
npm 周下载
—/5
用户评分

数据截至 2026/9/17 · 周下载取自 npm 全网（含 CI / 镜像），非本站安装数；综合分由星标、活跃度与兼容性检查合成。

自动兼容检查有告警：未发布到 npm registry，仅可从源码安装。
安装命令 · 需先装 dsh CLI 引擎
dsh plugin --profile web add MonkeyUI-dev/vibe-to-ui
该包不可直接 npm 安装，改从 GitHub 源安装（明细见下方安装检查）

状态速览

判定依据：实装验证 · 静态安装检查 · 自动扫描 · 仓库维护状态
信任档位：已验证
是什么
dsh 原生插件 · platform
装得上吗
本站已真实安装成功
非静态推断
L4 · 真实安装等级说明 →
安全吗
本站尚未对该插件做风险分级
暂未覆盖，不等同于无风险
还在维护吗
更新放缓：最近一次提交在 65 天前
档位由哪些信号合成

本站实装验证（真实安装 L4 覆盖全站；L5 为运行时冒烟或实机截图，覆盖范围小于 L4） · 验证所用 dsh 版本 · 静态安装检查 · 风险分级 · 仓库维护状态。 下方各区块是它的证据明细。

验证判据与等级说明 →
社区实装还没有人打卡 · 装过的第一个就是你
安装兼容性检查⚠ 装前注意

未发布到 npm registry，仅可从源码安装

展开查看检查明细 ↓

以下结论由程序自动检查 npm 包、engines 声明与入口文件得出，未做人工实机验证——能装不等于用着没问题。

✗npm 包vibe-to-ui（未发布到 npm，仅可源码安装）
✓Node 引擎要求 >=18 · 基线 Node 22.19 满足
✓dsh CLI 依赖未声明 dsh 版本约束
✓入口文件main/exports/bin 已声明

验证方式：npm registry 存在性 + package.json 静态校验 · 最后检查 2026/10/30 04:32:19

安全扫描自动 · 静态分析源码
v2.7.0
🔵 扫描：含敏感能力尚无人工评估
展开查看扫描说明与证据 ↓

静态扫描发现插件具备触达本地系统的能力：执行外部命令、读写/删除本地文件、读取剪贴板或密钥类环境变量（至少其一）。这是能力清单，不是危险判定——具体能力项与证据见下方，安装前请自行判断是否需要。

可执行外部命令读写/删除本地文件
查看扫描证据（共 49 处，展示前 41 条）
  • 读取本地文件
    lib/context.js:31
    if (fs.existsSync(destPath)) return { copied: false, path: destPath };
  • 读取本地文件
    lib/context.js:33
    if (!fs.existsSync(src)) {
  • 读取本地文件
    lib/context.js:53
    if (!fs.existsSync(dir)) return [];
  • 读取本地文件
    lib/context.js:63
    if (!fs.existsSync(targetsPath)) return [];
  • 读取本地文件
    lib/context.js:128
    if (!fs.existsSync(profileFile)) return;
  • 读取本地文件
    lib/context.js:165
    if (!fs.existsSync(decisionsFile)) return;
  • 写入本地文件
    lib/context.js:177
    fs.appendFileSync(decisionsFile, entry, 'utf8');
  • 写入本地文件
    lib/context.js:251
    fs.mkdirSync(path.join(dir, 'assets'), { recursive: true });
  • 写入本地文件
    lib/context.js:252
    fs.mkdirSync(path.join(dir, 'sources'), { recursive: true });
  • 写入本地文件
    lib/home.js:34
    fs.mkdirSync(dir, { recursive: true });
  • 写入本地文件
    lib/home.js:40
    fs.writeFileSync(probe, 'ok');
  • 删除本地文件
    lib/home.js:41
    fs.unlinkSync(probe);
  • 读取本地文件
    lib/home.js:74
    return fs.readFileSync(filePath, 'utf8');
  • 写入本地文件
    lib/home.js:78
    fs.mkdirSync(path.dirname(filePath), { recursive: true });
  • 写入本地文件
    lib/home.js:79
    fs.writeFileSync(filePath, contents, 'utf8');
  • 读取本地文件
    lib/home.js:91
    return fs.existsSync(filePath);
  • 读取本地文件
    lib/remote.js:20
    if (!fs.existsSync(dir)) return [];
  • 读取本地文件
    lib/remote.js:30
    if (!fs.existsSync(dir)) return [];
  • 读取本地文件
    lib/remote.js:39
    if (!fs.existsSync(dir)) return false;
  • 读取本地文件
    lib/remote.js:40
    const entries = fs.readdirSync(dir, { withFileTypes: true });
  • 读取本地文件
    lib/remote.js:58
    if (!fs.existsSync(tokensPath)) continue;
  • 读取本地文件
    lib/remote.js:59
    const raw = fs.readFileSync(tokensPath, 'utf8');
  • 删除本地文件
    lib/remote.js:129
    if (tracked.status !== 0) fs.unlinkSync(ignorePath);
  • 执行外部命令固定命令
    lib/git.js:26
    const result = spawnSync('git', args, {
  • 读取本地文件
    lib/git.js:77
    if (fs.existsSync(ignorePath)) return false;
  • 写入本地文件
    lib/git.js:78
    fs.writeFileSync(ignorePath, GITIGNORE_CONTENT, 'utf8');
  • 读取本地文件
    lib/git.js:172
    fs.existsSync(path.join(dir, 'rebase-merge')) ||
  • 读取本地文件
    lib/git.js:173
    fs.existsSync(path.join(dir, 'rebase-apply'))
  • 读取本地文件
    lib/git.js:193
    if (fs.existsSync(profiles)) args.push('profiles');
  • 读取本地文件
    lib/git.js:194
    if (fs.existsSync(inspirations)) args.push('inspirations');
  • 读取本地文件
    lib/git.js:195
    if (fs.existsSync(ignore)) args.push('.gitignore');
  • 写入本地文件
    lib/inspiration/capture.js:17
    fs.mkdirSync(capturesDir, { recursive: true });
  • 写入本地文件
    lib/inspiration/capture.js:95
    fs.copyFileSync(abs, destFull);
  • 写入本地文件
    lib/inspiration/capture.js:96
    fs.copyFileSync(abs, destFrame);
  • 读取本地文件
    lib/inspiration/capture.js:120
    if (!exists(abs) || !fs.statSync(abs).isDirectory()) {
  • 写入本地文件
    lib/inspiration/capture.js:131
    fs.copyFileSync(path.join(abs, f), path.join(capturesDir, f));
  • 读取本地文件
    lib/inspiration/store.js:40
    if (!exists(dir) || !fs.statSync(dir).isDirectory()) return false;
  • 写入本地文件
    lib/inspiration/store.js:125
    fs.mkdirSync(paths.pages, { recursive: true });
  • 写入本地文件
    lib/inspiration.js:291
    fs.mkdirSync(paths.captures, { recursive: true });
  • 写入本地文件
    lib/inspiration.js:572
    fs.appendFileSync(
  • 读取本地文件
    lib/inspiration.js:645
    if (!exists(projectPath) || !fs.statSync(projectPath).isDirectory()) {
扫描于 2026/11/2（1 天前） · 范围 入口闭包 + 发布文件清单 · 来源 GitHub 仓库

静态扫描只反映源码中出现的调用，不构成安全背书；人工评估与自动扫描相互独立、互不覆盖。

给这个插件打分还没有人投票↓
用户评分
还没有人投票，来当第一个
广告精选好物
飞利浦 TAH6519 主动降噪耳机 ¥299
头戴式无线 anc 主动降噪，蓝牙连接，久戴舒适向。
  • ·anc 主动降噪 · 头戴式无线
  • ·价格与库存以商品页实时为准
去淘宝看看→

界面预览

5 张 · 点击查看大图

功能亮点

  • 生成类设计界面

让 AI 生成的界面真正像设计过的。

README

由 DeepSeek 最新模型翻译生成
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
展开完整文档（README 剩余 1 节）
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

Used: Page Type Identification · Spatial Vibe · Typography Exploration

工作原理

Reference or intent → 3 directions → previews → you choose → apply

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

你的智能体不该再去猜「让它显得高级」到底是指换一套配色、改一种布局，还是收一收动效系统。vibe-to-ui 把这份判断变成共享的、可评审的方向。

进阶工作流

还原或分析现有 UI

用 URL 或截图提取设计系统、动效 DNA 和可评审的预览，然后再决定是否应用。

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

完整方法论见 Design System、Motion System 和 Spatial Vibe。

保留本地 Design Context

把品牌配置档持久化到技能包之外，这样重装技能也不会重置你的视觉语言。

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 同步能通过你的私有仓库，在多台设备之间共享配置档和灵感。

阅读 Design Context 指南 →

搭建灵感库

把真实产品页面和截图收集到全局归档里，让它们的全页滚动视觉分析与品牌规则分开存放，等你决定时再链接或应用产品级设计种子。

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

阅读 Inspiration Library 指南 →

FAQ

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

它会立刻重写我的项目吗？ 不会。探索阶段只产出独立预览。只有你明确要求应用某个已确认的方向后，项目才会发生变化。

我能用截图代替 URL 吗？ 可以。截图、URL、照片、音乐片段，或者一段写下来的想法，都能作为不错的起点。

它支持 React、Vue 还是纯 CSS？ 都支持。方向与 token 不依赖框架；应用时遵循你项目的约定。

它自带图像生成 API，或者需要 API key 吗？ 不需要。视觉素材默认使用你智能体宿主自带的图像工具。当 MiniMax 可用且适合该素材时，你可以明确选择它；它的凭据始终留在项目之外。参见 Visual Asset Generation。

Design the dream you were told to put away.

License

MIT — see LICENSE.

Built with ❤️ by MonkeyUI-dev.
广告精选好物
Type-c 采集卡 ¥50
佳能尼康索尼相机直连电脑，视频开发与直播向。
  • ·相机转电脑采集
  • ·价格与库存以商品页实时为准
去淘宝看看→
预览分享卡片长什么样 ↓MonkeyUI-dev/vibe-to-ui
分享 · DeepSeek Harness Hub
MonkeyUI-dev/vibe-to-ui

让 AI 生成的 UI 真正像设计过的。

相关插件 · 平台集成

智能体工程课walkinglabs/learn-harness-engineering
一门项目制课程，教你搭建环境、管理状态、做验证、加控制机制，让 AI 编程智能体稳定干活。
★ 21,155已汉化DSH
71.7
视频翻译配音liuzhao1225/YouDub-webui
开源视频本地化工作台：导入视频，识别、翻译并逐句克隆原声，生成字幕和配音成片。
★ 5,778已汉化Cordis
71.4
失败经验库Ikalus1988/MisakaNet
📚 零依赖、由 git 支撑的微课程库，让 AI 智能体异步分享并检索经过验证的调试经验。| https://misakanet.org
★ 550已汉化DSH
71.2
桌面智能体工作区freestylefly/wesight
WeSight 是开源桌面控制台，面向本地 AI 智能体。它帮你安装或复用 Claude…
★ 933已汉化MCP
71
IM 机器人接入xmanrui/dsh-im
让 DeepSeek Harness 触手可及 Connecting DeepSeek Harness
★ 3,110已汉化DeepSeek 客户端
70.9
中国平台研究引擎Jesseovo/last30days-skill-cn
给 AI Agent 的中文互联网研究 Skill：检索 8 大平台最近 30…
★ 2,031已汉化DSH
70.7
回到顶部