emergent ai生成前端页面需四要素：技术栈与环境约束、功能层模块逻辑、视觉层设计参数、数据层接口契约。缺一不可，否则代码无法集成或出错。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
Emergent AI 制作前端页面时，不是靠模糊描述或截图就能生成可用代码，它必须拿到明确、结构化、带约束的输入信息才能产出符合生产要求的页面。缺少任一关键字段，生成结果大概率无法直接集成进现有项目，甚至出现样式错乱、交互失效或框架不兼容。
核心四要素：技术栈与环境约束
第一步：明确指定前端框架及版本。例如写“Vue 3.4 + TypeScript + Pinia”，不能只说“用Vue”。【Vue 2 和 Vue 3 的 Composition API 写法完全不同，AI 若误判版本，生成的 setup() 函数会直接报错】
第二步：锁定样式方案。写清是 Tailwind CSS v4.0、UnoCSS、还是 Less + CSS Modules。若写“用好看的现代样式”，AI 会随机选用 utility class 或内联 style，导致后续团队无法维护。
第三步：声明运行环境要求。例如“需兼容 Chrome 115+、Safari 17.4、支持 PWA 离线缓存”。不写清楚，AI 可能默认启用 Safari 不支持的 :has() 选择器，或忽略 manifest.json 生成。
第四步：提供项目已有约定。比如“组件名全部 PascalCase，props 使用驼峰但绑定时用 kebab-case，API 请求统一走 useRequest 组合函数”。没这条，AI 生成的按钮组件可能叫 ButtonBase.vue，但团队规范要求叫 BaseButton.vue——名字错，CI 就会失败。
功能层：页面级模块与交互逻辑
方法一：按区块逐条列出功能模块
导航栏 → 支持移动端 hamburger 折叠 → 折叠后点击任意菜单项自动收起 → 当前路由高亮使用 active-class="text-blue-600"
轮播图 → 自动轮播间隔 5s → 暂停条件：鼠标悬停 / 手动切换 / 页面失焦 → 切换动画使用 transform: translateX()
产品卡片列表 → 每页 12 条 → 分页器显示“第 1 页，共 8 页” → 点击页码触发 fetchProducts(page)
联系表单 → 必填字段：姓名、邮箱、消息 → 邮箱验证用 RFC 5322 正则 → 提交后禁用按钮 2 秒防止重复提交
方法二：用伪代码定义关键交互流程
当用户点击「立即试用」按钮 → 触发 openModal('trial') → 弹窗内嵌 iframe 加载 https://trial.example.com/embed?utm_source=web → iframe 加载完成前显示 skeleton 骨架屏
前端设计质量提升 skill。让 AI 生成的 UI/前端代码更专业，避免常见设计反模式。 参考 impeccable 项目的设计语言规范，提供 audit/polish/critique 等设计审查命令。 触发词：/audit /polish /critique /colorize /animate /bold...
视觉层：设计还原硬性参数
主色调必须给 HEX 值，如 #1E40AF；禁止写“科技蓝”或“深一点的蓝色”。辅助色、文字灰度（#1F2937 用于正文，#6B7280 用于 secondary 文本）也要一一对应。
字体栈写成：font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif；不能只写“用无衬线体”。
间距系统必须量化：rem 基准为 16px，所有 padding/margin 使用 0.25rem、0.5rem、1rem、1.5rem 四档，禁用 px 或 em。
响应式断点固定为：sm: 640px、md: 768px、lg: 1024px、xl: 1280px。若项目实际用的是 320/768/1024/1440，AI 生成的 @media 查询会完全错位。
数据层：接口契约与 Mock 规则
第一步：给出真实接口 URL 和请求方式
GET /api/v1/products → 返回 { data: Product[], pagination: { total: number, page: number } }
POST /api/v1/contact → 请求体为 { name: string, email: string, message: string } → 成功返回 { success: true, id: string }
第二步：说明字段含义与边界值
Product 接口字段中，price 是 number 类型，单位为分（非元），需前端除以 100 后格式化为 ¥99.00；image_url 可为空，为空时渲染 placeholder SVG。
第三步：提供最小可用 Mock 数据结构（非示例 JSON）
mock/products.json 必须包含至少 3 条真实字段组合的数据，例如：name 字段含中文、英文、带括号的变体；price 出现 0、99、9999 三种量级；in_stock 字段 true/false 都要覆盖。AI 靠这个推导 TS interface，缺一种类型，生成的类型定义就会漏判。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
