1. 项目概述
最近在开发一个网站时，我发现手动检查网页设计规范既耗时又容易遗漏细节。于是尝试用WSL+Claude Code+Agent Skills搭建了一个自动化网页设计规范检查工具。这个方案特别适合需要频繁检查多个网页设计规范的开发者。
核心思路是通过Agent Skills中的Web Design Guidelines技能，自动检查网页是否符合设计规范。整个过程涉及WSL环境配置、Claude Code安装、技能部署和实际应用四个主要环节。下面我会详细分享每个环节的具体实现和踩过的坑。
2. 环境准备
2.1 WSL安装与配置
首先需要在Windows上安装WSL（Windows Subsystem for Linux）。我推荐使用WSL 2版本，性能更好：
- 以管理员身份打开PowerShell
- 运行命令：
wsl --install - 安装完成后重启电脑
- 首次启动时会提示创建Linux用户账户
注意：如果遇到虚拟化相关错误，需要进入BIOS启用CPU的虚拟化支持（Intel VT-x或AMD-V）
安装完成后，建议执行以下优化配置：
bash复制# 更新软件包列表
sudo apt update && sudo apt upgrade -y
# 安装常用工具
sudo apt install -y curl git build-essential
2.2 Node.js环境配置
Agent Skills需要Node.js 18.3或更高版本。在WSL中安装Node.js的最佳实践是使用nvm（Node Version Manager）：
bash复制# 安装nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
# 使nvm立即生效
source ~/.bashrc
# 安装Node.js 18.x
nvm install 18
# 验证安装
node -v
npm -v
如果遇到网络问题，可以设置淘宝镜像：
bash复制npm config set registry https://registry.npmmirror.com
3. Claude Code安装与配置
3.1 基础安装
在项目目录中初始化并安装Claude Code：
bash复制# 创建项目目录
mkdir website-audit-demo
cd website-audit-demo
# 初始化npm项目
npm init -y
# 创建目录结构
mkdir -p src components .claude/skills
# 全局安装Claude Code
npm install -g @anthropic-ai/claude-code
3.2 地区限制解决方案
由于Claude Code有地区限制，我找到了使用智谱API的替代方案：
- 注册智谱账号并获取API Key
- 编辑~/.bashrc文件：
bash复制nano ~/.bashrc
- 添加以下配置（替换为你的实际API Key）：
bash复制export ANTHROPIC_BASE_URL="https://open.bigmodel.cn/api/anthropic"
export ANTHROPIC_AUTH_TOKEN="your_api_key_here"
export CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC=1
export ANTHROPIC_DEFAULT_HAIKU_MODEL="glm-4.5-air"
- 使配置生效：
bash复制source ~/.bashrc
4. Agent Skills部署与应用
4.1 Web Design Guidelines技能安装
在.claude/skills目录下创建技能：
bash复制cd .claude/skills
mkdir web-design-guidelines
cd web-design-guidelines
创建SKILL.md文件，内容如下：
markdown复制# web-design-guidelines
# Web Interface Guidelines
Review files for compliance with Web Interface Guidelines.
## How It Works
- Fetch the latest guidelines from source
- Check against all rules in the guidelines
- Output findings in file:line format
## Guidelines Source
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
## Usage
When a user provides a file or pattern argument:
- Fetch guidelines from source URL
- Read specified files
- Apply all rules from guidelines
- Output findings using specified format
4.2 测试网页准备
创建一个包含典型设计问题的测试网页：
html复制<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试网页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 这里包含多个设计问题 -->
<img src="banner.jpg">
<button style="color: #aaa; background: #eee">低对比度按钮</button>
</body>
</html>
5. 运行与效果验证
5.1 启动Claude Code
bash复制claude
在交互界面中输入：
code复制@web-design-guidelines index.html
5.2 典型优化项
系统会识别出以下常见问题：
- 图片缺少alt属性
- 按钮颜色对比度不足
- 未使用语义化HTML标签
- 缺少必要的ARIA属性
- 响应式设计考虑不周
5.3 优化前后对比
优化前的网页存在多个设计规范问题，优化后：
- 所有图片添加了描述性alt文本
- 按钮颜色调整为符合WCAG 2.1 AA标准
- 增加了焦点可见性样式
- 改进了表单标签关联
- 增强了移动端显示效果
6. 实用技巧与问题排查
6.1 性能优化建议
- 对大型项目，可以创建技能组（Skill Group）批量检查
- 使用
.claudeignore文件排除不需要检查的目录 - 定期更新技能以获取最新的设计规范
6.2 常见错误解决
问题1：技能未识别
解决方案：检查技能目录结构是否正确，确保SKILL.md在技能专属目录内
问题2：API请求失败
解决方案：验证网络连接，检查API Key是否有效，确认服务地区支持
问题3：检查结果不完整
解决方案：确保测试文件有足够的内容和多样性，必要时手动补充测试用例
7. 扩展应用场景
这个方案不仅适用于网页设计规范检查，还可以扩展用于：
- 代码风格检查
- 内容可访问性审计
- SEO优化建议
- 性能最佳实践检查
- 安全漏洞扫描
只需要创建或导入相应的技能即可。例如，可以从skills.sh网站寻找更多现成的技能，或者根据自己的需求定制专属技能。