이런 분께
바이브코딩(말로 시켜서 프로그램 만들기)으로 랜딩페이지나 사이드프로젝트 화면을 만들어 봤는데, 다 만들고 보니 "어디서 많이 본 AI 사이트" 같아서 아쉬운 분께 맞아요.
GitHub(개발자들이 프로그램을 공개하는 사이트)의 taste-skill은 이 문제를 겨냥한 무료 스킬 묶음이에요. 스킬은 AI에 끼워 두는 업무 매뉴얼 파일인데, 여기엔 여백, 글꼴, 배치, 움직임에 대한 디자인 규칙이 들어 있어요. Claude Code(컴퓨터에 설치해 글자로 일을 시키는 클로드 프로그램)에 넣어 두면 화면을 만들 때 이 규칙을 따라요.
끝나면 이렇게 됩니다
같은 요청 "우리 모임 소개 페이지 만들어줘"에 스킬 이름만 붙여도 방향이 달라져요. 예를 들면 이런 차이예요.
스킬 없이: 가운데 큰 제목, 흔한 그라데이션 버튼, 똑같은 크기 카드 3개
스킬 넣고: 제목과 사진을 비대칭으로 배치, 넉넉한 여백,
글꼴 크기 차이로 읽는 순서를 잡은 화면
이미 만든 페이지를 고치는 스킬(redesign)도 있어서, 처음부터 다시 만들지 않아도 돼요.
준비물
- Claude Code와 클로드 유료 요금제(Pro 이상, 2026년 10월 기준)
- 터미널(컴퓨터에 글자로 명령하는 창). 윈도우는 시작 메뉴에서 '터미널', 맥은 Spotlight에서 '터미널'을 검색해 열어요.
- Node.js(npx 명령을 쓰려면 필요한 프로그램). 없으면 nodejs.org 에서 LTS 버전을 받아 설치해요.
- taste-skill: GitHub의 Leonxlnx/taste-skill 저장소(프로그램 파일을 모아 둔 공개 폴더). MIT 라이선스, 무료.
따라 하기
- 터미널을 열고, 디자인을 손볼 프로젝트 폴더로 이동해요.
- 아래 명령을 붙여 넣어 기본 디자인 스킬 하나만 설치해요. 어느 AI 도구에 넣을지 묻는 화면이 나오면 Claude Code를 골라요.
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
- 같은 폴더에서
claude를 입력해 Claude Code를 켜요. - 아래 '복사해서 쓰는 프롬프트'를 넣어요. 이미 만든 화면을 고치려면 2번 프롬프트를 써요.
- 결과 화면을 브라우저로 열어 보고, 너무 화려하거나 밋밋하면 3번 프롬프트로 강도를 조절해요.
복사해서 쓰는 프롬프트
- 새로 만들기
design-taste-frontend 스킬을 따라서 [강서구 직장인 AI 모임] 소개 페이지를 만들어줘.
들어갈 내용: [모임 소개 두 줄, 진행 순서 3단계, 장소와 비용, 신청 버튼]
글은 한국어로.
- 이미 만든 화면 고치기
redesign-existing-projects 스킬 기준으로 지금 [index.html] 화면을 점검하고,
고칠 점을 먼저 목록으로 보여준 다음 내가 "진행"이라고 하면 고쳐줘.
- 2번을 쓰려면 2단계 명령에서 스킬 이름만 "redesign-existing-projects"로 바꿔 한 번 더 설치해요.
- 강도 조절
