비주얼 기준 문서

design.md와 image.md는 역할이 다릅니다.

• design.md — 색·폰트·여백 같은 화면 규칙
• image.md — 이미지에서 고정할 요소와 바꿔도 되는 요소

파일은 직접 채우지 않습니다.

• 기존 결과물과 참고 이미지를 먼저 보여주고, 한 번에 한 질문씩 인터뷰를 받습니다.
• “감성적”, “세련된” 같은 형용사는 그대로 두지 않고 HEX 값, 폰트 이름, px처럼 관찰 가능한 값으로 바꿉니다. 형용사는 사람마다 다르게 읽지만 값은 누가 읽어도 같습니다.

image.md에서는 요소를 두 갈래로 나눕니다.

• 매번 유지할 요소 — 피사체, 구도, 광원, 팔레트
• 바꿔도 되는 요소 — 장면, 소품

이 구분이 있어야 이미지를 여러 장 만들어도 같은 브랜드로 보입니다.

아래 요청문을 복사해 붙여넣고 design.md 인터뷰를 시작합니다.

다른 AI 도구에서도 같은 디자인 기준 사용하기

DESIGN.md는 색·글꼴·여백 같은 디자인 규칙과 그 규칙을 사용하는 이유를 적는 문서 파일입니다. Google은 2026년 4월 21일 Stitch의 DESIGN.md 작성 규격 초안을 공개했습니다. 공식 규격은 정확한 값을 적는 부분과 적용 방법을 설명하는 본문을 함께 사용합니다.

이 수업의 design.md는 같은 목적으로 쓰는 수업용 문서이며, Google 규격을 그대로 따르는 파일인지는 별도로 확인해야 합니다. 이미 쓰는 파일이 있다면 그 이름을 유지하고, 대소문자만 다른 파일을 추가로 만들지 않습니다.

기존 자료에서 기준 정리하기

브랜드 안내서나 기존 화면을 AI에 보여 주고 아래 요청문을 붙여넣습니다. 웹사이트를 읽을 수 없는 도구에서는 화면 이미지나 파일을 첨부합니다. 사진만 보고 정확한 글꼴이나 색을 확정하지 않도록 확인된 값과 미정인 항목을 나눕니다.

제가 제공한 브랜드 안내서, 기존 화면과 현재 폴더의 디자인 문서를 읽어 주세요. 이미 design.md 또는 DESIGN.md가 있다면 그 파일부터 확인해 주세요.

배경·본문·강조 색, 제목·본문 글꼴, 여백과 화면 폭을 정리하고 각 항목에 확인한 파일 또는 페이지를 적어 주세요. 각 색과 글꼴을 어디에 쓰는지도 설명해 주세요. 자료만으로 알 수 없는 값은 미정으로 남기고, 기존 기준과 충돌하는 항목은 제게 한 가지씩 질문해 주세요.

확인한 뒤 기존 디자인 문서에 추가할 내용을 보여 주세요. 파일이 없다면 design.md 초안을 작성해 주세요. 저장할 수 없는 도구라면 제가 내려받거나 복사해 저장할 수 있도록 문서 전문을 보여 주세요.

새 대화에서 읽었는지 확인하기

새 대화나 다른 AI 도구에서는 파일을 첨부하거나 파일이 있는 폴더를 연결하고, 아래 요청문으로 읽은 내용을 확인합니다. 파일을 저장해 둔 것만으로 모든 도구가 자동으로 읽거나 이후 대화까지 기억한다고 가정하지 않습니다.

첨부한 design.md 또는 현재 작업 폴더의 디자인 문서를 먼저 읽어 주세요. 실제로 읽은 파일 이름과 배경색, 본문 글꼴, 여백 기준을 요약하고 아직 미정인 항목도 알려 주세요. 파일이 보이지 않으면 추측하지 말고 필요한 파일을 요청해 주세요. 아직 화면이나 이미지는 만들지 마세요.

AI가 답한 값과 문서의 값이 일치하는지 대조합니다. 이후 결과물을 만들 때도 같은 문서를 함께 전달하고, 완성한 화면에서 색·글꼴·여백이 기준과 맞는지 확인합니다.

공식 설명

• Google Labs의 DESIGN.md 공개 안내
• Google의 DESIGN.md 규격과 예제

design.md를 바탕으로 image.md를 만들려고 해. 내 이미지 작업은 [만드는 이미지와 채널]이야. 매번 유지할 요소(피사체·구도·광원·팔레트)와 바꿔도 되는 요소(장면·소품)를 나눠서 물어보고, 반드시 피할 요소까지 정리해서 image.md로 만들어줘.

기존 결과물 이미지 하나를 보여줄게. design.md와 image.md 기준으로 검수해서 기준에 맞는 부분과 어긋난 부분을 나눠줘. 어긋난 부분은 기준을 고칠지 결과물을 고칠지 나에게 물어봐줘.