8808c672dc
웹 디자인 파이프라인 스킬과 이를 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)
100 lines
6 KiB
CSS
100 lines
6 KiB
CSS
/* ==========================================================================
|
|
무월(霧月) — 3단계 디자인 토큰
|
|
프리셋: quiet-commerce (커스텀, 02-direction.md 참조)
|
|
========================================================================== */
|
|
|
|
:root {
|
|
/* ---- 타입 — 비율 1.333 (Perfect Fourth), 본문 16px 기준 ---------------
|
|
tokens.md §6은 --step--1 ~ --step-5 (7단계)를 산출물로 요구한다.
|
|
antipatterns.md §2는 "3~5단계로 제한"을 권한다.
|
|
→ 7개를 정의하되 화면에서 실제로 쓰는 것은 4개다:
|
|
--step--1(라벨) / --step-0(본문) / --step-2(소제목) / --step-5(디스플레이)
|
|
나머지 3개는 예약. 쓰려면 이 주석을 지우고 역할을 적어라. (FINDINGS F6) */
|
|
--step--1: 0.75rem; /* 12 — 라벨·캡션 [사용] */
|
|
--step-0: 1rem; /* 16 — 본문 [사용] */
|
|
--step-1: 1.333rem; /* 21 — 예약 */
|
|
--step-2: clamp(1.5rem, 1.32rem + 0.9vw, 1.777rem); /* 28 — 소제목 [사용] */
|
|
--step-3: 2.369rem; /* 38 — 예약 */
|
|
--step-4: 3.157rem; /* 51 — 예약 */
|
|
--step-5: clamp(2.25rem, 1.3rem + 4.75vw, 4.209rem); /* 67 — 디스플레이 [사용] */
|
|
/* 최대(67) ÷ 본문(16) = 4.2배 — antipatterns.md §2 "최대/본문 4배 이상" 통과 */
|
|
|
|
--leading-tight: 1.25; /* 디스플레이 — 한글이라 라틴 1.1보다 높게 */
|
|
--leading-normal: 1.7; /* 본문 — 한글 1.6~1.8 규칙 */
|
|
--measure: 32ch; /* 한글 32자. R2 관측 522px과 수렴 */
|
|
|
|
--font-display: 'Fraunces', 'Pretendard Variable', Pretendard, serif;
|
|
--font-body: 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
|
|
/* 폰트 파일 2개 (tokens.md §5 예산 준수).
|
|
Switzer(라틴 본문)와 마루 부리(한글 디스플레이)를 의도적으로 버렸다 — 사유는 아래 성능 예산 주석. */
|
|
|
|
/* ---- 색 — 역할별. hue 2개(중립 + 강조) --------------------------------
|
|
surface: 안개 낀 종이. 순백 아님, 크림/베이지도 아님(antipatterns §1).
|
|
accent : 로스팅된 원두 갈색. 보라·인디고 계열 아님(최우선 지문 1위 회피). */
|
|
--surface: #F3F4F2;
|
|
--surface-raised: #EAEBE7;
|
|
--ink: #1A1C1A; /* 순흑 아님 */
|
|
--ink-muted: #5C605B;
|
|
--line: #D6D8D3; /* 장식용 구분선 (텍스트·UI 아님) */
|
|
--line-strong: #868C83; /* 인터랙티브 요소 경계 — 3:1 필요 */
|
|
--accent: #7A3E1D;
|
|
--accent-ink: #F3F4F2;
|
|
|
|
/* 측정된 대비비 (계산식 WCAG 2.x relative luminance)
|
|
--ink on --surface 15.54:1 ✓ 본문 4.5:1
|
|
--ink on --surface-raised 14.32:1 ✓
|
|
--ink-muted on --surface 5.80:1 ✓
|
|
--ink-muted on --surface-raised 5.35:1 ✓
|
|
--accent on --surface 7.51:1 ✓ 링크 텍스트
|
|
--accent-ink on --accent 7.51:1 ✓ CTA 내부 텍스트
|
|
--line-strong on --surface 3.12:1 ✓ UI 3:1
|
|
--line on --surface 1.30:1 — 장식 전용. 텍스트·인터랙티브 경계에 쓰지 마라 */
|
|
|
|
/* 다크 모드: 브리프에 근거 없음 → 지원하지 않는다. (가정 명시) */
|
|
|
|
/* ---- 간격 — 8px 리듬 ------------------------------------------------- */
|
|
--space-1: 0.25rem; /* 4 */
|
|
--space-2: 0.5rem; /* 8 */
|
|
--space-3: 1rem; /* 16 */
|
|
--space-4: 1.5rem; /* 24 */
|
|
--space-5: 2.5rem; /* 40 — 요소 간 */
|
|
--space-6: 4rem; /* 64 */
|
|
--space-7: 6rem; /* 96 */
|
|
--space-8: 10rem; /* 160 — 섹션 간. 요소 간(40) 대비 1:4 */
|
|
|
|
/* ---- 형태 ------------------------------------------------------------
|
|
tokens.md §6 산출물 형식에 radius 항목이 없다. 그런데 SKILL.md 하드 게이트 3이
|
|
"코너 반경이 규칙 없이 섞여 있는가"를 묻고 antipatterns.md §4는 어휘 2개를 요구한다.
|
|
→ 토큰을 직접 추가한다. (FINDINGS F8) */
|
|
--radius-container: 2px; /* 표·패널 — 인쇄물 감각이라 거의 각지게 */
|
|
--radius-interactive: 2px; /* 버튼·입력 — 컨테이너와 같게 통일 */
|
|
|
|
--container: 1120px; /* R1의 풀블리드 0.99를 축소한 값 */
|
|
--pad-inline: clamp(1.25rem, 1rem + 2vw, 5rem); /* 모바일 20px → 데스크톱 80px */
|
|
|
|
/* ---- 모션 ------------------------------------------------------------ */
|
|
--dur-instant: 100ms;
|
|
--dur-quick: 200ms;
|
|
--dur-normal: 350ms;
|
|
--dur-slow: 600ms;
|
|
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
|
|
--ease-in: cubic-bezier(0.64, 0, 0.78, 0);
|
|
--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
/* ---- 재질 (svg-filters.md) ------------------------------------------- */
|
|
--grain: 0.03; /* 최약. 오프화이트 배경의 밴딩 제거용 */
|
|
}
|
|
|
|
/* ==========================================================================
|
|
성능 예산 = JS 0KB / 첫 인터랙션 3초 (모바일 4G)
|
|
- 프레임워크 없음. R3 모션은 CSS scroll-driven이라 JS 0바이트
|
|
- 폰트 파일 2개: Fraunces(latin 서브셋) + Pretendard Variable(korean+latin 서브셋)
|
|
· tokens.md §5 "폰트 2개 이하"를 지키기 위해 4개 후보 중 2개를 버렸다.
|
|
버린 것: Switzer(라틴 본문) → Pretendard의 라틴으로 대체
|
|
마루 부리(한글 디스플레이) → Pretendard 700으로 대체
|
|
· antipatterns.md §8 "라틴 폰트를 폴백 앞에" 규칙은 --font-display에서만 지킨다.
|
|
--font-body는 Pretendard가 앞이지만, Pretendard는 자체 라틴 글리프를 포함하므로
|
|
한글 폰트로 라틴이 조악하게 그려지는 문제가 없다. (예외 근거 명시) (FINDINGS F7)
|
|
- 이미지 없음(브리프 제약) → 이미지 예산 0
|
|
- 애니메이션 속성: transform / opacity 만
|
|
========================================================================== */
|