soqoseoga
AI가 읽는 디자인 시스템 가이드 design.md ... 더 보기soqoseogaAI가 읽는 디자인 시스템 가이드 design.md
이제 직접 쓰지 마세요.
이 프로세스로 우리 디자인 시스템을
AI가 잘 알아듣는 깔끔한 문서로
정리할 수 있어요
💡잠깐, design.md가 뭔데?
쉽게 말해 디자인 시스템 설명서예요.
컬러, 타이포, 간격, 컴포넌트 규칙을
AI도 사람도 읽을 수 있게 정리한 파일!
———————————————-
Design.md가 왜 필요할까?
→ AI에게 “우리 스타일대로 만들어줘”가
가능해지고
→ 새 팀원이 와도 문서 하나로 온보딩 끝
→ 디자인 일관성이 무너지지 않아요
한번 만들어두면 두고두고 써먹는
가이드라 생각하심 되어요.
———————————————-
✒️Design.md 만드는 법
아래 프로세스로 간단하게
Design.md초안을 작성해 보세요!
STEP 1. 피그마 파일 준비
컬러, 타이포, 컴포넌트가
정리된 fig 파일을 챙겨두세요.
(Figma 메뉴➡️ Save local copy
STEP 2. Claude Design에 넣기
claude.ai/design 접속
→ ‘디자인 시스템 생성’ 클릭
→ 준비한 fig 파일 업로드
STEP 3. 좋은 포맷 빌려오기
getdesign.md 접속
→ Apple의 design.md 복사
(검증된 포맷부터 시작하는 게 제일 빠릅니다)
STEP 4. 우리 버전으로 작성 요청
복사한 내용을 붙여넣고 이렇게 말하세요.
“이 포맷 참고해서
우리 디자인 시스템 design.md 작성해줘”
———————————————-
끝!
진짜 저장 안 해도 되니까
지금 바로 한번 써먹어보세요.
도움이 됐다면
@figma_tutor 팔로우하고
똑똑하게 일하는 사람 되어보세요 :)
#디자인시스템 #designsystem #designmd #vibecoding #claudecode