ci / build (push) Waiting to run

Details

feat(core): 어떤 하네스에서든 스킬을 발견하는 타깃 체계로 바꾼다

- ZCode(~/.zcode/skills) 타깃 추가
- 중립 경로 agents(~/.agents/skills · .agents/skills) 타깃 추가
- gemini-cli(.gemini/skills)·copilot(~/.copilot/skills · .github/skills) 타깃 추가
- Cursor·Windsurf 를 네이티브 스킬 경로로 전환 — 규칙 파일 12,000자 상한 때문에
  Windsurf 는 실제 스킬이 아예 설치되지 못했었다. 전역 설치도 가능해진다
- Antigravity 전역 경로를 공식 문서대로 ~/.gemini/antigravity-cli/skills 로 수정

2026-08-21 12:24:34 +09:00

5.5 KiB

Raw Blame History

designpaca

웹 디자인 파이프라인 스킬을 어떤 에이전트 하네스에든 한 줄로 설치한다.

Agent Skills 규약(SKILL.md)을 그대로 따르므로, 규약을 읽는 하네스라면 종류를 가리지 않는다.

npx designpaca

무엇인가

designpaca 는 AI 코딩 에이전트에게 웹 디자인을 순서대로 하게 만드는 스킬이다.

"예쁘게 만들어줘"라고 하면 에이전트는 자기가 아는 기본값을 쏟아낸다. 보라-파랑 그라디언트, Inter, 3열 아이콘 카드, rounded-2xl shadow-lg. 못 만들어서가 아니라 결정을 안 해서 그렇게 된다. designpaca 는 그 결정을 강제한다.

7단계 파이프라인

단계	하는 일	통과 조건
0	브리프 게이트	무엇을·누구에게·제약 3줄
1	레퍼런스 조사	실제 사이트 3개를 서로 다른 층위에서
2	방향 결정	한 문장 컨셉 + 프리셋 + 감수할 리스크 하나
3	디자인 토큰	타입·색·간격·모션을 실제 값으로 + 성능 예산
4	구현	레이아웃 → 재질(SVG 필터) → 입체(three.js) → 모션
5	프리플라이트	하드 게이트 12개 + 슬롭 지문 grep
6	결정 기록	`design.md` 로 다음 실행에 인계

1단계를 건너뛴 디자인은 5단계에서 실패 처리된다. 머릿속 기본값이 아니라 실제로 존재하는 사이트에서 시작하게 만드는 것이 이 스킬의 핵심이다.

무엇이 들어 있나

레퍼런스 갤러리 라우팅 — 브리프별로 어디를 볼지. Awwwards 수상작이 럭셔리·자동차에 몰려 있어 SaaS 브리프에 이식하면 안 된다는 것까지
AI 슬롭 지문 목록 — 실측 검출률과 함께. 보라 CTA 10.7%, 전체 대문자 헤드라인 10.5%, 번호 매긴 1·2·3 단계 9.4%. grep 으로 기계 검출 가능
SVG 필터를 재질로 — 그레인·굴절·잉크 번짐·수차. 장식이 아니라 "이 디자인의 표면은 무엇인가"를 정하는 도구로
three.js를 예산 안에서 — 지연 로드, DPR 클램프, 품질 티어, 폴백. 캔버스를 LCP 요소로 만들지 않는 규칙
인터랙티브 모션 — 이징의 의미론, 마이크로 인터랙션, prefers-reduced-motion 의 올바른 대응
한글 조판 — word-break: keep-all, line-height 1.6~1.8, 음수 자간 금지, 한글 폰트 페어링. 서구 레퍼런스에 없는 정보
HTML-in-Canvas — Chrome 실험 API. 폴백을 완성한 뒤에만 얹도록 격리

설치

npx designpaca              # 대화형 온보딩 (권장)

설치 대상을 자동 감지해서 기본 선택해준다.

비대화형

npx designpaca install -t claude-code,codex -s user -y
npx designpaca install -t cursor -s project

모든 타깃이 같은 SKILL.md 를 쓴다. 중립 경로(agents)는 이 규약을 읽는 하네스라면 무엇이든 잡는다.

대상	설치 위치
`claude-code`	`~/.claude/skills/designpaca/` (또는 프로젝트 `.claude/`)
`codex`	`~/.codex/skills/designpaca/` (또는 프로젝트 `.codex/`)
`cursor`	`~/.cursor/skills/designpaca/` (또는 프로젝트 `.cursor/`)
`zcode`	`~/.zcode/skills/designpaca/` (또는 프로젝트 `.zcode/`)
`agents`	`~/.agents/skills/designpaca/` (또는 프로젝트 `.agents/`) — 중립 경로
`antigravity`	전역 `~/.gemini/antigravity-cli/skills/` · 워크스페이스 `.agents/skills/`
`gemini-cli`	`~/.gemini/skills/designpaca/` (또는 프로젝트 `.gemini/`)
`windsurf`	`~/.codeium/windsurf/skills/designpaca/` (또는 프로젝트 `.windsurf/`)
`copilot`	`~/.copilot/skills/designpaca/` (또는 프로젝트 `.github/skills/`)
`agents-md`	`AGENTS.md` 에 블록 주입

사용

설치 후 에이전트에게 그냥 말하면 된다.

랜딩 페이지 만들어줘 — 수제 커피 로스터리, 원두 정기구독이 목적

Claude Code 에서는 /designpaca 로 명시적으로 부를 수도 있다.

명령어

npx designpaca update       # 최신 스킬로 갱신
npx designpaca doctor       # 설치 상태 진단
npx designpaca list         # 설치 가능 대상과 현재 설치 목록
npx designpaca uninstall    # 제거

업데이트가 내 수정을 덮지 않는다

스킬 파일을 직접 고쳤다면 update 는 그 파일을 건드리지 않고 건너뛴다. 설치 시점의 해시를 기록해두고 비교하기 때문이다.

강제로 최신 내용에 맞추려면 --force 를 쓴다. 이때도 원본은 .orig 로 남는다.

npx designpaca update --force

AGENTS.md 처럼 사용자 문서에 주입하는 경우, 마커 블록() 안쪽만 교체한다. 문서의 나머지는 손대지 않는다. 제거할 때도 블록만 빼간다.

옵션

옵션	설명
`-t, --target <id[,id]>`	`claude-code` `codex` `cursor` `zcode` `agents` `antigravity` `gemini-cli` `windsurf` `copilot` `agents-md`
`-s, --scope <범위>`	`user` (전역) \| `project`
`-y, --yes`	확인 없이 진행
`-f, --force`	직접 수정한 파일도 덮어쓴다 (`.orig` 백업)
`--dry-run`	쓰지 않고 계획만 출력
`--no-update-check`	새 버전 확인 생략

요구사항

Node 20.11 이상.

링크

소개 페이지 — https://designpaca.chanpaca.net
저장소 — https://git.chanpaca.net/yunchan/designpaca

라이선스

MIT

5.5 KiB Raw Blame History