yunchan/designpaca
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions
designpaca/packages/skill/references/presets/swiss-minimal.md
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

2.8 KiB
Raw Blame History

프리셋: swiss-minimal — 그리드와 침묵

한 문장: 제품이 복잡하니 화면이라도 조용해야 한다.

언제 고르나

  • 기능이 많고 설명할 것이 많은 제품 — B2B, 개발자 도구, 문서, 인프라
  • 신뢰가 전환의 조건일 때
  • 쓰지 마라: 기억에 남는 것이 목적일 때. 이 프리셋은 안전하지만 눈에 띄지 않는다

결정

타이포그래피

  • 그로테스크 산세 하나로 끝낸다. 두 번째 폰트를 넣고 싶으면 모노스페이스(라벨·코드용)까지만
  • 비율 1.200~1.250 — 위계 차이를 작게. 대신 웨이트와 색으로 구분
  • 정렬은 왼쪽. 가운데 정렬은 히어로 한 곳까지만
  • Inter 를 기본값으로 쓰지 마라. Switzer, Satoshi, DM Sans 가 거의 언제나 낫다
슬롯 무료 유료 한글
전체 Switzer, Satoshi, DM Sans Söhne, GT America Pretendard Variable
라벨·코드 JetBrains Mono, IBM Plex Mono — Pretendard + JetBrains Mono

색

  • 무채색 90% + 강조색 하나
  • 배경/카드/경계선의 명도 차이를 아주 작게. 그림자 대신 1px 경계선
  • 강조색은 채도를 낮춰라. 형광에 가까운 색은 이 프리셋에서 즉시 싸구려가 된다
  • 보라~파랑 그라디언트 절대 금지 (검출률 1위 슬롭 지문)

간격

  • 4/8 배수 그리드를 엄격하게 지킨다. 여기서만큼은 예외를 만들지 마라
  • 정렬선이 전부 맞아야 한다. 이 프리셋의 품질은 정렬에서 나온다
  • 섹션 간격은 본문의 4배

재질 (svg-filters.md)

  • 재질을 거의 쓰지 않는다. 이 프리셋의 표면은 평평한 종이다
  • 굳이 쓴다면 아주 약한 그레인 하나까지
  • 글래스모피즘 금지 — 실기기에서 FPS 15~30% 하락하고, 이 프리셋의 정직함과 어긋난다

모션 (motion.md)

  • 상태 변화 위주(--dur-instant, --dur-quick). 등장 애니메이션은 최소화
  • 모션은 피드백이지 연출이 아니다. 클릭했는데 아무 반응 없는 쪽이 훨씬 큰 죄다

흔한 실패

  1. 미니멀을 "요소를 지우는 것"으로 이해 → 미니멀은 정렬과 일관성이지 빈 화면이 아니다
  2. 회색이 너무 많아 위계가 사라짐 → --ink-muted 는 하나면 충분하다
  3. 카드에 그림자를 겹겹이 → 1px 경계선 하나가 낫다
  4. 아이콘을 이모지로 → 즉시 아마추어. 아이콘 세트 하나를 정해 일관되게
  5. 강조색을 CTA와 링크와 배지에 다 씀 → 강조가 셋이면 강조가 없다

리스크 후보

  • 히어로에서 이미지를 완전히 빼고 텍스트와 여백만
  • 색을 무채색 + 딱 한 색으로 극단적으로 제한
  • 섹션 구분선을 전부 없애고 여백만으로 구획