别再像素级抠图了！用AI一键生成前端页面代码
提示词描述：
适合前端开发或全栈小伙伴，当你拿到设计图或有个页面想法却不想手写繁琐的CSS布局时，用这个提示词能让AI直接生成带响应式设计的完整组件代码，大幅提升UI还原效率。
提示语关键词：
AI写代码,ChatGPT编程,AI生成前端页面,GPT写React代码,前端代码生成器,AI写CSS
提示词内容：
【使用场景】
哥们，你是不是经常遇到这种情况：产品经理甩过来一张设计图，或者你脑子里有个绝妙的页面想法，但一想到要手写一堆HTML和CSS，调那些该死的Flex和Grid布局，瞬间就头大了？这个提示词就是为你准备的，特别适合前端开发、全栈工程师或者想快速搞个MVP（最小可行性产品）的独立开发者。用它，你能让AI直接帮你把页面骨架和样式搭好，省去大量搬砖时间，让你把精力集中在核心业务逻辑上。
【操作步骤】
1. 复制下面这段提示词模板。
2. 把 {页面需求或设计描述} 替换成你的具体需求。记住，描述越细，AI写得越准。比如不要只说“写个登录页”，要说“一个带手机号验证码登录、密码登录切换、记住密码选项的深色风格登录页”。
3. 把 {使用的技术栈，如React+Tailwind} 换成你项目里实际用的技术，比如“Vue3 + Element Plus”或者“Next.js + Tailwind CSS”。
4. 把填好的提示词扔给AI，坐等它给你吐代码就行了。
【效果示例】
AI不仅会给你返回结构清晰的组件代码，还会自动帮你加上响应式设计的媒体查询。比如你让它写一个电商商品卡片，它会直接给你包含图片懒加载、价格高亮、加入购物车按钮悬浮动效的完美代码，甚至连空数据状态的占位图都帮你考虑到了，直接复制进项目稍微调下接口就能用。
【进阶技巧】
如果你对项目有严格的规范，可以在提示词最后加一句：“请严格遵循BEM命名规范，并且不要使用任何内联样式，所有样式必须写在独立的CSS模块中，同时加上详细的中文注释。” 这样生成的代码会更符合企业级项目的要求，后期交接或者自己复盘时看起来也舒服多了。