Claude Code로 UI 시제품 만들기, prototype 스킬 사용법
機械翻訳 / Machine-translated
機械翻訳 / Machine-translated
원문: UIの試作品をClaude Codeで作る、prototypeスキルの使い方（cccskills）
스킬 페이지: prototype
이 글의 결론
prototype은 조작해서 시험할 수 있는 일회용 시제품을 Claude Code 같은 에이전트에게 만들게 하는 스킬입니다.
구현 전에 화면 시안이나 처리 흐름을 확인하고 싶은 개발자나 디자이너에게 적합합니다.
글의 전반부에서는 완성되는 시제품의 형태와 설치 방법을 소개합니다.
후반부는 요청문 예시와 시제품을 다룰 때의 주의사항입니다.
요청문을 하나 보내면, 조작하며 확인할 수 있는 시제품이 만들어집니다.
예를 들어 처리 흐름을 확인하고 싶을 때의 요청문은 다음과 같습니다.
주문 상태가 「초안→확인 대기→확정→취소」로 전환되는 처리를 생각하고 있습니다.
이 상태 관리 방식에 문제가 없는지, 조작할 수 있는 HTML로 시험해 보게 해주세요.
에이전트가 만드는 것은 더블클릭으로 열 수 있는 단일 HTML 파일입니다.
화면에는 자유롭게 누를 수 있는 조작 버튼과, 탭으로 전환하는 단계별 설명이 나란히 표시됩니다.
단계별 설명은, 종이 위에서는 놓치기 쉬운 케이스까지 상태를 진행시키기 위한 것입니다.
버튼을 누를 때마다 화면에 표시되는 것은 관련된 모든 상태입니다.
무엇을 누르면 무엇이 바뀌었는지 한눈에 알 수 있어, 엔지니어가 아닌 사람에게도 조작을 맡길 수 있습니다.
요청의 의도가 불분명한 채로 만든 경우에는, 어떻게 해석했는지가 시제품의 서두에 기재됩니다.
화면 외관을 상의한 경우에는 완성물의 형태가 달라집니다.
하나의 화면에 방향성이 크게 다른 여러 UI 시안이 만들어지고, URL 파라미터나 화면 하단에 떠 있는 바로 전환하는 형태입니다.
시안을 전환할 때마다 상태도 표시되므로, 외관과 내용을 함께 확인할 수 있습니다.
prototype은 설계상의 의문에 답하기 위한 일회용 코드를 만드는 스킬입니다.
확인하고 싶은 것의 종류에 따라, 만들어지는 것이 두 가지로 나뉩니다.
| 확인하고 싶은 것 | 만들어지는 것 | 조작 방법 |
|---|---|---|
| 처리나 상태 관리 방식이 자연스러운지 | 공유할 수 있는 단일 HTML 파일 | 자유롭게 누를 수 있는 버튼과, 탭으로 전환하는 단계별 설명 |
| 화면을 어떻게 보여줄지 | 하나의 화면에 나란히 배치된, 방향성이 크게 다른 여러 UI 시안 | URL 파라미터나 화면 하단에 떠 있는 바로 전환 |
어느 것을 만들지는 요청문이나 주변 코드에서 판단됩니다.
이용자가 그 자리에 있다면 에이전트에게서 확인 요청이 올 것입니다.
확인할 수 없을 때는, 백엔드 모듈이라면 처리 시제품, 페이지나 컴포넌트라면 화면 시제품이 기본값입니다.
시제품은 검증하고 싶은 모듈이나 페이지의 바로 옆에 배치됩니다.
이름도 한눈에 시제품임을 알 수 있는 것으로 붙이도록 되어 있습니다.
화면 시제품에서는 프로젝트의 기존 라우팅(URL과 화면의 대응)에 따르며, 새로운 구성은 도입하지 않습니다.
화면 시제품은 프로젝트의 태스크 러너에서 하나의 커맨드로 실행합니다.
pnpm <name>이나 bun <path> 같은 형태입니다.
처리 시제품은 HTML 파일이므로, 더블클릭으로 열기만 하면 동작합니다.
검증된 판단은 프로덕션 코드에 반영하고, 시제품 자체는 시제품용 브랜치에 남깁니다.
메인 브랜치에는 시제품을 넣지 않고, 구현 이슈(issue)에 해당 브랜치에 대한 참조를 추가하는 흐름입니다.
무엇을 확인하고 어떻게 결론 내렸는지도 이슈나 커밋에 기록되므로, 나중에 판단의 근거를 추적할 수 있습니다.
설치에는 다음 커맨드를 사용합니다.
실행 시 Claude Code나 Codex 등, 설치할 에이전트를 선택할 수 있습니다.
npx skills add https://github.com/mattpocock/skills --skill prototype
에이전트에게 설치를 맡기는 경우에는 다음 문구를 그대로 보내주세요.
내용 확인부터 배치까지 맡길 수 있습니다.
次の Agent Skill をインストールしてください。
https://github.com/mattpocock/skills/tree/main/skills/engineering/prototype
まず SKILL.md と付属ファイルの中身を確認し、不審な処理（外部への送信、認証情報の読み取りなど）がないことを確かめてから、Claude Code なら ~/.claude/skills/prototype/、Codex なら ~/.agents/skills/prototype/ に配置してください。
설치 위치는 모든 프로젝트에서 사용할지, 특정 프로젝트에서만 사용할지에 따라 선택합니다.
| 에이전트 | 모든 프로젝트에서 사용 | 특정 프로젝트에서만 사용 |
|---|---|---|
| Claude Code | ~/.claude/skills/prototype/ | 프로젝트의 .claude/skills/prototype/ |
| Codex | ~/.agents/skills/prototype/ | 프로젝트의 .agents/skills/prototype/ |
prototype은 GitHub 저장소 mattpocock/skills에 포함된 스킬 중 하나입니다.
원문은 영어이며, 배포처 페이지에서 SKILL.md를 읽을 수 있습니다.
회원 가입 흐름에서, 이메일 인증 전에 플랜을 변경한 경우의 상태를 확인하고 싶습니다.
상태 관리 방식을, 조작할 수 있는 HTML로 시제품을 만들어 주세요.
반환되는 것은 자유 조작 버튼과 단계별 설명을 갖춘 HTML 파일입니다.
단계별 설명에 따라 조작하면, 판단하기 어려운 케이스까지 상태를 진행시킬 수 있습니다.
각 조작 후에 전체 상태가 표시되므로, 예상치 못한 변화도 바로 알아챌 수 있을 것입니다.
설정 화면의 외관을 결정하지 못하고 있습니다.
방향성이 크게 다른 시안을 몇 가지 만들고, 전환하며 비교할 수 있게 해주세요.
기존 프로젝트 안에, 여러 UI 시안을 가진 시제품용 화면이 하나 만들어집니다.
화면 하단에 떠 있는 바나 URL 파라미터로 시안을 전환하며, 차이를 그 자리에서 비교할 수 있습니다.
실행에 필요한 것은 프로젝트 태스크 러너의 커맨드 하나뿐입니다.
반품 접수의 상태 흐름을, 기획 담당자에게 직접 조작하게 하고 의견을 듣고 싶습니다.
브라우저에서 열기만 하면 시험해 볼 수 있는 HTML로 만들어 주세요.
처리 시제품은 단일 HTML 파일이므로, 파일을 전달하면 상대방은 더블클릭으로 열 수 있습니다.
조작할 때마다 상태가 표시되어, 코드를 읽지 않는 사람도 변화를 따라갈 수 있는 구조입니다.
의견이 모여 결론이 나오면, 그 판단을 이슈나 커밋에 기록하는 것까지 맡길 수 있습니다.
시제품은 일회용이며, 프로덕션 코드와는 분리해서 다룹니다.
테스트는 작성되지 않으며, 에러 처리도 동작에 필요한 최소한으로만 됩니다.
추상화도 하지 않으므로, 시제품 코드를 프로덕션에 그대로 유용하는 용도에는 맞지 않습니다.
데이터는 원칙적으로 메모리 내에 보관됩니다.
저장 방식 자체가 검증의 대상이 될 수 있기 때문입니다.
데이터베이스가 논점인 경우에만 일회용 DB나, 「PROTOTYPE, wipe me」처럼 삭제해도 된다는 것을 알 수 있는 이름의 로컬 파일이 사용됩니다.
시제품의 저장 위치는 메인 브랜치 외의 시제품용 브랜치입니다.
기록 위치로 Git 브랜치와 구현 이슈를 사용하는 것을 전제로 하므로, 운용 방식에 맞는지 미리 확인해 두세요.
라이선스는 MIT입니다.
도입 전에 SKILL.md와 3개의 첨부 파일을 읽고, 외부 전송이나 인증 정보 읽기가 없는지 확인해 주세요.
같은 mattpocock/skills 저장소에는 prototype의 전후로 사용할 수 있는 스킬이 있습니다.
domain-modeling은 업무 용어나 개념의 경계를, 구체적인 예시와 코드 대조를 통해 명확히 하는 스킬입니다.
상태의 이름이나 의미가 정해지지 않았을 때는, 시제품 제작 전에 용어를 정리하는 용도로 사용할 수 있습니다.
중요한 설계 판단의 이유도 필요에 따라 남길 수 있습니다.
codebase-design의 역할은 호출하는 쪽이 기억해야 할 사용법을 작게 유지하는 모듈 설계 지원입니다.
시제품으로 상태 관리 방식이 결정된 후, 프로덕션 모듈을 어떻게 구성할지 검토하는 장면에 맞는 스킬입니다.
ask-matt은 상황에 맞는 관련 스킬과 사용 순서를 안내해 주는 상담역입니다.
시제품에서 구현으로 넘어가는 절차에 막혔을 때의 시작점이 됩니다.
prototype의 시제품은 실제로 동작하는 코드입니다.
처리 시제품에서는 버튼으로 상태를 조작할 수 있고, 화면 시제품에서는 기존 프로젝트 안에서 여러 시안을 전환할 수 있습니다.
외관뿐만 아니라 조작 후의 상태까지 확인할 수 있다는 점이 다릅니다.
사용할 수 없습니다.
테스트와 마무리 작업을 생략한 일회용 코드로 만들어지기 때문입니다.
검증된 판단만을 프로덕션 코드에 반영하고, 시제품은 시제품용 브랜치에 남깁니다.
요청문이나 주변 코드에서 판단되므로, 반드시 지정할 필요는 없습니다.
판단이 어려울 때는 에이전트에게서 확인 요청이 옵니다.
확인 없이 만든 경우에는, 어떻게 해석했는지가 시제품의 서두에 기재됩니다.
prototype은 화면 시안이나 상태 변화를 구현 전에 확인하고 싶은 분을 위한 스킬입니다.
처리 시제품이라면 조작할 수 있는 단일 HTML이, 화면 시제품이라면 여러 시안을 전환할 수 있는 화면이 만들어집니다.
시제품은 일회용으로 다루어지며, 검증한 판단과 결론은 나중에 참조할 수 있는 형태로 남습니다.
도입 전에 SKILL.md를 읽고, cccskills 페이지에서 입수해 주세요.
이 글은 cccskills의 읽을거리 「UIの試作品をClaude Codeで作る、prototypeスキルの使い方」의 전재입니다.
스킬 상세 내용과 설치 방법은 cccskills의 prototype 페이지에 있습니다.