原始内容
UI Sound Design Skill
▁ ▃ ▅ ▇ ▅ ▃ ▁ ▁ ▃ ▅ ▇ ▅ ▃ ▁ ▁ ▃ ▅ ▇ ▅ ▃ ▁
██╗ ██╗██╗ ███████╗ ██████╗ ██╗ ██╗███╗ ██╗██████╗
██║ ██║██║ ██╔════╝██╔═══██╗██║ ██║████╗ ██║██╔══██╗
██║ ██║██║ ███████╗██║ ██║██║ ██║██╔██╗ ██║██║ ██║
██║ ██║██║ ╚════██║██║ ██║██║ ██║██║╚██╗██║██║ ██║
╚██████╔╝██║ ███████║╚██████╔╝╚██████╔╝██║ ╚████║██████╔╝
╚═════╝ ╚═╝ ╚══════╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═══╝╚═════╝
░ ▒ ▓ █ ▓ ▒ ░ ░ ▒ ▓ █ ▓ ▒ ░ ░ ▒ ▓ █ ▓ ▒ ░
██████╗ ███████╗███████╗██╗ ██████╗ ███╗ ██╗
██╔══██╗██╔════╝██╔════╝██║██╔════╝ ████╗ ██║
██║ ██║█████╗ ███████╗██║██║ ███╗██╔██╗ ██║
██║ ██║██╔══╝ ╚════██║██║██║ ██║██║╚██╗██║
██████╔╝███████╗███████║██║╚██████╔╝██║ ╚████║
╚═════╝ ╚══════╝╚══════╝╚═╝ ╚═════╝ ╚═╝ ╚═══╝
▇ ▅ ▃ ▁ ▃ ▅ ▇ ▇ ▅ ▃ ▁ ▃ ▅ ▇ ▇ ▅ ▃ ▁ ▃ ▅ ▇
An Agent Skill that translates plain-English sound descriptions into working Web Audio API and Tone.js code. Works with Claude Code, Cursor, VS Code/Copilot, Windsurf, Codex, Goose, and 30+ other AI coding tools. No audio engineering background needed.
What It Does
Describe what you want to hear, and your AI agent generates production-ready sound synthesis code.
The workflow is iterative: Describe the sound in plain language, Generate the code, Listen in-browser, Refine with feedback like "make it snappier" or "warmer". The skill handles the translation from subjective language to synthesis parameters.
Sound Categories
| Category | Duration | Character |
|---|---|---|
| Click | 30-100ms | Noise burst, bandpass filtered |
| Toggle | 80-200ms | Rising/falling pitch sweep |
| Hover | 30-100ms | Gentle, nearly subliminal |
| Success | 200-500ms | Ascending major third |
| Error | 150-400ms | Descending, buzzy |
| Warning | 150-350ms | Double pulse, mid-range |
| Notification | 200-800ms | Bell-like FM synthesis |
| Whoosh | 100-400ms | Filtered noise sweep |
| Pop | 30-100ms | Sine with pitch drop |
Try It
Open skills/ui-sound-design/assets/sound-preview.html in any browser. No install needed — click the buttons to hear all 10 default sounds.
Install
npx skills add dannyjpwilliams/ui-sound-design-skill
The CLI auto-detects your installed AI coding tools and installs the skill to all of them.
Compatibility
This skill follows the Agent Skills open standard and works with any compatible AI coding tool, including:
- Claude Code —
.claude/skills/ - Cursor —
.cursor/skills/ - VS Code / GitHub Copilot —
.github/skills/ - Windsurf —
.windsurf/skills/ - Codex CLI —
.codex/skills/ - Goose —
.goose/skills/ - Gemini CLI, Roo Code, Trae, and others
npx skills add handles the correct installation path for each tool automatically.
Usage
Ask your AI agent to design sounds using natural language:
"Make a click sound for a settings toggle — subtle, professional"
"I need a notification chime that sounds like a soft bell, not too attention-grabbing"
"Create a success sound for when a file uploads. Cheerful but not over the top."
"Build me a complete UI sound library with click, hover, success, and error sounds. Output as an ES module."
Your agent will generate an HTML preview you can open in your browser, then refine based on your feedback ("make it warmer", "shorter", "more playful").
Audio File References
Have a sound you want to match? Use it as a style reference:
node skills/ui-sound-design/tools/analyze-sound.mjs path/to/reference.wav
The analyzer extracts a detailed sound profile — duration, envelope, spectral content, harmonics, brightness — and maps it to synthesis parameters. Paste the output into your conversation, and your agent uses it as the starting point for synthesis. Then refine as usual.
Supports .wav natively. Other formats (.mp3, .ogg, .flac) require ffmpeg. Zero npm dependencies — just Node.js.
How It Works
The skill acts as a vocabulary bridge between subjective language and audio synthesis parameters:
| You Say | What Changes |
|---|---|
| "Brighter" | Raise frequency or filter cutoff |
| "Warmer" | Lower filter cutoff, switch to sine/triangle |
| "Snappier" | Shorter attack and decay |
| "Softer" | Lower volume, longer attack |
| "More metallic" | FM synthesis, inharmonic ratios |
| "More playful" | Higher pitch, add overshoot |
| "More professional" | Lower volume, sine wave, short duration |
| "Retro / 8-bit" | Square wave, quantized pitch |
The full vocabulary bridge and all recipes are embedded in the skill files, so any compatible agent has the synthesis knowledge to translate any description.
Skill Structure
skills/ui-sound-design/
├── SKILL.md # Skill definition — workflow, vocabulary bridge, rules
├── references/
│ ├── sound-recipes.md # 9 complete sound implementations + UISoundLibrary class
│ ├── web-audio-api.md # Web Audio API building blocks and patterns
│ ├── audio-file-references.md # Guide for interpreting audio file analysis profiles
│ └── tone-js.md # Tone.js patterns and vanilla conversion guide
├── assets/
│ └── sound-preview.html # Self-contained HTML demo with all 10 sounds
└── tools/
└── analyze-sound.mjs # CLI audio analyzer (zero dependencies)