重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
ui-audio-theme by b-open-io/prompts
npx skills add https://github.com/b-open-io/prompts --skill ui-audio-theme使用 ElevenLabs 文本转音效 API 生成协调统一、细腻简约的 UI 音效集。创建“音频主题”——即具有共同美学风格并与标准 UI 交互常量相对应的协调音效集。
# 验证 ElevenLabs API 密钥是否已配置
echo $ELEVENLABS_API_KEY
# 如果未设置,请从 https://elevenlabs.io 获取密钥(个人资料 -> API 密钥)
# 添加到 shell 配置文件:export ELEVENLABS_API_KEY="your-key"
在生成音效之前,先了解应用程序的美学风格:
应用程序上下文:
音频方向:
assets/vibe-presets.json 中可用的预设:
| 预设 | 音调 | 最适合 |
|---|---|---|
corporate-trust |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 温暖、专业 |
| 银行、金融 |
crypto-modern | 数字、干净 | 钱包应用、交易 |
playful-delight | 明亮、友好 | 社交、消费类 |
minimal-focus | 极其细腻 | 生产力、工具 |
retro-digital | 8位风格 | 游戏、怀旧 |
premium-luxury | 丰富、精致 | 高端应用 |
# 使用预设氛围
python scripts/generate_theme.py \
--vibe "crypto-modern" \
--output-dir "./audio-theme"
# 使用自定义氛围描述
python scripts/generate_theme.py \
--vibe-custom "warm organic subtle wooden interface sounds" \
--output-dir "./audio-theme"
# 仅生成特定类别
python scripts/generate_theme.py \
--vibe "crypto-modern" \
--categories buttons feedback transactions \
--output-dir "./audio-theme"
# 列出可用预设
python scripts/generate_theme.py --list-vibes
# 列出所有音效名称
python scripts/generate_theme.py --list-sounds
python scripts/generate_theme.py \
--regenerate "button-click-primary,notification-success" \
--vibe "crypto-modern" \
--output-dir "./audio-theme"
| 常量 | 描述 |
|---|---|
button-click-primary | 主要操作按钮 |
button-click-secondary | 次要/幽灵按钮 |
button-click-destructive | 删除/取消操作 |
| 常量 | 描述 |
|---|---|
nav-tab-switch | 标签页导航 |
nav-back | 返回按钮/手势 |
nav-forward | 前进导航 |
nav-menu-open | 菜单抽屉打开 |
nav-menu-close | 菜单关闭 |
| 常量 | 描述 |
|---|---|
notification-success | 成功确认 |
notification-error | 错误提醒 |
notification-warning | 警告指示 |
notification-info | 信息通知 |
notification-badge | 徽章/计数器更新 |
| 常量 | 描述 |
|---|---|
toggle-on | 开关启用 |
toggle-off | 开关禁用 |
checkbox-check | 复选框选中 |
checkbox-uncheck | 复选框取消选中 |
loading-start | 加载开始 |
loading-complete | 加载完成 |
| 常量 | 描述 |
|---|---|
modal-open | 模态框出现 |
modal-close | 模态框关闭 |
tooltip-show | 工具提示显示 |
dropdown-open | 下拉菜单展开 |
dropdown-close | 下拉菜单收起 |
| 常量 | 描述 |
|---|---|
tx-sent | 交易已发送 |
tx-received | 付款已接收 |
tx-pending | 交易等待中 |
tx-confirmed | 确认成功 |
audio-theme/
├── theme.json # 主题清单
├── constants.ts # TypeScript 常量
├── buttons/
│ ├── button-click-primary.mp3
│ ├── button-click-secondary.mp3
│ └── button-click-destructive.mp3
├── navigation/
├── feedback/
├── states/
├── modals/
└── transactions/
生成的 constants.ts 导出了可直接使用的常量:
import { UI_SOUNDS } from './audio-theme/constants';
const audio = new Audio(UI_SOUNDS.BUTTON_CLICK_PRIMARY);
audio.volume = 0.3;
audio.play();
import { useCallback, useEffect, useRef } from 'react';
export function useUISound(soundUrl: string, volume = 0.3) {
const audioRef = useRef<HTMLAudioElement | null>(null);
useEffect(() => {
audioRef.current = new Audio(soundUrl);
audioRef.current.volume = volume;
audioRef.current.preload = 'auto';
return () => { audioRef.current = null; };
}, [soundUrl, volume]);
const play = useCallback(() => {
if (audioRef.current) {
audioRef.current.currentTime = 0;
audioRef.current.play().catch(() => {});
}
}, []);
return play;
}
// 用法
function SendButton() {
const playClick = useUISound(UI_SOUNDS.BUTTON_CLICK_PRIMARY);
return <button onClick={() => { playClick(); sendTransaction(); }}>发送</button>;
}
import { Howl } from 'howler';
const sounds = {
click: new Howl({ src: [UI_SOUNDS.BUTTON_CLICK_PRIMARY], volume: 0.3 }),
success: new Howl({ src: [UI_SOUNDS.NOTIFICATION_SUCCESS], volume: 0.4 }),
};
// 交互时播放
sounds.click.play();
UI 音效应混合在 20-40% 的音量,以保持不引人注目。
音效出现越频繁,就应该越细腻。按钮点击声应几乎察觉不到;交易确认音可以更明显一些。
--vibe NAME 预设氛围名称
--vibe-custom DESC 自定义氛围描述
--output-dir PATH 输出目录(默认:./audio-theme)
--format FORMAT mp3 或 wav(默认:mp3)
--categories CATS 要生成的特定类别
--regenerate SOUNDS 逗号分隔的要重新生成的音效
--prompt-influence N 0-1,数值越高 = 越严格遵循提示(默认:0.5)
--list-vibes 显示可用预设
--list-sounds 显示所有音效名称
scripts/generate_theme.py - 用于生成主题的 CLI 工具references/sound-design-guide.md - 详细的音效设计最佳实践assets/vibe-presets.json - 预定义的氛围配置assets/theme-template.json - 示例输出清单对于超出标准类别的自定义音效生成,请使用音频专家代理,该代理具有完整的 ElevenLabs API 集成,可用于音效、音乐和语音生成。
每周安装次数
39
代码仓库
GitHub 星标数
7
首次出现
2026年1月24日
安全审计
已安装于
claude-code34
gemini-cli33
opencode33
cursor32
codex30
github-copilot27
Generate cohesive sets of subtle, minimal UI sound effects using ElevenLabs text-to-sound-effects API. Create "audio themes" - coordinated sets of sounds that share a common aesthetic and map to standard UI interaction constants.
# Verify ElevenLabs API key is configured
echo $ELEVENLABS_API_KEY
# If not set, get key from https://elevenlabs.io (Profile -> API Keys)
# Add to shell profile: export ELEVENLABS_API_KEY="your-key"
Before generating sounds, understand the application's aesthetic:
Application Context:
Audio Direction:
Available presets in assets/vibe-presets.json:
| Preset | Tone | Best For |
|---|---|---|
corporate-trust | Warm, professional | Banking, finance |
crypto-modern | Digital, clean | Wallet apps, trading |
playful-delight | Bright, friendly | Social, consumer |
minimal-focus | Ultra-subtle | Productivity, tools |
retro-digital | 8-bit inspired | Games, nostalgic |
premium-luxury | Rich, refined |
# Using preset vibe
python scripts/generate_theme.py \
--vibe "crypto-modern" \
--output-dir "./audio-theme"
# Using custom vibe description
python scripts/generate_theme.py \
--vibe-custom "warm organic subtle wooden interface sounds" \
--output-dir "./audio-theme"
# Generate specific categories only
python scripts/generate_theme.py \
--vibe "crypto-modern" \
--categories buttons feedback transactions \
--output-dir "./audio-theme"
# List available presets
python scripts/generate_theme.py --list-vibes
# List all sound names
python scripts/generate_theme.py --list-sounds
python scripts/generate_theme.py \
--regenerate "button-click-primary,notification-success" \
--vibe "crypto-modern" \
--output-dir "./audio-theme"
| Constant | Description |
|---|---|
button-click-primary | Main action buttons |
button-click-secondary | Secondary/ghost buttons |
button-click-destructive | Delete/cancel actions |
| Constant | Description |
|---|---|
nav-tab-switch | Tab navigation |
nav-back | Back button/gesture |
nav-forward | Forward navigation |
nav-menu-open | Menu drawer open |
nav-menu-close | Menu dismiss |
| Constant | Description |
|---|---|
notification-success | Success confirmation |
notification-error | Error alert |
notification-warning | Warning indicator |
notification-info | Information notice |
notification-badge | Badge/counter update |
| Constant | Description |
|---|---|
toggle-on | Switch enabled |
toggle-off | Switch disabled |
checkbox-check | Checkbox selected |
checkbox-uncheck | Checkbox deselected |
loading-start | Loading initiated |
loading-complete | Loading finished |
| Constant | Description |
|---|---|
modal-open | Modal appearance |
modal-close | Modal dismissal |
tooltip-show | Tooltip reveal |
dropdown-open | Dropdown expand |
dropdown-close | Dropdown collapse |
| Constant | Description |
|---|---|
tx-sent | Transaction sent |
tx-received | Payment received |
tx-pending | Transaction waiting |
tx-confirmed | Confirmation success |
audio-theme/
├── theme.json # Theme manifest
├── constants.ts # TypeScript constants
├── buttons/
│ ├── button-click-primary.mp3
│ ├── button-click-secondary.mp3
│ └── button-click-destructive.mp3
├── navigation/
├── feedback/
├── states/
├── modals/
└── transactions/
The generated constants.ts exports ready-to-use constants:
import { UI_SOUNDS } from './audio-theme/constants';
const audio = new Audio(UI_SOUNDS.BUTTON_CLICK_PRIMARY);
audio.volume = 0.3;
audio.play();
import { useCallback, useEffect, useRef } from 'react';
export function useUISound(soundUrl: string, volume = 0.3) {
const audioRef = useRef<HTMLAudioElement | null>(null);
useEffect(() => {
audioRef.current = new Audio(soundUrl);
audioRef.current.volume = volume;
audioRef.current.preload = 'auto';
return () => { audioRef.current = null; };
}, [soundUrl, volume]);
const play = useCallback(() => {
if (audioRef.current) {
audioRef.current.currentTime = 0;
audioRef.current.play().catch(() => {});
}
}, []);
return play;
}
// Usage
function SendButton() {
const playClick = useUISound(UI_SOUNDS.BUTTON_CLICK_PRIMARY);
return <button onClick={() => { playClick(); sendTransaction(); }}>Send</button>;
}
import { Howl } from 'howler';
const sounds = {
click: new Howl({ src: [UI_SOUNDS.BUTTON_CLICK_PRIMARY], volume: 0.3 }),
success: new Howl({ src: [UI_SOUNDS.NOTIFICATION_SUCCESS], volume: 0.4 }),
};
// Play on interaction
sounds.click.play();
UI sounds should be mixed at 20-40% to remain unobtrusive.
The more frequently a sound occurs, the subtler it should be. Button clicks should be nearly imperceptible; transaction confirmations can be more noticeable.
--vibe NAME Preset vibe name
--vibe-custom DESC Custom vibe description
--output-dir PATH Output directory (default: ./audio-theme)
--format FORMAT mp3 or wav (default: mp3)
--categories CATS Specific categories to generate
--regenerate SOUNDS Comma-separated sounds to regenerate
--prompt-influence N 0-1, higher = stricter prompt adherence (default: 0.5)
--list-vibes Show available presets
--list-sounds Show all sound names
scripts/generate_theme.py - CLI tool for generating themesreferences/sound-design-guide.md - Detailed sound design best practicesassets/vibe-presets.json - Predefined vibe configurationsassets/theme-template.json - Example output manifestFor custom sound generation beyond standard categories, use the audio-specialist agent which has full ElevenLabs API integration for sound effects, music, and voice generation.
Weekly Installs
39
Repository
GitHub Stars
7
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
claude-code34
gemini-cli33
opencode33
cursor32
codex30
github-copilot27
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
125,600 周安装
| High-end apps |