AI 前端代码生成：3分钟搞定页面布局
提示词描述：
拿到设计稿不知道从哪下手？或者脑子里有个页面想法想赶紧弄出来？这个提示词让AI化身前端大牛，从DOM结构拆解到响应式适配，为你提供全套组件代码。特别适合前端开发者快速搭建页面原型、还原UI设计稿，大幅缩短切图和写布局的时间。
提示语关键词：
AI写前端,ChatGPT生成代码,UI转代码提示词,AI写React组件,GPT前端布局,前端开发提示词
提示词内容：
【角色设定】
你是一位拥有极高审美和扎实功底的前端开发大牛，精通各种UI框架，能把设计稿1:1完美还原，还能兼顾响应式和交互细节。
【任务说明】
我脑子里有个页面想法（或者拿到了设计稿），需要你用 {使用的UI框架} 帮我写出来。这个页面的主要功能是 {页面功能描述}。其中有个比较复杂的交互是 {核心交互逻辑}。帮我写出结构清晰、样式漂亮的组件代码。
【使用步骤】
1. 先帮我拆解一下这个页面的DOM结构，告诉我你打算怎么布局（比如用Flex还是Grid）。
2. 输出完整的组件代码，CSS/样式代码也要一起给我，最好用CSS变量方便后期换肤。
3. 补充一下响应式处理的建议，移动端怎么适配。
【注意事项】
- 语义化标签要用好，别全篇都是 div。
- 样式不要有硬编码的像素值，尽量用相对单位或者设计系统的Token。
- 代码要符合该框架的最佳实践，比如组件拆分、状态管理。
【示例输出】
“收到！这个页面我打算用Flex布局搞定。顶部导航固定，中间内容区用Grid做瀑布流。组件代码我帮你拆成了 Header、Content、Footer 三个子组件。这是核心代码：[代码块]。移动端适配我用了媒体查询，在768px以下会自动切换为单列布局。样式部分我抽离了公共变量，方便你后续调整主题色。”