같은 요청을 스킬 없이 2번, 스킬을 작업 폴더에 넣어 두고 2번, 요청 끝에 스킬 이름을 붙여 2번 보냈습니다. 각 페이지는 클로드가 만든 budget.html을 손대지 않고 올렸습니다. Claude Code · Opus 5.5 · 생각 깊이 중간.
우리 집 한 달 생활비를 관리하는 화면을 HTML 파일 하나로 만들어 줘. 지출을 추가(날짜·내용·분류·금액)하고 지울 수 있어야 하고, 탭으로 '지출 목록'과 '분류별 합계'를 오갈 수 있게. 분류는 식비·교통·주거·통신·기타. 처음 열 때 예시 지출 5개를 넣어 두고, 금액은 원 단위로 쉼표를 찍어 줘. 완성 파일은 이 폴더에 budget.html로 저장해 줘.
스킬 이름을 붙인 조건은 끝에 "web-artifacts-builder 스킬을 써서 만들어 줘."를 더했습니다.
| 조건 | 파일 크기 | 만든 방식 |
|---|---|---|
| 스킬 없이 1회차 | 12KB | HTML·CSS·자바스크립트를 한 파일에 바로 씀 |
| 스킬 없이 2회차 | 13KB | 같음 |
| 스킬을 넣어 둠 1회차 | 12KB | 스킬을 부르지 않고 한 파일에 바로 씀 |
| 스킬을 넣어 둠 2회차 | 12KB | 같음 |
| 스킬 이름을 붙임 1회차 | 394KB | 스킬을 불러 React·shadcn/ui 프로젝트를 만들고 한 파일로 묶음 |
| 스킬 이름을 붙임 2회차 | 400KB | 같음 |
여섯 개 모두 예시 지출 5개, 추가, 지우기, 탭 전환, 원 단위 쉼표가 동작했습니다. 여섯 개 모두 입력한 지출을 브라우저 저장소(localStorage)에 남기도록 만들어졌습니다.