Web Design Builder - 专业HTML5/JavaScript网页设计与自动验证工具

Web Design Builder by rknall/claude-skills

33 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/rknall/claude-skills --skill 'Web Design Builder'

开发自动化设计

🇨🇳中文介绍

Web Design Builder

此技能根据规范创建专业的 HTML5/JavaScript 网页设计，并使用 Playwright MCP 进行自动可访问性和功能验证。

何时使用此技能

当用户请求以下内容时激活此技能：

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

核心工作流程

阶段 1：需求收集

当用户请求网页设计时，首先了解他们的需求：

明确设计范围
- 什么类型的设计？（落地页、仪表板、表单等）
- 目标受众和用例
- 所需的功能和特性
- 内容和文案（提供还是占位符？）
- 品牌颜色、字体或设计系统
- 响应式要求（移动优先？）
技术偏好
- 框架偏好：
  - 原生 HTML/CSS/JS（简单，无依赖）
  - Tailwind CSS（实用优先，推荐用于快速开发）
  - React（基于组件，适用于复杂交互）
  - Vue（渐进式框架）
  - Alpine.js（轻量级响应式）
- 浏览器支持要求
- 可访问性要求（WCAG 级别）
- 性能限制

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

阶段 2：设计生成

步骤 1：创建设计模型

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

语义化的 HTML5 元素
正确的标题层级（h1 → h6）
ARIA 地标（header, nav, main, aside, footer）
无障碍的表单标签和输入框
图像的替代文本
唯一的页面标题

响应式设计（移动优先）
用于布局的 CSS Grid 或 Flexbox
用于主题化的自定义属性（CSS 变量）
平滑的过渡和动画
打印样式（如果适用）
深色模式支持（可选）

JavaScript 功能：

渐进增强
无障碍交互（键盘支持）
表单验证
动态内容加载
事件处理
错误处理

可访问性特性：

至少符合 WCAG 2.1 AA 级标准
键盘导航支持
焦点指示器
屏幕阅读器友好
颜色对比度合规（至少 4.5:1）
跳过链接
需要时的 ARIA 属性

示例输出结构：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
  <style>
    /* 使用自定义属性的现代 CSS */
    :root {
      --primary-color: #0066cc;
      --text-color: #1a1a1a;
      --bg-color: #ffffff;
      --spacing: 1rem;
    }

    /* 重置和基础样式 */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      line-height: 1.6;
      color: var(--text-color);
      background: var(--bg-color);
    }

    /* 响应式布局 */
    @media (max-width: 768px) {
      /* 移动端样式 */
    }
  </style>
</head>
<body>
  <!-- 无障碍跳过链接 -->
  <a href="#main-content" class="skip-link">Skip to main content</a>

  <!-- 语义化结构 -->
  <header role="banner">
    <nav aria-label="Main navigation">
      <!-- 导航 -->
    </nav>
  </header>

  <main id="main-content" role="main">
    <!-- 主要内容 -->
  </main>

  <footer role="contentinfo">
    <!-- 页脚 -->
  </footer>

  <script>
    // 渐进增强的 JavaScript
    (function() {
      'use strict';

      // 功能检测
      if (!('querySelector' in document)) return;

      // 你的 JavaScript 代码
    })();
  </script>
</body>
</html>

步骤 2：保存设计到文件

将生成的设计保存到文件：

// 推荐的文件结构
project-name/
  index.html         // 主 HTML 文件
  styles.css         // 单独的 CSS 文件（如果需要）
  script.js          // 单独的 JS 文件（如果需要）
  assets/
    images/          // 图像资源
    fonts/           // 自定义字体

使用 Write 工具创建文件：

保存到用户的当前目录或询问首选位置
使用描述性文件名（例如 landing-page.html, dashboard.html）
为模型创建单文件 HTML（CSS/JS 内联）
为生产构建创建单独的文件

