AI 코딩 에이전트가 웹 디자인을 순서대로 하게 만드는 스킬. 레퍼런스 조사부터 셀프 감사까지 여섯 단계 + npx 설치 CLI.
https://designpaca.chanpaca.net
4e1e5f0073
세 가지를 고친다. 전부 실제 사용에서 드러난 것이다.
1) 0단계에서 가정으로 채우던 것을 인터뷰로 바꾼다
"꽃집 사이트 만들어보자"를 받고 업종 성격·목표 행동·톤·이름을 혼자 정했다.
물어보니 넷 중 넷이 달랐다(일상 구독 → 하이엔드 스튜디오, 문의 하나 → 넷 다,
톤 미정 → 에디토리얼, 이름 지어냄 → 목요일의 화원).
그대로 갔으면 레퍼런스 세 개를 전부 틀린 방향에서 골랐다.
SKILL.md 0단계에 질문 도구로 한 번에 묻는 절차를 넣었다. 무엇을 묻고
무엇을 묻지 않는지, 답이 모순될 때 어떻게 정리하는지까지 적었다.
2) 레퍼런스가 막히면 브라우저를 띄운다
Aesop(403) → Kinto(404) → Hasami(DNS) → MUJI(타임아웃)로 네 번 왕복하고
톤 레퍼런스를 하나도 못 얻었다. 좋은 레퍼런스일수록 봇을 막는다.
galleries.md 에 headed 브라우저로 직접 열어 스크린샷과 실측값을 받는
방법을 넣고, 접근 실패 2회면 바로 전환하도록 규칙을 세웠다.
Playwright 를 선택 의존성으로 잡았다(core/tools.ts).
- 온보딩 마지막에 설치 여부를 묻는다. 건너뛰어도 스킬은 동작한다
- `designpaca tools` 로 상태 확인, `--yes` 로 설치
- 수백 MB 라 --yes 없이는 상태만 보여준다
- MCP 서버는 설치만 하고 등록 명령은 안내만 한다(에이전트 설정을
대신 건드리지 않는다)
3) 온보딩 말투
"이제 브리프를 던져라", "설치해라", "건너뛴다" — 사용자를 향한 문구가
명령조였다. 스킬 문서의 단정한 반말은 의도지만 CLI UI 는 다르다.
전부 존댓말로 바꾸고, 각 단계가 왜 필요한지 설명을 붙였다.
명령조가 다시 섞이지 않도록 검사하는 테스트를 넣었다(테스트 22 → 25개).
|
||
|---|---|---|
| .changeset | ||
| .forgejo/workflows | ||
| apps/site | ||
| build/ci | ||
| docs | ||
| packages | ||
| research | ||
| .env.example | ||
| .gitattributes | ||
| .gitignore | ||
| .npmrc | ||
| designpaca-en.html | ||
| designpaca-ko.html | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| tsconfig.base.json | ||
designpaca — 모노레포
웹 디자인 파이프라인 스킬과 그 설치 CLI.
사용자용 문서는 packages/cli/README.md 를 봐라 — npm 페이지에 그대로 실린다.
npx designpaca
구조
packages/
skill/ @designpaca/skill — SKILL.md 와 references/. 이 저장소의 실질 가치
core/ @designpaca/core — 설치 엔진: 타깃 어댑터, 매니페스트, 드리프트 감지
cli/ designpaca — npx 진입점 + 온보딩 TUI. 유일하게 npm 에 배포되는 패키지
apps/
site/ @designpaca/site — 소개 페이지 (Astro → Cloudflare Pages)
build/ci/ — CI 스크립트 (Node 검증, npm 배포, 릴리스 업로드, 스킬 검사)
research/ — 스킬의 근거 자료. 약 250개 웹 소스 조사 결과
docs/DEPLOYMENT_PLAN.md — 배포·릴리스 운영 절차
core 와 skill 은 private 이다. CLI 빌드 시 core 는 번들에, skill 은 dist/skill/ 로 복사된다.
사용자는 npx designpaca 한 번으로 전부 받는다.
개발
pnpm install
pnpm build # 스킬 번들 + CLI 빌드
pnpm test # core 14 + cli 6
pnpm typecheck
pnpm dev:site # 소개 페이지 로컬
CLI 를 실제 경로로 테스트
npx 가 겪는 경로를 그대로 재현하려면 tarball 로 확인한다.
pnpm build
cd packages/cli && npm pack
npx ./designpaca-0.1.0.tgz --help
설치 왕복을 안전하게 시험하려면 홈 디렉터리를 바꿔라.
HOME=/tmp/dp USERPROFILE=/tmp/dp node packages/cli/dist/index.js install -t claude-code -s user -y
스킬 문서를 고쳤다면
node build/ci/lint-skill.mjs packages/skill
프론트매터 필수 필드, description 길이, 본문이 가리키는 참조 문서의 존재, 참조되지 않는 죽은 문서를 검사한다. CI 가 같은 것을 돌린다.
릴리스
pnpm changeset # 변경 기록
pnpm version # 버전 확정 (fixed 그룹이라 세 패키지가 함께 움직인다)
git tag v0.1.0 && git push origin main --tags
태그 푸시가 Forgejo Actions 를 발동시킨다: 검사 → 테스트 → 빌드 → npmjs 배포 + 사설 레지스트리 미러 → draft 릴리스 → Cloudflare Pages.
시크릿 등록과 러너 전제는 docs/DEPLOYMENT_PLAN.md 에 있다.
라이선스
MIT