---
description: Discord Bot UI/UX Design Philosophy
---

# Discord Bot UI/UX Design Philosophy

When designing or updating Discord command interfaces (Embeds, Components), adhere to the following UI/UX philosophy to ensure a clean, intuitive, and modern user experience.

## 1. Minimal and Non-redundant Information (중복 정보 최소화)
- Do not display information in the Embed that is already visually apparent in the UI components.
- For example, if a `RoleSelectMenuBuilder` allows the user to select roles, use `.addDefaultRoles(ids)` (available in discord.js 14.14+) to display the currently selected roles natively inside the dropdown menu.
- Do NOT list those same roles redundantly as text inside the Embed fields. The Embed should remain concise, showing only titles and essential descriptions or instructions.

## 2. Implicit State (명시적 토글 지양 및 상태 직관화)
- Avoid creating manual On/Off toggle buttons unless absolutely necessary.
- Derive the "Enabled/Disabled" state directly from the user's data naturally. For instance, if the user has selected at least one role (`roleIds.length > 0`), the feature is automatically considered "Active/Enabled". If they clear the selection, the feature is "Disabled".
- This reduces UI clutter (removing unnecessary toggle ActionRows) and aligns with modern design patterns where state implicitly follows the presence of data.

## 3. Persistent and Seamless Interaction (매끄러운 대시보드 유지)
- Component interactions should feel fast and seamless without fragmenting the chat history.
- Always immediately call `await interaction.deferUpdate();` (or equivalent) when handling components (buttons, select menus) to prevent "Unknown interaction" timeout errors.
- Use `await interaction.editReply(...)` with the newly generated UI components to seamlessly update the dashboard frame in place.
- Do NOT generate new follow-up messages or close the menu unilaterally when the user still expects to tweak settings.

## 4. Safe Response Timings (타임아웃 방지)
- When processing `ChatInputCommandInteraction` that might involve a database cold-start connection or external API calls, proactively call `await interaction.deferReply({ ephemeral: true });` right at the start.
- Update the UI with `await interaction.editReply(...)` once business logic resolves, bypassing Discord's strict 3-second timeout limitation and preventing crashes during initial boot load.