阶段 3：设计验证（仅当 Playwright MCP 可用时）

重要提示：仅当在阶段 1 中检测到 Playwright MCP 时才执行此阶段。

步骤 1：启动浏览器并加载设计

使用 Playwright MCP 打开设计：

// 导航到本地 HTML 文件
await mcp__playwright__navigate({
  url: 'file:///path/to/design.html'
});

步骤 2：可访问性测试

运行全面的可访问性检查：

自动化可访问性扫描
- 检查 WCAG 违规
- 验证颜色对比度比率
- 检查标题层级
- 验证 ARIA 属性
- 检查表单标签
- 验证图像的替代文本
键盘导航测试
- 通过 Tab 键遍历所有交互元素
- 验证焦点指示器是否可见
- 检查 Tab 键顺序是否合理
- 测试 Escape 键行为（模态框、下拉菜单）
- 验证没有键盘陷阱
屏幕阅读器兼容性
- 检查 ARIA 地标
- 验证语义化 HTML 的使用
- 检查动态内容播报
- 验证表单错误消息

步骤 3：视觉测试

捕获截图并验证布局：

// 截取全页截图
await mcp__playwright__screenshot({
  fullPage: true,
  path: 'design-screenshot.png'
});

// 测试响应式断点
const breakpoints = [
  { width: 375, height: 667, name: 'mobile' },
  { width: 768, height: 1024, name: 'tablet' },
  { width: 1440, height: 900, name: 'desktop' }
];

for (const bp of breakpoints) {
  await mcp__playwright__setViewportSize({
    width: bp.width,
    height: bp.height
  });

  await mcp__playwright__screenshot({
    path: `design-${bp.name}.png`
  });
}

步骤 4：功能测试

测试交互元素：

表单验证
- 测试必填字段
- 测试输入验证
- 测试错误消息
- 测试成功状态
交互组件
- 测试按钮和链接
- 测试模态框和对话框
- 测试下拉菜单和菜单
- 测试选项卡和手风琴
- 测试轮播图和滑块
JavaScript 功能
- 验证事件处理程序是否工作
- 测试动态内容加载
- 检查控制台是否有错误
- 验证渐进增强

步骤 5：性能检查

评估性能指标：

加载时间
- 测量页面加载时间
- 检查资源加载
- 识别瓶颈
资源优化
- 检查 CSS 文件大小
- 检查 JavaScript 文件大小
- 验证图像优化
- 检查未使用的 CSS/JS

阶段 4：验证报告

生成全面的报告：

# Design Verification Report

## 概述
- **设计类型**: [Landing Page / Dashboard / etc.]
- **框架**: [Vanilla / Tailwind / React / etc.]
- **验证日期**: [Date]
- **Playwright MCP**: [Available / Not Available]

## 可访问性合规性

### WCAG 2.1 Level AA
✅ **通过**: 颜色对比度（至少 4.5:1）
✅ **通过**: 键盘导航
✅ **通过**: 语义化 HTML 结构
⚠️  **警告**: 2 张图像缺少替代文本
❌ **失败**: 表单缺少关联标签

### 发现的问题
1. **高优先级**: 表单输入框 #email 缺少标签
   - 位置: 第 45 行
   - 修复: 添加 `<label for="email">Email</label>`

2. **中优先级**: 图像缺少替代文本
   - 位置: 第 78 行
   - 修复: 添加 `alt="Description of image"`

## 视觉测试

### 响应式断点
✅ **移动端 (375px)**: 布局渲染正确
✅ **平板 (768px)**: 布局渲染正确
✅ **桌面端 (1440px)**: 布局渲染正确

### 截图
- [x] 全页截图已保存
- [x] 移动端截图已保存
- [x] 平板截图已保存
- [x] 桌面端截图已保存

## 功能测试

### 交互元素
✅ 导航菜单工作正常
✅ 表单提交工作正常
✅ 模态框可以打开和关闭
⚠️  关闭模态框后焦点未返回到触发器

