从规格或描述生成可访问响应式网页设计并用…

当用户要求创建或重构 HTML5/JavaScript 网页设计（落地页、仪表盘、原型、组件库等）时，按需求收集、生成、验证、报告、迭代的流程产出可访问的响应式设计。

适用场景

解决思路

1. Phase 1 需求收集：明确设计范围，包括设计类型（落地页/仪表盘/表单等）、目标受众与用例、所需功能、内容文案（提供或占位）、品牌色/字体/设计系统、响应式要求（是否移动优先）。
2. Phase 1 技术偏好：确认框架偏好（Vanilla HTML/CSS/JS、Tailwind CSS、React、Vue、Alpine.js）、浏览器支持要求、可访问性要求（WCAG 等级）、性能约束。
3. Phase 1 检查 Playwright MCP 是否可用：查找 mcp__playwright__navigate、mcp__playwright__screenshot 等工具；若不可用则告知用户“Playwright MCP is not installed. Design verification will be skipped.”，提供安装说明，继续生成设计但跳过验证阶段并在输出中明确标注；若可用则告知用户“Playwright MCP detected. Design will be automatically verified.”并将验证纳入流程。
4. Phase 2 Step 1 生成设计稿：HTML 使用语义化 HTML5 元素、正确标题层级（h1 → h6）、ARIA landmarks（header、nav、main、aside、footer）、可访问的表单标签与输入、图片 alt 文本、唯一页面标题。
5. Phase 2 Step 1 CSS：移动优先响应式设计、使用 CSS Grid 或 Flexbox 布局、用 CSS 自定义属性（变量）做主题、平滑过渡与动画、必要时打印样式、可选暗色模式。
6. Phase 2 Step 1 JavaScript：渐进增强、可访问交互（键盘支持）、表单验证、动态内容加载、事件处理、错误处理。
7. Phase 2 Step 1 可访问性：至少满足 WCAG 2.1 Level AA、键盘导航支持、焦点指示器、屏幕阅读器友好、颜色对比度至少 4.5:1、跳转链接、必要时使用 ARIA 属性。
8. Phase 2 Step 2 保存设计到文件：推荐结构为 project-name/ 下含 index.html、styles.css、script.js、assets/images、assets/fonts；用 Write 工具创建文件，保存到用户当前目录或询问偏好位置，使用描述性文件名（如 landing-page.html、dashboard.html），mockup 用单文件内联 CSS/JS，生产构建用分离文件。
9. Phase 3（仅当 Playwright MCP 可用）Step 1 启动浏览器加载设计：用 mcp__playwright__navigate 打开本地 HTML 文件（如 file:///path/to/design.html）。
10. Phase 3 Step 2 可访问性测试：运行自动化可访问性扫描（检查 WCAG 违规、颜色对比度、标题层级、ARIA 属性、表单标签、图片 alt 文本）；键盘导航测试（Tab 遍历所有交互元素、验证焦点指示器可见、Tab 顺序合理、测试 Escape 键行为、确认无键盘陷阱）；屏幕阅读器兼容性（检查 ARIA landmarks、语义 HTML、动态内容播报、表单错误消息）。
11. Phase 3 Step 3 视觉测试：用 mcp__playwright__screenshot 截取整页截图（fullPage: true）；在 375x667（mobile）、768x1024（tablet）、1440x900（desktop）等断点用 mcp__playwright__setViewportSize 设置视口并分别截图。
12. Phase 3 Step 4 功能测试：表单验证（必填字段、输入校验、错误消息、成功状态）；交互组件（按钮与链接、模态与对话框、下拉与菜单、标签页与手风琴、轮播与滑块）；JavaScript 功能（事件处理器、动态内容加载、控制台错误、渐进增强）。
13. Phase 3 Step 5 性能检查：测量页面加载时间、检查资源加载、识别瓶颈；检查 CSS/JS 文件大小、验证图片优化、检查未使用的 CSS/JS。
14. Phase 4 生成验证报告：包含概览（设计类型、框架、验证日期、Playwright MCP 是否可用）、可访问性合规（WCAG 2.1 Level AA 各项 PASSED/WARNING/FAILED 及问题位置与修复建议）、视觉测试（各断点结果与截图）、功能测试（交互元素与 JavaScript 结果）、性能指标（加载时间、总文件大小、CSS/JS 大小）与优化机会、按高/中/低优先级排列的建议、后续步骤。
15. Phase 5 迭代与优化：修复所有关键问题（可访问性违规、功能损坏、布局问题）；应用建议的优化、根据反馈增强视觉设计、改进交互与动画；修复后重新验证并生成更新报告；交付最终设计（干净的生产级代码、文档、部署说明、验证报告）。
16. 遵循设计模式与最佳实践：响应式采用移动优先（基础样式为移动端，@media (min-width: 768px) 和 (min-width: 1024px) 逐步增强）；可访问表单使用 label 的 for 属性、required、aria-required、aria-describedby 关联错误、错误用 role="alert"；可访问模态框打开时记录 lastFocused、设置 aria-modal="true"、聚焦第一个可聚焦元素、trapFocus 陷阱焦点，关闭时恢复焦点。
17. 框架特定指南：Tailwind CSS 用 CDN 脚本并配置 tailwind.config 扩展主题色，使用响应式工具类；React 用 useState 管理状态、aria-expanded 等属性；Alpine.js 用 x-data、@click、x-show、x-transition 等声明式语法。
18. 若 Playwright MCP 不可用，提供安装说明：Option 1 通过 NPM 执行 npm install -g @playwright/mcp-server 然后 claude code mcp add playwright；Option 2 手动创建 MCP 配置文件（mcpServers.playwright 使用 npx @playwright/mcp-server）并重启 Claude Code；用 claude code mcp list 验证。
19. 沟通风格：先澄清需求（设计目标与约束、技术需求、框架偏好）；提供上下文（解释设计决策、框架选择理由、可访问性考量）；展示进度（生成设计时告知、验证时更新、增量分享发现）；保持可操作（提供具体修复、代码示例、备选方案）；优雅处理 MCP 不可用（明确说明跳过验证、提供手动测试指导与安装说明）。
20. 交付物：完整设计文件（HTML/CSS/JS、资源、含安装说明的 README）；验证报告（如 MCP 可用，含可访问性结果、截图、功能测试、性能指标、优先级建议）；文档（组件使用指南、自定义说明、浏览器支持、部署指南）；后续步骤（改进建议、测试建议、生产检查清单）。

适用边界 · 注意事项

• Playwright MCP 不可用时无法执行 Phase 3 自动验证，只能跳过验证并提供手动测试指导。
• 用户未提供或未确认设计需求、框架偏好、可访问性等级等关键信息时，不应直接开始生成。
• 需要生产级构建（如代码分割、打包优化）时，单文件 mockup 方式不适用，应使用分离文件结构。