Claude로 만드는 디자인 시스템
감에 의존하던 웹 디자인을 재사용 가능한 규칙으로 만들고 싶은 분께 맞아요. 실제 사이트의 색·글꼴·여백을 추출하고 상세페이지, 모션 광고와 학습 앱에 적용해요.
공간: 이미지 / 음악 / 영상 · 8편
- designlang으로 웹사이트 디자인 언어를 추출하고, 교정해서 클로드 디자인 시스템으로 올리기 — 고양이집사 ·
사용 도구 Claude Code (Opus 4.8) — 전 과정 진행 designlang v12.21.0 — npx로 실행하는 디자인 언어 추출 CLI claude.ai/design — 최종 디자인 시스템 호스팅 1단계. 환경 확인 내 컴퓨터에 Node.js가 설치돼 있는지 확인해줘… - 우리 디자인 시스템 & designlang으로 실제 사이트 디자인 시스템 비교하기 — 하루 ·
1단계 — 자동 추출 (designlang) Node.js 환경에서 CLI 도구 하나로 사이트를 분석했습니다. 헤드리스 브라우저로 실제 페이지를 렌더링한 뒤, DOM 912개 요소의 getComputedStyle()을 통계 내서 색·폰트·여백·컴포넌트 패턴을 36개 포맷(마크다운, T… - 스마트스토어 상세페이지, "이미지 대신 텍스트"로 코딩하기 — 스마트에디터 ONE에서 안 깨지는 HTML 템플릿 만들기 — Lumi ·
소개 시도하고자 했던 것과 그 이유 농산물(정읍명품귀리 귀리쌀) 상세페이지를 Claude Code로 HTML 코딩해서 스마트스토어에 적용했습니다. 그런데 정작 스마트에디터 ONE으로 변환해 붙여넣자 곳곳이 깨졌습니다 — 원형 배지가 찌그러지고, 비율 그래픽이 통째로 사라지고, 둥근 모… - 클로드 디자인에서 디자인랭 체험하기 — 킥보드 ·
Claude와 designlang으로 디자인 분석 폴더를 만들어 본 실습 클로드 디자인 1주차 실습으로, 마음에 드는 웹사이트의 디자인을 분석해 색상, 폰트, 여백, 버튼, 카드 등의 디자인 규칙을 추출해 보았습니다. 평소 웹사이트를 만들 때 참고하고 싶은 사이트가 있어도 다음과 같이… - 포토샵 대신 코드로 상세페이지를 만들어 봤습니다 — "상세페이지 디자인 시스템" — Lumi ·
소개 저는 온라인 비즈니스 컨설팅 일을 합니다. 쇼핑몰 운영하시는 분들을 많이 만나는데, 다들 공통으로 가장 어려워하는 게 상세페이지 기획과 제작입니다. 관행은 거의 같습니다 — 포토샵으로 만든 긴 이미지를 외주로 제작해서 올리는 방식이요. 코드로 만든다는 건 현장에서 대부분 시도하지… - 모핑 영상의 '움직임'을 그대로 베껴서, 회사 광고 소재를 만들어봤습니다 — Lumi ·
## 소개 클로드 디자인 23기로 함께하고 있습니다. ## 시도하고자 했던 것과 그 이유 유튜브에 PPT 모핑으로 슬라이드에 애니메이션을 주는 영상들이 있습니다. 연도 숫자가 슬롯머신처럼 촤르륵 돌아가고, 인물 카드가 스르륵 커지는 영상들이요. 이런 영상 7편의 조회수를 합치면 500… - 딸의 여름방학 수학 — AI 전문가 자문단 검증 + 게임형 학습 앱 17일 프로젝트 — 아메리카노 ·
소개 시도하고자 했던 것과 그 이유 중2 딸의 여름방학 기간동안 수학 자기주도학습이 출발점이었습니다. 아이는 "시작은 하는데 지속이 약한" 성향이라 계획표를 만들어줘도 며칠을 못 갑니다. 게다가 방학 사이에 영어캠프 3일, 가족 휴가 3일, 학원 3개(영어·논술·미술)가 있어서 실제로… - 딸의 여름방학 수학 2편 — 색이 아니라 UX를 벤치마킹하기 + 학습 앱 리디자인 — 아메리카노 ·
지난주에 중2 딸의 여름방학 수학 앱 "수학 원정대"를 발표했는데요 (v1 제작 → 듀오링고 역설계로 v2 리스킨), 두 가지 피드백을 받았습니다. 강사님 피드백: "색깔 토큰만 벤치마킹된 상태로, UX는 벤치마킹하지 않았다. 박스 배치·화면 구조도 고쳐볼 것. 원하는 UX는 앱 화면…