# Claude로 만드는 디자인 시스템

> 감에 의존하던 웹 디자인을 재사용 가능한 규칙으로 만들고 싶은 분께 맞아요. 실제 사이트의 색·글꼴·여백을 추출하고 상세페이지, 모션 광고와 학습 앱에 적용해요.

- 연재: https://community.clauders.ai/series/claude-design-systems
- 공간: [이미지 / 음악 / 영상](https://community.clauders.ai/media)
- 편 수: 8

## 편 목록

1. [designlang으로 웹사이트 디자인 언어를 추출하고, 교정해서 클로드 디자인 시스템으로 올리기](https://community.clauders.ai/media/post/designlang%EC%9C%BC%EB%A1%9C-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%96%B8%EC%96%B4%EB%A5%BC-%EC%B6%94%EC%B6%9C%ED%95%98%EA%B3%A0-%EA%B5%90%EC%A0%95%ED%95%B4%EC%84%9C-%ED%81%B4%EB%A1%9C%EB%93%9C-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%9C%BC%EB%A1%9C-%EC%98%AC%EB%A6%AC%EA%B8%B0-dfd43442-5326-87e1-861a-5b9e8a3ea743) — 고양이집사, 2026-07-22
   사용 도구 Claude Code (Opus 4.8) — 전 과정 진행 designlang v12.21.0 — npx로 실행하는 디자인 언어 추출 CLI claude.ai/design — 최종 디자인 시스템 호스팅 1단계. 환경 확인 내 컴퓨터에 Node.js가 설치돼 있는지 확인해줘 (node --version 실행). 설치돼 있으면 버전만 알려줘. 안…
2. [우리 디자인 시스템 & designlang으로 실제 사이트 디자인 시스템 비교하기](https://community.clauders.ai/media/post/%EC%9A%B0%EB%A6%AC-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C-designlang%EC%9C%BC%EB%A1%9C-%EC%8B%A4%EC%A0%9C-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C-%EB%B9%84%EA%B5%90%ED%95%98%EA%B8%B0-2e847bb6-2230-874a-9a7f-b34fd343247c) — 하루, 2026-07-22
   1단계 — 자동 추출 (designlang) Node.js 환경에서 CLI 도구 하나로 사이트를 분석했습니다. 헤드리스 브라우저로 실제 페이지를 렌더링한 뒤, DOM 912개 요소의 getComputedStyle()을 통계 내서 색·폰트·여백·컴포넌트 패턴을 36개 포맷(마크다운, Tailwind config, Figma 변수, DTCG JSON, 모션…
3. [스마트스토어 상세페이지, "이미지 대신 텍스트"로 코딩하기 — 스마트에디터 ONE에서 안 깨지는 HTML 템플릿 만들기](https://community.clauders.ai/media/post/%EC%8A%A4%EB%A7%88%ED%8A%B8%EC%8A%A4%ED%86%A0%EC%96%B4-%EC%83%81%EC%84%B8%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%8C%80%EC%8B%A0-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EB%A1%9C-%EC%BD%94%EB%94%A9%ED%95%98%EA%B8%B0-%EC%8A%A4%EB%A7%88%ED%8A%B8%EC%97%90%EB%94%94%ED%84%B0-one%EC%97%90%EC%84%9C-%EC%95%88-%EA%B9%A8%EC%A7%80%EB%8A%94-html-%ED%85%9C%ED%94%8C%EB%A6%BF-%EB%A7%8C-d80a059c-e37b-8db1-960b-e9a7ffaec39c) — Lumi, 2026-07-23
   소개 시도하고자 했던 것과 그 이유 농산물(정읍명품귀리 귀리쌀) 상세페이지를 Claude Code로 HTML 코딩해서 스마트스토어에 적용했습니다. 그런데 정작 스마트에디터 ONE으로 변환해 붙여넣자 곳곳이 깨졌습니다 — 원형 배지가 찌그러지고, 비율 그래픽이 통째로 사라지고, 둥근 모서리가 무시되는 식이었습니다. 이걸 계기로 목표를 다시 잡았습니다. 단순…
4. [클로드 디자인에서 디자인랭 체험하기](https://community.clauders.ai/media/post/%ED%81%B4%EB%A1%9C%EB%93%9C-%EB%94%94%EC%9E%90%EC%9D%B8%EC%97%90%EC%84%9C-%EB%94%94%EC%9E%90%EC%9D%B8%EB%9E%AD-%EC%B2%B4%ED%97%98%ED%95%98%EA%B8%B0-b5a2639a-2ea9-89d7-8e3e-e1b1372be860) — 킥보드, 2026-07-24
   Claude와 designlang으로 디자인 분석 폴더를 만들어 본 실습 클로드 디자인 1주차 실습으로, 마음에 드는 웹사이트의 디자인을 분석해 색상, 폰트, 여백, 버튼, 카드 등의 디자인 규칙을 추출해 보았습니다. 평소 웹사이트를 만들 때 참고하고 싶은 사이트가 있어도 다음과 같이 막연하게 요청하는 경우가 많았습니다. “이 사이트처럼 깔끔하고 전문적으…
5. [포토샵 대신 코드로 상세페이지를 만들어 봤습니다 — "상세페이지 디자인 시스템"](https://community.clauders.ai/media/post/%ED%8F%AC%ED%86%A0%EC%83%B5-%EB%8C%80%EC%8B%A0-%EC%BD%94%EB%93%9C%EB%A1%9C-%EC%83%81%EC%84%B8%ED%8E%98%EC%9D%B4%EC%A7%80%EB%A5%BC-%EB%A7%8C%EB%93%A4%EC%96%B4-%EB%B4%A4%EC%8A%B5%EB%8B%88%EB%8B%A4-%EC%83%81%EC%84%B8%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C-3d5571d8-0871-84c4-be42-d0af3d55397f) — Lumi, 2026-07-24
   소개 저는 온라인 비즈니스 컨설팅 일을 합니다. 쇼핑몰 운영하시는 분들을 많이 만나는데, 다들 공통으로 가장 어려워하는 게 상세페이지 기획과 제작입니다. 관행은 거의 같습니다 — 포토샵으로 만든 긴 이미지를 외주로 제작해서 올리는 방식이요. 코드로 만든다는 건 현장에서 대부분 시도하지 않습니다. "그건 개발자나 하는 일"이라고들 여기니까요. 그러다 보니…
6. [모핑 영상의 '움직임'을 그대로 베껴서, 회사 광고 소재를 만들어봤습니다](https://community.clauders.ai/media/post/%EB%AA%A8%ED%95%91-%EC%98%81%EC%83%81%EC%9D%98-%EC%9B%80%EC%A7%81%EC%9E%84-%EC%9D%84-%EA%B7%B8%EB%8C%80%EB%A1%9C-%EB%B2%A0%EA%BB%B4%EC%84%9C-%ED%9A%8C%EC%82%AC-%EA%B4%91%EA%B3%A0-%EC%86%8C%EC%9E%AC%EB%A5%BC-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B4%A4%EC%8A%B5%EB%8B%88%EB%8B%A4-368f0320-1b2c-89e2-8686-499a20b5c898) — Lumi, 2026-07-30
   ## 소개 클로드 디자인 23기로 함께하고 있습니다. ## 시도하고자 했던 것과 그 이유 유튜브에 PPT 모핑으로 슬라이드에 애니메이션을 주는 영상들이 있습니다. 연도 숫자가 슬롯머신처럼 촤르륵 돌아가고, 인물 카드가 스르륵 커지는 영상들이요. 이런 영상 7편의 조회수를 합치면 500만이 넘습니다. 사람들이 이런 움직임을 좋아한다는 뜻이죠. 그래서 해봤습…
7. [딸의 여름방학 수학 — AI 전문가 자문단 검증 + 게임형 학습 앱 17일 프로젝트](https://community.clauders.ai/media/post/%EB%94%B8%EC%9D%98-%EC%97%AC%EB%A6%84%EB%B0%A9%ED%95%99-%EC%88%98%ED%95%99-ai-%EC%A0%84%EB%AC%B8%EA%B0%80-%EC%9E%90%EB%AC%B8%EB%8B%A8-%EA%B2%80%EC%A6%9D-%EA%B2%8C%EC%9E%84%ED%98%95-%ED%95%99%EC%8A%B5-%EC%95%B1-17%EC%9D%BC-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-f1c8a1f4-9155-8cda-8558-fe2e9d290ac6) — 아메리카노, 2026-08-02
   소개 시도하고자 했던 것과 그 이유 중2 딸의 여름방학 기간동안 수학 자기주도학습이 출발점이었습니다. 아이는 "시작은 하는데 지속이 약한" 성향이라 계획표를 만들어줘도 며칠을 못 갑니다. 게다가 방학 사이에 영어캠프 3일, 가족 휴가 3일, 학원 3개(영어·논술·미술)가 있어서 실제로 공부할 수 있는 날이 생각보다 적었습니다. 그래서 세 가지를 시도했습니…
8. [딸의 여름방학 수학 2편 — 색이 아니라 UX를 벤치마킹하기 + 학습 앱 리디자인](https://community.clauders.ai/media/post/%EB%94%B8%EC%9D%98-%EC%97%AC%EB%A6%84%EB%B0%A9%ED%95%99-%EC%88%98%ED%95%99-2%ED%8E%B8-%EC%83%89%EC%9D%B4-%EC%95%84%EB%8B%88%EB%9D%BC-ux%EB%A5%BC-%EB%B2%A4%EC%B9%98%EB%A7%88%ED%82%B9%ED%95%98%EA%B8%B0-%ED%95%99%EC%8A%B5-%EC%95%B1-%EB%A6%AC%EB%94%94%EC%9E%90%EC%9D%B8-787d6de9-e64e-84c6-bfdc-70c349f67a27) — 아메리카노, 2026-08-10
   지난주에 중2 딸의 여름방학 수학 앱 "수학 원정대"를 발표했는데요 (v1 제작 → 듀오링고 역설계로 v2 리스킨), 두 가지 피드백을 받았습니다. 강사님 피드백: "색깔 토큰만 벤치마킹된 상태로, UX는 벤치마킹하지 않았다. 박스 배치·화면 구조도 고쳐볼 것. 원하는 UX는 앱 화면 모음 사이트에서 캡처해서 눈에 보이는 레퍼런스로 활용하면 좋을 듯."…