Yun Chan 8808c672dc designpaca 초기 구현 — 스킬 · 설치 CLI · 배포 파이프라인

웹 디자인 파이프라인 스킬과 이를 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)

2026-08-20 10:48:00 +09:00

5.7 KiB

Raw Permalink Blame History

design.md — Pulsegate

이 프로젝트를 다음에 이어받는 사람(또는 에이전트)이 읽는 파일이다. 여기 적힌 결정을 designpaca 기본값보다 우선한다.

브리프 3줄

무엇을:  API 모니터링 SaaS "Pulsegate" 랜딩 페이지 (단일 페이지)
누구에게: 백엔드/SRE 엔지니어. Datadog·Grafana 사용 중. 가격과 셋업 시간에 민감. 목표는 무료 체험 가입
제약:    영어 / React + Vite / 다크·라이트 둘 다 / 제품 스크린샷 있음 / 성능 예산 스킬 기본값

레퍼런스

슬롯	사이트	가져온 것
R1 구조	https://www.checklyhq.com	컨테이너 폭, 여백 리듬(섹션:요소 = 1:4), 히어로에 실행 가능한 명령을 두는 관행
R2 톤	https://fitzcarraldoeditions.com	강조색을 링크 글자에만 쓰는 규율, 전면 세리프, radius 2~5px
R3 디테일	https://tympanus.net/codrops/2026/05/21/creating-scroll-driven-svg-map-animations-with-gsap/	스크롤-진행도 바인딩 개념 (최종 미채택 — 하드게이트 #8 위반)

한 문장 컨셉

야간 당직실의 계기판 — 읽히도록 어둡고, 출판물처럼 조판된.

프리셋

dark-instrument.

다크를 기본으로 삼은 근거 (프리셋이 요구하는 정당화):

청중이 온콜 SRE다 — 어두운 환경에서 본다
제품 스크린샷이 다크 대시보드다 — 라이트 랜딩이면 스크린샷이 뜬다

라이트는 파생물이 아니라 동등한 정의로 작성했다(tokens.css에 값이 따로 있다). 적용 규칙: OS가 라이트를 선호하면 라이트, 그 외 다크. 토글이 있으면 토글이 이긴다.

감수한 리스크 하나

주 CTA에 강조색을 쓰지 않는다. 잉크 반전(밝은 표면 + 어두운 글자)으로만 만들고, 코발트는 인라인 링크와 데이터 축에만.

철회 조건: 회색조 위계에서 CTA가 3위 밖으로 밀리면 즉시 강조색 투입
5단계 검사 결과 CTA는 2위 유지 → 철회하지 않음

토큰

전문은 hero/src/styles/tokens.css. 요약:

타입: 본문 스케일 비율 1.250 / 5단계(13·16·20·25·31). 디스플레이 2개는 스케일 밖(--display-1 44→64, --display-2 32→40). h1÷본문 = 4.0배
폰트: Newsreader(디스플레이) / IBM Plex Sans(본문) / IBM Plex Mono(코드·수치)
색: surface 2단계 + ink 2단계 + line + accent 1개(코발트) + 상태 3색. 다크·라이트 각각 정의
간격: 4px 그리드, --space-1~8, --container: 70rem
형태: radius 2px / 4px 2종만. 그림자 없음(표면 톤 차이로 깊이)
모션: tokens.md 값 그대로

성능 예산과 실측

예산 원본은 tokens.md §5. 실측은 05-preflight.md §2.

항목	예산	실측
총 전송량 (첫 화면)	1MB	12.4KB
WebGL 추가분	+200KB	0KB
CLS	0.1	구조적 0 (`aspect-ratio` + `width/height`)
JS gzip	150KB	미측정
LCP / 첫 인터랙션	2.5초 / 3초	미측정
폰트 파일	2개 이하	3종 (초과) — 디스플레이는 h1 전용 서브셋, Mono는 400 단일 웨이트

채택한 이펙트와 그 폴백

이펙트	폴백
SVG 필터	미채택. `dark-instrument`는 그레인 금지, "재질을 거의 안 쓴다"
three.js / WebGL	미채택. `three.md` §0 게이트 조건 1에서 탈락 — 필요한 것이 플랫 표면과 SVG 선뿐이라 CSS로 충분
모션	거의 없음. CTA·버튼 hover의 `translateY(-1px)`만. `prefers-reduced-motion`에서 1ms로 축소
테마 토글	JS 실패 시 OS 설정을 따르는 CSS 경로가 그대로 남는다
복사 버튼	JS 실패 시 명령 텍스트가 선택 가능한 `<code>`로 남는다

미확정 — 다음 사람이 채워야 할 것

{{REGION_COUNT}} — 실제 리전 수. 지어내지 않았다(하드게이트 #11)
과금 모델("호스트 무료, 체크 과금")이 실제 제품 사실인지 확인 필요. 헤드라인 전체가 여기 걸려 있다
제품 스크린샷 실제 파일 (/product-checks.png가 placeholder)
빈 상태·오류 상태·로딩 상태
2~6번 섹션 (반론 처리 → 실제 화면 → 가격 → 마이그레이션 → 최종 CTA)

의도적으로 하지 않은 것과 그 이유

이 절이 가장 중요하다. 적어두지 않으면 다음 사람이 "빠뜨린 것"으로 착각하고 되돌린다.

안 한 것	이유
로고월	검증 가능한 고객 실명이 없다. `antipatterns.md` §4 — 회색조 로고 일렬은 신뢰를 깎는다
후기 섹션	실명·직함·원문 링크가 없다. 없으면 넣지 않는다
FAQ	실제로 받은 질문이 없다. 가상 질문 FAQ는 지문이다
3열 피처 카드	`antipatterns.md` §3 — 콘텐츠가 3개여서가 아니라 3이 예쁘게 떨어져서 3인 것
지표 배너 (`99.9% uptime` 등)	브리프가 수치를 주지 않았다. 하드게이트 #11
펄스 상태 점	모니터링 제품의 최대 유혹. 정적 정보에 장식 애니메이션은 금지
터미널 목업 div	하드게이트 #12. 실제 스크린샷을 쓴다
스크롤 애니메이션	R3에서 가져오려 했으나 `stroke-dashoffset` 애니메이션이 하드게이트 #8(transform/opacity만) 위반. GSAP 60KB도 예산의 40%
Inter	R1(Checkly)이 Inter지만 `antipatterns.md` §2가 "이유 없는 Inter"를 금지
CTA 2개 나란히	주 행동을 정하지 못했다는 신호. 보조는 텍스트 링크로 격하

근거: research/dogfood-saas/01~05 (작업일 2026-08-20)

5.7 KiB Raw Permalink Blame History