Design System Kit

Design System Kit

디자인 시스템과 화면 구조를 모아두고, **AI에게 넘길 프롬프트 · 규칙 파일 · CSS 토큰 · 실제 페이지**까지 만들어내는 도구입니다. 빌드 도구나 설치 없이, 브라우저에서 HTML 파일을 열면 바로 동작합니다.

**🔗 [바로 열어보기](https://yehsb123.github.io/design-system-kit/)**


담겨 있는 것

	수량	내용
디자인 시스템	16종	Toss · Ant Design · Material 3 · IBM Carbon · Apple HIG · Shopify Polaris · Vercel · GitLab · Airbnb · Slack 등
레이아웃 패턴	22종	Holy Grail · 대시보드 · 지그재그 · 벤토 · 메뉴판 4종 등
콘텐츠 구조	9종	뷰티 상세 · SaaS 랜딩 · 메뉴판 · 병원 · 포트폴리오 · 앱 소개 등
아이콘	48개	SVG 스프라이트 · 개별 파일 · React 컴포넌트 · CSS로 내보내기

색만 바뀌는 게 아닙니다

시스템마다 **폰트 · 모서리 · 그림자 · 아이콘 굵기 · 컴포넌트 모양**이 실제로 다릅니다.

Material 3 — 알약형 버튼, Roboto	IBM Carbon — 직각, IBM Plex Sans
Airbnb — 코랄, 둥근 모서리, Manrope	Editorial — 세리프(Playfair), 각진 형태

화면 4개

파일	역할
library.html	모음집 — 시스템·레이아웃·구조·규칙을 보관. 맨 위 조립기에서 프롬프트·CLAUDE.md·CSS·컴포넌트를 뽑습니다
builder.html	조립기 — 브랜드 색 하나로 50~950 램프를 자동 생성해 나만의 시스템을 만듭니다
generator.html	생성기 — 제품·병원 정보를 넣고 실제 동작하는 HTML 페이지를 만듭니다
guide.html	사용설명서 — 상황별 사용법과 자주 묻는 질문

모음집 — 여기서 대부분 끝납니다

콘텐츠 · 레이아웃 · 디자인 시스템을 고르면 **AI 프롬프트 / CLAUDE.md / CSS 토큰 / 컴포넌트 CSS / Tailwind**가 한자리에서 나옵니다. 드롭다운 항목에 마우스를 올리면 그 항목의 미리보기가 옆에 뜹니다.


시스템 상세에는 색 램프(50~950), 시맨틱 토큰, 컴포넌트, 에셋, 차트, 접근성까지 들어 있고 라이트/다크를 오갈 수 있습니다.


조립기 — 색 하나로 시스템 만들기

브랜드 색을 넣으면 11단계 램프가 자동 계산되고, 폰트·모서리·밀도를 바꾸면 오른쪽 미리보기가 즉시 반영됩니다. 내보내기에는 **대비(WCAG AA) 검사 결과**가 함께 들어갑니다.


생성기 — 실제 페이지까지

제품명·소개·참고 자료를 붙여넣고 콘텐츠·레이아웃·시스템을 고르면 동작하는 HTML이 만들어집니다. 데스크톱·태블릿·모바일로 바로 확인하고 파일로 저장할 수 있습니다.

![생성기](docs/screenshots/generator-bea