中文译文
请按优先级顺序遵循以下准则：
- 视觉识别分析 仔细检查现有项目，以提取：
- 主色板和辅助色板
- 字体排版与视觉层级
- 间距模式与网格系统
- 动画与过渡风格
- 标志性的视觉元素
- Logo 及其应用方式
参考资料：${path_or_description_of_existing_project}
原因：与既定的视觉识别保持一致，对于打造统一且专业的品牌体验至关重要。
- 组件架构 使用模块化、可复用的 React/Next.js 组件来构建表单：
- 为输入框、按钮和卡片创建原子组件
- 使用 TypeScript 实现强类型且完整的类型定义
- 以专业方式组织文件夹结构
- 确保完全响应式（移动优先）
目标目录：${target_folder_path}
原因：结构良好的架构有助于维护、测试和扩展。
- 卓越的视觉设计 通过以下方式提升视觉标准：
- 为每个元素添加流畅且有意义的微交互
- 使用 Framer Motion 或类似库实现流畅动画
- 状态之间的过渡（hover、focus、active、disabled）
- 为每个用户操作提供即时的视觉反馈
- 通过微妙的阴影和渐变营造深度效果
- 在适当之处使用玻璃拟态或其他现代效果
设计灵感/参考：${design_references_or_urls}
原因：精心打造的交互元素和动画能创造令人难忘的体验，并展现对细节的关注。 4. 交互与响应式元素 实现能够提升参与度的功能：
- 带优雅提示信息的实时验证
- 可视化进度指示器
- 带动画且贴合情境的加载状态
- 带流畅动画的成功/错误提示
- 在相关位置提供信息性工具提示
- 表单出现在屏幕上时的入场动画
原因：持续的视觉反馈能让用户在交互过程中保持知情与自信。
- LOGO 整合 创造性地使用现有 logo：
- Logo 位置：
${logo_file_path} - 品牌颜色：
${primary_color}、${secondary_color} - 将其策略性地放置在布局中
- 考虑微妙的 logo 动画（脉冲、发光等）
- 保持品牌视觉完整性
原因：logo 是视觉识别的核心元素，应当以优雅的方式加以突出。
- 优化与性能 确保视觉丰富度不会损害性能：
- 将动画优化至 60fps
- 在适当位置对资源进行懒加载
- 对较大的组件进行代码分割
- 使用现代格式的优化图像
原因：一个视觉上令人惊艳但加载缓慢的表单会损害用户体验。
在开始编码之前，请逐步思考：分析位于
${path_or_description_of_existing_project}的现有项目，并具体列出：- 正在使用哪些颜色？
- 排版风格是什么？
- 已经存在哪些类型的动画？
- 设计的整体感觉/氛围是什么？
规划表单结构：
- 必填字段：
${form_fields}（例如姓名、邮箱、评分、留言） - 如何以视觉上吸引人的方式组织它们？
- 哪种流程对用户来说最合理？
- 必填字段：
选择库和工具：
- 使用哪个动画库？（Framer Motion、React Spring 等）
- 是否需要表单库？（React Hook Form、Formik 等）
- 采用哪种样式方案？
${styling_approach}（例如 Tailwind、Styled Components、CSS Modules）
定义状态与交互：
- 每个元素将具有哪些视觉状态？
- 每个操作将生成哪些视觉反馈？
- 动画之间如何相互衔接？
验证你的解决方案：
- 与既定的视觉识别保持一致
- 完全可用且具备响应式
- 在 TypeScript 中类型良好
- 遵循 React/Next.js 最佳实践
- 以优雅且直观的方式收集用户反馈
- 融入项目的视觉识别（颜色、字体、标志）
- 在所有交互元素上包含动画和微交互
- 完全响应式且可访问
- 在每个细节中展现技术与艺术的卓越
- 将数据提交到：
${api_endpoint_or_action}（例如 /api/feedback 或某个服务器操作）
提供完整、有条理的代码，准备好集成到系统中。
- 与既定的视觉识别保持绝对一致 - 确保可访问性（至少 WCAG 2.1 AA） - 代码必须是生产就绪的，而不是原型 - 所有动画必须流畅（60fps） - 表单必须在移动端、平板和桌面端完美运行 - 包管理器：`${package_manager}` _（例如 npm、pnpm、yarn）_ - Node 版本：`${node_version}` _（可选）_ 按如下结构组织你的回答：视觉分析 简要描述在现有项目中识别出的、你将用作参考的视觉元素。
文件结构 列出你将创建的文件夹和文件结构。
English original
Follow these guidelines in order of priority:
- VISUAL IDENTITY ANALYSIS Examine the existing project carefully to extract:
- Primary and secondary color palette
- Typography and visual hierarchy
- Spacing patterns and grid system
- Animation and transition styles
- Characteristic visual elements
- Logo and its application
Reference material: ${path_or_description_of_existing_project}
Reason: Maintaining consistency with the established visual identity is essential for creating a cohesive and professional brand experience.
- COMPONENT ARCHITECTURE Structure the form using modular, reusable React/Next.js components:
- Create atomic components for inputs, buttons, and cards
- Implement TypeScript with strong and complete typing
- Organize the folder structure professionally
- Ensure full responsiveness (mobile-first)
Target directory: ${target_folder_path}
Reason: A well-structured architecture facilitates maintenance, testing, and scalability.
- EXCEPTIONAL VISUAL DESIGN Elevate the visual standard with:
- Smooth and meaningful micro-interactions on every element
- Fluid animations using Framer Motion or similar libraries
- Transitions between states (hover, focus, active, disabled)
- Immediate visual feedback for each user action
- Depth effects with subtle shadows and gradients
- Glassmorphism or other modern effects where appropriate
Design inspiration/references: ${design_references_or_urls}
Reason: Well-executed interactive elements and animations create a memorable experience and demonstrate attention to detail.
- INTERACTIVE AND REACTIVE ELEMENTS Implement features that increase engagement:
- Real-time validation with elegant messages
- Visual progress indicators
- Animated and contextual loading states
- Success/error messages with smooth animations
- Informative tooltips where relevant
- Entry animations when the form appears on screen
Reason: Constant visual feedback keeps the user informed and confident during interaction.
- LOGO INTEGRATION Use the existing logo creatively:
- Logo location:
${logo_file_path} - Brand colors:
${primary_color},${secondary_color} - Position it strategically in the layout
- Consider subtle logo animations (pulse, glow, etc.)
- Maintain brand visual integrity
Reason: The logo is a central element of the visual identity and should be highlighted with elegance.
- OPTIMIZATION AND PERFORMANCE Ensure visual richness does not compromise performance:
- Optimize animations for 60fps
- Lazy load resources where appropriate
- Code splitting for larger components
- Optimized images in modern formats
Reason: A visually impressive form that loads slowly damages the user experience.
Before starting to code, think step by step:Analyze the existing project at
${path_or_description_of_existing_project}and list specifically:- What colors are being used?
- What is the typography style?
- What types of animations already exist?
- What is the general feel/mood of the design?
Plan the form structure:
- Required fields:
${form_fields}(e.g. name, email, rating, message) - How to organize them in a visually appealing way?
- What flow makes the most sense for the user?
- Required fields:
Choose libraries and tools:
- Which animation library to use? (Framer Motion, React Spring, etc.)
- Is a form library needed? (React Hook Form, Formik, etc.)
- Which styling approach?
${styling_approach}(e.g. Tailwind, Styled Components, CSS Modules)
Define states and interactions:
- What visual states will each element have?
- What visual feedback will each action generate?
- How do animations connect with each other?
Verify that your solution:
- Maintains consistency with the established visual identity
- Is completely functional and responsive
- Is well-typed in TypeScript
- Follows React/Next.js best practices
- Capture user feedback in an elegant and intuitive way
- Incorporate the project's visual identity (colors, typography, logo)
- Include animations and micro-interactions on all interactive elements
- Be fully responsive and accessible
- Demonstrate technical and artistic excellence in every detail
- Submit data to:
${api_endpoint_or_action}(e.g. /api/feedback or a server action)
Provide complete, organized code ready to be integrated into the system.
- Maintain absolute fidelity to the established visual identity - Ensure accessibility (WCAG 2.1 AA minimum) - Code must be production-ready, not a prototype - All animations must be smooth (60fps) - The form must work perfectly on mobile, tablet, and desktop - Package manager: `${package_manager}` _(e.g. npm, pnpm, yarn)_ - Node version: `${node_version}` _(optional)_ Structure your response as follows:VISUAL ANALYSIS Briefly describe the visual elements identified in the existing project that you will use as reference.
FILE STRUCTURE List the folder and file structure you will create.