SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场Web Design Builder

Web Design Builder

前端与建站

查看项目

更新于 10-15 15:18

技能介绍

用途

Web Design Builder 用于根据规格说明或描述创建和重构 HTML5/JavaScript 网页设计。它可生成完整、可访问、响应式的网页设计，并在 Playwright MCP 可用时自动进行无障碍与功能验证。

主要能力

  • 根据规格或描述创建网页设计
  • 构建落地页、网站或 Web 应用
  • 创建设计模型或原型
  • 重构或改进现有 HTML/CSS/JavaScript 代码
  • 构建响应式 Web 界面
  • 创建组件库或设计系统
  • 生成符合 WCAG 的无障碍网页设计

使用方式

阶段一：需求收集

首先理解用户需求，包括设计范围（落地页、仪表盘、表单等）、目标受众与用例、所需功能、内容与文案、品牌颜色/字体/设计系统、响应式要求。技术偏好方面可确认框架选择：原生 HTML/CSS/JS、Tailwind CSS、React、Vue 或 Alpine.js，以及浏览器支持、无障碍要求和性能约束。

同时检查 Playwright MCP 是否可用。若不可用，会告知用户“Playwright MCP 未安装，设计验证将被跳过”，并提供安装说明，继续生成设计但跳过验证阶段。若可用，则告知“检测到 Playwright MCP，设计将自动验证”。

阶段二：设计生成

生成完整的 HTML/CSS/JS 模型，包括：

  • HTML 结构：语义化 HTML5 元素、正确的标题层级、ARIA 地标、可访问的表单标签与输入、图片替代文本、唯一页面标题。
  • CSS 样式：移动优先的响应式设计、CSS Grid 或 Flexbox 布局、CSS 自定义属性、平滑过渡与动画、打印样式、可选深色模式。
  • JavaScript 功能：渐进增强、可访问交互（键盘支持）、表单验证、动态内容加载、事件处理、错误处理。
  • 无障碍特性：至少 WCAG 2.1 AA 级合规、键盘导航支持、焦点指示器、屏幕阅读器友好、颜色对比度合规（最低 4.5:1）、跳转链接、必要的 ARIA 属性。

生成后将设计保存到文件，推荐结构为项目目录下包含 index.html、styles.css、script.js 和 assets 目录。模型可使用单文件 HTML（CSS/JS 内联），生产构建可使用分离文件。

阶段三：设计验证（仅在 Playwright MCP 可用时）

使用 Playwright MCP 打开设计，进行：

  • 无障碍测试：自动化无障碍扫描（WCAG 违规、颜色对比度、标题层级、ARIA 属性、表单标签、图片替代文本）、键盘导航测试（Tab 遍历、焦点指示器、Tab 顺序、Escape 键行为、无键盘陷阱）、屏幕阅读器兼容性检查。
  • 视觉测试：截取全页截图，测试移动端（375×667）、平板（768×1024）、桌面（1440×900）等响应式断点。
  • 功能测试：表单验证、交互组件（按钮、链接、模态框、下拉菜单、标签页、手风琴、轮播）、JavaScript 功能（事件处理、动态内容、控制台错误、渐进增强）。
  • 性能检查：加载时间、资源加载、瓶颈识别、CSS/JS 文件大小、图片优化、未使用代码检查。

阶段四：验证报告

生成综合报告，包含概述、无障碍合规情况、发现的问题及修复建议、视觉测试结果、功能测试结果、性能指标、优化机会和按优先级排列的建议。

阶段五：迭代与优化

根据验证结果修复关键问题、应用改进、重新验证，并交付最终设计（干净的生产就绪代码、文档、部署说明和验证报告）。

设计模式与最佳实践

  • 响应式设计：移动优先方法，使用媒体查询逐步增强。
  • 可访问表单：使用 label、aria-required、aria-describedby、role="alert" 等。
  • 交互组件：可访问模态框需管理焦点、焦点陷阱和焦点返回。

框架特定指南

  • Tailwind CSS：快速开发、一致设计系统、内置响应式工具，适合原型设计。
  • React：组件复用、虚拟 DOM 性能、大型生态，适合单页应用。
  • Alpine.js：轻量（15KB）、声明式语法、无需构建步骤，适合渐进增强。

MCP 设置说明

若 Playwright MCP 不可用，可提供安装说明：

方式一：通过 NPM（推荐）

npm install -g @playwright/mcp-server
claude code mcp add playwright

方式二：手动设置

创建 MCP 配置文件：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp-server"],
      "env": {}
    }
  }
}

重启 Claude Code 后，可通过 claude code mcp list 验证。

沟通风格

先澄清需求，提供上下文，展示进度，给出可操作的建议，并在 MCP 不可用时优雅处理。

交付物

  • 完整设计文件（HTML、CSS、JavaScript、资源、README）
  • 验证报告（若 MCP 可用）
  • 文档（组件使用指南、自定义说明、浏览器支持信息、部署指南）
  • 后续步骤建议

适用场景

适用于需要快速生成或重构网页设计的场景，尤其是对无障碍和响应式有要求的项目。

限制

  • 设计验证阶段仅在 Playwright MCP 可用时执行；不可用时跳过验证。
  • 具体收费、价格、平台等信息暂未提供。