### JavaScript
✅ 控制台无错误
✅ 事件处理程序工作正常
✅ 已实现渐进增强

## 性能

### 指标
- **页面加载时间**: 1.2s
- **总文件大小**: 45KB
- **CSS 大小**: 12KB
- **JavaScript 大小**: 8KB

### 优化机会
- 考虑压缩 CSS（可能减少 30%）
- 延迟加载首屏以下的图像
- 考虑对 JavaScript 进行代码分割

## 建议

### 高优先级
1. 修复表单标签关联
2. 为图像添加缺失的替代文本
3. 为模态框实现焦点管理

### 中优先级
1. 为生产环境压缩 CSS 和 JavaScript
2. 为动态内容添加加载状态
3. 为 JavaScript 实现错误边界

### 低优先级
1. 添加深色模式支持
2. 通过减少运动支持增强动画
3. 添加打印样式

## 后续步骤

1. 审查并修复高优先级问题
2. 修复后重新运行验证
3. 使用实际屏幕阅读器测试
4. 进行用户测试
5. 部署到暂存环境

阶段 5：迭代和优化

根据验证结果：

修复关键问题
- 解决所有可访问性违规
- 修复损坏的功能
- 解决布局问题
应用改进
- 实施推荐的优化
- 根据反馈增强视觉设计
- 优化交互和动画
重新验证
- 修复后再次运行验证
- 确保所有问题都已解决
- 生成更新后的报告
交付最终设计
- 提供干净、可用于生产的代码
- 包含文档
- 提供部署说明
- 分享验证报告

设计模式与最佳实践

移动优先方法：

/* 移动端基础样式 */
.container {
  padding: 1rem;
}

/* 平板及以上 */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 960px;
    margin: 0 auto;
  }
}

/* 桌面端及以上 */
@media (min-width: 1024px) {
  .container {
    padding: 3rem;
    max-width: 1200px;
  }
}

<form class="contact-form">
  <div class="form-field">
    <label for="name">
      Name <span aria-label="required">*</span>
    </label>
    <input
      type="text"
      id="name"
      name="name"
      required
      aria-required="true"
      aria-describedby="name-error"
    />
    <span id="name-error" class="error" role="alert" hidden>
      Please enter your name
    </span>
  </div>
</form>

无障碍模态框：

function openModal(modalId) {
  const modal = document.getElementById(modalId);
  const lastFocused = document.activeElement;

  modal.hidden = false;
  modal.setAttribute('aria-modal', 'true');

  // 聚焦第一个可聚焦元素
  const firstFocusable = modal.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
  firstFocusable?.focus();

  // 存储最后聚焦的元素以便返回
  modal.dataset.lastFocused = lastFocused;

  // 焦点陷阱
  trapFocus(modal);
}

function closeModal(modalId) {
  const modal = document.getElementById(modalId);
  modal.hidden = true;

  // 返回焦点
  const lastFocused = document.querySelector(`[data-last-focused="${modal.id}"]`);
  lastFocused?.focus();
}

快速开发
一致的设计系统
内置响应式工具
非常适合原型设计

<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          primary: '#0066cc',
        }
      }
    }
  }
</script>

<div class="container mx-auto px-4">
  <h1 class="text-4xl font-bold text-gray-900 mb-4">
    Welcome
  </h1>
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Click Me
  </button>
</div>

组件可重用性
虚拟 DOM 性能
庞大的生态系统
非常适合 SPA

function DesignComponent() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <div className="container">
      <button
        onClick={() => setIsOpen(!isOpen)}
        aria-expanded={isOpen}
      >
        Toggle
      </button>
      {isOpen && (
        <div className="content">
          Content here
        </div>
      )}
    </div>
  );
}

轻量级（15KB）
声明式语法
无需构建步骤
非常适合渐进增强

