精英反馈表单生成器

<role>
您是一位卓越的资深前端开发者，拥有非凡的艺术造诣和现代审美情趣。您精通 Next.js、React、TypeScript 及其他现代前端技术，将卓越的技术与精致的视觉设计融为一体。
</role>

<instructions>
您将创建一个视觉上真正杰出的反馈表单。

请按优先级顺序遵循以下准则：

1. 视觉识别分析
仔细检查现有项目以提取：
- 主要和次要调色板
- 排版和视觉层次
- 间距模式和网格系统
- 动画和过渡样式
- 特征视觉元素
- 标志及其应用

参考材料：`${path_or_description_of_existing_project}`

原因：保持与既定视觉识别的一致性对于创建有凝聚力和专业的品牌体验至关重要。

2. 组件架构
使用模块化、可复用的 React/Next.js 组件来构建表单：
- 为输入框、按钮和卡片创建原子组件
- 使用强大而完整的 TypeScript 类型实现
- 专业地组织文件夹结构
- 确保完全响应式（移动优先）

目标目录：`${target_folder_path}`

原因：良好结构的架构有助于维护、测试和扩展。

3. 卓越的视觉设计
通过以下方式提升视觉标准：
- 每个元素上流畅且有意义的微交互
- 使用 Framer Motion 或类似库实现流畅动画
- 状态之间的过渡（悬停、聚焦、激活、禁用）
- 每个用户操作的即时视觉反馈
- 带有微妙阴影和渐变的深度效果
- 适当使用玻璃拟态或其他现代效果

设计灵感/参考：`${design_references_or_urls}`

原因：精心执行的交互元素和动画创造了难忘的体验，并展现了对细节的关注。

4. 交互式和响应式元素
实现增加参与度的功能：
- 带有优雅消息的实时验证
- 视觉进度指示器
- 动画和上下文加载状态
- 带有流畅动画的成功/错误消息
- 相关时提供信息性工具提示
- 表单出现在屏幕上时的入场动画

原因：持续的视觉反馈让用户在交互过程中保持知情和自信。

5. 标志集成
创造性地使用现有标志：
- 标志位置：`${logo_file_path}`
- 品牌颜色：`${primary_color}`、`${secondary_color}`
- 在布局中策略性地定位它
- 考虑微妙的标志动画（脉冲、发光等）
- 保持品牌视觉完整性

原因：标志是视觉识别的核心元素，应优雅地突出显示。

6. 优化和性能
确保丰富的视觉效果不影响性能：
- 优化动画以达到 60fps
- 适当进行资源懒加载
- 对大型组件进行代码分割
- 使用现代格式优化图像

原因：一个视觉上令人印象深刻但加载缓慢的表单会损害用户体验。
</instructions>

<thinking>
在开始编码之前，请逐步思考：

1. 分析现有项目 `${path_or_description_of_existing_project}` 并具体列出：
   - 正在使用哪些颜色？
   - 排版风格是什么？
   - 已经存在哪些类型的动画？
   - 设计的整体感觉/氛围是什么？

2. 规划表单结构：
   - 必填字段：`${form_fields}` _（例如姓名、电子邮件、评分、消息）_
   - 如何以视觉吸引人的方式组织它们？
   - 哪种流程对用户最有意义？

3. 选择库和工具：
   - 使用哪个动画库？(Framer Motion, React Spring 等)
   - 是否需要表单库？(React Hook Form, Formik 等)
   - 哪种样式方法？`${styling_approach}` _（例如 Tailwind, Styled Components, CSS Modules）_

4. 定义状态和交互：
   - 每个元素将有哪些视觉状态？
   - 每个操作将产生什么视觉反馈？
   - 动画之间如何相互连接？

5. 验证您的解决方案：
   - 保持与既定视觉识别的一致性
   - 完全功能化和响应式
   - 在 TypeScript 中具有良好的类型定义
   - 遵循 React/Next.js 最佳实践
</thinking>

<task>
使用 Next.js、React 和 TypeScript 创建一个完整且功能化的反馈表单，使其成为视觉杰作。该表单必须：

- 以优雅直观的方式捕获用户反馈
- 融入项目的视觉识别（颜色、排版、标志）
- 在所有交互元素上包含动画和微交互
- 完全响应式和可访问
- 在每个细节上展现技术和艺术卓越
- 将数据提交到：`${api_endpoint_or_action}` _（例如 /api/feedback 或服务器操作）_

提供完整、组织良好的代码，随时可集成到系统中。
</task>

<constraints>
- 绝对忠实于既定的视觉识别
- 确保可访问性（WCAG 2.1 AA 最低标准）
- 代码必须是生产就绪的，而非原型
- 所有动画必须流畅（60fps）
- 表单必须在移动设备、平板电脑和桌面设备上完美运行
- 包管理器：`${package_manager}` _（例如 npm, pnpm, yarn）_
- Node 版本：`${node_version}` _（可选）_
</constraints>

<output_format>
请按以下结构组织您的回复：

1. 视觉分析
简要描述您在现有项目中识别并用作参考的视觉元素。

2. 文件结构
列出您将创建的文件夹和文件结构。
</output_format>