Make Your AI Design Guide
Claude Code · Codex · Gemini에게 "이 디자인으로 만들어줘"라고 시킬 때 필요한 건 스크린샷이 아니라 기계가 읽을 수 있는 명세입니다. 구조가 서로 다른 300개 웹 디자인 샘플에서 원하는 버튼·카드·내비를 골라 담으면, 디자인 토큰과 마크업·CSS·적용 규칙이 담긴 마크다운 한 장으로 내보냅니다.
AI 코딩 도구에게 디자인을 시키면 대개 무난하고 비슷한 결과가 나옵니다. 프롬프트에 "모던하게", "깔끔하게"라고 써도 AI가 참조할 구체적인 값이 없기 때문입니다. Design Lab은 그 빈자리를 채웁니다 — 실제로 렌더링되는 샘플에서 색·서체·간격·모서리·전환 시간을 토큰 단위로 추출해, AI가 그대로 적용할 수 있는 문서로 만들어 줍니다.
각 샘플은 레이아웃 구조 자체가 다릅니다. 톤만 바꾼 같은 템플릿이 아니라 신문 그리드, 가로 스크롤 패널, 터미널, 세로쓰기, 스플릿플랩 보드처럼 골격이 서로 다른 300가지입니다.
갤러리에서 마음에 드는 샘플을 찾습니다. 카테고리·태그·무드로 검색할 수 있고, 레이아웃과 스타일을 서로 합성해 미리 볼 수도 있습니다.
컴포넌트 브라우저에서 버튼·카드·내비·테이블을 종류별로 비교하고 필요한 것만 수집함에 담습니다. 1번 샘플의 버튼과 10번 샘플의 카드를 섞어도 됩니다.
스튜디오에서 design-system.md를 생성합니다. 토큰 표, 컴포넌트별 마크업과 CSS, 적용 순서, 금지 사항이 들어갑니다. 그대로 AI에게 붙여넣으면 됩니다.
내보낸 마크다운은 사람이 읽는 소개문이 아니라 실행 지시문 형태입니다. 적용 순서가 번호로 매겨져 있고, 컴포넌트마다 필요한 토큰만 추려 표로 붙고, "색을 하드코딩하지 말 것" 같은 제약이 명시됩니다. Claude Code라면 프로젝트에 CLAUDE.md로 두거나 대화에 붙여넣으면 되고, Codex·Gemini도 동일하게 컨텍스트로 넘기면 됩니다.
재현이 실제로 되는지는 추측하지 않고 측정했습니다. 원본 페이지에서 렌더링된 컴포넌트와, 내보낸 명세만으로 복원한 결과의 계산된 스타일을 24개 속성에 걸쳐 대조해 평균 97% 일치합니다.
네. 회원가입도 없습니다. 수집함은 브라우저에만 저장되고 서버로 전송되지 않습니다.
샘플은 전부 이 프로젝트에서 직접 만든 것이고 외부 사이트를 복제하지 않았습니다. 다만 실제 브랜드 UI를 의도적으로 재현한 레트로 샘플이 일부 있으니, 상업적 사용 시에는 해당 샘플의 명칭과 외형을 확인하고 쓰세요.
아니요. 모든 샘플은 외부 요청 없이 HTML과 CSS만으로 만들어져 있고, 브라우저에서 바로 추출합니다. 디자인 툴이나 플러그인이 필요 없습니다.
가능합니다. 팔레트 통일 옵션을 켜면 색 계열 토큰만 기준 샘플 값으로 치환되고 간격·모서리·이징은 원본이 유지됩니다. 클래스명이 충돌하면 @scope로 격리하는 방법이 문서에 함께 안내됩니다.
300개 샘플의 디자인 가이드를 한국어로 전문 번역해 두었습니다. 토큰명·hex·단위 같은 기계가 읽는 값은 원문을 유지합니다.