AI 코딩 에이전트가 웹 디자인을 순서대로 하게 만드는 스킬. 레퍼런스 조사부터 셀프 감사까지 여섯 단계 + npx 설치 CLI.
https://designpaca.chanpaca.net
b92853bf2b
실제로 한 페이지를 만들어 보고 드러난 것들이다. 0단계 인터뷰에 두 축을 더한다. - 브랜드 색: 꽃집 작업에서 색을 묻지 않고 레퍼런스 실측 평균으로 정했다. 결과는 좋았지만 브랜드 색이 있었다면 그걸 무시한 작업이 된다. "없다"는 답도 답이고, 그때는 피해야 할 색을 묻는다. - 좁은 화면 내비: 항목 수는 0단계에 이미 정해져 있는데 구현에서 발견했다. 2~4개는 쌓고, 5~6개는 가로 스크롤, 7개 이상만 여는 메뉴다. 넷인데 햄버거를 쓰면 탭 한 번을 공짜로 뺏는 것이다. 4-0 이미지 조달 단계를 새로 만든다(references/images.md). 자리를 만들기 전에 무엇을 실을지 정한다. codex 설치와 auth_mode 를 확인해 생성 경로를 쓰고, 생성물이라는 사실을 design.md 에 남긴다. 래퍼 실패 대응을 기록했다 — codex-cli 0.147.0 은 base64 를 돌려주지 않고 ~/.codex/generated_images/<session>/exec-<id>.png 로 저장한다. 공식 래퍼는 "image_gen 이 호출되지 않았다"며 실패하지만 파일은 멀쩡히 있다. 실측에서 이 메시지를 보고 두 번 다시 만들었고 두 번 다 이미 있었다. 싣기 전 최적화도 넣었다(실측 10.1MB → 603KB). 구현에서 넘어진 것 셋. - images.md: <img width height> 를 적으면 그 height 가 계산된 높이가 되어 aspect-ratio 가 조용히 무시된다. computed 는 "3 / 4" 로 멀쩡히 보이고 실제 높이는 원본 1448px 이었다. height:auto 한 줄로 10.9 화면이 7 화면이 됐다. - antipatterns.md: "컨트롤이 2줄로 접히나" 를 개별 높이로 재서 거짓 통과했다. 링크는 한 줄짜리였고 줄바꿈된 것은 컨테이너였다(top 46/77). 행 수는 높이가 아니라 top 값의 종류로 센다. - typography.md: 세로쓰기에 가로쓰기 자간(0.14em)을 물리면 글자 사이 세로 간격이 되어 낱글자가 흩어진다. 한글은 자소가 모여 한 글자라 특히 심하다. - layout.md: 그리드 구조를 바꾸면 미디어쿼리도 같이 다시 써야 한다. 넓은 화면은 멀쩡했고 390px 에서 헤드라인이 6줄이 됐다. |
||
|---|---|---|
| .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