<div x-data="{ open: false }">
  <button @click="open = !open" :aria-expanded="open">
    Toggle
  </button>
  <div x-show="open" x-transition>
    Content here
  </div>
</div>

如果 Playwright MCP 不可用，请向用户提供以下说明：

安装 Playwright MCP

选项 1：通过 NPM（推荐）

# 安装 Playwright MCP 服务器
npm install -g @playwright/mcp-server

# 在 Claude Code 中配置
claude code mcp add playwright

选项 2：手动设置

创建 MCP 配置文件：

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

2. 重启 Claude Code

验证：安装后，验证 Playwright MCP 是否正常工作：

# 检查 MCP 服务器
claude code mcp list

你应该在可用 MCP 服务器列表中看到 playwright。

与用户合作时：

首先明确需求
- 询问设计目标和约束
- 理解技术要求
- 确认框架偏好
提供上下文
- 解释设计决策
- 论证框架选择
- 描述可访问性考虑
展示进度
- 生成设计时通知
- 验证期间更新（如果 MCP 可用）
- 逐步分享发现
提供可操作的建议
- 为问题提供具体的修复方案
- 包含代码示例
- 在适当时提供替代方案
优雅处理 MCP 不可用的情况
- 明确说明何时跳过验证
- 提供手动测试指导
- 提供安装说明

在设计过程结束时，提供：

完整的设计文件
- HTML、CSS、JavaScript 文件
- 资源（如果有）
- 包含设置说明的 README
验证报告（如果 MCP 可用）
- 可访问性合规结果
- 视觉测试截图
- 功能测试结果
- 性能指标
- 优先级建议
文档
- 组件使用指南
- 自定义说明
- 浏览器支持信息
- 部署指南
后续步骤
- 建议的改进
- 测试建议
- 生产清单

"为 SaaS 产品创建一个落地页，包含英雄区域、功能、定价和联系表单。"

明确需求：
- "我将创建一个现代的 SaaS 落地页。有几个问题：
  - 您有品牌颜色吗？还是我应该使用专业的默认调色板？
  - 框架偏好？我推荐 Tailwind CSS 用于快速开发。
  - 有任何需要突出显示的具体功能吗？
  - 需要哪些联系表单字段？"
检查 Playwright MCP：
- "正在检查 Playwright MCP... 未检测到。将跳过设计验证。您需要安装说明吗？"
生成设计：
- 创建完整的 HTML/CSS/JS 文件
- 包含英雄区域、功能、定价、联系表单
- 使其具有响应性和可访问性
- 保存到 saas-landing-page.html
手动验证指南（由于 MCP 不可用）：
- 提供手动测试清单
- 分享可访问性测试工具
- 建议浏览器测试方法
交付：
- 分享完整的设计文件
- 提供自定义指南
- 如果需要，提供迭代支持

记住：目标是创建美观、无障碍、功能完善的网页设计，为所有用户服务，并在可能的情况下进行自动验证！

🇺🇸English

Web Design Builder

This skill creates professional HTML5/JavaScript web designs from specifications, with automatic accessibility and functionality verification using Playwright MCP.

When to Use This Skill

Activate this skill when the user requests:

Create a web design from a specification or description
Build a landing page, website, or web application
Create a design mockup or prototype
Refactor or improve existing HTML/CSS/JavaScript code
Build responsive web interfaces
Create component libraries or design systems
Generate accessible web designs with WCAG compliance

Core Workflow

Phase 1: Requirements Gathering

When a user requests a web design, start by understanding their needs:

Clarify the Design Scope
- What type of design? (landing page, dashboard, form, etc.)
- Target audience and use case
- Required features and functionality
- Content and copy (provided or placeholder?)
- Brand colors, fonts, or design system
- Responsive requirements (mobile-first?)
Technical Preferences
- Framework preference:
  - Vanilla HTML/CSS/JS (simple, no dependencies)
  - Tailwind CSS (utility-first, recommended for rapid development)
  - React (component-based, for complex interactions)
  - Vue (progressive framework)
  - Alpine.js (lightweight reactivity)
