响应式页面快速制作
Overview
快速制作单文件、零依赖的响应式 HTML 页面：以骨架模板为起点，按需套用已验证的核心自适应模式，经 QA 检查后交付。所有模式与默认值均来自 2026-10-16 生产环境验证的响应式测试页，直接复用，勿重新发明轮子。
Workflow
Step 1 — 明确页面需求
确认以下信息；用户未明确的项按默认值执行，不反问（仅当页面主题完全无法推断时，提一个问题）：
- 页面用途与主题（落地页 / 展示页 / 测试页 / 活动页）
- 内容区块（Hero、卡片区、数据表格、图集等）
- 品牌色与风格偏好
默认值：浅色主题 + 蓝紫主色、中文字体栈、单文件 HTML（内联 CSS/JS、零外部依赖）、交付到当前工作区。
Step 2 — 套用骨架模板
复制 assets/template.html 作为交付文件起点，按其中 <!-- TODO --> 注释替换标题、导航、文案与卡片内容。模板已内置：断点状态栏、sticky 导航（含汉堡菜单）、Hero 区、卡片网格 section、流体媒体块、页脚、SVG 图标符号集与全部基础 JS。
Step 3 — 按需套用核心模式
从 references/patterns.md 选用模式插入模板：
- 卡片网格（Grid 自动列）——模板已含，改
minmax()阈值即可 - 容器查询演示区、响应式表格、断点说明卡、流体媒体——按需从 patterns.md 拷贝对应代码段
- 每个模式附适用场景与完整可抄代码
Step 4 — QA 检查
- 运行
scripts/check_html.py <交付文件>校验标签配对，必须零错误 - 按
references/patterns.md末尾的「四档断点 QA 检查单」逐项验收 - 通用约定核查：
lang="zh-CN"、viewport meta、不用 emoji（除非用户明确要求）、触控目标 ≥44px、汉堡按钮带aria-expanded、:focus-visible样式、语义化标签（header/nav/main/section/footer）
Step 5 — 交付
用 present_files 展示 HTML 文件（自动打开实时预览面板），并告知用户验证方式：拖动窗口边缘，或按 F12 后用设备模拟（Ctrl+Shift+M）切换手机/平板/桌面尺寸。
Resources
assets/template.html— 单文件响应式骨架，复制为起点（含 TODO 标注）references/patterns.md— 核心自适应模式库 + 四档断点 QA 检查单 + 通用约定与反模式scripts/check_html.py— HTML 标签配对校验（用法：python check_html.py <file.html>，退出码 0 为通过）
