从一个需求，搭出好用的界面

Build a responsive [interface type] using [framework and styling approach]. User goal: [goal]. Required content and actions: [requirements]. First identify the smallest component structure and data shape, then implement it. Include useful loading, empty, success, and error states only where applicable. Use semantic HTML, keyboard-operable controls, visible focus, accessible labels, and a layout that works at 360px. Keep state management proportional to the task. Do not add fake working controls, dependencies, or backend services. Explain how to run and verify the result.