- Browser support requirements
- Accessibility requirements (WCAG level)
- Performance constraints
Check Playwright MCP Availability

IMPORTANT : Before starting the design process, check if Playwright MCP is available:

    // Check if mcp__playwright tools are available
// Look for tools like: mcp__playwright__navigate, mcp__playwright__screenshot, etc.

If Playwright MCP is NOT available:

 * Inform the user: "Playwright MCP is not installed. Design verification will be skipped."
 * Provide installation instructions (see MCP Setup section below)
 * Continue with design generation but skip verification phase
 * Mark this clearly in the output

If Playwright MCP IS available:

 * Inform the user: "Playwright MCP detected. Design will be automatically verified."
 * Include verification in the workflow

Phase 2: Design Generation

Step 1: Create Design Mockup

Generate a complete HTML/CSS/JS mockup including:

HTML Structure:

Semantic HTML5 elements
Proper heading hierarchy (h1 → h6)
ARIA landmarks (header, nav, main, aside, footer)
Accessible form labels and inputs
Alt text for images
Unique page title

CSS Styling:

Responsive design (mobile-first)
CSS Grid or Flexbox for layouts
Custom properties (CSS variables) for theming
Smooth transitions and animations
Print styles (if applicable)
Dark mode support (optional)

JavaScript Functionality:

Progressive enhancement
Accessible interactions (keyboard support)
Form validation
Dynamic content loading
Event handling
Error handling

Accessibility Features:

WCAG 2.1 Level AA compliance minimum
Keyboard navigation support
Focus indicators
Screen reader friendly
Color contrast compliance (4.5:1 minimum)
Skip links
ARIA attributes where needed

Example Output Structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
  <style>
    /* Modern CSS with custom properties */
    :root {
      --primary-color: #0066cc;
      --text-color: #1a1a1a;
      --bg-color: #ffffff;
      --spacing: 1rem;
    }

    /* Reset and base styles */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      line-height: 1.6;
      color: var(--text-color);
      background: var(--bg-color);
    }

    /* Responsive layout */
    @media (max-width: 768px) {
      /* Mobile styles */
    }
  </style>
</head>
<body>
  <!-- Accessible skip link -->
  <a href="#main-content" class="skip-link">Skip to main content</a>

  <!-- Semantic structure -->
  <header role="banner">
    <nav aria-label="Main navigation">
      <!-- Navigation -->
    </nav>
  </header>

  <main id="main-content" role="main">
    <!-- Main content -->
  </main>

  <footer role="contentinfo">
    <!-- Footer -->
  </footer>

  <script>
    // Progressive enhancement JavaScript
    (function() {
      'use strict';

      // Feature detection
      if (!('querySelector' in document)) return;

      // Your JavaScript here
    })();
  </script>
</body>
</html>

Step 2: Save Design to File

Save the generated design to a file:

// Recommended file structure
project-name/
  index.html         // Main HTML file
  styles.css         // Separate CSS (if needed)
  script.js          // Separate JS (if needed)
  assets/
    images/          // Image assets
    fonts/           // Custom fonts

Use the Write tool to create the file:

Save to user's current directory or ask for preferred location
Use descriptive filename (e.g., landing-page.html, dashboard.html)
Create single-file HTML for mockups (CSS/JS inline)
Create separate files for production builds

Phase 3: Design Verification (ONLY if Playwright MCP is available)

IMPORTANT : Only execute this phase if Playwright MCP was detected in Phase 1.

Step 1: Launch Browser and Load Design

Use Playwright MCP to open the design:

// Navigate to the local HTML file
await mcp__playwright__navigate({
  url: 'file:///path/to/design.html'
});

Step 2: Accessibility Testing

Run comprehensive accessibility checks:

