next.js 14 app router下生成可运行前端页面需三步：明确角色与渲染模式、定义最小文件结构（page.tsx/layout.tsx/favicon.ico）、绑定交互约束；并严格限制依赖、css方案及api调用范围。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要用ChatGPT快速生成一个可运行的前端页面，但每次提问后得到的代码要么缺HTML结构、要么没加交互逻辑、要么样式崩得没法看——根本不能直接粘贴进项目里跑起来。
让AI输出完整可运行页面的提示词结构
第一步：明确角色 + 框架 + 渲染模式
告诉AI它此刻是“Next.js 14 App Router环境下的全栈前端工程师”，不是泛泛而谈的“网页开发者”。这一步决定它是否默认启用server component、是否自动包裹layout.tsx、是否用use client标记交互逻辑。【不写明框架和渲染模式，AI大概率按纯HTML+内联JS返回，无法在现代React项目中直接使用】
第二步：定义最小可行结构
要求输出必须包含三个文件：app/page.tsx（主页面）、app/layout.tsx（根布局）、public/favicon.ico（占位图标）。哪怕只是空div也要显式写出文件路径和导出语法。这能强制AI按真实项目结构组织代码，避免返回一堆零散片段。
第三步：绑定具体交互约束
例如：“所有按钮点击需触发alert('提交成功')，且禁用原生表单提交行为”。AI看到“禁用原生表单提交”，就会主动加e.preventDefault()；看到“触发alert”，就知道必须写onClick事件处理器——而不是只画个静态按钮。
针对不同页面类型的精准提示词模板
方法一：产品落地页（带响应式+暗黑模式切换）
“你是一名专注SaaS产品的前端工程师，请用Next.js 14 App Router + Tailwind CSS v3.4生成一个单页产品落地页：含顶部导航栏（含logo、3个菜单项、登录按钮）、主标题区（含H1文案与CTA按钮）、功能亮点三栏（每栏含图标、小标题、简短描述）、底部版权栏。要求支持系统级暗黑模式检测，并在右上角放置切换开关。”
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
方法二：管理后台表格页（带筛选+分页）
“你正在为B2B SaaS后台开发用户管理页。请输出Next.js 14 App Router下的app/users/page.tsx文件：使用React Server Components获取模拟数据（5条用户记录，含id、name、email、status、createdAt），渲染为带表头的响应式表格；添加邮箱模糊搜索框（实时过滤）；底部显示‘第1页，共1页’分页信息（当前固定1页）。”
方法三：表单提交页（带Zod校验+Toast反馈）
“作为熟悉React Hook Form + Zod + shadcn/ui的前端工程师，请生成一个联系表单页面：字段含姓名（必填）、邮箱（格式校验）、消息（至少10字符）；提交成功后显示绿色Toast提示‘已发送’，失败时显示红色Toast‘发送失败，请重试’；所有UI组件使用shadcn/ui的Button、Input、Textarea、Form组件，禁用原生form submit事件。”
避开AI“幻觉”的关键约束写法
① 禁止虚构API或Hook
在提示词末尾加一句：“禁止调用任何未在Next.js 14官方文档中列出的Server Action、Client Component Hook或第三方库函数。所有代码必须能在pnpm create next-app --typescript创建的默认项目中直接运行。”
② 锁定CSS方案
写明“仅使用Tailwind CSS utility classes，禁用任意自定义CSS类名、style属性、CSS-in-JS库”。否则AI可能生成
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
