别再手写CSS：AI一键生成响应式组件
提示词描述：
专为前端开发者设计的组件生成模板。输入具体页面与框架要求，AI直接输出高可用响应式代码。支持快速迭代与性能调优，大幅缩短从设计稿到可运行页面的周期，适合日常CRUD与中后台系统搭建。
提示语关键词：
AI代码生成, 前端开发提示词, GitHub Copilot使用技巧, AI写React组件, 响应式网页代码生成, AI辅助编程工具
提示词内容：
【使用场景】
前端快速开发、原型转代码、组件库搭建。适用于将产品需求直接转化为可运行的前端框架代码。
【操作步骤】
1. 明确输入：定位模板中的{填写}占位符，精准替换为页面类型、核心交互、指定UI框架及适配终端。确保参数无歧义。
2. 执行生成：将完整指令输入GitHub Copilot或大模型。系统自动解析约束并输出组件。
3. 本地验证：启动开发环境，逐项检查DOM结构、样式层级覆盖与断点切换表现。
4. 定向迭代：若存在偏差，直接回复“优化{填写}模块性能”或“修复{填写}样式冲突”。
【效果示例】
输入：将{填写}依次替换为“用户数据看板”、“动态图表联动”、“Tailwind CSS”、“PC与移动端”。
输出：完整React单文件组件，含Mock数据注入、Grid响应式布局、图表事件绑定及无障碍访问标签，零配置直接集成。
【进阶技巧】
• 纯净输出控制：末尾追加“仅返回代码块，禁止任何解释性文字”。
• 状态管理集成：要求“使用Context API或Zustand管理跨组件状态”。
• 品牌一致性：传入CSS变量（如--primary-color）强制匹配设计系统。
• 批量生成：结合JSON路由配置，一次性输出多页面骨架代码，缩短搭建周期。