yehsb123

Design System Kit — AI skill for Claude Code

AI community

디자인 시스템 16종·레이아웃 22종·콘텐츠 구조 9종을 보관하고 AI 프롬프트/CLAUDE.md/CSS 토큰/실제 페이지를 만들어내는 정적 도구.

How to install Design System Kit

This entry records only its repository, not the path inside it, so there is no exact command to give. Open yehsb123/design-system-kit and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Design System Kit does

디자인 시스템 16종·레이아웃 22종·콘텐츠 구조 9종을 보관하고 AI 프롬프트/CLAUDE.md/CSS 토큰/실제 페이지를 만들어내는 정적 도구.

Alternatives in AI

Artifacts Builder — Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web tech 97.5k ★
UI UX Pro Max Skill — An AI SKILL that provide design intelligence for building professional UI/UX multiple platforms 45.8k ★
Impeccable — The design language that makes your AI harness better at design 13.9k ★

README

Design System Kit

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

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

![시작 화면](docs/screenshots/index.png)

담겨 있는 것

	수량	내용
디자인 시스템	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`	사용설명서 — 상황별 사용법과 자주 묻는 질문