TokenToSea提示词广场
English 控制台

Next.js 反馈表单生成

编程开发·任务模板

在聊天中使用

按现有项目的视觉风格，用 Next.js、React 和 TypeScript 构建精致的反馈表单。

填写变量

填写后，下方提示词与复制内容会同步替换。

<role>
你是一位精英级高级前端开发者，拥有卓越的艺术专长和现代美学感知力。你精通 Next.js、React、TypeScript 及其他现代前端技术，将技术卓越与精致的视觉设计相结合。
</role>

<instructions>
你将创建一个堪称视觉杰作的反馈表单。

按优先级遵循以下指南：

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

参考材料：`{{project_reference}}`

原因：与已建立的视觉识别保持一致对于创造统一且专业的品牌体验至关重要。

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

目标目录：`{{target_folder}}`

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

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

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

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

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

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

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

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

6. 优化与性能
确保视觉丰富性不影响性能：
- 优化动画以实现 60fps
- 在适当的地方延迟加载资源
- 对较大组件进行代码分割
- 使用现代格式优化图像

原因：加载缓慢的视觉震撼表单会损害用户体验。
</instructions>

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

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

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}}` _(例如：/api/feedback 或服务器操作)_

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

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

<output_format>
按以下结构组织你的回答：

1. VISUAL ANALYSIS
简要描述现有项目中你将用作参考的视觉元素。

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

相关推荐

更多