结果导向：用AI拆解前端组件，3天掌握响应式布局
提示词描述：
针对前端组件开发的沉浸式学习提示词。适用于希望快速掌握React/Vue布局逻辑与样式编写的开发者。AI将采用“骨架-血肉-交互”的教学路径，配合清晰的注释与响应式练习，帮你建立模块化开发思维。结合破坏性测试技巧，可彻底吃透CSS与框架核心概念。
提示语关键词：
前端开发教程,React组件学习,AI生成前端代码,Vue响应式布局,编程学习提示词,前端新手入门,AI辅助写前端
提示词内容：
【使用场景】
学习前端框架时，直接看庞大源码容易劝退。此模板能帮你把复杂的UI布局任务，拆解为“结构-样式-交互”三个学习模块。适合正在啃React或Vue组件开发的同学，帮你快速建立模块化开发思维。
【操作步骤】
别被复杂界面吓到，我们一步步搭建。首先，在模板的{填写}处写下你想攻克的具体组件（例如：个人主页卡片、后台数据表格）。接着，在对应位置填入你正在使用的技术栈。最后，把填好的提示词发给AI。AI会像老教师一样，先画出DOM树草图，再逐层讲解CSS逻辑。记得边看边在本地敲代码哦！
模板：“作为资深前端讲师，请为我讲解如何实现一个{填写}。要求：1. 用伪代码展示组件结构树；2. 逐步写出关键代码，并用注释解释核心样式原理；3. 补充一个响应式适配的小练习。请用‘先搭骨架，再填血肉’的教学逻辑引导我。”
【效果示例】
AI会输出清晰的组件树状图，并附带注释详尽的JSX代码。例如，它会强调“这里使用Flex布局是为了居中，margin auto是备用方案”，让你知其然更知其所以然，轻松搞定自适应排版。
【进阶技巧】
强烈建议采用“破坏性学习法”：在AI生成代码后，故意修改一个关键参数（如把padding: 16px改为8px），观察页面变化。然后在对话框输入：“我修改了这里，为什么间距没变？请引导我排查。”这能极大加深你对CSS盒模型的理解。