web-design-guidelines
Design & UI
설치
$ npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines요약
이미 만든 화면을 출시 전에 검수하거나, UI가 어색한 이유를 체계적으로 찾고 싶을 때 유용합니다.
- 간격, 타이포그래피, 상호작용, 접근성 기준으로 웹 UI를 리뷰하고 개선점을 찾는 디자인 QA 스킬입니다.
- 한국어 큐레이션 기준으로 이 스킬의 핵심을 먼저 정리했습니다.
- 설치는 개별 스킬 페이지의 명령을 그대로 사용합니다.
- 아래 해설 섹션에서 사용 맥락과 주의점을 한국어로 길게 풀어 읽을 수 있습니다.
해설
어떤 스킬인가
web-design-guidelines는 웹 인터페이스를 감각이 아니라 기준으로 리뷰하게 만드는 스킬입니다. 버튼 크기, 행간, 대비, 포커스 상태, 모바일 폭, 텍스트 줄바꿈, 정보 위계처럼 사용자가 화면을 쓰는 과정에서 바로 체감하는 문제를 찾아냅니다.
이 스킬은 새 화면을 창작하기보다는 이미 만들어진 화면을 점검하는 쪽에 가깝습니다. "뭔가 어색하다"는 피드백을 간격, 타이포그래피, 상호작용, 접근성 같은 항목으로 쪼개어 수정 가능한 이슈로 바꾸는 역할을 합니다.
언제 쓰면 좋은가
프론트엔드 구현이 끝난 뒤 브라우저에서 확인할 때 좋습니다. 특히 AI가 만든 UI는 겉보기에는 그럴듯해도 작은 화면에서 텍스트가 넘치거나, 버튼 내부 텍스트가 눌리거나, hover와 focus 상태가 빠져 있는 경우가 많습니다.
디자인 시스템이 없는 프로젝트에서도 유용하지만, 디자인 시스템이 있는 제품에서는 더 강력합니다. 기존 토큰과 컴포넌트 규칙을 함께 제공하면, 에이전트가 새 스타일을 발명하지 않고 현재 제품의 기준 안에서 개선점을 찾을 수 있습니다.
설치
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines
검수 요청을 할 때는 실제 URL이나 스크린샷, 모바일/데스크톱 기준 폭을 함께 주면 결과가 더 구체적입니다.