AI 코딩 에이전트가 웹 디자인을 순서대로 하게 만드는 스킬. 레퍼런스 조사부터 셀프 감사까지 여섯 단계 + npx 설치 CLI.
https://designpaca.chanpaca.net
0e03bbafac
배경이 단색이면 패럴랙스는 성립하지 않는다. 앞의 것이 몇 px 어긋나도
비교할 대상이 없다. 히어로 말고는 기준면이 없어 시차가 안 보였다.
배경 이미지를 사 오는 대신 이 페이지가 이미 주장하는 것을 그렸다
.bg-grid 간격 눈금 격자. 셀이 --grid-cell = --space-6
파이프라인 · 수치. "모든 값이 토큰에서 나온다"가 배경에서도 성립
.bg-glow 광원 블롭. 섹션마다 --glow-x 로 자리를 옮긴다
재료 · 설치. 히어로의 빛이 마지막 CTA 에서 돌아온다
실측 3층 (스크롤 1000 -> 1600)
격자 +14.9px · 산출물 -14px · 단계명 0
한 층은 반드시 고정이다. 전부 움직이면 그냥 흔들리는 페이지다
그리드 wide 트랙을 좁은 화면에서 닫는다
고정 10rem 이라 모바일에서도 좌우 80px 이 살아남아, 390px 에서 본문이
x=112 부터 시작하고 폭이 278px 로 줄어 제목이 네 줄로 접혔다.
--wide-pad 를 clamp 로 바꿔 닫았다. 이제 전부 x=32 에서 시작하고 두 줄이다
파이프라인 정렬선을 하나로
제목 x=371 / 리드 x=435 / 스파인 x=143 이던 것을 전부 x=183 으로.
제목·리드·브리프를 스파인과 같은 컨테이너에 넣었다
히어로 높이를 콘텐츠에 맞춘다
모바일에서 콘텐츠 390px 에 736px 을 씌워 여백이 화면의 41% 였고
다음 섹션이 화면 밖으로 밀려 스크롤 단서까지 사라졌다.
모바일 min-height 제거(736 -> 554), 데스크톱 88dvh -> 78dvh
배경 마스크 62% -> 82% 로 늘려 하단의 죽은 띠를 없앴다
스킬 motion.md 에 "패럴랙스에는 기준면이 필요하다" 를 추가.
페이지가 주장하는 것을 배경으로 그리는 표와, 한 층은 고정이라는 규칙.
390px / 1440px 실렌더: 가로 스크롤 0, 대비 실패 0. 테스트 22개 통과
|
||
|---|---|---|
| .changeset | ||
| .forgejo/workflows | ||
| apps/site | ||
| build/ci | ||
| docs | ||
| packages | ||
| research | ||
| .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