v2.2.0 — design-md: 참고 사이트 캡처·디자인 시스템으로 design.md 만들기

새 스킬: design-md

화면 작업의 design.md(프로젝트 전체면 DESIGN.md)를 감이 아니라 측정값으로 만듭니다.

• 참고 사이트 캡처: URL을 주면 Playwright로 데스크톱 1440px·모바일 390px를 화면 단위로 찍습니다. 스크롤해야 나타나는 섹션도 찍힙니다. CSS 변수, 주요 요소의 계산된 스타일, 많이 쓴 색·글꼴·글자 크기·간격·모서리를 styles.json으로 뽑습니다.
  • Playwright가 없으면 REA(Chrome CDP)나 브라우저 도구로 캡처합니다.
  • 번들 브라우저가 없으면 설치된 Chrome으로 실행합니다.
• 디자인 시스템 반영: 링크·패키지(shadcn/ui, MUI 등)·Figma·기존 DESIGN.md가 있으면 그것이 기준입니다. 참고 사이트는 톤과 레이아웃에만 씁니다.
• 대비 검사: capture.mjs contrast <글자색> <배경색>으로 WCAG AA·AAA를 확인합니다. 미달하면 고친 값을 제안합니다.
• 템플릿: 근거, 방향, 토큰(라이트·다크·대비), 컴포넌트 상태, 화면별 빈·로딩·오류 상태, 반응형, 접근성, 우려 사항.
• brainstorming·harness-guide·/loopeng의 디자인 단계에 연결돼 있습니다.

Playwright는 하네스의 의존성이 아닙니다. 사용자 프로젝트에 있을 때만 불러 씁니다.

그 밖

• README 배너 추가.

검증

• npm test 27개, claude plugin validate . 통과.
• 실제 Claude 세션에서 /design-md로 vercel.com을 캡처(10장)하고 design.md를 만들었습니다. 본문 AA에 미달하는 링크·보조색 두 개를 대비 검사로 잡아 고친 값을 제안했습니다.

갱신

claude plugin marketplace update adlc-harness && claude plugin update adlc-harness@adlc-harness