📐 结构层（HTML）
明确要求AI只输出符合W3C标准的HTML5语义化骨架，不混入任何CSS或JS代码。
清晰指定页面的所有区块、标签类型、核心内容占位，比如header、main、article等语义化标签的排布。
补充约束：禁止用纯div堆砌结构，所有内容节点必须有明确的语义含义。
🎨 渲染层（CSS）
明确要求AI基于已生成的HTML结构，单独输出纯CSS样式代码，不修改原有HTML标签。
精准指定配色色值、布局方案（Flex/Grid）、字体层级、间距规范，禁用!important和非指定单位。
补充约束：禁止使用绝对定位破坏流式布局，所有样式必须内联在style标签中，不引入外部CSS资源。
⚙️ 行为层（JavaScript）
明确要求AI基于已有的HTML+CSS页面，单独输出原生JS交互逻辑，不改动结构和样式代码。
清晰指定交互触发条件、执行效果、边界状态，比如点击事件、滚动动画、表单校验的具体规则。
补充约束：禁止引入jQuery等第三方库，所有逻辑必须兼容Chrome/Edge主流浏览器。
✅ 完整实战提示词模板示例
text
你是一位精通现代前端规范的资深工程师，严格按三层分离规则输出单文件HTML：
1. 结构层：用HTML5语义化标签搭建响应式首页骨架，包含导航栏、文章卡片区、侧边栏、页脚，只写内容节点，不写样式和逻辑
2. 渲染层：配套内联CSS，全局重置边距，用Flex布局实现响应式，配色仅用#2563eb、#f9fafb等指定色值
3. 行为层：用原生JS实现文章卡片点击高亮、回到顶部按钮滚动触发效果，不引入任何外部依赖
最终输出完整可直接运行的单文件HTML，三层代码边界清晰，互不侵入。