skills.rest
FutureAtoms
FutureAtomsCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-voice-ui-design

Design voice input/output interfaces with microphone states, waveform visualization, and TTS playback controls.

1|Updated Mar 11, 2026
Search Tags:#accessibility#speech recognition#ux design#tts#voice ui#vui
One-click install
npx skills add https://github.com/FutureAtoms/claude-skills-backup --skill ui-ux-voice-ui-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-voice-ui-design
Source: https://github.com/FutureAtoms/claude-skills-backup/tree/main/ui-ux-voice-ui-design
Command: npx skills add https://github.com/FutureAtoms/claude-skills-backup --skill ui-ux-voice-ui-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you design user interfaces for voice input and output, ensuring a seamless and accessible experience for users interacting with voice-enabled features.

Core Features & Use Cases

  • Voice Interaction Design: Define clear flows and state machines for voice interactions.
  • UI Element Design: Create specifications for microphone buttons, waveform visualizations, and transcription feedback.
  • Accessibility: Ensure voice UIs are usable by everyone, considering various needs.
  • Use Case: Design the voice interaction flow for a mobile app's dictation feature, including microphone states, real-time transcription display, and audio playback controls.

Quick Start

Design the voice UI for a new language learning feature that includes microphone states and real-time transcription.

Frequently Asked Questions about ui-ux-voice-ui-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design voice UI states for a mobile app dictation feature?▼

To design voice UI states for dictation, define a clear state machine for microphone interactions, including real-time transcription display and audio playback controls. This ensures a seamless experience for users interacting with voice-enabled features.

What are the best practices for multi-modal voice interaction coordination?▼

Multi-modal voice interaction coordination is best managed by establishing clear interaction flows and state machines that synchronize voice input with visual UI elements. This approach addresses VUI design principles and platform-specific guidelines.

Can I use this voice interface design approach for both iOS and Android platforms?▼

Yes, this voice interface design approach provides platform-specific guidelines for both iOS and Android. It helps create accessible and performant voice user experiences tailored to each operating system's distinct interaction patterns.

How does speech recognition feedback visualization work in voice user interfaces?▼

Speech recognition feedback visualization works by mapping microphone states to UI elements like waveform visualizations and real-time transcription displays. This provides users with immediate, clear feedback during voice input and TTS playback.

What is needed to ensure accessibility in voice user interface design?▼

Accessibility in voice user interface design requires considering various user needs when defining microphone buttons, waveform visualizations, and transcription feedback. It ensures voice UIs are usable by everyone interacting with voice-enabled features.

Related Skills

Explore More Design & Creative Skills→
onejaejaeonejaejae
2

figma-analyzer

Analyzes screenshots or URLs to extract product requirements and workflows from FlyeX designs.

Community
Advanced
Bbeierle12Bbeierle12
8

component-library

Generate production-ready React components for a shadcn/ui component library.

Community
Advanced
ericfitzericfitz
2

translate_to_language

Translate English text to a target language while preserving placeholders and formatting.

Community
Intermediate
understudy-aiunderstudy-ai
455

sag

Generate speech from text via the ElevenLabs API with voice selection.

Official
Intermediate