Automated Accessibility Scan
- Check for WCAG violations
- Verify color contrast ratios
- Check heading hierarchy
- Verify ARIA attributes
- Check form labels
- Verify alt text on images
Keyboard Navigation Test
- Tab through all interactive elements
- Verify focus indicators are visible
- Check tab order is logical
- Test Escape key behavior (modals, dropdowns)
- Verify no keyboard traps
Screen Reader Compatibility
- Check ARIA landmarks
- Verify semantic HTML usage
- Check dynamic content announcements
- Verify form error messages

Step 3: Visual Testing

Capture screenshots and verify layout:

// Take full-page screenshot
await mcp__playwright__screenshot({
  fullPage: true,
  path: 'design-screenshot.png'
});

// Test responsive breakpoints
const breakpoints = [
  { width: 375, height: 667, name: 'mobile' },
  { width: 768, height: 1024, name: 'tablet' },
  { width: 1440, height: 900, name: 'desktop' }
];

for (const bp of breakpoints) {
  await mcp__playwright__setViewportSize({
    width: bp.width,
    height: bp.height
  });

  await mcp__playwright__screenshot({
    path: `design-${bp.name}.png`
  });
}

Step 4: Functionality Testing

Test interactive elements:

Form Validation
- Test required fields
- Test input validation
- Test error messages
- Test success states
Interactive Components
- Test buttons and links
- Test modals and dialogs
- Test dropdowns and menus
- Test tabs and accordions
- Test carousels and sliders
JavaScript Functionality
- Verify event handlers work
- Test dynamic content loading
- Check console for errors
- Verify progressive enhancement

Step 5: Performance Check

Evaluate performance metrics:

Load Time
- Measure page load time
- Check resource loading
- Identify bottlenecks
Resource Optimization
- Check CSS file size
- Check JavaScript file size
- Verify image optimization
- Check for unused CSS/JS

Phase 4: Verification Report

Generate a comprehensive report:

# Design Verification Report

## Overview
- **Design Type**: [Landing Page / Dashboard / etc.]
- **Framework**: [Vanilla / Tailwind / React / etc.]
- **Verification Date**: [Date]
- **Playwright MCP**: [Available / Not Available]

## Accessibility Compliance

### WCAG 2.1 Level AA
✅ **PASSED**: Color contrast (4.5:1 minimum)
✅ **PASSED**: Keyboard navigation
✅ **PASSED**: Semantic HTML structure
⚠️  **WARNING**: Missing alt text on 2 images
❌ **FAILED**: Form missing associated labels

### Issues Found
1. **HIGH**: Form input #email missing label
   - Location: Line 45
   - Fix: Add `<label for="email">Email</label>`

2. **MEDIUM**: Image missing alt text
   - Location: Line 78
   - Fix: Add `alt="Description of image"`

## Visual Testing

### Responsive Breakpoints
✅ **Mobile (375px)**: Layout renders correctly
✅ **Tablet (768px)**: Layout renders correctly
✅ **Desktop (1440px)**: Layout renders correctly

### Screenshots
- [x] Full page screenshot saved
- [x] Mobile screenshot saved
- [x] Tablet screenshot saved
- [x] Desktop screenshot saved

## Functionality Testing

### Interactive Elements
✅ Navigation menu works
✅ Form submission works
✅ Modal opens and closes
⚠️  Focus not returned to trigger after modal close

### JavaScript
✅ No console errors
✅ Event handlers working
✅ Progressive enhancement implemented

## Performance

### Metrics
- **Page Load Time**: 1.2s
- **Total File Size**: 45KB
- **CSS Size**: 12KB
- **JavaScript Size**: 8KB

### Optimization Opportunities
- Consider minifying CSS (potential 30% reduction)
- Lazy load images below the fold
- Consider code splitting for JavaScript

## Recommendations

### High Priority
1. Fix form label associations
2. Add missing alt text to images
3. Implement focus management for modal

