Web Design Builder by rknall/claude-skills
npx skills add https://github.com/rknall/claude-skills --skill 'Web Design Builder'此技能根据规范创建专业的 HTML5/JavaScript 网页设计,并使用 Playwright MCP 进行自动可访问性和功能验证。
当用户请求以下内容时激活此技能:
当用户请求网页设计时,首先了解他们的需求:
明确设计范围
技术偏好
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
重要提示:在开始设计过程之前,检查 Playwright MCP 是否可用:
// 检查 mcp__playwright 工具是否可用
// 查找工具如:mcp__playwright__navigate, mcp__playwright__screenshot 等
如果 Playwright MCP 不可用:
* 通知用户:"Playwright MCP 未安装。将跳过设计验证。"
* 提供安装说明(见下方 MCP 设置部分)
* 继续生成设计但跳过验证阶段
* 在输出中明确标记此情况
如果 Playwright MCP 可用:
* 通知用户:"检测到 Playwright MCP。设计将自动验证。"
* 在工作流程中包含验证
生成完整的 HTML/CSS/JS 模型,包括:
HTML 结构:
CSS 样式:
JavaScript 功能:
可访问性特性:
示例输出结构:
<!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>
将生成的设计保存到文件:
// 推荐的文件结构
project-name/
index.html // 主 HTML 文件
styles.css // 单独的 CSS 文件(如果需要)
script.js // 单独的 JS 文件(如果需要)
assets/
images/ // 图像资源
fonts/ // 自定义字体
使用 Write 工具创建文件:
landing-page.html, dashboard.html)重要提示:仅当在阶段 1 中检测到 Playwright MCP 时才执行此阶段。
使用 Playwright MCP 打开设计:
// 导航到本地 HTML 文件
await mcp__playwright__navigate({
url: 'file:///path/to/design.html'
});
运行全面的可访问性检查:
自动化可访问性扫描
键盘导航测试
屏幕阅读器兼容性
捕获截图并验证布局:
// 截取全页截图
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`
});
}
测试交互元素:
表单验证
交互组件
JavaScript 功能
评估性能指标:
加载时间
资源优化
生成全面的报告:
# 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. 部署到暂存环境
根据验证结果:
修复关键问题
应用改进
重新验证
交付最终设计
移动优先方法:
/* 移动端基础样式 */
.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>
优点:
示例:
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>
);
}
优点:
示例:
<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 不可用,请向用户提供以下说明:
选项 1:通过 NPM(推荐)
# 安装 Playwright MCP 服务器
npm install -g @playwright/mcp-server
# 在 Claude Code 中配置
claude code mcp add playwright
选项 2:手动设置
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp-server"],
"env": {}
}
}
}
2. 重启 Claude Code
验证:安装后,验证 Playwright MCP 是否正常工作:
# 检查 MCP 服务器
claude code mcp list
你应该在可用 MCP 服务器列表中看到 playwright。
与用户合作时:
首先明确需求
提供上下文
展示进度
提供可操作的建议
优雅处理 MCP 不可用的情况
在设计过程结束时,提供:
完整的设计文件
验证报告(如果 MCP 可用)
文档
后续步骤
用户请求:
"为 SaaS 产品创建一个落地页,包含英雄区域、功能、定价和联系表单。"
你的回应:
明确需求:
检查 Playwright MCP:
生成设计:
saas-landing-page.html手动验证指南(由于 MCP 不可用):
交付:
记住:目标是创建美观、无障碍、功能完善的网页设计,为所有用户服务,并在可能的情况下进行自动验证!
每周安装次数
–
代码仓库
GitHub 星标数
33
首次出现
–
安全审计
This skill creates professional HTML5/JavaScript web designs from specifications, with automatic accessibility and functionality verification using Playwright MCP.
Activate this skill when the user requests:
When a user requests a web design, start by understanding their needs:
Clarify the Design Scope
Technical Preferences
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
Generate a complete HTML/CSS/JS mockup including:
HTML Structure:
CSS Styling:
JavaScript Functionality:
Accessibility Features:
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>
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:
landing-page.html, dashboard.html)IMPORTANT : Only execute this phase if Playwright MCP was detected in Phase 1.
Use Playwright MCP to open the design:
// Navigate to the local HTML file
await mcp__playwright__navigate({
url: 'file:///path/to/design.html'
});
Run comprehensive accessibility checks:
Automated Accessibility Scan
Keyboard Navigation Test
Screen Reader Compatibility
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`
});
}
Test interactive elements:
Form Validation
Interactive Components
JavaScript Functionality
Evaluate performance metrics:
Load Time
Resource Optimization
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
Based on verification results:
Fix Critical Issues
Apply Improvements
Re-verify
Deliver Final 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;
}
}
<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>
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();
}
Pros:
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>
Pros:
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>
);
}
Pros:
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>
If Playwright MCP is not available, provide these instructions to the user:
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
{
"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.
When working with users:
Clarify Requirements First
Provide Context
Show Progress
Be Actionable
Handle MCP Unavailability Gracefully
At the end of the design process, provide:
Complete Design Files
Verification Report (if MCP available)
Documentation
Next Steps
User Request:
"Create a landing page for a SaaS product with a hero section, features, pricing, and contact form."
Your Response:
Clarify Requirements:
Check Playwright MCP:
Generate Design:
saas-landing-page.htmlManual Verification Guide (since MCP not available):
Deliver:
Remember: The goal is to create beautiful, accessible, functional web designs that work for all users, with automatic verification when possible!
Weekly Installs
–
Repository
GitHub Stars
33
First Seen
–
Security Audits
agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试
144,300 周安装