깔끔해요. 여백도 괜찮고, 버튼도 잘 보여요.
VS
버튼에 포커스가 안 보여요. 에러가 빨개지기만 하고, 뭐가 틀린지 글이 없어요. 마우스로는 괜찮은데 키보드는 막혀 있어요.
VS
AI는 눈에 보이는 것부터 그려요. 키보드로 어디인지 보이는지, 에러가 왜 났는지는 안 넣어도 ‘완성된 화면’처럼 보여요. 마우스로만 보면 그 구멍이 안 보여요. 탭을 한 바퀴 돌아야 막힌 곳이 나와요. 그 검사를 매번 채팅에 적는 것도 일이에요.
이 스킬을 켜면, 예쁜지보다 먼저 키보드로 막힌 곳부터 집어 줘요.
설치는 딸깍 한 번
터미널도, 명령어 공부도 필요 없어요. 아래 말을 AI 채팅창에 붙여넣으면, 쓰는 프로그램에 맞게 설치해요.
- 1
이 말을 그대로 AI에 붙여넣으세요
이 스킬을 설치해줘. https://github.com/vercel-labs/agent-skills 레포의 web-design-guidelines 스킬이야.
터미널이 익숙하다면, 직접 설치하는 명령은 이거예요.
npx skills add vercel-labs/agent-skills --skill web-design-guidelines - 2
설치가 끝났다면, 이렇게 물어보세요
지금 보고 있는 페이지, 키보드로 쓸 수 있는지부터 봐줘. 막힌 곳만 집어줘.
볼 페이지나 파일을 같이 주시면 더 정확해요.
세 줄 요약
이럴 때
화면은 나왔는데, 키보드나 폼이 허술할 때. “UI 리뷰해줘”가 취향 얘기로만 흐를 때.
들어 있는 것
Vercel 화면 가이드예요. 포커스, 폼, 움직임, 이미지처럼 눈에 안 띄는 구멍을 먼저 봐요.
안 되는 것
취향 리뷰가 아니에요. “더 고급스럽게”는 다른 스킬이에요. 가이드를 매번 새로 받아 와서, 어제와 오늘 검사가 조금 달라질 수는 있어요.
← AI 스킬