어떤 역할을 하나요?
Vercel의 웹 인터페이스 가이드라인을 기준으로 UI 소스코드를 검토합니다. 검토할 때 최신 규칙을 가져오고, 지정한 파일에서 문제를 찾아 파일명과 줄 번호로 알려줍니다.
예를 들어 다음과 같은 부분을 살펴봅니다.
키보드로 버튼과 입력창을 사용할 수 있는지
현재 선택한 요소의 포커스 표시가 보이는지
아이콘 버튼과 입력창에 적절한 이름이나 라벨이 있는지
입력 오류가 해당 항목 근처에 표시되는지
긴 제목이나 빈 데이터에도 화면이 대응하도록 작성되어 있는지
이미지 공간을 미리 확보해 화면이 갑자기 밀리지 않도록 했는지
움직임을 줄이도록 설정한 사용자를 배려하는지
색상과 폰트를 새로 제안하는 것보다, 이미 만든 화면의 구현에서 놓치기 쉬운 부분을 점검하는 데 유용합니다.
설치 방법 → AI에게 이렇게 요청하세요
파일과 터미널에 접근할 수 있는 Codex, Cursor, Claude Code 등에서 아래 내용을 요청해주세요.
https://vercel.com/design/guidelines 에서 안내하는 web-design-guidelines 스킬을 지금 사용하는 AI 도구에 설치해주세요. 공식 저장소 https://github.com/vercel-labs/agent-skills 의 최신 설치 방법을 확인하고, 이 스킬만 현재 프로젝트에 추가해주세요. 이미 설치되어 있다면 중복 설치하지 말고 기존 설정도 덮어쓰지 마세요. 설치 후 정상적으로 인식되는지 확인하고, 제가 직접 해야 할 단계나 재시작이 필요하면 알려주세요.설치 후 → 이렇게 사용해보세요
web-design-guidelines 스킬로 현재 프로젝트의 화면 코드를 검토해주세요. 접근성, 버튼과 입력창의 사용성, 키보드 조작, 모바일 대응을 점검하고 개선할 부분을 한국어로 정리해주세요. 코드는 아직 수정하지 말고, 실제 브라우저에서 따로 확인해야 할 항목도 알려주세요.