CarrieYung1. 项目概述
最近在开发一个网站时，我发现手动检查网页设计规范既耗时又容易遗漏细节。于是尝试用WSL+Claude Code+Agent Skills搭建了一个自动化网页设计规范检查工具。这个方案特别适合需要频繁检查多个网页设计规范的开发者。
核心思路是通过Agent Skills中的Web Design Guidelines技能，自动检查网页是否符合设计规范。整个过程涉及WSL环境配置、Claude Code安装、技能部署和实际应用四个主要环节。下面我会详细分享每个环节的具体实现和踩过的坑。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
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.co