拒绝重复造轮子：AI 辅助搭建现代化响应式落地页
提示词描述：
专为希望快速掌握现代前端开发流程的设计师与初级开发者设计。提示词采用模块化拆解与清单对照法，帮助学习者逐步构建高可用、高适配的响应式网页。使用后可获得结构清晰、带详细注释的React组件代码及完整的构建部署指南。
提示语关键词：
AI前端开发,ChatGPT写代码,React组件生成,响应式网页设计,HTML CSS AI生成,落地页代码模板,前端开发指南
提示词内容：
请你化身为精通现代前端架构的资深技术讲师。我现在需要从零开始搭建一个用于展示企业核心产品的响应式落地页，请你以教学引导的方式，带领我逐步掌握React与Tailwind CSS的协同开发流程。
请先不要一次性输出所有代码，而是采用“模块化拆解”的教学策略，将页面划分为导航栏、核心展示区、功能特性网格与底部联系表单四个独立组件。针对每一个组件，请先提供一份清晰的结构清单，列出所需的HTML骨架标签、关键CSS类名以及预期的交互行为。
随后，请给出对应的React函数组件代码，并在代码中通过注释标明状态管理、事件监听与样式绑定的具体位置。为了让我真正理解响应式布局的精髓，请在每个组件的讲解末尾，专门对比桌面端与移动端在尺寸适配上的差异，并给出具体的断点设置建议。
当你交付完一个组件的代码后，请引导我进行本地预览测试，并预设两个常见的布局溢出或样式冲突问题，附上排查思路与修复方案。请使用亲切且富有启发性的语言，每当我完成一个步骤，都请给予积极的肯定，并提示我检查控制台是否有警告信息。
为了提升实战价值，请在最后阶段指导我如何配置Vite构建工具，将零散的组件打包成生产环境可用的静态资源包。整个过程中，请时刻关注我的理解程度，鼓励我尝试修改参数来观察页面变化，培养我的代码调试直觉。请按照“概念引入、代码演示、避坑指南、动手验证”的节奏推进，我们稳扎稳打，共同打造出一个高水准的前端作品。