v1.11 · 2026-10-14
AI 스킬 설치
ARC 규칙을 AI 코딩 도구(Claude Code)가 알아서 따르게 하는 설명서 파일이에요. 한 번 설치하면 "ARC", "리바운드", 템플릿 URL이 나오는 작업에서 자동으로 적용돼요.
1. 스킬 설치 (저장소 안, 권장)
저장소에 두고 커밋하면 팀 전체가 설치 없이 같은 버전을 써요. 규칙이 바뀌면 PR 하나로 갱신돼요.
mkdir -p .claude/skills/arc-design && curl -fsSL https://gb-design-7ob.pages.dev/skill/SKILL.md -o .claude/skills/arc-design/SKILL.md
개인 홈 폴더에 두려면 경로만 ~/.claude/skills/arc-design/ 로 바꿔요. 모든 프로젝트에서 쓰여요.
2. 템플릿 사본 받기
템플릿 갤러리는 회사 번호로 잠겨 있어 AI가 사이트를 직접 읽지 못해요. 저장소 안에 사본을 두면 그걸 읽어요. 사본마다 구조 · 토큰 · 컴포넌트 · 코드 뼈대 · 인터랙션(전환 시간 · 검증 · 로딩 동작)이 들어 있어 동작까지 따라 만들어요. 번호는 코드나 커밋에 남기지 마세요.
KEY=회사번호
mkdir -p design/templates && for t in form form-grid onboarding auth dashboard list detail settings sign system; do curl -fsSL "https://gb-design-7ob.pages.dev/templates/$t.md?key=$KEY" -o "design/templates/$t.md"; done
3. 토큰 넣기 (새 프로젝트만)
rebound-biz에는 이미 들어 있어요. 새 프로젝트면 두 파일을 받고 Tailwind와 CSS에 한 줄씩 연결해요.
curl -fsSL https://gb-design-7ob.pages.dev/tokens/tailwind.preset.js -o tailwind.arc.preset.js && mkdir -p src/styles && curl -fsSL https://gb-design-7ob.pages.dev/tokens/arc.css -o src/styles/arc.css
tailwind.config.js: import arc from './tailwind.arc.preset.js'; export default { presets: [arc], … } · src/index.css: @import './styles/arc.css';
4. 쓰는 법
- 문서에서 만들 화면과 가장 가까운 템플릿을 고르고 URL을 복사해요.
- Claude Code에 템플릿 URL과 화면 이름을 함께 붙여요. "https://gb-design-7ob.pages.dev/templates/list 로 회수 현황 목록 화면 만들어 줘". 색 코드나 토큰을 붙일 필요는 없어요 — 스킬이 알고 있어요.
- AI가 구조 → 토큰 → 컴포넌트 → 인터랙션 순서로 만들고, 어떤 템플릿과 컴포넌트를 썼는지 보고한 뒤 체크리스트로 점검해요. 구조가 요청과 다르면 먼저 물어봐요.
- 규칙이 바뀌면 1 · 2 명령을 다시 실행해요. 덮어써져요.
5. 함께 쓰는 파일
템플릿 사본 design/templates/<이름>.md 열 개는 2번 명령으로 받아요.
6. 스킬 안에 있는 것
- 시작 절차 — 템플릿 URL을 받으면
.md를 먼저 읽고 구조 → 토큰 → 컴포넌트 순서로 - 절대 규칙 아홉 — 오렌지 한 곳, 입력·선택은 파랑, 카드 테두리 없음, Neutral 기본 버튼, 라운드 넷, 표 왼쫁 정렬, 글로우 금지, 문구 톤
- 토큰 표 · 글자 계열 · 레이아웃 치수 · 컴포넌트 30개 요약과 문서 링크 · 코드 관습 · 물어봐야 하는 순간 · 끝내기 전 체크리스트