要让Emergent AI页面生成器准确输出网页，提示词须明确页面类型、核心功能、交互逻辑和设计风格；模糊描述会导致结果偏离预期。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要让Emergent AI页面生成器准确输出你想要的网页结构和视觉效果，提示词必须明确指定页面类型、核心功能模块、交互逻辑和设计风格，模糊描述会导致生成结果偏离预期。
明确页面类型与核心目标
第一步：在提示词开头用一句话定义页面本质，例如“一个面向自由职业者的个人作品集落地页”或“面向中小企业的SaaS产品定价页”。不能写“一个好看的网页”，这会让模型陷入主观审美判断，生成结果不可控。
第二步：紧接着说明该页面要解决的具体用户问题，比如“让用户3秒内找到可预约的设计师联系方式”或“让访客快速对比三档套餐的核心权限差异”。没有这个目标锚点，AI容易堆砌装饰性元素而忽略信息效率。
结构化描述内容区块
方法一：用带编号的区块清单描述页面从上到下的视觉流：
① 顶部固定导航栏：含Logo左对齐、3个主菜单项（首页/作品/联系）、右上角悬浮按钮“立即咨询”；
② 首屏主标题区：大号无衬线字体，主标题“专注UI动效设计8年”，副标题“为产品注入呼吸感”，下方两个按钮“查看案例→”“预约15分钟免费诊断”；
③ 案例展示区：3列响应式卡片，每张卡片含缩略图+项目名称+1行技术标签（如Framer Motion / Lottie）；
④ 底部联系表单：仅保留姓名、邮箱、需求简述三个字段，提交按钮文字为“发送需求，24小时内回复”。
方法二：用HTML语义标签辅助定位（适合有基础前端知识的用户）：
在提示词中写明“header区域需包含nav标签，内部用ul/li实现横向菜单；main区域第一个section为hero，使用h1+h2+div.btn-group结构；后续section用article包裹每个案例卡片”。AI会更倾向生成符合标准DOM结构的代码，减少后期调整成本。
menu.js是一款Material Design风格的jquery下拉菜单插件。通过menu.js插件，你可以非常轻松的制作出Material Design风格的下拉菜单或下拉列表。 使用方法 在页面中引入样式文件menu.css和jquery.min.js、menu.js文件。
约束设计风格与交互细节
直接写清视觉关键词，避免抽象形容词。写“采用深灰#2D3748背景 + 青柠绿#A8E6CF主色 + 圆角卡片 + 微 投影”，比写“现代简约风格”有效十倍。颜色值、圆角数值、阴影参数越具体，CSS输出越接近预期。
交互行为必须单独说明。例如：“鼠标悬停在案例卡片上时，图片向上平移10px且叠加半透明遮罩，同时显示‘查看详情’按钮”——如果不写，AI默认所有元素静态呈现，无法触发:hover伪类。
【关键前提】 所有交互描述必须基于CSS原生能力，不要写“点击后弹出3D旋转动画”，Emergent AI当前不支持Three.js或GSAP集成，这类指令会导致生成无效代码或报错。
提供参考样本链接（可选但强烈推荐）
在提示词末尾添加一句：“参考Dribbble上ID为@designer_x的‘Portfolio V2’作品视觉节奏与留白密度”，AI会将该页面的间距比例、字体层级关系、色彩饱和度作为隐式约束，显著提升生成稿的专业感。注意：链接必须是公开可访问的静态页面，不能是登录后才能看的后台界面。
