8808c672dc
웹 디자인 파이프라인 스킬과 이를 5개 에이전트에 설치하는 CLI 를 담은 모노레포. 스킬 (packages/skill) - SKILL.md 261줄 + 참조 문서 16개 3,349줄. progressive disclosure 로 본문은 절차와 인덱스만, 지식은 references/ 로 분리 - 0~6단계 파이프라인. 규모에 따라 전체·연장·국소 세 경로로 분기 - 하드 게이트 12개는 grep·카운트로 검증 가능한 것만. 취향 판단은 제외 - 미학 프리셋 5종, AI 슬롭 지문 목록, 한글 조판 규칙, SVG 필터·three.js·인터랙티브 모션·HTML-in-Canvas 실전 지침 설치 CLI (packages/cli, packages/core) - npx designpaca 온보딩 TUI. Claude Code · Codex · Cursor · Windsurf · AGENTS.md - 매니페스트에 설치 시점 해시를 기록해 사용자가 고친 파일은 update 가 건너뛴다 - 타깃별로 본문의 references/ 경로를 실제 설치 위치로 재작성 - AGENTS.md 는 항상 로드되므로 본문 대신 303자 포인터만 주입 - Windsurf 는 12,000자 상한 초과 시 설치를 차단 배포 (build/ci, .forgejo/workflows) - 태그 v* → 검사·테스트·빌드 → npmjs 배포 + Forgejo 레지스트리 미러 → draft 릴리스 → Cloudflare Pages. 재실행 멱등 근거 (research/) - 약 250개 웹 소스 조사 결과와 도그푸딩 검증 2건. 스킬의 모든 수치는 여기서 나온다 테스트 22개 통과 (core 16 · cli 6)
116 lines
4.6 KiB
Markdown
116 lines
4.6 KiB
Markdown
# designpaca
|
|
|
|
**웹 디자인 파이프라인 스킬을 Claude Code · Codex · Cursor 에 한 줄로 설치한다.**
|
|
|
|
```bash
|
|
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. 폴백을 완성한 뒤에만 얹도록 격리
|
|
|
|
## 설치
|
|
|
|
```bash
|
|
npx designpaca # 대화형 온보딩 (권장)
|
|
```
|
|
|
|
설치 대상을 자동 감지해서 기본 선택해준다.
|
|
|
|
### 비대화형
|
|
|
|
```bash
|
|
npx designpaca install -t claude-code,codex -s user -y
|
|
npx designpaca install -t cursor -s project
|
|
```
|
|
|
|
| 대상 | 설치 위치 |
|
|
|---|---|
|
|
| `claude-code` | `~/.claude/skills/designpaca/` (또는 프로젝트 `.claude/`) |
|
|
| `codex` | `~/.codex/skills/designpaca/` |
|
|
| `cursor` | `.cursor/rules/designpaca.mdc` (프로젝트 단위) |
|
|
| `agents-md` | `AGENTS.md` 에 블록 주입 |
|
|
|
|
## 사용
|
|
|
|
설치 후 에이전트에게 그냥 말하면 된다.
|
|
|
|
```
|
|
랜딩 페이지 만들어줘 — 수제 커피 로스터리, 원두 정기구독이 목적
|
|
```
|
|
|
|
Claude Code 에서는 `/designpaca` 로 명시적으로 부를 수도 있다.
|
|
|
|
## 명령어
|
|
|
|
```bash
|
|
npx designpaca update # 최신 스킬로 갱신
|
|
npx designpaca doctor # 설치 상태 진단
|
|
npx designpaca list # 설치 가능 대상과 현재 설치 목록
|
|
npx designpaca uninstall # 제거
|
|
```
|
|
|
|
### 업데이트가 내 수정을 덮지 않는다
|
|
|
|
스킬 파일을 직접 고쳤다면 `update` 는 **그 파일을 건드리지 않고 건너뛴다.** 설치 시점의 해시를 기록해두고 비교하기 때문이다.
|
|
|
|
강제로 최신 내용에 맞추려면 `--force` 를 쓴다. 이때도 원본은 `.orig` 로 남는다.
|
|
|
|
```bash
|
|
npx designpaca update --force
|
|
```
|
|
|
|
`AGENTS.md` 처럼 사용자 문서에 주입하는 경우, 마커 블록(`<!-- designpaca:start -->`) **안쪽만** 교체한다. 문서의 나머지는 손대지 않는다. 제거할 때도 블록만 빼간다.
|
|
|
|
## 옵션
|
|
|
|
| 옵션 | 설명 |
|
|
|---|---|
|
|
| `-t, --target <id[,id]>` | `claude-code` `codex` `cursor` `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
|