Claude 같은 AI 코딩 도구로 화면을 만들면 어딘가 기계가 찍어낸 듯 밋밋한 UI가 나오기 쉬운데요. 스위스 타이포그래피 기반 디자인 시스템 'Gautier UI'는 색·글꼴·여백·표·차트 규칙과 14개 점검 항목을 약 19KB짜리 마크다운 파일 하나에 담아, CLAUDE.md나 AGENTS.md에서 이 파일을 참조하게 하면 AI가 일관된 화면을 만들도록 잡아줘요. 강조색 하나·글꼴 두 종·회색 여섯 단계로 선택지를 좁히고, 외부 라이브러리 없이 브라우저에서 바로 미리보기가 되며 MIT 라이선스로 공개돼 있어요.
용어 풀이
- UI
- 사용자 인터페이스, 화면에서 사람이 보고 조작하는 부분
- CLAUDE.md·AGENTS.md
- AI 코딩 도구에게 프로젝트 규칙을 알려주는 지침 파일
- MIT 라이선스
- 자유롭게 쓰고 고칠 수 있게 공개하는 대표적인 오픈소스 규약
- KB
- 킬로바이트, 파일 크기 단위(1KB는 약 1,000자 분량)
- HTML
- 웹 페이지를 구성하는 문서 형식
운영자 인사이트
AI로 UI를 만들 때는 색·글꼴·여백·상태 규칙을 말로 그때그때 지시하기보다, 마크다운 한 파일로 고정해 두고 에이전트 지침 파일에서 참조하게 하면 결과의 일관성을 잡기 좋아요.
여러 관점으로 보기
- 저장소(대표) 디자인 규칙 마크다운과 미리보기 HTML이 담긴 원본 저장소예요. MIT 라이선스이고 2026-07-23 만들어졌어요. GitHub
- 저자 소개 페이지 만든 사람 제롬 고티에(Jérôme Gautier)가 설계 철학과 규칙을 정리해 소개하는 페이지예요. jeromegautier.info
- 규칙 원문 색·글꼴·여백·표·차트 규칙과 14개 점검 항목이 담긴 마크다운 본문으로, AI 에이전트가 참조하도록 만들어졌어요. GitHub