designlang MCP로 실제 사이트 크롤링 → 디자인 시스템 교정 → Claude Design 업로드까지

소개

시도하고자 했던 것과 그 이유

"AI가 웹사이트를 크롤링만 해서 쓸 만한 디자인 시스템을 뽑아낼 수 있을까?"를 처음부터 끝까지 직접 검증해보고 싶었습니다.

우리 회사 사이트를 대상으로 아래 파이프라인을 한 세션 안에서 전부 실습했습니다.

designlang이라는 오픈소스 MCP를 설치
실제 사이트를 크롤링해 디자인 토큰(색·폰트·간격 등)을 자동 추출
자동 추출 결과를 그대로 믿지 않고, AI와 함께 노이즈를 걷어내고 근거를 남겨 교정
교정한 토큰을 실제 컴포넌트(히어로·가격표·CTA·카드·뱃지)와 PPTX 카탈로그 규칙에 매핑
결과물을 Claude의 신규 기능인 Claude Design(claude.ai/design)에 프로젝트로 업로드

핵심 질문은 "자동 추출 = 완제품"이 아니라 "자동 추출 = 초안, 사람의 검수 단계가 어디서 왜 필요한가"였습니다.

진행 방법

Step 1 — designlang MCP 설치

레지스트리에 없는 이름이라 웹서치로 실체를 확인(오픈소스 npm 패키지, npx designlang mcp로 뜨는 stdio 서버)한 뒤 Claude Desktop 설정 파일(claude_desktop_config.json)에 직접 등록했습니다. 편집 전 백업 → JSON 문법 검증 → 실제 프로세스 기동까지 확인.

designlang mcp를 설치해줘

Step 2 — 실제 사이트 크롤링 & 추출

현재 폴더 안에 "디자인분석"이라는 새 폴더를 만들고, 그 폴더 안에서 아래를 실행한 뒤 생성된결과 파일들을 정리해서 요약해줘:npx designlang https://home.koelsa.or.kr/main.do

→ 35개 파일 생성(디자인 토큰 JSON, Tailwind config, Figma 변수, 모션 프리셋, 접근성 리포트, 브랜드 보이스 분석 등). 이 시점에는 원본 그대로 요약만 했습니다.

Step 3 — 노이즈 교정 + 컴포넌트 매핑 + PPTX 규칙 + 통합 HTML

여기가 이번 실습의 핵심입니다. 원본 추출 결과를 "초안"으로 못박고, 구체적으로 뭘 교정할지 지시했습니다.

designlang이 뽑아준 토큰과 브랜드 문서를 원본 초안으로 삼아, 다음을 해줘:
1. 추출 노이즈(폰트·색 대비 등) 필요하면 교정하고 대안 제시
2. 이 토큰을 상세페이지(HTML)의 실제 컴포넌트(히어로/가격표/CTA/카드/뱃지)에 매핑한 적용 가이드
3. PPTX 카탈로그용 규칙(표지·본문 슬라이드 색/폰트/여백) 별도 정리
4. 위를 하나의 HTML로 묶어 한눈에 디자인 시스템을 살펴보게 해줘. 보고 피드백할게.

결과물: design-system-guide.html (6개 섹션 — 진단&교정 / 정리된 토큰 / 대비 랩 / 컴포넌트 적용 / PPTX 규칙 / 체크리스트)

가장 만족스러웠던 부분은 "실시간 WCAG 대비 계산기"를 문서 안에 직접 넣은 것입니다. AI가 "이 조합은 6.0:1이라 통과입니다"라고 텍스트로 주장하는 대신, 페이지 로드 시 자바스크립트로 실제 대비를 계산해서 보여주도록 만들어서 — 제가 굳이 손으로 검산하지 않아도 그 자리에서 검증되는 구조입니다.

Step 4 — Claude Design(claude.ai/design)에 업로드

방금 우리가 이 대화에서 함께 만든 디자인 시스템을,클로드 디자인(claude.ai/design)의 디자인 시스템으로 업로드해줘.
- 컴포넌트별 @dsCard 미리보기 카드 + 토큰을 담은 업로드용 패키지로 먼저 재구성해줘 (아직 없으면 지금 만들어줘)
- "KoELSA 디자인 시스템" 이라는 새 프로젝트를 만들어 올려줘
- 도중에 디자인 권한 승인 창이 뜨면 알려줘, 내가 승인할게

@dsCard가 정확히 뭔지 문서에 안 나와 있어서, AI가 실제 연동 도구(DesignSync)의 스키마 설명을 근거로 "미리보기 HTML 파일 첫 줄에  주석을 넣으면 자동으로 카드가 등록된다"는 규칙을 확인한 뒤 패키지를 구성했습니다.

최종 패키지 구조:

claude-design-package/
├── README.md # 브랜드 컨텍스트 + 교정 내역 요약
├── tokens/
│ ├── colors_and_type.css # CSS 변수
│ └── design-tokens.json # DTCG 포맷 토큰
└── previews/ # @dsCard 미리보기 9장
  ├── brand.html / colors.html / type.html / spacing.html
  ├── component-hero.html / -pricing.html / -cta.html / -card.html / -badge.html
  └── pptx-cover.html / pptx-body.html

이 14개 파일을 create_project → finalize_plan → write_files 순서로 업로드해서 "KoELSA 디자인 시스템" 신규 프로젝트가 claude.ai/design에 생성됐습니다.

결과와 배운 점

배운 점 & 꿀팁

자동 추출은 "초안"이지 "완제품"이 아니다. designlang의 원본 진단 점수는 67/100(D)이었고, 접근성 점수는 33/100으로 특히 낮았습니다. 실제로 흰 글자 버튼 대비가 3.2:1(AA 기준 4.5:1 미달)인 조합을 그대로 썼다면 눈에 잘 안 보이는 UI가 나갈 뻔했습니다.
도구가 "실패"라고 말해도 실제 산출물을 확인하는 습관이 중요합니다. 크롤링 마지막에 PDF 브랜드북 변환 단계만 에러가 나서 종료 코드가 1이었는데, 로그를 자세히 보니 핵심 추출 35개 파일은 이미 정상 생성된 뒤였습니다.
AI가 스스로 검증 가능한 결과물을 만들게 하면 신뢰도가 확 올라갑니다. "대비가 6:1이라 괜찮습니다"라는 문장 대신, 실시간으로 계산해서 보여주는 계산기를 요청하니 사람이 일일이 재검산할 필요가 없어졌습니다.
새 기능을 다룰 땐 도구 스키마/공식 문서를 먼저 확인하고, 짐작으로 포맷을 만들지 않는 게 안전합니다. @dsCard 문법을 임의로 추측하지 않고, 연동 도구의 설명에 있는 정확한 규칙을 근거로 삼았습니다.

시행착오

원하는 이름("KoELSA 디자인 시스템")이 기존 프로젝트("KoELSA 공식 디자인 시스템" 등)와 이름이 겹쳐서, 무작정 새로 만들지 않고 먼저 어떻게 할지 확인받았습니다. 비슷한 이름의 프로젝트가 계속 쌓이는 걸 미리 막을 수 있었습니다.
업로드 스킬(/design-sync)은 AI가 스스로 호출하지 못하도록 막혀 있어서, 대신 기반 도구를 직접 조합해서 같은 결과를 만들어야 했습니다.

앞으로의 계획

Claude Design에 등록한 디자인 시스템을 활용하여 직원 교육용 다양한 PPT슬라이드를 제작해 볼 예정
기존에 제작한 PPT슬라이드의 디자인을 등록한 디자인 시스템으로 변환

🔥<24기 AI 스터디> 9/21 모집 마감 🔥