Loading...
Loading...
Compare original and translation side by side
undefinedundefinedundefinedundefinedassets/vibe-presets.json| Preset | Tone | Best For |
|---|---|---|
| Warm, professional | Banking, finance |
| Digital, clean | Wallet apps, trading |
| Bright, friendly | Social, consumer |
| Ultra-subtle | Productivity, tools |
| 8-bit inspired | Games, nostalgic |
| Rich, refined | High-end apps |
assets/vibe-presets.json| 预设名称 | 音调风格 | 适用场景 |
|---|---|---|
| 温暖、专业 | 银行、金融类应用 |
| 数字化、简洁 | 钱包应用、交易平台 |
| 明亮、友好 | 社交、消费类应用 |
| 极致简约 | 生产力工具、办公应用 |
| 8-bit复古风 | 游戏、怀旧类应用 |
| 饱满、精致 | 高端应用 |
undefinedundefinedundefinedundefinedpython scripts/generate_theme.py \
--regenerate "button-click-primary,notification-success" \
--vibe "crypto-modern" \
--output-dir "./audio-theme"python scripts/generate_theme.py \
--regenerate "button-click-primary,notification-success" \
--vibe "crypto-modern" \
--output-dir "./audio-theme"| Constant | Description |
|---|---|
| Main action buttons |
| Secondary/ghost buttons |
| Delete/cancel actions |
| 常量名称 | 描述 |
|---|---|
| 主要操作按钮 |
| 次要/幽灵按钮 |
| 删除/取消操作 |
| Constant | Description |
|---|---|
| Tab navigation |
| Back button/gesture |
| Forward navigation |
| Menu drawer open |
| Menu dismiss |
| 常量名称 | 描述 |
|---|---|
| 标签页切换 |
| 返回按钮/手势 |
| 前进导航 |
| 菜单抽屉打开 |
| 菜单收起 |
| Constant | Description |
|---|---|
| Success confirmation |
| Error alert |
| Warning indicator |
| Information notice |
| Badge/counter update |
| 常量名称 | 描述 |
|---|---|
| 成功确认 |
| 错误提示 |
| 警告提示 |
| 信息通知 |
| 徽章/计数器更新 |
| Constant | Description |
|---|---|
| Switch enabled |
| Switch disabled |
| Checkbox selected |
| Checkbox deselected |
| Loading initiated |
| Loading finished |
| 常量名称 | 描述 |
|---|---|
| 开关启用 |
| 开关禁用 |
| 复选框选中 |
| 复选框取消选中 |
| 加载开始 |
| 加载完成 |
| Constant | Description |
|---|---|
| Modal appearance |
| Modal dismissal |
| Tooltip reveal |
| Dropdown expand |
| Dropdown collapse |
| 常量名称 | 描述 |
|---|---|
| 弹窗出现 |
| 弹窗关闭 |
| 提示框显示 |
| 下拉菜单展开 |
| 下拉菜单收起 |
| Constant | Description |
|---|---|
| Transaction sent |
| Payment received |
| Transaction waiting |
| 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/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/constants.tsimport { UI_SOUNDS } from './audio-theme/constants';
const audio = new Audio(UI_SOUNDS.BUTTON_CLICK_PRIMARY);
audio.volume = 0.3;
audio.play();constants.tsimport { 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 { 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();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();--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--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 namesscripts/generate_theme.pyreferences/sound-design-guide.mdassets/vibe-presets.jsonassets/theme-template.jsonscripts/generate_theme.pyreferences/sound-design-guide.mdassets/vibe-presets.jsonassets/theme-template.json