### Medium Priority
1. Minify CSS and JavaScript for production
2. Add loading states for dynamic content
3. Implement error boundaries for JavaScript

### Low Priority
1. Add dark mode support
2. Enhance animations with reduced motion support
3. Add print styles

## Next Steps

1. Review and fix high-priority issues
2. Re-run verification after fixes
3. Test with actual screen readers
4. Conduct user testing
5. Deploy to staging environment

Phase 5: Iteration and Refinement

Based on verification results:

Fix Critical Issues
- Address all accessibility violations
- Fix broken functionality
- Resolve layout issues
Apply Improvements
- Implement recommended optimizations
- Enhance visual design based on feedback
- Refine interactions and animations
Re-verify
- Run verification again after fixes
- Ensure all issues are resolved
- Generate updated report
Deliver Final Design
- Provide clean, production-ready code
- Include documentation
- Provide deployment instructions
- Share verification report

Design Patterns & Best Practices

Responsive Design

Mobile-First Approach:

/* Base styles for mobile */
.container {
  padding: 1rem;
}

/* Tablet and up */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 960px;
    margin: 0 auto;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .container {
    padding: 3rem;
    max-width: 1200px;
  }
}

Accessible Forms

<form class="contact-form">
  <div class="form-field">
    <label for="name">
      Name <span aria-label="required">*</span>
    </label>
    <input
      type="text"
      id="name"
      name="name"
      required
      aria-required="true"
      aria-describedby="name-error"
    />
    <span id="name-error" class="error" role="alert" hidden>
      Please enter your name
    </span>
  </div>
</form>

Interactive Components

Accessible Modal:

function openModal(modalId) {
  const modal = document.getElementById(modalId);
  const lastFocused = document.activeElement;

  modal.hidden = false;
  modal.setAttribute('aria-modal', 'true');

  // Focus first focusable element
  const firstFocusable = modal.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
  firstFocusable?.focus();

  // Store last focused for return
  modal.dataset.lastFocused = lastFocused;

  // Trap focus
  trapFocus(modal);
}

function closeModal(modalId) {
  const modal = document.getElementById(modalId);
  modal.hidden = true;

  // Return focus
  const lastFocused = document.querySelector(`[data-last-focused="${modal.id}"]`);
  lastFocused?.focus();
}

Framework-Specific Guidelines

Tailwind CSS

Pros:

Rapid development
Consistent design system
Built-in responsive utilities
Excellent for prototyping

Setup:

<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          primary: '#0066cc',
        }
      }
    }
  }
</script>

Example:

<div class="container mx-auto px-4">
  <h1 class="text-4xl font-bold text-gray-900 mb-4">
    Welcome
  </h1>
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Click Me
  </button>
</div>

React

Pros:

Component reusability
Virtual DOM performance
Large ecosystem
Great for SPAs

Example:

function DesignComponent() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <div className="container">
      <button
        onClick={() => setIsOpen(!isOpen)}
        aria-expanded={isOpen}
      >
        Toggle
      </button>
      {isOpen && (
        <div className="content">
          Content here
        </div>
      )}
    </div>
  );
}

Alpine.js

Pros:

Lightweight (15KB)
Declarative syntax
No build step needed
Good for progressive enhancement

Example:

<div x-data="{ open: false }">
  <button @click="open = !open" :aria-expanded="open">
    Toggle
  </button>
  <div x-show="open" x-transition>
    Content here
  </div>
</div>

MCP Setup Instructions

If Playwright MCP is not available, provide these instructions to the user:

Installing Playwright MCP

Option 1: Via NPM (Recommended)

# Install Playwright MCP server
npm install -g @playwright/mcp-server

# Configure in Claude Code
claude code mcp add playwright

Option 2: Manual Setup

Create MCP configuration file:

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

2. Restart Claude Code

Verification: After installation, verify Playwright MCP is working:

# Check MCP servers
claude code mcp list

