디자인 시스템 추출 목표
"클로드 디자인으로 만드는 슬라이드 & 웹 UI" 스터디(청강)의 실습2 — design lang이라는 오픈소스 도구로 원하는 사이트의 디자인 시스템(색상·타이포·간격·컴포넌트)을 추출해서 정리해보는 실습을 진행했다. 평소 눈여겨보던 팔란티어(Palantir) 사이트를 대상으로 골랐다.
활용한 도구
Claude Code (터미널)
designlang(npm 오픈소스 CLI,npx designlang <url>)
디자인 시스템 추출 과정
작업 폴더(
design-workspace/디자인분석) 생성 후npx designlang https://www.palantir.com으로 추출 실행색상 토큰(primary
#1e1f2b, accent#0000ee), 타이포그래피(Alliance No.1, H1 80px), 간격·radius·shadow 값이 자동으로 JSON/CSS/Tailwind 등 여러 포맷으로 생성됨을 확인추출 결과를 그대로 쓰지 않고, AI에게 "이 결과를 설명하고 노이즈(문제 요소) 있으면 짚어달라"고 요청해 검수
발견된 노이즈를 교정하고, 실사용 가능한 형태로 정리한 매핑 가이드(HTML 1개 파일)로 통합
디자인 시스템 추출 시 시행착오
--emit-agent-rules옵션을 켠 상태로 실행했더니 핵심 추출 은 끝났는데 마지막 단계에서 도구 자체 버그(TypeError)로 에러가 남 — 다만 실제 산출 파일들은 모두 정상 생성되어 있어 무시해도 되는 문제였음추출 결과에 진짜 문제(노이즈)도 섞여 있었음: 반응형 브레이크포인트 값이
[object Object]로 깨져 나옴, 뉴스 기사 인용문이 "버튼 텍스트"로 잘못 분류됨, body 텍스트 크기 항목에 실제로는 H1 크기(80px)가 잘못 매핑되어 있었음즉 "AI 도구가 추출한 값을 그대로 믿지 말고, 사람이 한 번 더 검수해야 한다"는 걸 실습하며 체감함
디자인 시스템 추출에서 배운 점
디자인 시스템을 "추출"하는 것과 "실사용 가능하게 정리"하는 것은 다른 단계라는 점 — design lang은 원시 값만 뽑아줄 뿐, 노이즈 제거·매핑·통합은 AI에게 별도로 다시 요청해야 함
사이트 CSS 위생 문제(중복 선언, 미사용 CSS 비율 등)와 도구 자체의 버그를 구분해서 볼 줄 알아야 한다는 것
향후 계획
claude.ai "디자인 실험실"에 이 디자인 시스템을 업로드해서 실제로 슬라이드/웹 UI를 만들어보는 실습1까지 이어서 진행 예정
에이전트하네스 본 스터디와 병행하며, 겹치는 화요일/수요일 일정을 봐가며 청강 유지(다음 다시보기를 위해 "23기 클로드디자인" 태그로 계속 기록 남기기)
도움이 필요한 점
디자인 시스템 추출 결과의 "노이즈"를 사람이 매번 검수해야 한다면, 이 검수 과정 자체를 스킬(재사용 가능한 체크리스트)로 만들어두는 게 나을지
