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)
33 lines
2.3 KiB
Markdown
33 lines
2.3 KiB
Markdown
# 4단계 — 히어로 이후 섹션 구조 계획 (코드 미작성)
|
|
|
|
범위 제한에 따라 히어로만 구현했다. 이하는 계획이다.
|
|
|
|
## 섹션 순서 — 브리프의 설득 논리로 재배열
|
|
antipatterns.md §3 "표준 골격(히어로 → 3열 피처 → 로고월 → 요금제 → FAQ)"을 쓰지 않는다.
|
|
대상이 이미 여러 로스터리를 거쳤으므로 **불신 → 검증 → 조건 → 행동** 순서로 간다.
|
|
|
|
| # | 섹션 | 역할 | 레이아웃 패밀리 | 슬롭 회피 메모 |
|
|
|---|---|---|---|---|
|
|
| 1 | 히어로 (구현됨) | 판단 재료 즉시 제시 | 헤드 풀폭 + 5:7 비대칭 | 배지 없음, CTA 1개 |
|
|
| 2 | 척도 설명 | "산미 4"가 무슨 뜻인지 정의 | 좌측 본문 + 우측 여백 주석 | 아이콘 카드 금지. 정의문 3개를 본문으로 |
|
|
| 3 | 거래 내역 (`#ledger`) | 생두 구매가·농가·환율 공개 | 전폭 표 | R1 Transparency의 원리. **숫자는 실제 값 확보 후에만 공개** |
|
|
| 4 | 배송 조건 (`#plan`) | 주기·용량·가격·취소 | 2열 비교표(카드 아님) | 요금제 3열 카드 + "Most popular" 배지 금지 |
|
|
| 5 | 자주 오는 문의 | 실제 문의 3개 | 정의 목록 | 가상 FAQ 6개 금지. 문의가 없으면 섹션 삭제 |
|
|
| 6 | 푸터 | 사업자 정보·연락처·주소 | 좌측 정렬 단일 블록 | 링크 4열 + 소셜 아이콘 금지 |
|
|
|
|
레이아웃 패밀리 4종 (헤드+비대칭 / 본문+여백주석 / 전폭 표 / 정의 목록) → SKILL.md 카운트 규칙 "섹션 6개 이상이면 패밀리 최소 3개" 통과.
|
|
|
|
## 확보해야 할 실제 데이터 (없으면 해당 섹션 삭제)
|
|
- 원두 3종의 산미·바디·단맛 점수와 로스팅 날짜 → 히어로 표의 `—` 자리
|
|
- 생두 구매가·농가명·수입 시점 → 3번 섹션
|
|
- 구독 주기별 가격과 취소 정책 → 4번 섹션
|
|
- 실제 받은 문의 3건 → 5번 섹션
|
|
- 사업자등록번호·통신판매업 신고번호·주소·전화 → 푸터
|
|
|
|
**어느 하나도 지어내지 않는다.** SKILL.md 하드 게이트 11 대상이다.
|
|
|
|
## 사진이 생겼을 때
|
|
브리프상 지금은 없다. 생기면:
|
|
- `aspect-ratio` 고정으로 CLS 0 유지
|
|
- 듀오톤(`svg-filters.md` R4)으로 톤 통일 — 여러 산지 사진의 색온도가 제각각일 것이다
|
|
- 크기 차이로 리듬 생성. 전부 같은 비율 금지
|