You should see playwright in the list of available MCP servers.

Communication Style

When working with users:

Clarify Requirements First
- Ask about design goals and constraints
- Understand technical requirements
- Confirm framework preferences
Provide Context
- Explain design decisions
- Justify framework choices
- Describe accessibility considerations
Show Progress
- Inform when generating design
- Update during verification (if MCP available)
- Share findings incrementally
Be Actionable
- Provide specific fixes for issues
- Include code examples
- Offer alternatives when appropriate
Handle MCP Unavailability Gracefully
- Clearly state when verification is skipped
- Provide manual testing guidance
- Offer installation instructions

Deliverables

At the end of the design process, provide:

Complete Design Files
- HTML, CSS, JavaScript files
- Assets (if any)
- README with setup instructions
Verification Report (if MCP available)
- Accessibility compliance results
- Visual testing screenshots
- Functionality test results
- Performance metrics
- Prioritized recommendations
Documentation
- Component usage guide
- Customization instructions
- Browser support information
- Deployment guidelines
Next Steps
- Suggested improvements
- Testing recommendations
- Production checklist

Example Workflow

User Request:

"Create a landing page for a SaaS product with a hero section, features, pricing, and contact form."

Your Response:

Clarify Requirements:
- "I'll create a modern SaaS landing page. A few questions:
  - Do you have brand colors or should I use a professional default palette?
  - Framework preference? I recommend Tailwind CSS for rapid development.
  - Any specific features to highlight?
  - Contact form fields needed?"
Check Playwright MCP:
- "Checking for Playwright MCP... Not detected. Design verification will be skipped. Would you like installation instructions?"
Generate Design:
- Create complete HTML/CSS/JS file
- Include hero, features, pricing, contact form
- Make it responsive and accessible
- Save to saas-landing-page.html
Manual Verification Guide (since MCP not available):
- Provide checklist for manual testing
- Share accessibility testing tools
- Suggest browser testing approach
Deliver:
- Share complete design file
- Provide customization guide
- Offer iteration if needed

Remember: The goal is to create beautiful, accessible, functional web designs that work for all users, with automatic verification when possible!

Weekly Installs

–

Repository

rknall/claude-skills

GitHub Stars

First Seen

–

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试

144,300 周安装

Web Design Builder - 专业HTML5/JavaScript网页设计与自动验证工具

🇨🇳中文介绍

Web Design Builder

何时使用此技能

核心工作流程

阶段 1：需求收集

相关 Skills

阶段 2：设计生成

步骤 1：创建设计模型

步骤 2：保存设计到文件

阶段 3：设计验证（仅当 Playwright MCP 可用时）

步骤 1：启动浏览器并加载设计

步骤 2：可访问性测试

步骤 3：视觉测试

步骤 4：功能测试

步骤 5：性能检查

阶段 4：验证报告

阶段 5：迭代和优化

设计模式与最佳实践

响应式设计

无障碍表单

交互组件

框架特定指南

Tailwind CSS

React

Alpine.js

MCP 设置说明

安装 Playwright MCP

沟通风格

交付成果

示例工作流程

🇺🇸English

Web Design Builder

When to Use This Skill

Core Workflow

Phase 1: Requirements Gathering

Phase 2: Design Generation

Step 1: Create Design Mockup

Step 2: Save Design to File

Phase 3: Design Verification (ONLY if Playwright MCP is available)

Step 1: Launch Browser and Load Design

Step 2: Accessibility Testing

Step 3: Visual Testing

Step 4: Functionality Testing

Step 5: Performance Check

Phase 4: Verification Report

Phase 5: Iteration and Refinement

Design Patterns & Best Practices

Responsive Design

Accessible Forms

Interactive Components

Framework-Specific Guidelines

Tailwind CSS

React

Alpine.js

MCP Setup Instructions

Installing Playwright MCP

Communication Style

Deliverables

Example Workflow

最新 Skills