AI 코딩 에이전트가 웹 디자인을 순서대로 하게 만드는 스킬. 레퍼런스 조사부터 셀프 감사까지 여섯 단계 + npx 설치 CLI. https://designpaca.chanpaca.net

Find a file

Yun Chan 3271a329af Some checks are pending ci / build (push) Waiting to run Details refactor(site): 섹션 순서를 성격별로 묶고 분량을 우선순위에 맞춘다 지적마다 그 섹션만 키운 결과 15.5 화면이 됐고, 기능 설명과 증거가 번갈아 나와 지금 무슨 이야기를 듣고 있는지 알 수 없었다. 순서를 네 묶음으로 정리했다. ① 무엇인가 히어로 · 파이프라인 ② 무엇을 아는가 SVG 필터 · 한글 조판 ③ 정말 그런가 사례 · 수치 · 자기 감사 · 규칙 ④ 행동 설치 분량: - SVG 필터 3.1 → 2.1 화면. 스킬 문서에 있을 구현 디테일을 페이지에 옮겨 적고 있었다. 데모는 넷 다 두고 설명만 줄였다. - .stage 의 padding 에 --wide-pad 를 쓰고 있었다. 이 토큰은 페이지 그리드의 바깥 칼럼용(최대 10rem)이라 1440px 에서 폭 320px 이 사라졌고, 그만큼 설명 칸이 170px 로 눌려 여덟 자마다 줄이 바뀌었다. - 자기 감사 항목 13개 → 6개. 나열이 밀도를 대신하고 있었다. 파이프라인 끝의 마무리 문장을 삭제했다. sticky 게이트가 끝까지 돌 스크롤 구간이 필요해서 만든 자리에 문장을 채운 것이라, 읽는 사람에게는 앞뒤 없이 튀어나온 문장이었다. 여백이 필요하면 여백을 만든다. 전체 15.5 → 13.5 화면.		2026-08-21 00:34:40 +09:00
.changeset	designpaca 초기 구현 — 스킬 · 설치 CLI · 배포 파이프라인	2026-08-20 10:48:00 +09:00
.forgejo/workflows	릴리스 워크플로도 빌드를 테스트보다 먼저 돌린다	2026-08-20 18:09:07 +09:00
apps/site	refactor(site): 섹션 순서를 성격별로 묶고 분량을 우선순위에 맞춘다	2026-08-21 00:34:40 +09:00
build/ci	verify-node: Node 가 없을 때가 아니라 모자랄 때 대체 경로를 찾는다	2026-08-20 17:13:12 +09:00
docs	커스텀 도메인이 활성화됐다 — designpaca.chanpaca.net	2026-08-20 20:43:35 +09:00
packages	feat(site): 리퀴드 글래스 굴절을 올바른 변위 지도로 다시 붙인다	2026-08-20 23:30:15 +09:00
research	히어로 3D 를 파이프라인 게이트로 — 형태에 이유를 준다	2026-08-20 12:32:09 +09:00
.env.example	env: Cloudflare/npm 항목 안내를 구체화한다	2026-08-20 17:19:43 +09:00
.gitattributes	배포 환경을 실측해 .env.example 에 남긴다	2026-08-20 16:58:24 +09:00
.gitignore	designpaca 초기 구현 — 스킬 · 설치 CLI · 배포 파이프라인	2026-08-20 10:48:00 +09:00
.npmrc	빌드를 테스트보다 먼저 돌리고, SKIP 을 실패로 취급한다	2026-08-20 17:17:41 +09:00
designpaca-en.html	소개 페이지 전면 재디자인 — Ethereal Glass	2026-08-20 11:45:38 +09:00
designpaca-ko.html	소개 페이지 전면 재디자인 — Ethereal Glass	2026-08-20 11:45:38 +09:00
package.json	designpaca 초기 구현 — 스킬 · 설치 CLI · 배포 파이프라인	2026-08-20 10:48:00 +09:00
pnpm-lock.yaml	소개 페이지 전면 재디자인 — Ethereal Glass	2026-08-20 11:45:38 +09:00
pnpm-workspace.yaml	designpaca 초기 구현 — 스킬 · 설치 CLI · 배포 파이프라인	2026-08-20 10:48:00 +09:00
README.md	designpaca 초기 구현 — 스킬 · 설치 CLI · 배포 파이프라인	2026-08-20 10:48:00 +09:00
tsconfig.base.json	designpaca 초기 구현 — 스킬 · 설치 CLI · 배포 파이프라인	2026-08-20 10:48:00 +09:00

README.md

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