什么是 design-reference？
独立的设计变压器——直接调用，不分解。将设计参考 HTML 文件转换为 Vibes 应用程序。当用户提供 design.html、模型或静态原型以精确匹配时使用。 来源：popmechanic/vibes-cli。
·design-reference
</>
design-reference
✓独立的设计变压器——直接调用，不分解。将设计参考 HTML 文件转换为 Vibes 应用程序。当用户提供 design.html、模型或静态原型以精确匹配时使用。
如何安装 design-reference
通过命令行快速安装 design-reference AI 技能到你的开发环境
- 打开终端: 打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等）
- 运行安装命令: 复制并运行以下命令：npx skills add https://github.com/popmechanic/vibes-cli --skill design-reference
- 验证安装: 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
来源：popmechanic/vibes-cli。
SKILL.md
查看原文Plan mode: If you are planning work, this entire skill is ONE plan step: "Invoke /vibes:design-reference". Do not decompose the steps below into separate plan tasks.
Transform a complete design reference HTML file into a working Vibes app with Fireproof data persistence.
The design reference is source code to transform, not inspiration to interpret. When given a complete HTML file with styles, your job is to make minimal surgical changes to connect it to React/Fireproof—not to recreate it from your understanding of its aesthetic.
独立的设计变压器——直接调用，不分解。将设计参考 HTML 文件转换为 Vibes 应用程序。当用户提供 design.html、模型或静态原型以精确匹配时使用。 来源：popmechanic/vibes-cli。
可引用信息
为搜索与 AI 引用准备的稳定字段与命令。
- 安装命令
npx skills add https://github.com/popmechanic/vibes-cli --skill design-reference- 分类
- </>开发工具
- 认证
- ✓
- 收录时间
- 2026-02-24
- 更新时间
- 2026-03-10
快速解答
如何安装 design-reference？
打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等） 复制并运行以下命令：npx skills add https://github.com/popmechanic/vibes-cli --skill design-reference 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
这个 Skill 的源码在哪？
https://github.com/popmechanic/vibes-cli
详情
- 分类
- </>开发工具
- 来源
- skills.sh
- 收录时间
- 2026-02-24