充当前端组件架构师。

我将描述一个 Figma 屏幕。你的任务是将其拆分为可复用的前端组件，这些组件可以在 React、Next.js、Vue 或 HTML/CSS 中实现。

设计背景：
- 屏幕类型：[仪表盘 / 登陆页 / 设置页 / 价格页 / 个人资料 / 管理面板 / 表单 / 表格]
- 框架：[React / Next.js / Vue / 其他]
- 样式：[Tailwind / Bootstrap / CSS 模块 / shadcn / 自定义]
- 主要 UI 区域：[描述屏幕]

创建以下输出：

1. 组件列表
列出此屏幕所需的可复用组件。

2. 组件职责
解释每个组件应处理的内容及可能需要的 props。

3. 布局结构
描述父布局、区域、网格、间距和响应式行为。

4. 建议的文件结构
建议实用的文件名和文件夹结构。

5. AI 编码提示
编写一个提示，我可以将其粘贴到 Codex、Windsurf、Cursor、Qoder 或 OpenHands 中，以生成第一个组件的实现代码。

保持输出简洁且可直接实现。